:root {
  --sidebar: #111b21;
  --chat: #0b141a;
  --painel: #202c33;
  --painel-alto: #2a3942;
  --linha: rgba(134, 150, 160, .15);
  --saida: #005c4b;
  --entrada: #202c33;
  --verde: #00a884;
  --txt: #e9edef;
  --txt-dim: #8696a0;
  --txt-fraco: #667781;
  --forense: #e8b04b;
  --sombra: 0 1px 1px rgba(11, 20, 26, .3);
  --chat-fonte: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --arq-fonte: "Archivo", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #0a1014;
  color: var(--txt);
  font-family: var(--chat-fonte);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
svg { width: 22px; height: 22px; fill: currentColor; }
a { color: var(--verde); }

/* ── esqueleto ──────────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: minmax(300px, 30%) 1fr;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.app.tem-ficha { grid-template-columns: minmax(300px, 30%) 1fr minmax(300px, 26%); }

/* ── lista de conversas ─────────────────────────────────────────────── */
.lista {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--linha);
}
.lista__topo { padding: 8px 12px 8px; }
.eu {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 59px;
  padding: 0 16px;
  background: var(--painel);
  flex: none;
}
.eu__acoes { display: flex; align-items: center; gap: 10px; margin-left: auto; min-width: 0; }
.eu__sub {
  font-family: var(--arq-fonte);
  font-size: 11.5px;
  color: var(--txt-fraco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.eu__btn { color: var(--txt-dim); padding: 7px; border-radius: 50%; flex: none; }
.eu__btn:hover { background: rgba(134, 150, 160, .15); color: var(--txt); }
.eu__btn svg { fill: currentColor; }
.av { border-radius: 50%; object-fit: cover; background: var(--painel-alto); flex: none; }
.av--eu { box-shadow: 0 0 0 2px rgba(0, 168, 132, .5); }

.busca { position: relative; display: flex; align-items: center; }
.busca__lupa {
  position: absolute; left: 12px; width: 17px; height: 17px;
  fill: var(--txt-fraco); pointer-events: none;
}
.busca input {
  width: 100%;
  padding: 9px 34px 9px 38px;
  border: 0;
  border-radius: 8px;
  background: var(--painel);
  font-size: 14px;
  outline: none;
}
.busca input::placeholder { color: var(--txt-fraco); }
.busca input:focus-visible { box-shadow: 0 0 0 2px var(--verde); }
.busca__limpar { position: absolute; right: 8px; color: var(--txt-dim); padding: 4px; }

.ordem { display: flex; gap: 6px; margin-top: 10px; }
.ordem button {
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--painel);
  color: var(--txt-dim);
  font-family: var(--arq-fonte);
  font-size: 12.5px;
  font-weight: 500;
}
.ordem button.is-on { background: rgba(0, 168, 132, .22); color: #7ae3c3; }

.lista__rolagem { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

.item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--linha);
}
.item:hover { background: #182229; }
.item.is-on { background: var(--painel-alto); }
.item__txt { flex: 1; min-width: 0; }
.item__l1 { display: flex; align-items: baseline; gap: 8px; }
.item__nome {
  flex: 1; min-width: 0;
  font-size: 15.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item__data { font-size: 11.5px; color: var(--txt-fraco); font-variant-numeric: tabular-nums; white-space: nowrap; }
.item__l2 { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.item__prev {
  flex: 1; min-width: 0;
  font-size: 13.5px; color: var(--txt-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item__prev .eu-tag { color: var(--txt-fraco); }
.item__n {
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(134, 150, 160, .18);
  color: var(--txt-dim);
  font-family: var(--mono);
  font-size: 10.5px;
  white-space: nowrap;
}
.item__n.is-grande { background: rgba(0, 168, 132, .2); color: #7ae3c3; }

.lista__nada { padding: 28px 18px; color: var(--txt-fraco); font-size: 14px; text-align: center; }

/* ── conversa ───────────────────────────────────────────────────────── */
.conversa { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--chat); position: relative; }
.conversa::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("assets/fundo.svg");
  background-size: 400px 400px;
  background-repeat: repeat;
  pointer-events: none;
}

/* sem conversa aberta o painel fica liso, como no app; os doodles só
   aparecem atrás de uma conversa */
.conversa:has(#vazio:not([hidden])) { background: #222e35; }
.conversa:has(#vazio:not([hidden]))::before { display: none; }
.conversa:has(#vazio:not([hidden]))::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--verde);
}

.vazio {
  margin: auto;
  max-width: 50ch;
  padding: 40px 32px;
  text-align: center;
  position: relative;
}
.vazio__marca { color: var(--verde); margin-bottom: 26px; }
.vazio__marca svg { width: 104px; height: 104px; }
.vazio h2 {
  font-family: var(--arq-fonte);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.3px;
  margin: 0 0 10px;
}
.vazio__num {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--forense);
  margin: 0 0 18px !important;
}
.vazio p { color: var(--txt-dim); line-height: 1.7; margin: 0 0 12px; font-size: 14.5px; }
.vazio__pe {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 34px !important;
  padding-top: 20px;
  border-top: 1px solid var(--linha);
  color: var(--txt-fraco) !important;
  font-size: 13px !important;
}
.vazio__pe svg { width: 15px; height: 15px; fill: none; }
.vazio__pe button {
  color: var(--verde);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.conversa__viva { display: flex; flex-direction: column; min-height: 0; height: 100%; }

.cab {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px;
  background: var(--painel);
  border-bottom: 1px solid var(--linha);
  z-index: 3;
}
.cab__voltar { display: none; color: var(--txt-dim); padding: 4px; }
.cab__id { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-align: left; }
.cab__txt { display: flex; flex-direction: column; min-width: 0; }
.cab__nome { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab__sub {
  font-family: var(--arq-fonte);
  font-size: 12px; color: var(--txt-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cab__acoes { display: flex; align-items: center; gap: 10px; }
.cab__btn { color: var(--txt-dim); padding: 6px; border-radius: 50%; }
.cab__btn:hover { background: rgba(134, 150, 160, .15); }
.mes { display: flex; align-items: center; gap: 7px; font-family: var(--arq-fonte); font-size: 12px; color: var(--txt-dim); }
.mes select {
  padding: 5px 8px;
  border: 1px solid var(--linha);
  border-radius: 5px;
  background: var(--painel-alto);
  font-family: var(--mono);
  font-size: 12px;
}

.busca-chat {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--painel-alto);
  border-bottom: 1px solid var(--linha);
  z-index: 3;
}
.busca-chat input {
  flex: 1;
  padding: 7px 12px;
  border: 0; border-radius: 6px;
  background: var(--sidebar);
  outline: none;
  font-size: 14px;
}
.busca-chat__n { font-family: var(--mono); font-size: 12px; color: var(--txt-dim); white-space: nowrap; }
.busca-chat button { color: var(--txt-dim); padding: 5px 9px; border-radius: 4px; }
.busca-chat button:hover { background: rgba(134, 150, 160, .18); }

.fluxo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 6vw 22px;
  position: relative;
  z-index: 1;
  scroll-behavior: auto;
}
.fluxo:focus-visible { outline: none; }
.fluxo__topo { display: flex; justify-content: center; padding: 6px 0 14px; }
.fluxo__topo button {
  padding: 7px 16px;
  border-radius: 20px;
  background: var(--painel);
  color: var(--txt-dim);
  font-family: var(--arq-fonte);
  font-size: 12.5px;
  box-shadow: var(--sombra);
}
.fluxo__topo button:hover { color: var(--txt); }
.fluxo__topo .fim { color: var(--txt-fraco); font-family: var(--arq-fonte); font-size: 12px; padding: 7px 0; }

.dia {
  display: flex;
  justify-content: center;
  margin: 16px 0 12px;
  position: sticky;
  top: 4px;
  z-index: 2;
  pointer-events: none;
}
.dia span {
  padding: 5px 13px;
  border-radius: 8px;
  background: var(--painel);
  box-shadow: var(--sombra);
  font-family: var(--arq-fonte);
  font-size: 12px;
  font-weight: 500;
  color: var(--txt-dim);
  text-transform: lowercase;
}

.sis { display: flex; justify-content: center; margin: 10px 0; }
.sis span {
  max-width: 72ch;
  padding: 7px 14px;
  border-radius: 8px;
  background: rgba(32, 44, 51, .85);
  color: #ffd279;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

.msg { display: flex; margin: 2px 0; }
.msg--eu { justify-content: flex-end; }
.bolha {
  max-width: min(68ch, 78%);
  padding: 6px 9px 7px 10px;
  border-radius: 8px;
  background: var(--entrada);
  box-shadow: var(--sombra);
  position: relative;
}
.msg--eu .bolha { background: var(--saida); }
.msg--ini .bolha { border-top-left-radius: 0; }
.msg--eu.msg--ini .bolha { border-top-left-radius: 8px; border-top-right-radius: 0; }
.bolha__quem {
  display: block;
  margin-bottom: 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: #53bdeb;
}
.bolha__txt {
  margin: 0;
  font-size: 14.6px;
  line-height: 1.42;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bolha__pe {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  margin-top: -2px;
  float: right;
  padding: 4px 0 0 10px;
  font-size: 11px;
  color: rgba(233, 237, 239, .55);
  font-variant-numeric: tabular-nums;
}
.bolha__editada { font-style: italic; font-size: 10.5px; }
.bolha--apagada .bolha__txt { color: var(--txt-dim); font-style: italic; }
.bolha--apagada .bolha__txt::before { content: "🚫 "; font-style: normal; }

.midia {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  margin: 1px 0 3px;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(11, 20, 26, .38);
}
.midia__ico { font-size: 19px; line-height: 1; }
.midia__txt { min-width: 0; }
.midia__rot { font-family: var(--arq-fonte); font-size: 13px; font-weight: 600; }
.midia__sub {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: rgba(233, 237, 239, .5);
  overflow-wrap: anywhere;
}

.chamada {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(11, 20, 26, .3);
  font-size: 13.5px;
}

/* marcação forense: a única cor fora do vocabulário do app */
.proc {
  display: block;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(232, 176, 75, .18);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3px;
  color: rgba(232, 176, 75, .72);
  opacity: 0;
  transition: opacity .12s;
}
.bolha:hover .proc, .bolha:focus-within .proc, .msg.is-alvo .proc { opacity: 1; }
@media (hover: none) { .proc { opacity: .62; } }
.proc a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(232, 176, 75, .5); }
.proc a:hover { color: var(--forense); }

.msg.is-alvo .bolha {
  box-shadow: 0 0 0 2px var(--forense), var(--sombra);
}
mark { background: rgba(232, 176, 75, .35); color: inherit; border-radius: 2px; padding: 0 1px; }
mark.is-atual { background: var(--forense); color: #14181a; }

/* ── ficha do contato ───────────────────────────────────────────────── */
.ficha {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--sidebar);
  border-left: 1px solid var(--linha);
}
.ficha__cab {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 20px;
  background: var(--painel);
  font-family: var(--arq-fonte);
  font-size: 15px;
  font-weight: 600;
}
.ficha__cab button { color: var(--txt-dim); }
.ficha__corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

.ficha__cartao { padding: 26px 20px 20px; text-align: center; border-bottom: 9px solid #0a1014; }
.ficha__foto { width: 168px; height: 168px; border-radius: 50%; object-fit: cover; background: var(--painel-alto); }
.ficha__nome { margin: 16px 0 4px; font-size: 19px; font-weight: 500; }
.ficha__tel { font-family: var(--mono); font-size: 13.5px; color: var(--txt-dim); }
.ficha__nota {
  margin: 18px auto 0;
  max-width: 40ch;
  padding-top: 13px;
  border-top: 1px solid rgba(232, 176, 75, .2);
}
.ficha__nota b {
  display: block;
  margin-bottom: 5px;
  font-family: var(--arq-fonte);
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(232, 176, 75, .85);
}
.ficha__nota span { color: var(--txt-dim); font-size: 14px; line-height: 1.5; }

.ficha__bloco { padding: 16px 20px; border-bottom: 9px solid #0a1014; }
.ficha__bloco h3 {
  margin: 0 0 12px;
  font-family: var(--arq-fonte);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--verde);
}
.ficha__bloco h4 {
  margin: 16px 0 6px;
  font-family: var(--arq-fonte);
  font-size: 13.5px;
  font-weight: 600;
}
.ficha__bloco p { margin: 0 0 10px; font-size: 13.8px; line-height: 1.62; color: #cfd8dc; }
.ficha__bloco p:last-child { margin-bottom: 0; }

.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linha); border-radius: 6px; overflow: hidden; }
.numeros div { padding: 11px 13px; background: var(--sidebar); }
.numeros dt { font-family: var(--arq-fonte); font-size: 11px; color: var(--txt-fraco); }
.numeros dd { margin: 3px 0 0; font-family: var(--mono); font-size: 14px; }

.origem { border-left: 2px solid var(--forense); padding-left: 13px; }
.origem__rot { font-family: var(--arq-fonte); font-size: 13.5px; font-weight: 600; color: var(--forense); }
.origem dl { margin: 11px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 12.5px; }
.origem dt { color: var(--txt-fraco); font-family: var(--arq-fonte); }
.origem dd { margin: 0; font-family: var(--mono); font-size: 11.5px; overflow-wrap: anywhere; }
.origem__como { margin-top: 11px; font-size: 12.5px; line-height: 1.55; color: var(--txt-dim); }

/* ── resultados de busca global ─────────────────────────────────────── */
.resultados {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: #0a1014;
}
.resultados__cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--linha);
  font-family: var(--arq-fonte);
  font-size: 14px;
}
.resultados__cab button { color: var(--txt-dim); font-family: var(--arq-fonte); font-size: 13px; }
.resultados__lista { flex: 1; overflow-y: auto; padding: 6px 0 40px; }
.res-grupo {
  padding: 13px 20px 6px;
  font-family: var(--arq-fonte);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--verde);
  position: sticky;
  top: 0;
  background: #0a1014;
}
.res {
  display: block; width: 100%;
  padding: 9px 20px;
  text-align: left;
  border-bottom: 1px solid var(--linha);
}
.res:hover { background: #182229; }
.res__meta { font-family: var(--mono); font-size: 10.5px; color: var(--txt-fraco); }
.res__txt { margin-top: 3px; font-size: 14px; line-height: 1.45; color: #cfd8dc; }

/* ── diálogo ────────────────────────────────────────────────────────── */
.sobre {
  max-width: 62ch;
  margin: auto;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--sidebar);
  color: var(--txt);
}
.sobre::backdrop { background: rgba(4, 8, 10, .8); }
.sobre article { padding: 28px 30px 24px; }
.sobre h2 { margin: 0 0 16px; font-family: var(--arq-fonte); font-size: 21px; }
.sobre h3 { margin: 22px 0 8px; font-family: var(--arq-fonte); font-size: 13px; color: var(--forense); }
.sobre p, .sobre li { font-size: 14px; line-height: 1.66; color: #cfd8dc; margin: 0 0 11px; }
.sobre ul { margin: 0 0 11px; padding-left: 19px; }
.sobre code { font-family: var(--mono); font-size: 12px; color: var(--txt-dim); }
.sobre button {
  margin-top: 14px;
  padding: 9px 22px;
  border-radius: 6px;
  background: var(--verde);
  color: #06130f;
  font-family: var(--arq-fonte);
  font-weight: 600;
}

/* ── responsivo ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .app, .app.tem-ficha { grid-template-columns: 1fr; }
  .lista { border-right: 0; }
  .app[data-tela="conversa"] .lista { display: none; }
  .app[data-tela="lista"] .conversa { display: none; }
  .cab__voltar { display: block; }
  .fluxo { padding: 10px 12px 18px; }
  .bolha { max-width: 86%; }
  .ficha {
    position: fixed;
    inset: 0;
    z-index: 30;
    border-left: 0;
  }
  .vazio { padding: 30px 22px; }
  .vazio h2 { font-size: 23px; }
  .vazio__marca svg { width: 76px; height: 76px; }
  .eu { height: 55px; padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

:focus-visible { outline: 2px solid var(--forense); outline-offset: 2px; }