/* meuPlano Conversa — o mesmo tema escuro do sistema (#0B0E14 + âmbar), para quem passa o dia
   entre as duas telas não sentir que trocou de empresa. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --fundo: #0B0E14;
  --painel: #0F141B;
  --borda: #1E293B;
  --texto: #E2E8F0;
  --fraco: #64748B;
  --ambar: #F59E0B;
  --violeta: #A78BFA;
  --erro: #F87171;
}

body {
  background: var(--fundo);
  color: var(--texto);
  font: 13.5px/1.5 "Segoe UI", system-ui, sans-serif;
  height: 100vh;
  overflow: hidden;
  user-select: none;
}

.oculto { display: none !important; }

/* ------------------------------------------------------------------ entrar */
.login { display: flex; align-items: center; justify-content: center; height: 100vh; }
.loginCaixa {
  width: 340px; padding: 26px; border: 1px solid var(--borda); border-radius: 16px;
  background: var(--painel);
}
.loginCaixa h1 { font-size: 20px; font-weight: 400; letter-spacing: -0.3px; }
.loginCaixa h1 b { color: var(--ambar); }
.loginCaixa .sub { color: var(--fraco); font-size: 11.5px; margin: 4px 0 18px; }
.loginCaixa label { display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--fraco); font-weight: 700; margin-bottom: 10px; }
input, textarea {
  width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--borda);
  border-radius: 9px; background: var(--fundo); color: var(--texto);
  font: inherit; outline: none; user-select: text;
}
input:focus, textarea:focus { border-color: var(--ambar); }
.avancado { margin: 6px 0 12px; }
.avancado summary { cursor: pointer; color: var(--fraco); font-size: 11px; }
.avancado small { color: var(--fraco); font-size: 10px; }
.primario {
  width: 100%; padding: 9px; border: 0; border-radius: 9px; background: var(--ambar);
  color: #0B0E14; font-weight: 800; cursor: pointer;
}
.primario:disabled { opacity: .45; cursor: default; }
.primario.pequeno { width: auto; padding: 7px 14px; }
.erro { color: var(--erro); font-size: 11.5px; min-height: 16px; margin: 4px 0; }
.rodape { color: var(--fraco); font-size: 10.5px; margin-top: 12px; text-align: center; }

/* ------------------------------------------------------------------ layout */
main { display: flex; height: 100vh; }

