/* ============================================================
   TCS · Atendimento — design v5 (referencia: TCS · Atendimento Redesign.html)
   ------------------------------------------------------------
   Tokens vem de /tokens.css.
   Btn / chip / input / ai-card / panel / banner vem de /components.css
   via @import em /shared/app.css.
   Sidebar vem de /shared/app.css.
   Aqui APENAS o layout especifico de atendimento.
   ============================================================ */

/* ============================================================
   FRAME — grid de 5 colunas (sidebar + filas + convs + chat + side)
   sidebar e fixed positioned em /shared/app.css, entao o .main aqui
   deixa o margin-left:56px reservado pra ela e organiza as 4
   colunas restantes em grid.
   ============================================================ */
.main{
  margin-left:56px;
  padding-right:48px;          /* reserva o rail colapsado do chat interno */
  height:100vh;
  display:grid;
  grid-template-columns:300px minmax(0,1fr) 290px;  /* 3 cols: conversas + chat + cliente */
  min-width:0;
  background:var(--color-bg);
  overflow:hidden;
}
/* Quando o rail esta pinned, ele continua sobreposto ao cliente (overlay
   permanente em vez de empurrar o layout). Isso preserva o chat com tamanho
   cheio. Pra ver o cliente inteiro de novo, basta despinar. */

/* ============================================================
   ICON BUTTONS — usados no header da coluna conversas (#btnPainel,
   #btnConfig) e podem ser reutilizados em outros contextos.
   ============================================================ */
.btn-ico{
  width:28px;height:28px;border-radius:var(--radius-md);
  background:transparent;border:1px solid transparent;
  color:var(--color-ink-60);
  display:grid;place-items:center;
  cursor:pointer;transition:all .12s var(--ease-out);
  flex:none;
}
.btn-ico:hover{background:var(--color-bg-alt);color:var(--color-ink);border-color:var(--color-line)}

/* ============================================================
   COLUNA 2 — CONVERSAS
   ============================================================ */
