@import url('casca.css');
/* =======================================================
   OLYMPUS · MANDA LEAD — Identidade Visual
   Paleta: preto + escala silver (8 tons) + ouro champagne
   Tipografia: Cinzel (brand) + Inter (UI)
   ======================================================= */

:root {
  /* Backgrounds — escala de pretos com nuance */
  --bg-0:        #000000;   /* puro */
  --bg-1:        #0a0a0c;   /* off-black */
  --bg-2:        #131317;   /* graphite */
  --bg-3:        #18181d;   /* card surface */
  --bg-4:        #1f1f25;   /* elevated / hover */
  --bg-5:        #2a2a31;   /* active / pressed */

  /* Silver — escala de prata metálica (do logo) */
  --silver-50:   #fafafa;
  --silver-100:  #ececef;
  --silver-200:  #c0c0c5;
  --silver-300:  #9a9aa1;
  --silver-400:  #6c6c74;
  --silver-500:  #4a4a52;
  --silver-600:  #2e2e35;

  /* Acentos premium */
  --gold:        #c9a84c;   /* champagne gold */
  --gold-soft:   #b89236;

  /* Estados semânticos */
  --ok:          #2ec27e;
  --warn:        #f5b342;
  --err:         #ef4444;
  --info:        #6aa9ff;

  /* Linhas e divisores (com tinta prata translúcida) */
  --line:        rgba(192, 192, 200, 0.10);
  --line-soft:   rgba(192, 192, 200, 0.06);
  --line-strong: rgba(192, 192, 200, 0.20);

  /* Gradients premium */
  --grad-silver:        linear-gradient(180deg, #fafafa 0%, #e6e6e9 35%, #b8b8be 100%);
  --grad-silver-active: linear-gradient(180deg, #ffffff 0%, #d8d8dc 50%, #a0a0a8 100%);
  --grad-card:          linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 60%);
  --grad-bg-radial:     radial-gradient(1100px 600px at 50% -10%, rgba(192,192,200,.06), transparent 70%);

  /* Sombras multi-layer (depth realista) */
  --shadow-sm:    0 1px 2px rgba(0,0,0,.5);
  --shadow-md:    0 4px 12px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.5);
  --shadow-lg:    0 12px 32px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.5);
  --shadow-xl:    0 24px 56px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.4);
  --shadow-glow:  0 0 24px rgba(192,192,200,.10);
  --shadow-card:  0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.4);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.05);

  /* Geometria */
  --radius:       10px;
  --radius-sm:    6px;
  --radius-lg:    14px;
  --radius-pill:  999px;

  /* Tipografia */
  --font-brand:   'Cinzel', 'Times New Roman', serif;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, "SF Mono", monospace;

  /* Transitions */
  --t-fast:   120ms cubic-bezier(.4, 0, .2, 1);
  --t-base:   200ms cubic-bezier(.4, 0, .2, 1);
  --t-slow:   320ms cubic-bezier(.4, 0, .2, 1);
}
/* ==========================================================
   OLYMPUS ATENDIMENTO - camada de componentes
   Preto + prata + ouro champagne. Shell de coluna unica a
   esquerda, no formato de central de atendimento.
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg-1);
  background-image: var(--grad-bg-radial);
  background-attachment: fixed;
  color: var(--silver-50);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(201,168,76,.28); }

/* rolagem discreta, no tom da marca */
* { scrollbar-width: thin; scrollbar-color: var(--silver-600) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--silver-600); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--silver-500); background-clip: content-box; }

/* ---------- cabecalho da pagina ---------- */

.topo {
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(19,19,23,.72);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  position: sticky; top: 0; z-index: 20;
}
.topo h1 {
  margin: 0;
  font-family: var(--font-brand);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--grad-silver);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.topo .sub { color: var(--silver-300); font-size: 12px; }

/* a navegacao de texto virou a coluna lateral */
.topo .nav { display: none; }

.usuario { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--silver-100); }
.usuario .papel {
  font-size: 10px; color: var(--bg-1); background: var(--grad-silver);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
  padding: 2px 8px; border-radius: var(--radius-pill);
}

.wrap { max-width: 1180px; width: 100%; margin: 0 auto; padding: 22px 24px 64px; }

/* ---------- superficies ---------- */