.lateral {
  width: 262px; flex-shrink: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--borda); background: var(--painel);
}
.lateralTopo {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 12px 12px 8px; border-bottom: 1px solid var(--borda);
}
.eu { font-weight: 800; font-size: 13px; }
.estado { color: var(--fraco); font-size: 10.5px; }
.estado.ok { color: #34D399; }
.estado.caiu { color: var(--erro); }
.linkFraco { background: none; border: 0; color: var(--fraco); cursor: pointer; font-size: 11px; }
.linkFraco:hover { color: var(--texto); }
.buscaCanais { padding: 8px 10px; }
.buscaCanais input { margin: 0; font-size: 12px; padding: 6px 8px; }

.canais { flex: 1; overflow-y: auto; padding: 4px 6px 10px; }
.canalItem {
  width: 100%; text-align: left; background: none; border: 0; color: var(--texto);
  padding: 7px 9px; border-radius: 9px; cursor: pointer; display: flex; gap: 8px;
  align-items: center;
}
.canalItem:hover { background: #16202E; }
.canalItem.ativo { background: #1B2637; }
.canalItem .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canalItem .previa { display: block; color: var(--fraco); font-size: 10.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.naoLidas {
  background: var(--erro); color: #fff; border-radius: 999px; padding: 0 6px;
  font-size: 10px; font-weight: 800; min-width: 18px; text-align: center;
}
.lateralRodape {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-top: 1px solid var(--borda);
}
.versao { color: #334155; font-size: 10px; }

/* ------------------------------------------------------------------ conversa */
.conversa { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.conversaTopo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--borda);
}
.conversaTopo h2 { font-size: 15px; font-weight: 800; }
.topico { color: var(--fraco); font-size: 11px; }
.chipAlvo {
  border: 1px solid rgba(167, 139, 250, .4); background: rgba(167, 139, 250, .1);
  color: var(--violeta); border-radius: 7px; padding: 3px 8px; font-size: 11px;
  font-weight: 700; text-decoration: none;
}

.mensagens { flex: 1; overflow-y: auto; padding: 14px 16px; }
.msg { display: flex; gap: 9px; padding: 5px 0; }
.msg .inicial {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: #1E293B;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
}
.msg .corpo { min-width: 0; flex: 1; }
.msg .autor { font-size: 12px; font-weight: 800; }
.msg .hora { color: var(--fraco); font-size: 10px; margin-left: 6px; font-weight: 400; }
.msg .texto { white-space: pre-wrap; word-break: break-word; user-select: text; }
.msg.minha .autor { color: var(--ambar); }
.vazio { color: #475569; font-style: italic; text-align: center; margin-top: 30px; font-size: 12px; }

.anexos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.anexos img {
  max-height: 210px; max-width: 300px; border-radius: 9px; border: 1px solid var(--borda);
  cursor: zoom-in; object-fit: cover;
}
.arquivo {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--borda);
  border-radius: 9px; padding: 6px 9px; background: var(--fundo); color: var(--texto);
  text-decoration: none; font-size: 12px;
}
.arquivo:hover { border-color: #0EA5E9; }
.arquivo .tam { color: var(--fraco); font-size: 10px; }

.refs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.refChip {
  border: 1px solid rgba(167, 139, 250, .4); background: rgba(167, 139, 250, .1);
  color: var(--violeta); border-radius: 6px; padding: 1px 6px; font-size: 10.5px;
  font-weight: 700; cursor: pointer; text-decoration: none;
}
.refChip b { opacity: .7; text-transform: uppercase; margin-right: 4px; }

/* ------------------------------------------------------------------ composer */
.composer { border-top: 1px solid var(--borda); padding: 10px 14px 12px; }
.linhaComposer {
  display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--borda);
  border-radius: 12px; background: var(--painel); padding: 7px 10px;
}
.linhaComposer.arrastando { border-color: var(--ambar); background: rgba(245, 158, 11, .05); }
.linhaComposer textarea {
  flex: 1; border: 0; background: none; resize: none; max-height: 120px; margin: 0; padding: 0;
}
.iconeBtn { background: none; border: 0; color: var(--fraco); cursor: pointer; font-size: 15px; }
.iconeBtn:hover { color: var(--ambar); }
.iconeBtn.ligado { color: var(--violeta); }
.dica { color: #475569; font-size: 10px; margin-top: 5px; }

.pendentes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pendente {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(14, 165, 233, .4);
  background: rgba(14, 165, 233, .1); color: #7DD3FC; border-radius: 7px; padding: 2px 6px;
  font-size: 10.5px;
}
.pendente img { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; }
.pendente button { background: none; border: 0; color: inherit; cursor: pointer; }

.citarCaixa {
  border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo);
  padding: 8px; margin-bottom: 7px;
}
.citarLista { max-height: 190px; overflow-y: auto; margin-top: 5px; }
.citarItem {
  display: flex; gap: 8px; width: 100%; text-align: left; background: none; border: 0;
  color: var(--texto); padding: 5px 7px; border-radius: 7px; cursor: pointer; font: inherit;
}
.citarItem:hover { background: #16202E; }
.citarItem .tipo {
  width: 84px; flex-shrink: 0; color: var(--violeta); font-size: 9.5px; font-weight: 800;
  text-transform: uppercase; padding-top: 2px;
}
.citarItem .rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lightbox {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .92); display: flex;
  align-items: center; justify-content: center; padding: 28px; z-index: 100; cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; }