.col-conversas{
  background:var(--color-bg);
  border-right:1px solid var(--color-line);
  display:flex;flex-direction:column;
  overflow:hidden;min-width:0;
}
.col-conversas .col-head{
  padding:10px 12px;
  border-bottom:1px solid var(--color-line);
  background:var(--color-card);
  display:flex;align-items:center;gap:4px;
  flex-shrink:0;
}
.col-conversas .col-head h2{
  font-size:13.5px;font-weight:var(--fw-semibold);
  margin:0;color:var(--color-ink);
  flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Botoes do header: presencaSel ganha versao compact, ico-btns 26x26 */
.col-conversas .col-head .presenca-top{
  height:26px;font-size:11px;padding:0 6px;
}
.col-conversas .col-head .btn-ico{
  width:26px;height:26px;
}

/* selector de presenca + botao SLA no header */
.presenca-top{
  border:1px solid var(--color-line-strong);
  background:#fff;
  border-radius:var(--radius-md);
  font-size:11.5px;font-family:inherit;
  padding:5px 8px;
  cursor:pointer;
  color:var(--color-ink);
  height:28px;line-height:1;
}
.presenca-top:hover{background:var(--color-bg-alt)}
.presenca-top:focus{
  outline:none;
  border-color:var(--color-olive);
  box-shadow:var(--shadow-focus);
}

.search-wrap{
  padding:10px 14px;
  background:var(--color-card);
  border-bottom:1px solid var(--color-line);
  flex-shrink:0;
}
.search-input{
  width:100%;height:30px;
  background:var(--color-bg);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  padding:0 10px;
  font-family:inherit;font-size:12px;
  outline:none;color:var(--color-ink);
  transition:all .12s;
}
.search-input::placeholder{color:var(--color-ink-40)}
.search-input:focus{
  background:#fff;
  border-color:var(--color-olive);
  box-shadow:var(--shadow-focus);
}

.tabs{
  display:flex;flex-wrap:wrap;gap:4px;
  padding:8px 10px;
  background:var(--color-card);
  border-bottom:1px solid var(--color-line);
  flex-shrink:0;
}
/* Pilulas — em vez de tabs com underline. Suportam wrap em 2 linhas
   se a coluna ficar estreita. Active: fundo olive-25, texto olive-700. */
.tab{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;
  font-size:11px;font-weight:var(--fw-medium);
  color:var(--color-ink-70);
  cursor:pointer;
  background:transparent;border:1px solid transparent;
  border-radius:var(--radius-full);
  line-height:1.3;
  letter-spacing:0;text-transform:none;
  font-family:inherit;
  transition:all .12s var(--ease-out);
  white-space:nowrap;
}
.tab:hover{background:var(--color-bg-alt);color:var(--color-ink)}
.tab.active{
  background:var(--color-olive-25);
  color:var(--color-olive-700);
  font-weight:var(--fw-semibold);
  border-color:rgba(145,155,49,.25);
}
/* Tab "Em risco" — destaque vermelho (alarme real) */
.tab.alarm{color:var(--color-danger)}
.tab.alarm:hover{background:var(--color-danger-bg);color:var(--color-danger)}
.tab.alarm.active{
  background:var(--color-danger-bg);
  color:var(--color-danger);
  border-color:rgba(180,68,46,.25);
}
.tab-count{
  font-size:10px;font-weight:var(--fw-semibold);
  background:var(--color-ink-10);color:var(--color-ink-70);
  padding:1px 6px;border-radius:var(--radius-full);
  font-variant-numeric:tabular-nums;
  line-height:1.4;letter-spacing:0;
  text-transform:none;min-width:18px;text-align:center;
}
.tab.active .tab-count{background:var(--color-olive);color:#fff}
.tab.alarm .tab-count.alarm{background:var(--color-danger);color:#fff}
.tab-count.zero{opacity:.5}

.conv-list{flex:1;overflow-y:auto;background:var(--color-bg)}
.conv-item{
  display:grid;grid-template-columns:32px 1fr auto;
  gap:10px;
  padding:10px 14px;
  border-bottom:1px solid var(--color-line);
  cursor:pointer;background:transparent;
  transition:background .1s;position:relative;
  align-items:start;
}
.conv-item:hover{background:#fbfaf7}
.conv-item.active{background:var(--color-card)}
.conv-item.active::before{
  content:"";position:absolute;
  left:0;top:0;bottom:0;width:2px;
  background:var(--color-olive);
}

/* avatar com borda do departamento — cor injetada inline pelo JS via
   style:linear-gradient. Aqui aplicamos um circulo neutro como base e
   convertemos a borda em cor de departamento quando classes b-* existem. */
.conv-av{
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  font-size:11px;font-weight:var(--fw-semibold);
  color:var(--color-ink-70);
  background:var(--color-ink-10) !important; /* sobrescreve gradiente inline */
  flex-shrink:0;position:relative;
  letter-spacing:.02em;
  border:2px solid transparent;
}
/* borda colorida por departamento — aplicada via classe data-fila no markup */
.conv-av.b-com{border-color:var(--dept-comercial)}
.conv-av.b-tec{border-color:var(--dept-tecnica)}
.conv-av.b-fin{border-color:var(--dept-financeiro)}
.conv-av.b-cob{border-color:var(--dept-cobranca)}
.conv-av.b-adm{border-color:var(--dept-admin)}
.conv-av.b-dir{border-color:var(--dept-diretoria)}

.conv-mid{min-width:0}
.conv-name{
  font-size:12.5px;font-weight:var(--fw-semibold);
  color:var(--color-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:2px;
}
.conv-prev{
  font-size:12px;color:var(--color-ink-60);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:4px;line-height:1.35;
}
/* tag-mini (departamento na lista de conversas) — texto olive sem fundo.
   Olive eh a cor de marca do sistema, da destaque sutil ao departamento
   sem competir com nome do cliente nem com o chip "em risco". */
.tag-mini{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10.5px;font-weight:var(--fw-semibold);
  color:var(--color-olive-700) !important;
  background:transparent !important;
  padding:0;border-radius:0;
  text-transform:none;letter-spacing:0;
  margin:0;
}
/* "em risco" — unico chip com fundo na lista de conversas */
.conv-risco{
  display:inline-block;
  background:var(--color-danger-bg);color:var(--color-danger);
  font-size:9.5px;font-weight:var(--fw-semibold);
  padding:1px 6px;border-radius:var(--radius-xs);
  letter-spacing:.06em;text-transform:uppercase;
  margin-left:6px;vertical-align:1px;
}

.conv-meta{
  display:flex;flex-direction:column;align-items:flex-end;
  gap:4px;flex-shrink:0;
}
.conv-time{
  font-size:10.5px;color:var(--color-ink-50);
  font-variant-numeric:tabular-nums;
}
.unread{
  background:var(--color-olive);color:#fff;
  font-size:9.5px;font-weight:var(--fw-semibold);
  min-width:16px;height:16px;
  border-radius:var(--radius-full);
  display:grid;place-items:center;
  padding:0 4px;font-variant-numeric:tabular-nums;
  line-height:1;
}

/* ============================================================
   COLUNA 3 — CHAT
   ============================================================ */
.col-chat{
  background:var(--color-card);
  display:flex;flex-direction:column;
  min-width:0;min-height:0;
  overflow:hidden;
}
.chat-head{
  padding:10px 16px;
  border-bottom:1px solid var(--color-line);
  display:flex;align-items:center;gap:10px;
  min-height:54px;flex-shrink:0;
  background:var(--color-card);
}
.chat-head .conv-av{
  width:36px;height:36px;font-size:12px;
  background:var(--color-ink-10) !important;
}
.chat-head-info{flex:1;min-width:0;overflow:hidden}
.chat-head-info b{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:var(--fw-semibold);
  color:var(--color-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin:0;line-height:1.2;
}
.chat-head-info b > span:first-child{
  overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0;flex:0 1 auto;
}
.chat-head-info small{
  font-size:11.5px;color:var(--color-ink-60);
  display:flex;align-items:center;gap:6px;
  margin-top:1px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* sla pill (vermelha, pulsando) — entra no chat-head-info b */
.sla-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;
  border-radius:var(--radius-full);
  font-size:10.5px;font-weight:var(--fw-semibold);
  letter-spacing:.04em;
  background:var(--color-danger-bg);color:var(--color-danger);
  border:1px solid rgba(180,68,46,.18);
  flex:none;line-height:1.4;
}
.sla-pill::before{
  content:"";width:5px;height:5px;
  border-radius:var(--radius-full);
  background:var(--color-danger);
  animation:tpSlaPulse 1.4s ease-in-out infinite;
}
@keyframes tpSlaPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* sla-timer (cronometro inline) — variantes por estado */
.sla-timer{
  font-size:11px;font-weight:var(--fw-semibold);
  font-variant-numeric:tabular-nums;
  padding:3px 8px;border-radius:var(--radius-full);
  background:var(--color-bg-alt);color:var(--color-ink-60);
  white-space:nowrap;letter-spacing:.02em;flex:none;
}
.sla-timer.run{background:var(--color-olive-25);color:var(--color-olive-700)}
.sla-timer.warn{background:var(--color-warn-bg);color:var(--color-warn)}
.sla-timer.over{
  background:var(--color-danger-bg);color:var(--color-danger);
  border:1px solid rgba(180,68,46,.18);
  animation:tpSlaPulse 1.4s ease-in-out infinite;
}
.sla-timer.done{background:var(--color-olive-25);color:var(--color-olive-700)}
.sla-timer:empty{display:none}

.bot-chip{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10.5px;font-weight:var(--fw-semibold);
  letter-spacing:.04em;
  padding:2px 8px;border-radius:var(--radius-full);
  background:var(--color-lilac-50);color:var(--color-lilac);
  border:1px solid rgba(137,132,189,.25);
  white-space:nowrap;flex:none;
}

.chat-head-actions{
  display:flex;gap:6px;align-items:center;flex:none;
}
.act-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:26px;padding:0 10px;
  border-radius:var(--radius-md);
  font-size:11.5px;font-weight:var(--fw-medium);
  border:1px solid var(--color-line-strong);
  background:#fff;color:var(--color-ink-80);
  cursor:pointer;font-family:inherit;line-height:1;
  transition:all .12s var(--ease-out);white-space:nowrap;
}
.act-btn:hover{background:var(--color-bg-alt);color:var(--color-ink)}
.act-btn.primary,
#actResolver{
  background:var(--color-olive);
  border-color:var(--color-olive);
  color:#fff;font-weight:var(--fw-semibold);
}
.act-btn.primary:hover,
#actResolver:hover{
  background:var(--color-olive-700);
  border-color:var(--color-olive-700);
}
/* em telas estreitas, label dos botoes some — fica so o icone */
@media (max-width:1380px){
  .act-btn .lbl{display:none}
  .act-btn{padding:0 7px;width:30px;justify-content:center}
}

/* botao icone com badge (chat interno no header) */
.btn-icon{
  width:30px;height:30px;padding:0;
  display:grid;place-items:center;
  background:transparent;
  border:1px solid transparent;
  color:var(--color-ink-60);
  border-radius:var(--radius-md);
  cursor:pointer;position:relative;flex:none;
  transition:all .12s var(--ease-out);
}
.btn-icon:hover{
  background:var(--color-bg-alt);color:var(--color-ink);
  border-color:var(--color-line);
}
.btn-icon .nbadge{
  position:absolute;top:2px;right:2px;
  background:var(--color-danger);color:#fff;
  font-size:9px;font-weight:var(--fw-semibold);
  min-width:14px;height:14px;
  border-radius:var(--radius-full);
  display:grid;place-items:center;
  padding:0 3px;font-variant-numeric:tabular-nums;
  border:2px solid var(--color-card);line-height:1;
}
.btn-icon .nbadge:empty{display:none}

/* corpo do chat com max-width centralizado */
.chat-body{
  flex:1 1 0;overflow-y:auto;
  padding:20px 24px;
  background:#fefefb;
  background-image:radial-gradient(circle at 1px 1px,rgba(23,20,28,.025) 1px,transparent 0);
  background-size:24px 24px;
  display:flex;flex-direction:column;gap:8px;
  min-height:0;width:100%;
}
.chat-body-inner{
  max-width:980px;width:100%;
  margin:0 auto;
  display:flex;flex-direction:column;gap:8px;
}

.chat-day{
  align-self:center;
  font-size:10.5px;color:var(--color-ink-50);
  font-weight:var(--fw-medium);
  background:var(--color-card);
  padding:2px 10px;border-radius:var(--radius-full);
  border:1px solid var(--color-line);
  margin:14px 0 6px;
  letter-spacing:0;text-transform:none;
}

/* bolhas — sem sombra, sem verde Whatsapp.
   in (entrada do cliente) = branco
   out (saida do agente)   = olive-25
   bot                     = lilac-50
   sys                     = inline tracejado central */
.msg{
  max-width:62%;
  padding:8px 12px;
  border-radius:var(--radius-lg);
  font-size:13px;line-height:1.45;
  color:var(--color-ink);
  white-space:pre-wrap;word-wrap:break-word;
  box-shadow:none;border:1px solid var(--color-line);
}
.msg.in{
  background:#fff;
  align-self:flex-start;
  border-bottom-left-radius:3px;
}
.msg.out{
  background:var(--color-olive-25);
  border-color:rgba(145,155,49,.18);
  color:var(--color-ink);
  align-self:flex-end;
  border-bottom-right-radius:3px;
}
.msg.bot{
  background:var(--color-lilac-50);
  border-color:rgba(137,132,189,.18);
  color:#3b3760;
  align-self:flex-start;
  border-bottom-left-radius:3px;
}
.msg.sys{
  align-self:center;
  background:transparent;border:1px dashed var(--color-line-strong);
  color:var(--color-ink-50);
  font-size:11px;padding:3px 10px;
  border-radius:var(--radius-full);
}
.msg-time{
  display:block;
  font-size:10px;color:var(--color-ink-50);
  margin-top:4px;
  font-variant-numeric:tabular-nums;
  font-weight:var(--fw-medium);
}
.msg.out .msg-time{color:var(--color-ink-60)}

/* ============================================================
   AI SUGGESTION CARD — inline no chat (substitui bot-sugestao)
   componente principal ja vem de /components.css (.ai-card / .ai-head /
   .ai-body / .ai-actions / .ai-btn). Aqui apenas o ID e o placeholder
   pra estado vazio do contenteditable.
   ============================================================ */
.ai-card{display:none;margin:8px 0 4px}
.ai-card.show{display:block}

/* placeholder do contenteditable quando vazio */
.ai-body[contenteditable]:empty::before{
  content:attr(data-placeholder);
  color:var(--color-ink-40);
  font-style:italic;
  pointer-events:none;
}
.ai-body[contenteditable]:focus{outline:none}

/* estado "gerando" — sem cursor de edicao */
.ai-card.loading .ai-body{
  color:var(--color-ink-50);
  font-style:italic;
  user-select:none;
}

/* ============================================================
   COMPOSER
   ============================================================ */
.composer{
  border-top:1px solid var(--color-line);
  padding:10px 16px 14px;
  background:#fff;flex-shrink:0;
}
.composer-row{
  display:flex;align-items:flex-end;gap:8px;
  background:#fff;
  border:1px solid var(--color-line-strong);
  border-radius:var(--radius-lg);
  padding:8px 10px 4px;
  transition:all .12s;
}
.composer-row:focus-within{
  border-color:var(--color-olive);
  box-shadow:var(--shadow-focus);
}
.composer-input{
  flex:1;border:none;outline:none;background:transparent;
  resize:none;font-family:inherit;
  font-size:13px;line-height:1.5;
  color:var(--color-ink);
  min-height:24px;max-height:120px;
  padding:4px 0;
}
.composer-input::placeholder{color:var(--color-ink-40)}
.composer-tools{display:flex;align-items:center;gap:2px}
.tool-btn{
  width:28px;height:28px;
  border:none;background:transparent;
  color:var(--color-ink-60);
  border-radius:var(--radius-md);
  display:grid;place-items:center;
  cursor:pointer;flex:none;
  transition:all .12s;
}
.tool-btn:hover{background:var(--color-bg-alt);color:var(--color-ink)}
.btn-send{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;height:28px;
  border-radius:var(--radius-md);
  font-size:12px;font-weight:var(--fw-semibold);
  background:var(--color-olive);color:#fff;
  border:none;cursor:pointer;font-family:inherit;
  transition:all .12s;
  letter-spacing:0;text-transform:none;
}
.btn-send:hover{background:var(--color-olive-700)}
.composer-foot{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:8px;
  font-size:10.5px;color:var(--color-ink-50);
}
.composer-foot kbd{
  font-family:var(--font-mono);font-size:10px;
  background:var(--color-bg-alt);
  border:1px solid var(--color-line);
  color:var(--color-ink-70);
  border-radius:3px;
  padding:1px 5px;margin:0 1px;
}

/* ============================================================
   COLUNA 4 — PAINEL DIREITO (so Cliente, sempre visivel)
   Chat interno vive fora do .main como faixa colapsada (.ci-rail).
   ============================================================ */
.col-cliente{
  background:var(--color-card);
  border-left:1px solid var(--color-line);
  display:flex;flex-direction:column;
  overflow:hidden;min-width:0;position:relative;
}
.cli-body{flex:1;overflow-y:auto;background:var(--color-card)}
.cli-head{
  padding:24px 20px 16px;
  text-align:center;
  border-bottom:1px solid var(--color-line);
  background:var(--color-card);
}
.cli-av{
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,var(--color-lilac) 0%,#6b669e 100%);
  color:#fff;font-size:20px;font-weight:var(--fw-semibold);
  display:grid;place-items:center;
  margin:0 auto 12px;
}
.cli-name{
  font-size:14px;font-weight:var(--fw-semibold);
  color:var(--color-ink);margin:0 0 2px;
}
.cli-phone{
  font-size:12px;color:var(--color-ink-60);
  font-variant-numeric:tabular-nums;
  font-family:var(--font-mono);margin:0;
}
.cli-quick{
  display:flex;gap:6px;justify-content:center;
  margin-top:10px;flex-wrap:wrap;
}
/* chips do painel cliente — pill cinza neutro com texto. */
.cli-quick .chip,
.col-cliente .chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;color:var(--color-ink-60);
  background:var(--color-bg-alt);
  padding:3px 8px;border-radius:var(--radius-full);
  font-weight:var(--fw-medium);
  letter-spacing:0;text-transform:none;
  border:none;line-height:1.4;
}
.cli-quick .chip.ok{
  background:var(--color-success-bg);color:var(--color-success);
}
.cli-quick .chip.warn{
  background:var(--color-warn-bg);color:var(--color-warn);
}

.cli-section{
  padding:14px 18px;
  border-bottom:1px solid var(--color-line);
}
.cli-section h3{
  margin:0 0 10px;
  font-size:10px;font-weight:var(--fw-semibold);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-ink-50);
}
.kv{
  display:flex;justify-content:space-between;
  font-size:12px;padding:4px 0;gap:8px;
  align-items:baseline;
}
.kv span:first-child{
  color:var(--color-ink-50);
  font-size:11.5px;
}
.kv span:last-child{
  color:var(--color-ink);font-weight:var(--fw-medium);
  text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0;
}

.cli-card{
  background:var(--color-bg-alt);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  padding:10px 12px;margin-bottom:8px;
  font-size:12px;
}
.cli-card b{
  display:block;font-size:11.5px;
  font-weight:var(--fw-semibold);
  color:var(--color-ink);
  font-family:var(--font-mono);
  margin-bottom:3px;
}
.cli-card .row{
  display:flex;justify-content:space-between;
  color:var(--color-ink-60);
  font-size:11px;margin-top:2px;
}
.cli-empty{
  color:var(--color-ink-50);font-size:11.5px;
  font-style:italic;text-align:center;
  padding:8px 0;
}

/* recados internos */
.recado{
  background:var(--color-bg);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  padding:7px 9px;margin-bottom:6px;
  font-size:11.5px;line-height:1.4;
  color:var(--color-ink);
}
.recado.destaque{
  background:var(--color-warn-bg);
  border-color:rgba(161,111,28,.35);
}
.recado .r-meta{
  display:flex;justify-content:space-between;gap:6px;
  margin-top:4px;
  font-size:9.5px;color:var(--color-ink-50);
  text-transform:uppercase;letter-spacing:.04em;
}
.recado.destaque .r-meta{
  color:var(--color-warn);font-weight:var(--fw-semibold);
}
.recado-form textarea{
  width:100%;
  border:1px solid var(--color-line-strong);
  border-radius:var(--radius-md);
  font-family:inherit;font-size:12px;
  padding:8px;resize:vertical;
  min-height:48px;outline:none;
  color:var(--color-ink);
  background:var(--color-card);
  line-height:1.4;
}
.recado-form textarea:focus{
  border-color:var(--color-olive);
  box-shadow:var(--shadow-focus);
}
.recado-form .rf-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:6px;gap:8px;
}
.recado-form label{
  font-size:10.5px;color:var(--color-ink-60);
  display:flex;align-items:center;gap:5px;cursor:pointer;
}
.recado-form input[type=checkbox]{accent-color:var(--color-olive)}
.recado-form button{
  font-size:11px;font-weight:var(--fw-semibold);
  padding:5px 12px;
  border-radius:var(--radius-md);
  border:none;
  background:var(--color-olive);color:#fff;
  cursor:pointer;font-family:inherit;
  transition:all .12s;letter-spacing:0;text-transform:none;
}
.recado-form button:hover{background:var(--color-olive-700)}
.recado-form button:disabled{opacity:.5;cursor:wait}