.grupo, .form, .cartao, .painel, .caixa-conteudo {
  background: var(--bg-3);
  background-image: var(--grad-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.grupo { margin-bottom: 16px; overflow: hidden; }
.grupo h2, .painel .cab {
  margin: 0;
  padding: 13px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--silver-100);
  background: linear-gradient(180deg, var(--bg-4), var(--bg-3));
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.lista { padding: 8px 10px; }
.vazio { color: var(--silver-400); padding: 14px 10px; font-size: 13px; }
.dica { font-size: 12px; color: var(--silver-300); margin-top: 10px; line-height: 1.6; }
/* PATCH_EM_ATENDIMENTO_FILTRO_V1 - resumo por atendente, abre com um clique */
.resumo-at { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 12px 6px; }
.pil-at { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-4); color: var(--silver-100); font: inherit; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; transition: border-color 150ms ease, background 150ms ease; }
.pil-at:hover { border-color: var(--gold); background: var(--bg-5); }
.pil-at:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pil-at span { font-weight: 700; color: var(--gold); letter-spacing: 0; }
#flt-at { min-width: 180px; }

.chip {
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--bg-5); color: var(--silver-200);
  border: 1px solid var(--line);
}
.chip.k { background: rgba(46,194,126,.12); color: #7ee0ae; border-color: rgba(46,194,126,.3); }
.chip.x { background: rgba(201,168,76,.12); color: var(--gold); border-color: rgba(201,168,76,.32); }

.mini {
  font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); color: var(--silver-200); background: transparent;
}
.mini.lq { border-color: rgba(46,194,126,.4); color: #7ee0ae; }
.mini.ds { border-color: rgba(239,68,68,.4); color: #ff9a9a; }
.mini.ra, .mini.sem { border-color: rgba(201,168,76,.4); color: var(--gold); }

/* ---------- botoes ---------- */

button, .botao {
  font: inherit; font-size: 13px; font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, var(--bg-4), var(--bg-3));
  color: var(--silver-100);
  padding: 8px 14px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
button:hover, .botao:hover { background: linear-gradient(180deg, var(--bg-5), var(--bg-4)); color: var(--silver-50); }
button:active { transform: translateY(1px); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
button[disabled] { opacity: .45; cursor: not-allowed; }
button[disabled]:hover { background: linear-gradient(180deg, var(--bg-4), var(--bg-3)); }

button.pri {
  background: var(--grad-silver);
  border-color: var(--silver-200);
  color: var(--bg-0);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
button.pri:hover { background: var(--grad-silver-active); color: var(--bg-0); }

button.min { padding: 5px 10px; font-size: 12px; }
button.perigo { border-color: rgba(239,68,68,.45); color: #ff9a9a; }
button.perigo:hover { background: rgba(239,68,68,.12); color: #ffbdbd; }

/* ---------- formularios ---------- */

.linha { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.campo { display: flex; flex-direction: column; gap: 6px; }
label {
  font-size: 11px; color: var(--silver-300);
  text-transform: uppercase; letter-spacing: .07em; font-weight: 500;
}

input:not([type]), input[type=text], input[type=password], input[type=search],
input[type=tel], input[type=email], input[type=number], select, textarea {
  font: inherit; font-size: 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  color: var(--silver-50);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-width: 190px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
input::placeholder, textarea::placeholder { color: var(--silver-400); }
input:not([type]):focus, input[type=text]:focus, input[type=password]:focus,
input[type=search]:focus, input[type=tel]:focus, input[type=email]:focus,
input[type=number]:focus, select:focus, textarea:focus {
  border-color: var(--silver-300); background: var(--bg-1);
}
input[type=color] {
  width: 48px; height: 40px; padding: 3px;
  background: var(--bg-2); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); cursor: pointer;
}
select.min { font-size: 12px; padding: 6px 9px; min-width: 150px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--silver-100); padding-bottom: 10px; cursor: pointer; }
.check input { accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; }

.form { padding: 18px; margin-bottom: 18px; }
.form h2 {
  margin: 0 0 14px; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--silver-200);
}

.aviso { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; display: none; }
.aviso.erro { display: block; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #ffbdbd; }
.aviso.ok { display: block; background: rgba(46,194,126,.12); border: 1px solid rgba(46,194,126,.35); color: #8fe8bd; }

/* ---------- pessoas, tags e itens de lista ---------- */

.tag, .pessoa, .item, .conversa {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  transition: background var(--t-fast);
}
.tag:hover, .pessoa:hover, .item:hover { background: var(--bg-4); }
.tag .bola { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px; box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset; }
.tag .nome, .pessoa .nome { font-weight: 500; }
.tag.off .nome, .pessoa.off .nome { color: var(--silver-400); text-decoration: line-through; }
.espaco { flex: 1; }

.av {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  background: linear-gradient(180deg, var(--bg-5), var(--bg-4));
  border: 1px solid var(--line-strong);
  color: var(--silver-200);
}
.av.sup { background: linear-gradient(180deg, #3a3220, #2a2517); border-color: rgba(201,168,76,.4); color: var(--gold); }
.dados { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.dados .login { font-size: 12px; color: var(--silver-300); }
.acoes { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- cartoes de numero ---------- */

.cartoes { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.cartao { padding: 16px 20px; min-width: 158px; }
.cartao .num { font-size: 27px; font-weight: 600; line-height: 1.1; color: var(--silver-50); font-variant-numeric: tabular-nums; }
.cartao .rot { font-size: 10px; color: var(--silver-300); text-transform: uppercase; letter-spacing: .09em; margin-top: 3px; }
.cartao.fila .num { color: var(--gold); }
.cartao.ativo .num { color: #7ee0ae; }

/* ---------- caixa de entrada ---------- */

.caixa { display: grid; grid-template-columns: 340px 1fr; gap: 14px; height: calc(100dvh - 74px); padding: 14px 18px; }
.painel { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.painel .corpo { flex: 1; overflow-y: auto; min-height: 0; }
.busca { margin: 12px; width: calc(100% - 24px); min-width: 0; }

.conversa { cursor: pointer; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
.conversa:hover { background: var(--bg-4); }
.conversa.sel { background: linear-gradient(90deg, var(--bg-5), var(--bg-4)); box-shadow: inset 3px 0 0 var(--silver-200); }
.conversa .txt { flex: 1; min-width: 0; }
.conversa .nome { font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversa .previa { font-size: 12px; color: var(--silver-300); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversa .lado { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; font-size: 11px; color: var(--silver-400); }
.bolha-num {
  background: var(--grad-silver); color: var(--bg-0);
  border-radius: var(--radius-pill); padding: 1px 7px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}

.msgs { padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.msg {
  max-width: 70%; padding: 9px 13px; border-radius: var(--radius-lg);
  font-size: 14px; line-height: 1.5; word-wrap: break-word; white-space: pre-wrap;
  box-shadow: var(--shadow-sm);
}
.msg.ent { background: var(--bg-4); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.sai { background: linear-gradient(180deg, #23252c, #1c1e24); border: 1px solid var(--line-strong); align-self: flex-end; border-bottom-right-radius: 4px; }
.msg .rodape { font-size: 10px; color: var(--silver-400); margin-top: 5px; display: flex; gap: 7px; justify-content: flex-end; }
.msg.ent .rodape { justify-content: flex-start; }
.msg.falhou { border-color: rgba(239,68,68,.45); cursor: pointer; }
.msg img, .msg video { max-width: 100%; border-radius: var(--radius-sm); display: block; margin-bottom: 7px; }

.escrever { border-top: 1px solid var(--line); padding: 11px 13px; display: flex; gap: 9px; align-items: flex-end; background: var(--bg-2); }
.escrever textarea { flex: 1; resize: none; min-height: 42px; max-height: 140px; border-radius: var(--radius); }
.vazio-centro { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--silver-400); font-size: 14px; }

/* ---------- funil ---------- */

/* PATCH_FUNIL_GRADE_V1 - quadro em grade de ate 3 colunas por linha,
   sem barra de rolagem lateral */
.quadro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 18px;
  align-items: start;
}
@media (max-width: 1024px) { .quadro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 620px)  { .quadro { grid-template-columns: minmax(0, 1fr); } }
.coluna {
  background: var(--bg-3); background-image: var(--grad-card);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  min-width: 0; max-width: none;
  display: flex; flex-direction: column; max-height: 52dvh;
}
.coluna h3 {
  margin: 0; padding: 12px 14px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--silver-100);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-4), var(--bg-3));
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex; align-items: center; gap: 9px;
}
.coluna h3 .pt { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.coluna h3 .n { margin-left: auto; color: var(--silver-300); font-variant-numeric: tabular-nums; }
.coluna .cards { padding: 9px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; min-height: 76px; }
.coluna.alvo .cards { background: rgba(201,168,76,.05); outline: 2px dashed rgba(201,168,76,.35); outline-offset: -7px; }

.card {
  background: var(--bg-4); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 11px; cursor: grab;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.card.arrastando { opacity: .35; cursor: grabbing; }
.card .nome { font-weight: 500; display: block; }
.card .sub { font-size: 12px; color: var(--silver-300); display: block; margin-top: 2px; }
.card .previa { font-size: 12px; color: var(--silver-400); margin-top: 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.etiquetas { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.etq { font-size: 10px; padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); color: var(--silver-200); }
.etq.lq { border-color: rgba(46,194,126,.4); color: #7ee0ae; }
.etq.ds { border-color: rgba(239,68,68,.4); color: #ff9a9a; }

.gaveta {
  position: fixed; top: 0; right: 0; width: 380px; max-width: 92vw; height: 100dvh;
  background: var(--bg-2); border-left: 1px solid var(--line-strong);
  padding: 20px; overflow-y: auto; z-index: 40;
  box-shadow: -16px 0 40px rgba(0,0,0,.6);
  animation: entraGaveta var(--t-slow) cubic-bezier(.4,0,.2,1);
}
@keyframes entraGaveta { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.gaveta h2 { margin: 0 0 4px; font-size: 17px; font-family: var(--font-brand); letter-spacing: .03em; }
.gaveta .fechar { position: absolute; top: 16px; right: 16px; }
.gaveta section { margin-top: 20px; }
.gaveta section h4 { margin: 0 0 9px; font-size: 10px; color: var(--silver-300); text-transform: uppercase; letter-spacing: .09em; }

.detalhe { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 0 12px 10px; padding: 11px 13px; font-size: 13px; }
.detalhe .ev { display: flex; gap: 9px; padding: 3px 0; color: var(--silver-100); }
.detalhe .ev .t { color: var(--silver-400); min-width: 150px; font-size: 12px; font-variant-numeric: tabular-nums; }
.encerrar { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin: 0 12px 11px; }
.encerrar input[type=text] { min-width: 300px; }
.item .quem { display: flex; flex-direction: column; line-height: 1.35; cursor: pointer; min-width: 220px; }
.item .quem .sub { font-size: 12px; color: var(--silver-300); }

/* ---------- entrada ---------- */

.entrada {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  position: relative;
  overflow: hidden;
}
.entrada::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 520px at 50% -10%, rgba(192,192,200,.09), transparent 62%),
    radial-gradient(620px 420px at 50% 112%, rgba(201,168,76,.07), transparent 66%);
  pointer-events: none;
}

.caixa-entrada {
  position: relative;
  width: 100%;
  max-width: 396px;
  background: var(--bg-3);
  background-image: var(--grad-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 34px 32px 28px;
  box-shadow: var(--shadow-xl), var(--shadow-inset);
}
.caixa-entrada::after {
  content: '';
  position: absolute; left: 32px; right: 32px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192,192,200,.5), transparent);
}

.marca-entrada { display: grid; place-items: center; gap: 14px; margin-bottom: 26px; }
.marca-entrada img { width: 62px; height: 62px; filter: drop-shadow(0 3px 10px rgba(0,0,0,.6)); }
.marca-entrada .nome-marca {
  font-family: var(--font-brand);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .20em;
  text-transform: uppercase;
  background: var(--grad-silver);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
  line-height: 1.2;
}
.marca-entrada .linha-fina {
  width: 46px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.marca-entrada .modulo {
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--silver-300);
}

.caixa-entrada .campo { margin-bottom: 15px; width: 100%; }
.caixa-entrada input { width: 100%; min-width: 0; }
.caixa-entrada button.pri { width: 100%; padding: 12px; margin-top: 4px; font-size: 14px; letter-spacing: .03em; }
.caixa-entrada .aviso { margin-top: 14px; }
.rodape-marca {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 11px; color: var(--silver-400); text-align: center; line-height: 1.6;
}
.rodape-marca b { color: var(--silver-300); font-weight: 500; }

/* ---------- canais ---------- */
/* O .grupo nao tem padding proprio: quem traz o seu e o h2 (a barra do titulo)
   e a .lista. Texto solto dentro do grupo encostava na borda, entao ele agora
   mora dentro de .corpo. */
.corpo { padding: 14px 16px 16px; }
.corpo > :first-child { margin-top: 0; }
.corpo > :last-child { margin-bottom: 0; }
.corpo p { margin: 0 0 10px; }

/* um cartao por numero, em coluna, para dar para distinguir as linhas de longe */
.canais {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
  padding: 14px 16px 16px;
}

.canal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--bg-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.canal.ligado { border-color: var(--line-strong); }
.canal .cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.canal .apelido { font-size: 15px; font-weight: 600; color: var(--silver-50); overflow-wrap: anywhere; }
.canal .num {
  font-size: 20px; font-weight: 600; line-height: 1.2;
  color: var(--silver-50); font-variant-numeric: tabular-nums;
}
.canal .num.mudo { font-size: 13px; font-weight: 400; color: var(--silver-400); }
.canal .perfil { font-size: 12px; color: var(--silver-300); line-height: 1.45; }
.canal .acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.canal .qr { display: none; flex-direction: column; align-items: center; gap: 8px; }
.canal .qr.aberto { display: flex; }
.canal .qr img {
  width: 100%; max-width: 200px; aspect-ratio: 1 / 1;
  background: #fff; border-radius: var(--radius-sm); padding: 6px;
}
.canal .qr p { margin: 0; font-size: 12px; color: var(--silver-300); line-height: 1.5; text-align: center; }

/* a cor sozinha nao conta a historia: o texto do chip diz o mesmo que o ponto */
.sinal { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sinal.ok { background: var(--ok); }
.sinal.warn { background: var(--warn); }
.sinal.err { background: var(--err); }
.chip.ok { color: var(--ok); }
.chip.warn { color: var(--warn); }
.chip.err { color: var(--err); }

@media (max-width: 640px) {
  .canais { padding: 12px; gap: 12px; }
  .corpo { padding: 12px 14px 14px; }
}

/* ---------- responsivo ---------- */

@media (max-width: 900px) {
  .caixa { grid-template-columns: 1fr; height: auto; }
  .caixa .painel { height: 68dvh; }
  .caixa.abriu .lista { display: none; }
  .wrap { padding: 18px 16px 56px; }
  .topo { padding: 13px 16px; }
}

@media (max-width: 640px) {
  .msg { max-width: 86%; }
  .encerrar input[type=text] { min-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* o autopreenchimento do Chrome pinta o campo de branco - aqui ele volta ao tema */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--silver-50);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset;
  box-shadow: 0 0 0 1000px var(--bg-2) inset;
  caret-color: var(--silver-50);
  border-color: var(--line-strong);
  transition: background-color 9999s ease-in-out 0s;
}
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-1) inset;
  box-shadow: 0 0 0 1000px var(--bg-1) inset;
  border-color: var(--silver-300);
}

/* a mensagem que sai ganha um fio de prata no topo, para a direcao
   ficar clara mesmo para quem nao distingue bem as cores */
.msg.sai { position: relative; background: linear-gradient(180deg, #262930, #1d2026); }
.msg.sai::before {
  content: '';
  position: absolute; left: 12px; right: 12px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192,192,200,.35), transparent);
}

/* ==========================================================
IDENTIDADE OLYMPUS - a marca na entrada e o ritmo das telas.
O brasao e o mesmo arquivo do rail (img/olympus.webp), so que
grande: na entrada ele e o assunto da tela, nao um enfeite.
========================================================== */

.caixa-entrada { max-width: 412px; animation: entraCartao 320ms cubic-bezier(.4,0,.2,1); }
@keyframes entraCartao { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.marca-entrada { gap: 9px; margin-bottom: 30px; }

.marca-entrada .brasao {
position: relative;
display: grid; place-items: center;
width: 118px; height: 118px;
}
/* o halo nasce do ouro do proprio logo - serve para descolar o brasao do card */
.marca-entrada .brasao::before {
content: '';
position: absolute; inset: -20px;
border-radius: 50%;
background: radial-gradient(circle at 50% 46%, rgba(201,168,76,.18), rgba(192,192,200,.05) 46%, transparent 72%);
pointer-events: none;
}
.marca-entrada img {
position: relative;
width: 118px; height: 118px;
object-fit: contain;
filter: drop-shadow(0 6px 18px rgba(0,0,0,.65));
}
.marca-entrada .nome-marca { font-size: 27px; letter-spacing: .22em; margin: 6px 0 0; }
.marca-entrada .assinatura {
font-size: 10px; font-weight: 500;
letter-spacing: .34em; text-transform: uppercase;
color: var(--gold);
text-align: center;
}
.marca-entrada .linha-fina { width: 104px; margin-top: 3px; }
.marca-entrada .modulo { margin-top: 1px; }

@media (max-width: 400px) {
.marca-entrada .brasao, .marca-entrada img { width: 96px; height: 96px; }
.marca-entrada .nome-marca { font-size: 23px; }
}

/* trocar de aba nao recarrega a pagina: a tela nova entra em 190ms para
o olho acompanhar para onde foi, sem parecer um salto */
.wrap, .caixa, .quadro { animation: entraTela 190ms cubic-bezier(.4, 0, .2, 1); }
@keyframes entraTela { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* o cabecalho de cada tela ganha o fio de ouro da marca */
.topo { border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(201,168,76,.10); }

/* ==========================================================
MIDIA DENTRO DA BOLHA
A bolha vai ate 70% do painel - sem um teto proprio, uma foto
de celular ocupava a conversa inteira. E o <audio> sem largura
colapsava para um risco fino de 1px. Aqui os dois ganham medida.
========================================================== */

.msg .midia { display: block; line-height: 0; margin-bottom: 7px; }
.msg img, .msg video {
width: auto; height: auto;
max-width: 260px; max-height: 320px;
border-radius: var(--radius-sm);
display: block;
}
.msg a.midia img { cursor: zoom-in; transition: opacity var(--t-fast); }
.msg a.midia:hover img { opacity: .88; }

/* PATCH_FIGURINHA_V1 - figurinha do WhatsApp */
.msg .figurinha { display: block; max-width: 140px; max-height: 140px; background: transparent; border: 0; margin-bottom: 4px; }

.msg audio {
display: block;
width: 268px; max-width: 100%;
height: 40px;
margin-bottom: 6px;
border-radius: var(--radius-pill);
}

/* documento: um cartao com o nome do arquivo, nao um link solto */
.msg .doc {
display: flex; align-items: center; gap: 9px;
padding: 9px 11px; margin-bottom: 6px;
background: rgba(255,255,255,.05);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
color: var(--silver-100); text-decoration: none;
max-width: 280px;
transition: background var(--t-fast), border-color var(--t-fast);
}
.msg .doc:hover { background: rgba(201,168,76,.10); border-color: rgba(201,168,76,.35); }
.msg .doc .ico { font-size: 16px; color: var(--gold); flex: none; }
.msg .doc .nome { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg .doc .baixar { font-size: 10px; color: var(--silver-400); text-transform: uppercase; letter-spacing: .06em; }

@media (max-width: 640px) {
.msg img, .msg video { max-width: 200px; max-height: 260px; }
.msg audio { width: 220px; }
}

/* ---------- gravador de voz na barra de escrever ---------- */
.gravador {
display: none;              /* o JS liga quando comeca a gravar */
align-items: center;
gap: 9px;
padding: 0 4px;
white-space: nowrap;
}
.gravador .ponto {
width: 9px; height: 9px; border-radius: 50%;
background: var(--err);
flex: none;
animation: pulsaGravando 1.1s ease-in-out infinite;
}
@keyframes pulsaGravando { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
#cronometro {
font-variant-numeric: tabular-nums;
font-size: 13px; color: var(--silver-100);
min-width: 36px;
}
#btn-parar { border-color: rgba(201,168,76,.45); color: var(--gold); }
#btn-parar:hover { background: rgba(201,168,76,.12); }

@media (prefers-reduced-motion: reduce) {
.gravador .ponto { animation: none; }
}

/* ---------- atendimento encerrado ---------- */
/* ocupa o lugar da barra de escrever: quem encerrou tem de ver por que a
   caixa sumiu, e ter o caminho de volta na mesma linha de visao */
.encerrado {
display: none;
align-items: center;
gap: 12px;
flex-wrap: wrap;
border-top: 1px solid var(--line);
padding: 14px 16px;
background: var(--bg-2);
color: var(--silver-300);
font-size: 13px;
}
.encerrado button { flex: none; }

/* ---------- filtros da lista de conversas (PATCH_FILTROS_V1) ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 12px 12px; }
.filtros:empty { display: none; }
.filtros select.min { flex: 1 1 calc(50% - 3px); min-width: 0; width: auto; }
.filtros select.min:focus { border-color: rgba(201,168,76,.55); outline: none; }

/* ---------- emojis do chat (PATCH_EMOJI_V1) ---------- */
.escrever { position: relative; }
.emojis { position: absolute; bottom: calc(100% + 8px); left: 13px; width: 330px; max-height: 280px; overflow-y: auto; padding: 8px 12px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 38px rgba(0,0,0,.6); z-index: 40; }
.emojis[hidden] { display: none; }
.emoji-titulo { display: block; margin: 8px 0 4px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #8b95a5; }
.emoji-linha { display: flex; flex-wrap: wrap; gap: 2px; }
button.emoji { background: none; border: 0; padding: 4px 5px; font-size: 19px; line-height: 1; cursor: pointer; border-radius: 7px; transition: background .12s ease, transform .12s ease; }
button.emoji:hover { background: rgba(201,168,76,.16); transform: translateY(-1px); }
#emoji-recentes { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
#emoji-recentes[hidden] { display: none; }
#btn-emoji.ligado { border-color: rgba(201,168,76,.55); color: var(--gold); }

/* ---------- tags do contato dentro do CHAMADOS (PATCH_TAGS_CHAMADO_V1) ---------- */
.tags-chamado { margin: 10px 12px 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.02); }
.tags-chamado h4 { margin: 0 0 8px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #8b95a5; font-weight: 600; }
.tags-chamado .etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.tags-chamado .etq.viva { cursor: pointer; transition: border-color .12s ease, color .12s ease; }
.tags-chamado .etq.viva:hover { border-color: rgba(201,168,76,.55); color: var(--gold); }
.por-tag { display: flex; gap: 6px; margin-top: 10px; }
.por-tag select { flex: 1; min-width: 0; }

/* ---------- historico sob demanda no CHAMADOS (PATCH_HISTORICO_SOB_DEMANDA_V1) ---------- */
.historico { margin: 8px 12px 4px; }
.historico > .detalhe { margin-top: 8px; }

/* PATCH_OBSERVACAO_V1 - observacao resumida no card do funil */
.obs-card {
  margin-top: 6px;
  padding: 5px 7px;
  border-left: 2px solid var(--silver-400);
  background: rgba(255,255,255,.035);
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--silver-300);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* PATCH_FOTO_PERFIL_V1 */
.av { position: relative; overflow: hidden; }
.av-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: var(--bg-4); }
.cab-av { margin-right: 6px; }
.card-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.card-id .av { width: 28px; height: 28px; flex: 0 0 28px; font-size: 11px; }
.card-id .nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =========================================================
   PATCH_TEMA_CLARO_V1 - modo claro
   Os mesmos tokens, outra pele. No tema escuro --bg-* e fundo
   e --silver-* e tinta; aqui as duas escalas sao invertidas
   juntas, entao todo par fundo/texto do painel continua
   valendo e nenhum componente precisa ser reescrito.
   ========================================================= */

:root[data-tema="claro"] {
  /* Backgrounds - escala de brancos */
  --bg-0: #eceef3;   /* base da pagina */
  --bg-1: #f4f5f8;
  --bg-2: #ffffff;   /* rail e barras */
  --bg-3: #ffffff;   /* superficie de cartao */
  --bg-4: #eef0f5;   /* elevado / hover */
  --bg-5: #e1e4ec;   /* ativo / pressionado */

  /* Tinta - escala invertida (50 = mais forte) */
  --silver-50:  #0b0b0f;
  --silver-100: #16161c;
  --silver-200: #2f2f3a;
  --silver-300: #474754;
  --silver-400: #5f5f6e;
  --silver-500: #7c7c8b;
  --silver-600: #c3c3cf;

  /* Acentos recalibrados para fundo claro (minimo 4.5:1) */
  --gold:      #8a6a1f;
  --gold-soft: #a07f2a;
  --ok:   #136c44;
  --warn: #8a5a00;
  --err:  #b3261e;
  --info: #1558b0;

  /* Linhas: tinta preta translucida no lugar da prata */
  --line:        rgba(16, 16, 24, 0.12);
  --line-soft:   rgba(16, 16, 24, 0.07);
  --line-strong: rgba(16, 16, 24, 0.22);

  /* O botao de destaque vira grafite com texto claro */
  --grad-silver:        linear-gradient(180deg, #2f2f3a 0%, #1d1d25 35%, #101016 100%);
  --grad-silver-active: linear-gradient(180deg, #16161c 0%, #0b0b0f 50%, #000000 100%);
  --grad-card:          linear-gradient(180deg, rgba(16,16,24,.02) 0%, rgba(16,16,24,0) 60%);
  --grad-bg-radial:     radial-gradient(1100px 600px at 50% -10%, rgba(16,16,24,.05), transparent 70%);

  /* Sombras mais leves - preto puro pesa demais no claro */
  --shadow-sm:    0 1px 2px rgba(16,16,24,.08);
  --shadow-md:    0 4px 12px rgba(16,16,24,.08), 0 1px 2px rgba(16,16,24,.06);
  --shadow-lg:    0 12px 32px rgba(16,16,24,.10), 0 2px 6px rgba(16,16,24,.06);
  --shadow-xl:    0 24px 56px rgba(16,16,24,.14), 0 4px 12px rgba(16,16,24,.08);
  --shadow-glow:  0 0 24px rgba(16,16,24,.06);
  --shadow-card:  inset 0 1px 0 rgba(255,255,255,.7), 0 2px 10px rgba(16,16,24,.07);
  --shadow-inset: inset 0 1px 0 rgba(16,16,24,.04);
}

/* Pontos onde a cor estava cravada no CSS e nao segue token.
   Cada um foi reescolhido para ter contraste em fundo branco. */
:root[data-tema="claro"] .chip.k,
:root[data-tema="claro"] .mini.lq,
:root[data-tema="claro"] .etq.lq,
:root[data-tema="claro"] .cartao.ativo .num { color: #136c44; }

:root[data-tema="claro"] .mini.ds,
:root[data-tema="claro"] .etq.ds,
:root[data-tema="claro"] button.perigo { color: #b3261e; }
:root[data-tema="claro"] button.perigo:hover { color: #8c1d18; }

:root[data-tema="claro"] .aviso.erro { color: #8c1d18; }
:root[data-tema="claro"] .aviso.ok   { color: #136c44; }
:root[data-tema="claro"] .tags-chamado h4 { color: #5b6372; }

:root[data-tema="claro"] .av.sup {
  background: linear-gradient(180deg, #f7edd3, #efe0b6);
  border-color: rgba(138,106,31,.45);
}

/* Balao de conversa: quem entra fica branco, quem sai fica
   champanhe - a diferenca nao depende so da cor, o lado e o
   fio no topo continuam marcando a direcao. */
:root[data-tema="claro"] .msg.ent { background: #ffffff; }
:root[data-tema="claro"] .msg.sai { background: linear-gradient(180deg, #fbf4e2, #f5ecd6); }
:root[data-tema="claro"] .msg.sai::before {
  background: linear-gradient(90deg, transparent, rgba(138,106,31,.5), transparent);
}

/* Botao de tema no rail */
.rail .item.tema { cursor: pointer; }
.rail .item.tema:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* A troca so anima no instante do clique - nenhuma transicao
   fica pendurada no resto da navegacao. */
:root.trocando-tema *,
:root.trocando-tema *::before,
:root.trocando-tema *::after {
  transition: background-color 200ms ease-out, background-image 200ms ease-out,
              color 200ms ease-out, border-color 200ms ease-out, fill 200ms ease-out !important;
}
@media (prefers-reduced-motion: reduce) {
  :root.trocando-tema *,
  :root.trocando-tema *::before,
  :root.trocando-tema *::after { transition: none !important; }
}

/* A barra lateral carrega uma copia local dos tokens (para continuar
   legivel mesmo se o estilo.css nao carregar). No tema claro essa
   copia tambem precisa virar, senao so ela fica preta. */
:root[data-tema="claro"] .rail {
  --bg-2: #ffffff;
  --bg-3: #eef0f5;
  --bg-4: #e1e4ec;
  --gold: #8a6a1f;
  --line: rgba(16, 16, 24, 0.12);
  --line-strong: rgba(16, 16, 24, 0.22);
  --silver-50: #0b0b0f;
  --silver-100: #16161c;
  --silver-300: #474754;
  --shadow-sm: 0 1px 2px rgba(16,16,24,.08);
  --shadow-inset: inset 0 1px 0 rgba(16,16,24,.04);
}

/* Barra de titulo: era preto translucido sobre o fundo escuro */
:root[data-tema="claro"] .topo { background: rgba(255, 255, 255, 0.78); }

/* Etiquetas usam a cor escolhida pela equipe, pensada para fundo
   preto. No claro elas sao escurecidas para continuarem legiveis -
   a cor da etiqueta e preservada, so perde brilho. */
:root[data-tema="claro"] .chip[style],
:root[data-tema="claro"] .etq[style],
:root[data-tema="claro"] .mini[style] { filter: brightness(.62) saturate(1.1); }

/* =========================================================
   PATCH_VISUALIZADOR_V1 - foto e PDF abrem numa janela sobre o
   chat, nao em outra guia. Quem trabalha com um monitor so nao
   perde o lugar na conversa.
   ========================================================= */
.visor {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  padding: 24px 16px;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(3px);
}
.visor.aberto { display: flex; }

.visor-caixa {
  display: flex; flex-direction: column;
  width: min(1100px, 100%); height: min(88vh, 100%);
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.visor.aberto .visor-caixa { animation: visorEntra 180ms cubic-bezier(.4, 0, .2, 1); }
@keyframes visorEntra {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: none; }
}

.visor-topo {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-4);
}
.visor-nome {
  flex: 1; min-width: 0;
  font-size: 13px; color: var(--silver-100);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.visor-acao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg-3); color: var(--silver-100);
  font-size: 12px; text-decoration: none; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.visor-acao:hover { background: var(--bg-5); border-color: var(--gold); }
.visor-acao:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.visor-acao svg { width: 15px; height: 15px; flex: none; }
.visor-fechar { width: 44px; padding: 0; }

.visor-corpo {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-0); overflow: auto;
}
.visor-corpo img { max-width: 100%; max-height: 100%; display: block; cursor: zoom-in; }
.visor-corpo img.ampliada { max-width: none; max-height: none; cursor: zoom-out; }
/* iframe para PDF: object/embed sao barrados pela CSP (object-src none) */
.visor-corpo iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.visor-pdf { width: 100%; height: 100%; overflow: auto; background: #3a3a3e; padding: 14px 0 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* area vazia em volta do documento fecha o visor com um clique */
.visor-corpo, .visor-pdf { cursor: pointer; }
.visor-pagina { cursor: default; }
.visor-pdf .visor-aviso { color: #ececec; }
.visor-pagina { background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .4); border-radius: 2px; max-width: calc(100% - 24px); height: auto; }
.visor-aviso { padding: 28px 24px; color: var(--silver-300); font-size: 13px; text-align: center; line-height: 1.6; }

@media (max-width: 640px) {
  .visor { padding: 0; }
  .visor-caixa { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .visor-acao span { display: none; }
  .visor-acao { width: 44px; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .visor.aberto .visor-caixa { animation: none; }
  .visor-acao { transition: none; }
}

/* PATCH_FILA_QUENTE_CARD_V1 - linha de orientacao sob o titulo de um grupo */
.dica-grupo { font-size: 12px; opacity: .6; margin: -4px 0 10px; }

/* PATCH_NEON_NAO_LIDA_V1 ---------------------------------------------------
   Conversa com mensagem do cliente ainda nao lida. O numero sozinho era
   discreto demais para quem varre a coluna de olho; aqui o item inteiro
   acende. Em dourado, nao em verde: o realce de selecao ja e a barra
   prateada, entao os dois estados continuam distinguiveis lado a lado.
   O tom vai em tripla RGB para o brilho acompanhar o tema claro, onde o
   dourado e mais escuro e um glow claro sumiria no fundo.               */
:root            { --neon-nao-lida: 201,168,76; }
:root[data-tema="claro"] { --neon-nao-lida: 138,106,31; }

.conversa.nao-lida {
  background: linear-gradient(90deg, rgba(var(--neon-nao-lida), .12), transparent 60%);
  box-shadow: inset 3px 0 0 var(--gold), 0 0 16px -6px rgba(var(--neon-nao-lida), .7);
}
.conversa.nao-lida:hover { background: linear-gradient(90deg, rgba(var(--neon-nao-lida), .18), var(--bg-4) 60%); }
.conversa.nao-lida .nome {
  font-weight: 700; color: var(--gold);
  text-shadow: 0 0 10px rgba(var(--neon-nao-lida), .45);
}
.conversa.nao-lida .previa { color: var(--silver-200); }
.conversa.nao-lida .bolha-num {
  background: var(--gold); color: var(--bg-0);
  animation: pulso-nao-lida 2.4s ease-in-out infinite;
}
/* a selecao continua mandando na barra lateral, para nao sumir o "onde estou" */
.conversa.nao-lida.sel {
  box-shadow: inset 3px 0 0 var(--silver-200), 0 0 16px -6px rgba(var(--neon-nao-lida), .7);
}
@keyframes pulso-nao-lida {
  0%, 100% { box-shadow: 0 0 6px rgba(var(--neon-nao-lida), .45); }
  50%      { box-shadow: 0 0 14px rgba(var(--neon-nao-lida), .85); }
}
@media (prefers-reduced-motion: reduce) {
  .conversa.nao-lida .bolha-num {
    animation: none;
    box-shadow: 0 0 10px rgba(var(--neon-nao-lida), .6);
  }
}

/* PATCH_FILTRO_NAO_LIDAS_V1 - botao de filtro ligado: o mesmo dourado do
   realce de nao lida, para a tela contar uma historia so. */
button.min.ligado {
  border-color: var(--gold);
  color: var(--bg-0);
  background: var(--gold);
  font-weight: 600;
}
button.min.ligado:hover { filter: brightness(1.08); }

/* PATCH_FILTRO_NAO_LIDAS_V1 - os botoes da barra da lista andam juntos:
   em tela estreita descem os dois, alinhados a direita, em vez de um deles
   cair sozinho na linha de baixo. */
.cab-acoes { margin-left: auto; display: flex; gap: 6px; flex-wrap: nowrap; }

/* PATCH_IR_ATE_O_CHAMADO_V1 - a linha que o atalho do chat procurava.
   Dourado da casa, nao amarelo de alerta: isto e "e aqui", nao "deu erro".
   So box-shadow, inclusive o preenchimento (inset com spread grande), para
   nao disputar o background com nenhuma regra do item. */
@keyframes achei-piscar {
  0%, 100% {
    box-shadow: inset 0 0 0 999px rgba(var(--neon-nao-lida), 0),
                0 0 0 0 rgba(var(--neon-nao-lida), 0);
  }
  15%, 45%, 75% {
    box-shadow: inset 0 0 0 999px rgba(var(--neon-nao-lida), .17),
                0 0 0 2px rgba(var(--neon-nao-lida), .9),
                0 0 22px -4px rgba(var(--neon-nao-lida), .8);
  }
  30%, 60%, 90% {
    box-shadow: inset 0 0 0 999px rgba(var(--neon-nao-lida), .04),
                0 0 0 1px rgba(var(--neon-nao-lida), .25),
                0 0 8px -4px rgba(var(--neon-nao-lida), .3);
  }
}
.item.achei {
  border-radius: var(--radius-sm);
  animation: achei-piscar 2.4s ease-in-out 1;
}
/* Quem pede menos movimento continua vendo a linha acender: o que incomoda
   e deslocamento, nao cor. Aqui a mesma ideia em dois pulsos lentos, sem
   crescer anel nem deslocar nada. */
@keyframes achei-calmo {
  /* tres piscadas, sempre com o anel do mesmo tamanho: o que muda e so a
     intensidade da cor, nunca a geometria */
  0%, 100%      { box-shadow: inset 0 0 0 999px rgba(var(--neon-nao-lida), 0),
                              0 0 0 2px rgba(var(--neon-nao-lida), .2); }
  15%, 45%, 75% { box-shadow: inset 0 0 0 999px rgba(var(--neon-nao-lida), .18),
                              0 0 0 2px rgba(var(--neon-nao-lida), .95); }
  30%, 60%, 90% { box-shadow: inset 0 0 0 999px rgba(var(--neon-nao-lida), .03),
                              0 0 0 2px rgba(var(--neon-nao-lida), .3); }
}
@media (prefers-reduced-motion: reduce) {
  /* O reset global desta folha zera a duracao de TODA animacao com
     !important. Esta e a unica excecao, e de proposito: sem ela o atalho
     simplesmente nao sinaliza nada para quem tem a preferencia ligada no
     sistema, e era justamente o sinal que foi pedido. O que incomoda em
     movimento e deslocamento - esta animacao nao desloca nada, so troca cor,
     duas vezes, devagar. A rolagem ate a linha, essa sim, vira salto direto
     (ver PATCH_IR_ATE_O_CHAMADO_V1 em chamados.html). */
  .item.achei { animation: achei-calmo 2.4s ease-in-out 1 !important; }
}

/* PATCH_FILTRO_VISIVEL_V1 - a faixa que diz o que a lista esta escondendo */
.filtros-ativos { display: none; }
.filtros-ativos.on {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px; padding: 6px 10px;
  border: 1px solid rgba(var(--neon-nao-lida), .45);
  border-radius: var(--radius-sm);
  background: rgba(var(--neon-nao-lida), .10);
  color: var(--gold); font-size: 12px; line-height: 1.3;
}
.filtros-ativos.on span { flex: 1; min-width: 0; }
.filtros-ativos.on button { flex: 0 0 auto; border-color: var(--gold); color: var(--gold); }

/* PATCH_AVISO_DE_VERSAO_V1 - barra discreta no rodape, nunca sobre a conversa.
   Fica acima de tudo (z-index alto) porque e a unica coisa que explica por que
   a tela esta se comportando como a versao de ontem. */
#aviso-versao {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--silver-100);
  background: var(--bg-2);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
}
#aviso-versao button {
  cursor: pointer;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--silver-200);
}
#aviso-versao button.ok {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--bg-0);
  font-weight: 600;
}
#aviso-versao button:hover { filter: brightness(1.08); }
#aviso-versao button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* PATCH_ATUALIZAR_MENSAGENS_V1 - o botao fica na barra de cima, ao lado do sinal
   de conexao: e la que mora a pergunta a que ele responde, se o painel esta em
   dia com o WhatsApp. Borda dourada para ler como acao, e nao como rotulo. */
#btn-sincronizar {
  border-color: rgba(201, 168, 76, .55);
  color: var(--gold);
  margin-right: 10px;
}
#btn-sincronizar:hover:not(:disabled) { background: rgba(201, 168, 76, .12); }
#btn-sincronizar:disabled { opacity: .55; cursor: progress; }