/* ============================================================
   CHAT INTERNO — faixa colapsada na direita (.ci-rail)
   48px default → 280px no hover OU quando .pinned. Quando .show-conv,
   esconde a lista (.ci-rail-body) e mostra a conversa (.ci-main).
   ============================================================ */
.ci-rail{
  position:fixed;
  top:0;right:0;bottom:0;
  width:48px;
  background:var(--color-card);
  border-left:1px solid var(--color-line);
  display:flex;flex-direction:column;
  overflow:hidden;
  z-index:40;
  transition:width .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.ci-rail:hover,
.ci-rail.pinned{
  width:280px;
  box-shadow:-2px 0 24px rgba(23,20,28,.08);
}
.ci-rail.pinned{box-shadow:none}

/* Header do rail (sempre visivel — icone + titulo + acoes) */
.ci-rail-head{
  display:flex;align-items:center;gap:6px;
  padding:8px;
  min-height:42px;
  border-bottom:1px solid var(--color-line);
  background:var(--color-card);
  flex-shrink:0;
}
.ci-rail-icon{
  width:32px;height:32px;
  border-radius:var(--radius-lg);
  background:var(--color-lilac-50);
  color:var(--color-lilac);
  display:grid;place-items:center;
  position:relative;flex:none;
}
.ci-rail-icon svg{flex:none}
.ci-rail-badge{
  position:absolute;top:-2px;right:-2px;
  min-width:14px;height:14px;padding:0 3px;
  border-radius:var(--radius-full);
  background:var(--color-danger);color:#fff;
  font-size:9px;font-weight:var(--fw-semibold);
  display:grid;place-items:center;
  border:2px solid var(--color-card);
  font-variant-numeric:tabular-nums;line-height:1;
}
.ci-rail-title{
  flex:1;
  font-size:13px;font-weight:var(--fw-semibold);
  color:var(--color-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transition:opacity .15s ease;
}
.ci-rail:hover .ci-rail-title,
.ci-rail.pinned .ci-rail-title{opacity:1;transition-delay:.08s}

.ci-rail-act{
  width:28px;height:28px;
  border:1px solid transparent;
  background:transparent;
  color:var(--color-ink-60);
  border-radius:var(--radius-md);
  display:grid;place-items:center;
  cursor:pointer;flex:none;
  opacity:0;transition:opacity .15s ease, color .12s, background .12s;
}
.ci-rail:hover .ci-rail-act,
.ci-rail.pinned .ci-rail-act{opacity:1;transition-delay:.08s}
.ci-rail-act:hover{
  background:var(--color-bg-alt);
  color:var(--color-ink);
  border-color:var(--color-line);
}
.ci-rail-act[aria-pressed="true"]{
  color:var(--color-olive);
  background:var(--color-olive-25);
}

/* Lista (modo padrao). Quando .show-conv, some. */
.ci-rail-body{
  flex:1;
  overflow-y:auto;
  padding:6px 0;
  background:var(--color-card);
}
.ci-rail.show-conv .ci-rail-body{display:none}

.ci-group-label{
  padding:12px 10px 4px;
  font-size:9.5px;font-weight:var(--fw-semibold);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-ink-50);
  white-space:nowrap;
  height:12px;
  opacity:0;transition:opacity .15s ease;
}
.ci-rail:hover .ci-group-label,
.ci-rail.pinned .ci-group-label{opacity:1;transition-delay:.08s}

.ci-canais{
  display:flex;flex-direction:column;
}

/* Item de canal (grupo ou pessoa). Tile sempre visivel (colapsado);
   nome/sub aparecem quando o rail expande. */
.ci-canal{
  display:grid;
  grid-template-columns:32px 1fr;
  align-items:center;
  gap:10px;
  padding:5px 8px;
  cursor:pointer;
  font-size:12px;
  color:var(--color-ink-80);
  font-weight:var(--fw-medium);
  background:transparent;border:none;border-radius:0;
  border-bottom:none;
  transition:background .1s;
}
.ci-canal:hover{background:var(--color-bg)}
.ci-canal.active{
  background:var(--color-lilac-50);
  color:var(--color-ink);
}
.ci-canal.active .ci-canal-nome{font-weight:var(--fw-semibold)}

/* Tile: quadrado arredondado pra grupo, circulo pra pessoa.
   Borda colorida do departamento (so grupos). */
.ci-canal-tile{
  width:32px;height:32px;
  display:grid;place-items:center;
  font-size:11px;font-weight:var(--fw-semibold);
  letter-spacing:.02em;
  color:var(--color-ink-70);
  background:var(--color-ink-05, #f3f2f4);
  border:2px solid var(--color-ink-20);
  flex:none;
}
.ci-canal-tile.grupo{
  border-radius:var(--radius-lg);
}
.ci-canal-tile.pessoa{
  border-radius:50%;
  background:linear-gradient(135deg,var(--color-lilac) 0%,#6b669e 100%);
  color:#fff;
  border-color:transparent;
}
/* Borda colorida do dept — so em grupos */
.ci-canal-tile.grupo.b-com{border-color:var(--dept-comercial);color:var(--dept-comercial)}
.ci-canal-tile.grupo.b-tec{border-color:var(--dept-tecnica);color:var(--dept-tecnica)}
.ci-canal-tile.grupo.b-fin{border-color:var(--dept-financeiro);color:var(--dept-financeiro)}
.ci-canal-tile.grupo.b-cob{border-color:var(--dept-cobranca);color:var(--dept-cobranca)}
.ci-canal-tile.grupo.b-adm{border-color:var(--dept-admin);color:var(--dept-admin)}
.ci-canal-tile.grupo.b-dir{border-color:var(--dept-diretoria);color:var(--dept-diretoria)}

.ci-canal-info{
  min-width:0;
  opacity:0;transition:opacity .15s ease;
}
.ci-rail:hover .ci-canal-info,
.ci-rail.pinned .ci-canal-info{opacity:1;transition-delay:.08s}
.ci-canal-nome{
  font-size:12px;
  color:var(--color-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ci-canal-sub{
  font-size:10.5px;
  color:var(--color-ink-50);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-top:1px;
}

/* Estado vazio (sem grupos / sem pessoas) — so visivel quando o rail
   expande. Quando colapsado (.ci-empty-cta dentro de .ci-canais), some. */
.ci-empty-cta{
  padding:12px 12px 4px;
  opacity:0;transition:opacity .15s ease;
  text-align:left;
}
.ci-rail:hover .ci-empty-cta,
.ci-rail.pinned .ci-empty-cta{opacity:1;transition-delay:.08s}
.ci-empty-msg{
  font-size:11.5px;color:var(--color-ink-60);
  font-style:italic;margin-bottom:6px;
}
.ci-empty-sub{
  font-size:10.5px;color:var(--color-ink-50);
  line-height:1.4;
}
.ci-empty-btn{
  display:inline-flex;align-items:center;
  font-size:11.5px;font-weight:var(--fw-semibold);
  padding:6px 10px;border-radius:var(--radius-md);
  background:var(--color-olive-25);
  border:1px dashed var(--color-olive);
  color:var(--color-olive-700);
  cursor:pointer;font-family:inherit;
  transition:all .12s;
}
.ci-empty-btn:hover{
  background:var(--color-olive);color:#fff;border-style:solid;
}

/* Modo conversa: lista some, .ci-main aparece */
.ci-rail .ci-main{
  display:none;
  flex:1;min-height:0;
  flex-direction:column;
  overflow:hidden;
  background:var(--color-card);
}
.ci-rail.show-conv .ci-main{display:flex}

.ci-main-head{
  padding:10px 14px;
  border-bottom:1px solid var(--color-line);
  font-weight:var(--fw-semibold);font-size:13px;
  display:flex;justify-content:space-between;align-items:center;
  gap:8px;flex-shrink:0;
  background:var(--color-card);
}
.ci-back{
  cursor:pointer;border:none;background:transparent;
  font-size:18px;line-height:1;
  color:var(--color-ink-60);
  padding:0 6px;font-family:inherit;
}
.ci-back:hover{color:var(--color-ink)}

.ci-msgs{
  flex:1;overflow-y:auto;
  padding:14px 16px;
  display:flex;flex-direction:column;gap:8px;
  background:var(--color-bg);
}
.ci-msg{
  max-width:88%;
  background:#fff;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  padding:7px 10px;
  font-size:12px;line-height:1.4;
}
.ci-msg.mine{
  align-self:flex-end;
  background:var(--color-lilac-50);
  border-color:rgba(137,132,189,.25);
}
.ci-msg .m-meta{
  font-size:9.5px;color:var(--color-ink-50);
  margin-top:3px;
  text-transform:uppercase;letter-spacing:.03em;
}

.ci-composer{
  display:flex;gap:6px;
  padding:10px 12px;
  border-top:1px solid var(--color-line);
  background:var(--color-card);flex-shrink:0;
  position:relative;
}
.ci-composer input{
  flex:1;
  border:1px solid var(--color-line-strong);
  border-radius:var(--radius-md);
  padding:7px 10px;
  font-family:inherit;font-size:12.5px;
  outline:none;color:var(--color-ink);
  background:#fff;
}
.ci-composer input:focus{
  border-color:var(--color-olive);
  box-shadow:var(--shadow-focus);
}
.ci-composer button{
  border:none;background:var(--color-olive);
  color:#fff;border-radius:var(--radius-md);
  padding:0 14px;font-weight:var(--fw-semibold);
  font-size:12px;cursor:pointer;font-family:inherit;
}
.ci-composer button:hover{background:var(--color-olive-700)}
.ci-composer #ciEmoji,
.ci-composer #ciAnexo{
  background:#fff;
  border:1px solid var(--color-line-strong);
  color:var(--color-ink);
  padding:0 8px;font-size:14px;
}
.ci-composer #ciEmoji:hover,
.ci-composer #ciAnexo:hover{background:var(--color-bg-alt)}

.ci-anexo{
  display:flex;align-items:center;gap:6px;
  margin-top:4px;
  background:var(--color-bg);
  border:1px solid var(--color-line);
  padding:5px 8px;
  border-radius:var(--radius-sm);
  font-size:11.5px;color:var(--color-ink);
  text-decoration:none;
}
.ci-anexo:hover{background:#fff;border-color:var(--color-lilac)}
.ci-anexo .a-nome{
  flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ci-anexo .a-tam{
  font-size:10px;color:var(--color-ink-50);
  font-variant-numeric:tabular-nums;
}

.ci-emojis{
  position:absolute;bottom:54px;left:12px;
  background:#fff;
  border:1px solid var(--color-line-strong);
  border-radius:var(--radius-md);
  padding:8px;display:none;
  grid-template-columns:repeat(8,1fr);gap:2px;
  box-shadow:var(--shadow-lg);
  z-index:5;
}
.ci-emojis.show{display:grid}
.ci-emojis span{
  cursor:pointer;font-size:17px;
  padding:3px;border-radius:var(--radius-sm);
  text-align:center;
}
.ci-emojis span:hover{background:var(--color-lilac-50)}

.ci-empty{
  padding:24px 16px;text-align:center;
  color:var(--color-ink-50);font-size:12px;
  font-style:italic;
}

/* ============================================================
   OVERLAYS — Painel Diretoria / Configuracoes / Transferir
   Mantidos como overlays modais; visual atualizado pros tokens v5.
   ============================================================ */
.ci-overlay{
  position:fixed;inset:0;
  background:rgba(23,20,28,.45);
  z-index:60;
  display:none;align-items:center;justify-content:center;
  padding:20px;
}
.ci-overlay.show{display:flex}
.ci-modal{
  width:860px;max-width:94vw;
  height:80vh;
  background:var(--color-card);
  border-radius:var(--radius-xl);
  display:grid;grid-template-columns:230px 1fr;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.ci-modal .ci-main{
  display:flex;flex-direction:column;min-width:0;
  background:var(--color-card);
}
.ci-modal .ci-main-head{
  padding:12px 16px;
  font-size:13px;font-weight:var(--fw-semibold);
}
.ci-modal .ci-main-head .x{
  cursor:pointer;
  color:var(--color-ink-50);
  font-size:20px;line-height:1;
  border:none;background:none;
  font-family:inherit;
  width:24px;height:24px;
  display:grid;place-items:center;
}
.ci-modal .ci-main-head .x:hover{color:var(--color-ink)}

/* transferir */
.tr-section{
  font-size:10px;font-weight:var(--fw-semibold);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-ink-50);
  margin-bottom:6px;
}
.tr-item{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:10px 12px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  margin-bottom:6px;cursor:pointer;
  background:var(--color-card);
  transition:all .12s;
}
.tr-item:hover{
  border-color:var(--color-lilac);
  background:var(--color-lilac-50);
}
.tr-item.sugerido{
  border-color:var(--color-lilac);
  background:var(--color-lilac-50);
  position:relative;
}
.tr-item .nome{
  font-size:12.5px;font-weight:var(--fw-semibold);
  color:var(--color-ink);
}
.tr-item .meta{
  font-size:10.5px;color:var(--color-ink-50);
  letter-spacing:0;text-transform:none;
  display:flex;gap:8px;align-items:center;
}
.tr-item .pres{
  font-size:10px;
  padding:1px 6px;
  border-radius:var(--radius-full);
  background:var(--color-bg-alt);
  font-weight:var(--fw-medium);
}
.tr-item .pres.online{
  background:var(--color-success-bg);color:var(--color-success);
}
.tr-item .pres.ausente{
  background:var(--color-warn-bg);color:var(--color-warn);
}
.tr-item .badge-sug{
  position:absolute;top:-7px;right:8px;
  font-size:9px;font-weight:var(--fw-semibold);
  background:var(--color-lilac);color:#fff;
  padding:1px 6px;border-radius:var(--radius-full);
  letter-spacing:.05em;text-transform:uppercase;
}

/* configuracoes */
.cfg-tabs{
  display:flex;gap:0;
  padding:0 14px;
  border-bottom:1px solid var(--color-line);
  background:var(--color-card);flex-shrink:0;
}
.cfg-tab{
  padding:9px 12px;
  font-size:11.5px;font-weight:var(--fw-medium);
  color:var(--color-ink-60);cursor:pointer;
  border-bottom:2px solid transparent;line-height:1.3;
  letter-spacing:0;text-transform:none;
}
.cfg-tab:hover{color:var(--color-ink)}
.cfg-tab.active{
  color:var(--color-olive-700);
  border-bottom-color:var(--color-olive);
  font-weight:var(--fw-semibold);
}
.cfg-field{margin-bottom:12px}
.cfg-field label{
  display:block;
  font-size:10.5px;font-weight:var(--fw-semibold);
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--color-ink-60);margin-bottom:4px;
}
.cfg-field input,
.cfg-field select,
.cfg-field textarea{
  width:100%;
  border:1px solid var(--color-line-strong);
  border-radius:var(--radius-md);
  padding:7px 10px;
  font-family:inherit;font-size:12.5px;
  outline:none;color:var(--color-ink);background:#fff;
}
.cfg-field input:focus,
.cfg-field select:focus,
.cfg-field textarea:focus{
  border-color:var(--color-olive);
  box-shadow:var(--shadow-focus);
}
.cfg-field textarea{min-height:280px;resize:vertical;line-height:1.5}
.cfg-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cfg-info{
  font-size:11.5px;color:var(--color-ink-60);
  margin-bottom:12px;line-height:1.45;
}
.cfg-save{
  margin-top:8px;
  padding:7px 16px;
  background:var(--color-olive);color:#fff;
  border:none;
  border-radius:var(--radius-md);
  font-weight:var(--fw-semibold);font-size:12px;
  cursor:pointer;font-family:inherit;
  letter-spacing:0;text-transform:none;
  transition:all .12s;
}
.cfg-save:hover{background:var(--color-olive-700)}
.cfg-save:disabled{opacity:.5;cursor:wait}

.cfg-table{
  width:100%;border-collapse:collapse;font-size:12px;
}
.cfg-table th{
  font-size:10px;font-weight:var(--fw-semibold);
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-ink-50);text-align:left;
  padding:8px;
  border-bottom:1px solid var(--color-line);
}
.cfg-table td{
  padding:8px;
  border-bottom:1px solid var(--color-line);
}
.cfg-table input[type=time],
.cfg-table input[type=text],
.cfg-table input[type=number]{
  padding:5px 8px;
  border:1px solid var(--color-line-strong);
  border-radius:var(--radius-sm);
  font-family:inherit;font-size:12px;
  width:100%;color:var(--color-ink);background:#fff;
}
.cfg-table input[type=color]{
  width:34px;height:28px;
  border:1px solid var(--color-line-strong);
  border-radius:var(--radius-sm);
  padding:0;cursor:pointer;
}

/* painel diretoria */
.pn-kpis{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;margin-bottom:18px;
}
.pn-kpi{
  background:var(--color-card);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  padding:12px 14px;
}
.pn-kpi .l{
  font-size:10px;font-weight:var(--fw-semibold);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-ink-50);
}
.pn-kpi .v{
  font-size:22px;font-weight:var(--fw-semibold);
  color:var(--color-ink);
  margin-top:4px;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.015em;
}
.pn-kpi.alert .v{color:var(--color-danger)}
.pn-kpi.ok .v{color:var(--color-lilac)}
.pn-cols{
  display:grid;grid-template-columns:1.4fr 1fr;
  gap:18px;
}
.pn-card{
  background:var(--color-card);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  padding:12px 14px;margin-bottom:14px;
}
.pn-card h4{
  font-size:10.5px;font-weight:var(--fw-semibold);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-ink-50);margin:0 0 9px;
}
.pn-row{
  display:flex;align-items:center;gap:8px;
  padding:5px 0;font-size:12.5px;
}
.pn-row .n{
  flex:1;color:var(--color-ink);
  font-weight:var(--fw-medium);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pn-row .v{
  font-variant-numeric:tabular-nums;color:var(--color-ink);
}
.pn-bar{
  height:4px;
  background:var(--color-bg-alt);
  border-radius:var(--radius-full);
  flex:1;overflow:hidden;
}
.pn-bar > div{
  height:100%;background:var(--color-lilac);
  border-radius:var(--radius-full);
}
.pn-spark{
  display:flex;align-items:flex-end;gap:3px;
  height:80px;margin-top:6px;
}
.pn-spark .b{
  flex:1;background:var(--color-lilac);
  border-radius:3px 3px 0 0;
  min-height:2px;position:relative;
}
.pn-days{display:flex;gap:3px;margin-top:2px}
.pn-days span{
  flex:1;text-align:center;
  font-size:9px;color:var(--color-ink-50);
}

/* ============================================================
   BANNER REALTIME — fica no topo absoluto, so aparece se desconecta
   ============================================================ */
.tp-rt-banner{
  position:fixed;top:0;left:0;right:0;
  z-index:9999;padding:6px 14px;
  background:var(--color-warn-bg);color:var(--color-warn);
  font-size:11.5px;font-weight:var(--fw-semibold);
  text-align:center;
  border-bottom:1px solid rgba(161,111,28,.35);
  transform:translateY(-100%);
  transition:transform .25s ease;
  pointer-events:none;
}
.tp-rt-banner.show{transform:translateY(0)}
.tp-rt-banner .dot{
  display:inline-block;width:6px;height:6px;
  border-radius:50%;background:currentColor;
  margin-right:6px;vertical-align:middle;
  animation:tpRtPulse 1.2s ease-in-out infinite;
}
@keyframes tpRtPulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ============================================================
   SCROLLBARS — discretos
   ============================================================ */
.conv-list::-webkit-scrollbar,
.chat-body::-webkit-scrollbar,
.cli-body::-webkit-scrollbar,
.ci-canais::-webkit-scrollbar,
.ci-msgs::-webkit-scrollbar,
.sb-nav::-webkit-scrollbar{width:8px;height:8px}
.conv-list::-webkit-scrollbar-thumb,
.chat-body::-webkit-scrollbar-thumb,
.cli-body::-webkit-scrollbar-thumb,
.ci-canais::-webkit-scrollbar-thumb,
.ci-msgs::-webkit-scrollbar-thumb{
  background:rgba(23,20,28,.12);
  border-radius:var(--radius-full);
}
.sb-nav::-webkit-scrollbar-thumb{
  background:rgba(145,155,49,.3);
  border-radius:var(--radius-full);
}