/* ============================================================
   DMW Tracker: INBOX + CHAT PANEL (Fase 2 Immersive re-skin)
   Cobre: inbox.eta · _conversation-list.eta · _chat-panel.eta ·
          _chat-composer.eta · _lead-actions-main.eta ·
          _lead-actions-history.eta · _lead-bubbles.eta
   Fonte visual: templates/immersive/inbox.html (.wa-* / chat-kit.css)
   Mapeamento: preserva todos os IDs e classes JS; apenas adiciona estilo.
   ============================================================ */

/* ============================================================
   VARIÁVEIS LOCAIS (espelham o WA scope do protótipo)
   ============================================================ */
:root {
  --wa-pane: #ffffff;
  --wa-header: #f0f2f5;
  --wa-search: #f0f2f5;
  --wa-icon: #54656f;
  --wa-name: #111b21;
  --wa-meta: #667781;
  --wa-divider: #e9edef;
  --wa-hover: #f5f6f6;
  --wa-active: #f0f2f5;
  --wa-green: #25d366;
  --wa-green-dark: #1da855;
  /* Bloco B, medicao headless (task-7): --wa-green-dark e feito para BORDA/
     icone (o uso de ate 2026-09), nunca TEXTO. Contra o fundo claro que a
     citacao e a barra de resposta usam, mede so 2.7:1 (WCAG pede >= 4.5:1
     para texto). --wa-green-text e a MESMA identidade (verde do "enviado"),
     escurecida so o suficiente pra ler: 5.2-5.8:1 medido nas duas bolhas
     (branca e verde clara). Nunca usar --wa-green-dark em texto novo. */
  --wa-green-text: #0f6b3a;
  /* Mesma razao de --wa-green-text, so que para o item "Apagar para todos"
     do menu por bolha (var(--red), #D45B5B, contra o branco do .ck-pop mede
     3.86:1). */
  --wa-red-text: #b23a3a;
  --wa-tick: #53bdeb;
  --wa-wallpaper: #efeae2;
  --wa-bubble-in: #ffffff;
  --wa-bubble-out: #d9fdd3;
}

/* ============================================================
   SHELL DE TELA CHEIA: A PÁGINA DE INBOX OCUPA 100% DA VIEWPORT
   ============================================================ */

/* Na página inbox, o main-content sai do fluxo normal e
   estende até a borda sem padding extra */
.main-content:has(.inbox) {
  padding: 0;
}

/* Fallback para browsers sem :has: o .inbox é filho direto de .main-content */
.inbox ~ * { display: none; }

/* ============================================================
   WRAPPER PRINCIPAL .inbox
   ============================================================ */
.inbox {
  display: flex;
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
  background: #f0f2f5;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* accent strip no topo (visual do protótipo) */
  position: relative;
}
.inbox::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 50;
  background: linear-gradient(90deg, var(--azul), var(--gold-bright));
}

/* ============================================================
   COLUNA ESQUERDA: LISTA DE CONVERSAS
   ============================================================ */
.inbox-list {
  width: 30%;
  min-width: 320px;
  max-width: 440px;
  background: var(--wa-pane);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--wa-divider);
  overflow: hidden;
  flex-shrink: 0;
}

/* ── BUSCA ── */
.inbox-search {
  padding: 8px 12px;
  background: var(--wa-pane);
  border-bottom: 1px solid var(--wa-divider);
}

.inbox-search #inbox-search {
  width: 100%;
  height: 35px;
  background: var(--wa-search);
  border: none;
  border-radius: 8px;
  padding: 0 12px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  color: var(--wa-name);
  outline: none;
  transition: .15s;
}
/* Piso de toque (bloco 3): um seletor com #id vence o piso genérico do app.css,
   então a versão de 16px para o dedo mora aqui, logo depois da regra. */
@media (pointer: coarse) { .inbox-search #inbox-search { font-size: 16px; } }
.inbox-search #inbox-search::placeholder { color: var(--wa-meta); }
.inbox-search #inbox-search:focus {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(47, 80, 150, .18);
}

/* ── FILTROS (select ocultos visualmente, ainda funcionais) ── */
.inbox-filters {
  display: flex;
  gap: 6px;
  padding: 6px 12px 4px;
  background: var(--wa-pane);
  border-bottom: 1px solid var(--wa-divider);
}

.inbox-filters select {
  flex: 1;
  height: 30px;
  background: #f0f2f5;
  border: none;
  border-radius: 6px;
  padding: 0 8px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12.5px;
  color: var(--wa-icon);
  cursor: pointer;
  outline: none;
  transition: .14s;
}
.inbox-filters select:focus {
  background: #e8eaf0;
  box-shadow: 0 0 0 2px rgba(47, 80, 150, .18);
}

/* ── BARRA DE AÇÕES EM MASSA ── */
.inbox-bulk {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: #eef2fb;
  border-bottom: 1px solid var(--wa-divider);
  min-height: 42px;
}

.inbox-bulk-all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--azul);
  cursor: pointer;
}

.inbox-bulk-all #bulk-all {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #b8c0cc;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: .12s;
  flex-shrink: 0;
}
.inbox-bulk-all #bulk-all:checked {
  background: var(--azul);
  border-color: var(--azul);
}
.inbox-bulk-all #bulk-all:checked::after {
  content: "";
  position: absolute;
  top: 1px; left: 4px;
  width: 6px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#bulk-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--azul);
}

.inbox-bulk-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.cp-act-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  padding: 6px 9px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--azul);
  transition: .12s;
}
.cp-act-btn:hover { background: rgba(47, 80, 150, .1); }

/* ── LISTA DE CONVERSAS ── */
.inbox-convos {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.inbox-convos::-webkit-scrollbar { width: 5px; }
.inbox-convos::-webkit-scrollbar-thumb {
  background: #d1d7db;
  border-radius: 3px;
}
.inbox-convos::-webkit-scrollbar-thumb:hover { background: #bcc4c9; }

/* ============================================================
   LINHA DE CONVERSA (.convo)
   ============================================================ */
.convo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 13px;
  height: 72px;
  cursor: pointer;
  position: relative;
  transition: background .12s;
}
.convo:hover { background: var(--wa-hover); }
.convo.active { background: var(--wa-active); }

/* não-lida: destaque */
.convo.unread {
  background: #fcfffe;
}
.convo.unread::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--wa-green);
  border-radius: 0 2px 2px 0;
}
.convo.unread:hover { background: var(--wa-hover); }

/* separador entre linhas */
.convo + .convo .convo-main {
  border-top: 1px solid var(--wa-divider);
}

/* ── CHECKBOX ── */
.convo-check {
  display: none; /* o inbox.js controla via seleção */
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #b8c0cc;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: .12s;
}
.convo-check:checked {
  background: var(--azul);
  border-color: var(--azul);
}
.convo-check:checked::after {
  content: "";
  position: absolute;
  top: 1px; left: 4px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── AVATAR ── */
.convo-avatar {
  width: 49px;
  height: 49px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* A PINTURA (gradiente + letra) so vale quando o avatar NAO e um icone de
   canal. Sem o :not(.chan) o gradiente cobriria o icone: as regras do canal
   (chat-kit.css) tem especificidade igual ou menor. */
.convo-avatar:not(.chan) {
  background: linear-gradient(135deg, var(--azul), #5C7BC0);
  color: #fff;
  font-weight: 600;
  font-size: 17px;
  font-family: 'Outfit', sans-serif;
}

.convo-avatar--unread {
  background: var(--wa-green) !important;
  font-size: 14px;
  font-weight: 700;
}

/* ── CORPO DA LINHA ── */
.convo-main {
  flex: 1;
  min-width: 0;
  height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.convo-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.convo-name {
  font-size: 16px;
  color: var(--wa-name);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.convo.unread .convo-name {
  font-weight: 700;
}

.convo-time {
  font-size: 12px;
  color: var(--wa-meta);
  flex-shrink: 0;
  white-space: nowrap;
}

.convo.unread .convo-time {
  color: var(--wa-green-dark);
  font-weight: 600;
}

.convo-preview {
  font-size: 14px;
  color: var(--wa-meta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.convo.unread .convo-preview {
  font-weight: 600;
  color: var(--wa-name);
}

/* ── META (badges + tags) ── */
.convo-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* js-win-badge: estilizada por inbox.js (coloca texto + classe open/closed) */
.convo-badge.js-win-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 18px;
  padding: 0 7px;
  border-radius: 30px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: 'Hanken Grotesk', sans-serif;
  line-height: 1;
  /* estado padrão quando sem class */
  background: transparent;
  color: #9aa6b2;
  border: 1px dashed #d6dce4;
}
/* inbox.js adiciona .open / .closed */
.convo-badge.js-win-badge.open {
  background: rgba(31, 169, 113, .12);
  color: #157a52;
  border: 1px solid rgba(31, 169, 113, .25);
}
.convo-badge.js-win-badge.closed {
  background: #f1f3f6;
  color: #667781;
  border: 1px solid #e4e8ee;
}

.convo-assignee {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  height: 18px;
  padding: 0 7px;
  border-radius: 30px;
  background: rgba(47, 80, 150, .09);
  color: var(--azul);
  border: 1px solid rgba(47, 80, 150, .16);
  font-size: 10.5px;
  font-weight: 600;
  max-width: 96px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.convo-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--wa-meta);
  flex-shrink: 0;
}

.convo-tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* ============================================================
   PAINEL DE CHAT (.chat-panel): 3 colunas
   ============================================================ */
.chat-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

/* ── COLUNA DO CHAT (50%) ── */
.cp-chat {
  flex: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  position: relative;
}

/* ── HEADER DO CHAT ── */
.cp-chat-hd {
  background: var(--wa-header);
  border-bottom: 1px solid var(--wa-divider);
  padding: 10px 16px 11px;
  flex-shrink: 0;
}

.cp-hd-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

#cp-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--wa-name);
  font-family: 'Hanken Grotesk', sans-serif;
}

#cp-phone {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--wa-meta);
  font-weight: 400;
}

.cp-hd-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#cp-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  flex-wrap: wrap;
}

/* Botões de ação injetados pelo inbox.js no cp-actions */
#cp-actions button,
#cp-actions .cp-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 5px 10px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: .14s;
  background: rgba(47, 80, 150, .09);
  color: var(--azul);
}
#cp-actions button:hover { background: rgba(47, 80, 150, .16); }

#cp-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--azul);
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#cp-link:hover { color: var(--azul-deep); text-decoration: underline; }

/* ── TABS (canal) ── */
.cp-tabs {
  background: var(--wa-pane);
  border-bottom: 1px solid var(--wa-divider);
  display: flex;
  gap: 2px;
  padding: 0 12px;
  flex-shrink: 0;
  overflow-x: auto;
}

/* cp-tabs é populado pelo JS com .cp-tab buttons */
.cp-tab {
  position: relative;
  border: 0;
  background: none;
  padding: 9px 11px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wa-meta);
  cursor: pointer;
  white-space: nowrap;
  transition: color .14s;
}
.cp-tab:hover { color: var(--wa-name); }
.cp-tab.active { color: var(--azul-deep); }
.cp-tab.active::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--azul), var(--gold-bright));
}

/* ── ÁREA DE MENSAGENS ── */
#cp-msgs {
  flex: 1;
  min-height: 0; /* filho flex: sem isto nao encolhe quando o composer cresce */
  overflow-y: auto;
  padding: 12px 7%;
  background-color: var(--wa-wallpaper);
  /* padrão de fundo do WhatsApp Web */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23000000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round' opacity='0.045'%3E%3Cpath d='M30 28c-4 0-7 3-7 7s3 7 7 7h6v6l6-6h2c4 0 7-3 7-7s-3-7-7-7z'/%3E%3Ccircle cx='190' cy='34' r='9'/%3E%3Cpath d='M190 25v18M181 34h18'/%3E%3Cpath d='M96 36l5 9 10 1-7 7 2 10-10-5-10 5 2-10-7-7 10-1z'/%3E%3Cpath d='M150 90c0-6 5-10 11-10s11 4 11 10c0 7-11 14-11 14s-11-7-11-14z'/%3E%3Cpath d='M40 100h22v15H40z M44 100v-4a7 7 0 0114 0v4'/%3E%3Cpath d='M118 110l4 4 8-9'/%3E%3Ccircle cx='124' cy='112' r='12'/%3E%3Cpath d='M198 130c-7 0-12 4-12 9 0 3 2 5 4 7l-2 7 7-4c1 0 2 1 3 1 7 0 12-4 12-10s-5-10-12-10z'/%3E%3Cpath d='M28 160l8 4v10l-8 4-8-4v-10z'/%3E%3Cpath d='M90 168a10 10 0 1020 0 10 10 0 10-20 0z M100 158v-6'/%3E%3Cpath d='M160 178h20l-3 16h-14z M167 178c0-5 6-5 6 0'/%3E%3Cpath d='M210 196l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3Cpath d='M52 200c-5 0-9 3-9 7s4 7 9 7h4l5 5v-5c5-1 8-4 8-7 0-4-4-7-9-7z'/%3E%3Cpath d='M118 206l6 6 12-13'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  scroll-behavior: smooth;
}
#cp-msgs::-webkit-scrollbar { width: 7px; }
#cp-msgs::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .15);
  border-radius: 3px;
}

/* placeholder de "selecione uma conversa" */
.inbox-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  text-align: center;
  color: var(--wa-meta);
  font-size: 14px;
  font-family: 'Hanken Grotesk', sans-serif;
  gap: 8px;
}

/* ============================================================
   BOLHAS DE MENSAGEM: chat-kit re-skin (SP2c Task 1)
   Escopo: #cp-msgs (id comum às 3 telas: inbox, lead-detail, kanban)
   Fonte visual: templates/immersive/inbox.html .wa → #cp-msgs
   Regras decorativas do mock (fake .img/.vid/.audio-row) omitidas.
   ============================================================ */

/* ── SEPARADOR DE DIA ── */
#cp-msgs .date-wrap,
#cp-msgs .day-sep {
  display: flex;
  justify-content: center;
  margin: 8px 0 14px;
}

#cp-msgs .date-pill {
  background: #fff;
  color: #54656f;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 8px;
  text-transform: uppercase;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
  letter-spacing: .3px;
  font-family: 'Hanken Grotesk', sans-serif;
}

/* ── HISTÓRICO ANTERIOR (H2, histórico anterior no chat, v4.41.0) ──
   Mesmos tokens visuais da .date-pill acima (pílula branca, discreta), sem o
   uppercase (aqui o texto é uma frase, não um rótulo curto de dia). Sempre o
   PRIMEIRO filho de #cp-msgs: nunca ganha data-ts/data-id nem as classes
   row-msg/day-sep (ver renderBotaoAnteriores em lead-panel.js). */
#cp-msgs .cp-older {
  display: flex;
  justify-content: center;
  margin: 2px 0 14px;
}
#cp-msgs .cp-older-btn,
#cp-msgs .cp-older-end {
  background: #fff;
  color: #54656f;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 8px;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
  letter-spacing: .3px;
  font-family: 'Hanken Grotesk', sans-serif;
}
#cp-msgs .cp-older-btn {
  border: none;
  cursor: pointer;
}
#cp-msgs .cp-older-btn:hover:not(:disabled) { background: #f0f2f1; }
#cp-msgs .cp-older-btn:disabled { color: var(--wa-meta, #667781); cursor: default; }
/* .cp-older usa display:flex (ver acima): [hidden] sozinho perde para ele
   (mesma armadilha do .chat-reply-bar[hidden]/#gal-mais[hidden] deste
   arquivo), por isso a regra dedicada, mesmo sem uso hoje. */
#cp-msgs .cp-older[hidden] { display: none !important; }

/* ── WRAPPERS DAS BOLHAS ── */
#cp-msgs .row-msg {
  display: flex;
  margin-bottom: 8px;
}
#cp-msgs .row-msg.out { justify-content: flex-end; }

/* hooks do reconcile otimista (lead-panel.js injeta .bw-out/.bw-in direto) */
#cp-msgs .bw-out,
#cp-msgs .bw-in {
  display: flex;
  margin-bottom: 8px;
}
#cp-msgs .bw-out { justify-content: flex-end; }
#cp-msgs .bw-in  { justify-content: flex-start; }
#cp-msgs .bw-out.pending .bubble { opacity: .85; }
#cp-msgs .bubble.failed { box-shadow: inset 0 0 0 1px #D45B5B; }

/* ── BOLHA BASE ── */
#cp-msgs .bubble {
  position: relative;
  max-width: 65%;
  border-radius: 8px;
  padding: 6px 9px 7px 9px;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
  font-size: 14.2px;
  line-height: 1.32;
  color: var(--wa-name);
  word-wrap: break-word;
  font-family: 'Hanken Grotesk', sans-serif;
}
/* contém a hora flutuante (float:right): a bolha cresce p/ envolvê-la */
#cp-msgs .bubble::after { content: ""; display: block; clear: both; }

#cp-msgs .bubble.in { background: var(--wa-bubble-in); border-top-left-radius: 0; }
#cp-msgs .bubble.out { background: var(--wa-bubble-out); border-top-right-radius: 0; }

#cp-msgs .bubble.in::before {
  content: "";
  position: absolute;
  top: 0; left: -8px;
  width: 8px; height: 13px;
  background: var(--wa-bubble-in);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
#cp-msgs .bubble.out::before {
  content: "";
  position: absolute;
  top: 0; right: -8px;
  width: 8px; height: 13px;
  background: var(--wa-bubble-out);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ── CONTEÚDO DAS BOLHAS ── */
#cp-msgs .bubble p { margin: 0; }

/* ── HORA DA MENSAGEM: flui no fim da última linha, isolada à direita ──
   Estilo WhatsApp: com float:right a hora fica na mesma linha do texto
   quando há espaço (mensagem curta) e desce sozinha quando não cabe,
   nunca sobreposta ao texto ou à mídia. A bolha a envolve via ::after. */
#cp-msgs .bubble .meta,
#cp-msgs .bubble-time {
  float: right;
  margin: 4px 0 0 12px; /* respiro antes da hora + desce p/ alinhar ao rodapé */
  font-size: 11px;
  color: var(--wa-meta);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
  font-family: 'Hanken Grotesk', sans-serif;
  white-space: nowrap;
}

/* ── FONTE (multi-canal) ── */
#cp-msgs .bubble-source {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  color: #5b6b7a;
  background: rgba(11, 20, 26, .07);
  padding: 1px 6px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  letter-spacing: -.02em;
  vertical-align: middle;
  line-height: 1.5;
  margin-bottom: 3px;
}

/* ── TIPO DE MÍDIA (quando não há URL) ── */
#cp-msgs .bubble-type {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--wa-meta);
  font-style: italic;
  padding: 2px 0;
}

/* ── MÍDIA: bolha imagem/vídeo ── */
#cp-msgs .bubble.media { padding: 3px 3px 6px; max-width: 330px; }
#cp-msgs .ck-media-img { display: block; max-width: 100%; border-radius: 8px; cursor: zoom-in; }
#cp-msgs .ck-media-video { display: block; max-width: 320px; width: 100%; border-radius: 8px; }

/* ── MÍDIA: bolha áudio ── */
#cp-msgs .bubble.audio { padding: 8px 10px 8px; max-width: 330px; }
#cp-msgs .ck-media-audio { display: block; width: 280px; max-width: 100%; }

/* ── MÍDIA: estados de espera / sem texto ── */
#cp-msgs .ck-media-proc,
#cp-msgs .ck-media-nocap { color: var(--wa-meta, #667781); font-size: 13px; }

/* ── MÍDIA: áudio que o navegador não tocou ──
   lead-panel.js troca o <audio> por este aviso (Bloco 2 da Fase 19, D4).
   .bubble-type já dá o flex, o corpo e o espaçamento; aqui o aviso perde o
   itálico (é uma instrução, não um rótulo de tipo), usa a cor de texto da
   bolha (--wa-name, que passa de 4.5:1 nos dois fundos) e quebra linha em
   bolha estreita. O "Baixar" precisa de sublinhado e peso: o reset global
   `a{color:inherit;text-decoration:none}` do app.css o deixaria igual ao
   texto em volta, sem nada que o mostre como link. A cor é explícita
   (`inherit`) porque o `/m` NÃO carrega o app.css, e lá o link nasceria no
   azul padrão do navegador. */
#cp-msgs .ck-audio-erro { flex-wrap: wrap; font-style: normal; color: var(--wa-name); }
#cp-msgs .ck-audio-erro a { color: inherit; font-weight: 600; text-decoration: underline; }
/* N4 (revisão do bloco 2): no celular o "Baixar" é o único controle da bolha e,
   com uma linha de texto, tem uns 20 px de altura: pequeno para o dedo. Em
   ponteiro grosso (toque) a caixa do link passa a ter 44 px de altura, com o
   texto centralizado (a bolha já alinha ao centro), e um respiro lateral. No
   computador (ponteiro fino) nada muda: a regra acima é a única que vale. */
@media (pointer: coarse) {
  #cp-msgs .ck-audio-erro a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
}

/* ── DOCUMENTO ── */
#cp-msgs .bubble.doc { max-width: 300px; }
#cp-msgs .doc-card {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0, 0, 0, .04); border-radius: 8px;
  padding: 11px 12px; text-decoration: none;
}
#cp-msgs .doc-card .doc-ic {
  width: 38px; height: 46px; flex: 0 0 38px; border-radius: 5px;
  background: #fff; display: flex; align-items: center; justify-content: center;
  color: #d23f3f; box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  font-size: 22px;
}
#cp-msgs .doc-card .doc-info { min-width: 0; flex: 1; }
#cp-msgs .doc-card .doc-name {
  font-size: 13.5px; font-weight: 600; color: var(--wa-name);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
#cp-msgs .doc-card .doc-sub { font-size: 11.5px; color: var(--wa-meta); margin-top: 2px; display: block; }

/* ── CITAÇÃO (Bloco B, D5): bloco clicável, primeiro filho da bolha quando
   a mensagem responde outra. Cor da barra lateral segue quem MANDOU a
   mensagem CITADA (verde = você, azul = cliente), não a bolha atual. ── */
#cp-msgs .bubble-quote {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 4px;
  padding: 4px 8px;
  border: 0;
  border-left: 3px solid var(--wa-meta);
  border-radius: 6px;
  background: rgba(0, 0, 0, .06);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
#cp-msgs .bubble-quote--out { border-left-color: var(--wa-green-dark); }
#cp-msgs .bubble-quote--in { border-left-color: var(--azul); }
#cp-msgs .bubble-quote__who {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--wa-meta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* --wa-green-text (nao --wa-green-dark): medicao headless (task-7) mediu
   2.7:1 contra o fundo BRANCO da bolha de entrada. --wa-green-dark é
   destinado a borda/icone, nunca texto (ver o comentario da variavel no
   :root). */
#cp-msgs .bubble-quote--out .bubble-quote__who { color: var(--wa-green-text); }
#cp-msgs .bubble-quote--in .bubble-quote__who { color: var(--azul); }
#cp-msgs .bubble-quote__text {
  display: block;
  font-size: 13px;
  /* --wa-name (nao --wa-meta): medicao headless (task-7) mediu 3.67:1 (bolha
     verde) e 4.07:1 (bolha branca). O overlay rgba(0,0,0,.06) do bloco de
     citacao escurece o fundo o suficiente pra --wa-meta cair abaixo de 4.5:1
     nos dois. --wa-name mede 5.2+:1 nos dois. */
  color: var(--wa-name);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── RÓTULOS: editada / apagada (Bloco B, D9/D10) ──
   Cor: medicao headless (task-7) achou var(--wa-meta) (#667781) abaixo de
   4.5:1 contra o fundo VERDE da bolha de saida (mediu 4.19:1 em .bubble-edited
   e em em.bubble-revoked, e ainda mais baixo, 3.67:1, dentro do bloco de
   citacao, ver mais abaixo); var(--wa-name), ja usada em rotulo legivel sobre
   bolha (.doc-card .doc-name), mede 5.8-7:1 nos mesmos fundos. Trocada nos
   tres rotulos (span.bubble-revoked so aparece em bolha 'in'/branca, onde
   --wa-meta ja passava por pouco, 4.65:1, mas ganha a MESMA cor pela
   consistencia visual com em.bubble-revoked e a mesma margem de folga). */
#cp-msgs .bubble-edited {
  display: inline-block;
  margin: 0 4px 0 0;
  /* position:relative + top (NÃO margin-top): medido que margin-top num
     inline-block alinhado por baseline não desloca o topo visível (a
     alteração ficou sem efeito, medição headless task-7); top com position
     relative desloca de fato. #cp-msgs .bubble-time (linha ~706) é
     float:right com margin-top:4px e por isso não fica exatamente alinhada
     com um inline comum na mesma linha; o deslocamento medido MUDA com o
     número de linhas do texto embrulhado (1 linha no desktop 1440px, até 3
     no mobile 390px, bolha mais estreita): 3px é o valor que fecha os dois
     dentro da tolerância de 2px do brief nos DOIS tamanhos medidos (desktop:
     diferença de 2px; mobile, texto em 3 linhas: diferença de 2px; era 5px
     e 3px antes, com 0px e 4px também testados e nenhum dos dois fechava as
     duas pontas ao mesmo tempo). */
  position: relative;
  top: 3px;
  font-size: 11px;
  font-style: italic;
  color: var(--wa-name);
  cursor: pointer;
}
#cp-msgs .bubble-edited:hover { text-decoration: underline; }

/* ── RÓTULO: mensagem automática (Bloco C, C2.3) ──
   Mesma família do .bubble-edited acima (11px, itálico, posicionamento por
   top:3px para alinhar com .bubble-time), mas var(--wa-name) e não
   var(--wa-meta): este selo só aparece do lado de SAÍDA (author_type=
   'auto_reply' é sempre uma mensagem NOSSA, nunca do lead), o MESMO fundo
   verde que o comentário de .bubble-edited, duas dezenas de linhas acima,
   já mediu para --wa-meta (4.19:1, reprovado) e para --wa-name (15.75:1,
   aprovado, medição headless da C2.4): não é um valor novo a medir, é o
   mesmo par cor/fundo. Sem
   cursor:pointer nem :hover: ao contrário de "(editada)", este selo não
   abre nada ao clicar. */
#cp-msgs .bubble-auto {
  display: inline-block;
  margin: 0 4px 0 0;
  position: relative;
  top: 3px;
  font-size: 11px;
  font-style: italic;
  color: var(--wa-name);
}
#cp-msgs em.bubble-revoked {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  color: var(--wa-name);
  font-style: italic;
  font-size: 13.5px;
}
#cp-msgs span.bubble-revoked {
  display: block;
  font-size: 11.5px;
  font-style: italic;
  color: var(--wa-name);
}
/* A bolha inteira baixa opacidade quando o CLIENTE apagou. :has() cobre tanto
   a bolha nascida assim (SSR) quanto a repintada no poll (aplicarMutacao):
   nenhum dos dois caminhos precisa lembrar de tocar numa classe em .bubble. */
#cp-msgs .bubble:has(.bubble-revoked--lead) { opacity: .75; }

/* ── ALÇA DO MENU (Bloco B, D2): canto superior direito da bolha, só em
   hover/focus (o toque longo faz o papel dela no toque, item 21). opacity/
   pointer-events (não display) para continuar alcançável por Tab. ── */
#cp-msgs .bubble-menu-btn {
  position: absolute;
  top: 1px;
  right: 3px;
  /* 24x24: medicao headless (task-7) pedia caixa >= 24x24 no desktop; 22x22
     media abaixo disso. top/right recuados 1px para a caixa maior continuar
     no mesmo canto visual (nao cresce para fora da bolha). */
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  color: var(--wa-icon);
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s, background .12s;
}
#cp-msgs .bubble:hover .bubble-menu-btn,
#cp-msgs .bubble:focus-within .bubble-menu-btn {
  opacity: 1;
  pointer-events: auto;
}
#cp-msgs .bubble-menu-btn:hover { background: rgba(255, 255, 255, .9); }
#cp-msgs .row-msg.pending .bubble-menu-btn,
#cp-msgs .row-msg[data-revoked="operator"] .bubble-menu-btn {
  display: none;
}
@media (hover: none) {
  /* Sem ponteiro de passar por cima: a alça nunca aparece; o toque longo
     abre o mesmo menu (m.css + lead-panel.js). */
  #cp-msgs .bubble-menu-btn { display: none; }
}

/* ============================================================
   COMPOSER: #chat-composer · #chat-window-bar · #chat-rec
   ============================================================ */

/* barra de janela 24h */
.chat-window-bar {
  padding: 5px 16px;
  background: #fff;
  border-top: 1px solid var(--wa-divider);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #157a52;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* composer principal */
/* Altura mínima, cresce para cima; o max-height do #chat-input clampa. */
.chat-composer {
  min-height: 62px;
  flex-shrink: 0;
  background: var(--wa-header);
  border-top: 1px solid var(--wa-divider);
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 10px 12px;
  position: relative;
}

/* popover de respostas rápidas */
.chat-qr-pop {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  z-index: 75;
  width: 330px;
  max-height: 300px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: 0 22px 50px -16px rgba(20, 33, 61, .4);
  padding: 6px;
}

/*
 * ⚠️ Os itens do popover nasceram SEM FOLHA NENHUMA: o atalho e o texto sao
 * dois `<span>` sem estilo, entao apareciam colados um no outro
 * ("/bemvindoSeja bem vindo a..."), e o ✕ de excluir ficava no meio da frase.
 * A caixa tinha borda e sombra, o conteudo nao tinha nada.
 *
 * O desenho e o mesmo da gaveta do `/m`: o atalho em cima, o comeco da
 * mensagem embaixo, e a exclusao fora do caminho da leitura.
 */
.chat-qr-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.chat-qr-item:hover { background: var(--surface-2, #F7F9FC); }
.chat-qr-sc {
  grid-column: 1;
  font-family: var(--ff-mono), monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--azul);
}
.chat-qr-body {
  grid-column: 1; grid-row: 2;
  font-size: 13px;
  color: var(--muted);
  /* So o comeco: o popover e para ESCOLHER, nao para ler a mensagem inteira. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-qr-del {
  grid-column: 2; grid-row: 1 / 3;
  width: 26px; height: 26px;
  border: 0; border-radius: 50%;
  background: none;
  color: var(--faint);
  font-size: 13px;
  cursor: pointer;
  opacity: 0;
  transition: .12s;
}
/* A exclusao so aparece no item sob o cursor: e uma acao destrutiva ao lado
   de uma lista que se percorre com o olho. */
.chat-qr-item:hover .chat-qr-del { opacity: 1; }
/* Sem ponteiro de passar por cima (celular, tablet) nao existe `:hover`: o ✕ ficava
   invisivel E tocavel, e um toque na borda do item apagava a resposta. Visivel no toque
   (L1.7); quem protege o toque acidental e a pergunta antes de excluir (lead-panel.js). */
@media (hover: none) {
  .chat-qr-del { opacity: 1; }
}
.chat-qr-del:hover { background: var(--red-bg, #FDF1F1); color: var(--red, #D45B5B); }
.chat-qr-empty {
  padding: 16px 10px;
  text-align: center;
  font-size: 13px;
  color: var(--faint);
}
.chat-qr-add {
  border-top: 1px solid var(--hair);
  margin-top: 4px;
  padding: 8px 6px 4px;
  display: grid;
  gap: 8px;
}
.chat-qr-add .input { width: 100%; }

/*
 * popover de emoji (Bloco A, A4). Mesmo desenho do .chat-qr-pop acima
 * (posicao, fundo, borda, sombra e raio identicos); largura e altura
 * proprias porque a grade de emojis precisa de mais espaco que a lista de
 * respostas rapidas. flex-direction: column mantem a busca e a fila de
 * categorias fixas no topo enquanto so a grade rola.
 */
.chat-emoji-pop {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  z-index: 75;
  width: 340px;
  max-height: 340px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: 0 22px 50px -16px rgba(20, 33, 61, .4);
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.chat-emoji-busca {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 6px 10px;
  margin-bottom: 6px;
  flex: 0 0 auto;
}
.chat-emoji-cats {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  flex: 0 0 auto;
  margin-bottom: 4px;
}
.chat-emoji-cat {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
}
.chat-emoji-cat.is-on { background: var(--surface-2, #F7F9FC); }
#chat-emoji-grid {
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 6px;
  flex: 1 1 auto;
}
.chat-emoji-item {
  border: 0;
  background: transparent;
  width: 36px;
  height: 36px;
  font-size: 22px;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  border-radius: 6px;
  cursor: pointer;
}
.chat-emoji-item:hover { background: var(--surface-2, #F7F9FC); }
.chat-emoji-titulo {
  grid-column: 1 / -1;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--faint);
  padding: 4px 2px 2px;
}
.chat-emoji-vazio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 16px 10px;
  font-size: 13px;
  color: var(--wa-meta);
}

/* botões de ação do composer. .chat-reply-bar soma o mesmo escopo: o botão de
   cancelar citação (#chat-reply-close, Bloco B) mora FORA de #chat-composer
   (item 25), então herda por escopo somado em vez de duplicar as 5 regras. */
.chat-composer .wa-ic,
.chat-reply-bar .wa-ic {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wa-icon);
  cursor: pointer;
  transition: .14s;
  flex-shrink: 0;
  padding: 0;
}
.chat-composer .wa-ic:hover,
.chat-reply-bar .wa-ic:hover { background: rgba(0, 0, 0, .05); color: var(--wa-name); }
.chat-composer .wa-ic svg { width: 24px; height: 24px; }

/* pill do input de texto */
.chat-composer .compose-input {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  min-height: 42px;
}

/* textarea dentro do pill */
#chat-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 15px;
  color: var(--wa-name);
  line-height: 1.4;
  max-height: 168px;
  overflow-y: auto;
  box-shadow: none;
}
/* Piso de toque (bloco 3): o #id vence o piso genérico do app.css. No /m o
   `.m-conversa__composer #chat-input` (m.css) já dá 16px; isto cobre o /app
   aberto no tablet ou no celular. */
@media (pointer: coarse) { #chat-input { font-size: 16px; } }
#chat-input::placeholder { color: var(--wa-meta); }

/* botão enviar */
#chat-send {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--azul);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -6px rgba(47, 80, 150, .6);
  transition: .14s;
  padding: 0;
}
#chat-send svg { width: 18px; height: 18px; }
#chat-send:hover { background: var(--azul-deep); }

/* composer somente-leitura (Consultor sem messages.send, B2 T3, D9): reaproveita
   o padrão opacity+not-allowed já usado em .btn:disabled/.input:disabled/
   .fu-seg__opt:disabled (app.css/chat-kit.css): nada de visual novo. */
.chat-composer .wa-ic:disabled { opacity: .4; cursor: not-allowed; }
.chat-composer .wa-ic:disabled:hover { background: transparent; color: var(--wa-icon); }
#chat-send:disabled { opacity: .45; cursor: not-allowed; }
#chat-send:disabled:hover { background: var(--azul); }
#chat-input:disabled { opacity: .6; cursor: not-allowed; }

/* barra de gravação de áudio */
.chat-rec {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 12px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: #FBF2F2;
  animation: recIn .18s ease;
}
@keyframes recIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.chat-rec-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  animation: recPulse 1.1s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(212, 91, 91, .5);
}
@keyframes recPulse {
  0%   { box-shadow: 0 0 0 0 rgba(212, 91, 91, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(212, 91, 91, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 91, 91, 0); }
}

.chat-rec-label {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #B5302E;
  flex: 1;
}

#chat-rec-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: #B5302E;
  min-width: 34px;
}

.chat-rec-cancel {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 0;
  background: none;
  color: var(--faint);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .14s;
  padding: 0;
}
.chat-rec-cancel svg { width: 18px; height: 18px; }
.chat-rec-cancel:hover { background: #fff; color: #B5302E; }

.chat-rec-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--azul);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -6px rgba(47, 80, 150, .6);
  transition: .14s;
  padding: 0;
}
.chat-rec-send svg { width: 18px; height: 18px; }
.chat-rec-send:hover { background: var(--azul-deep); }

/* estado desabilitado */
.chat-composer-disabled {
  padding: 11px 16px;
  background: var(--wa-header);
  border-top: 1px solid var(--wa-divider);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  /* var(--wa-meta) (#667781) contra var(--wa-header) (#f0f2f5) mede 4.14:1,
     abaixo do mínimo de 4.5:1 (WCAG AA, texto normal; medido via getComputedStyle
     real em Chrome headless, Task 4 do B2). var(--wa-icon) (#54656f), mesma
     família de cinza mais escura, mede 5.40:1, usada aqui em vez de um tom
     literal novo. Afeta as duas razões que passam por esta classe (banner
     read-only #chat-composer-readonly da Task 3 e o #chat-composer-disabled
     pré-existente da janela 24h): mesmo texto, mesmo problema de contraste. */
  color: var(--wa-icon);
  text-align: center;
  min-height: 52px;
  flex-shrink: 0;
}

/* linha discreta "Responsável: <nome>" (B3 T8): NÃO bloqueia o composer
   (lead já tem responsável); por isso não reaproveita .chat-composer-disabled
   (que é sempre um estado de bloqueio/aviso): fundo neutro, texto pequeno. */
.chat-assign-line {
  padding: 7px 16px;
  background: var(--wa-header);
  border-top: 1px solid var(--wa-divider);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12.5px;
  color: var(--wa-icon);
  flex-shrink: 0;
  /* Fase 19/bloco 5: ancora do popover do Transferir; e, em tela estreita, os
     dois botoes passam para a linha de baixo em vez de estourar a largura. */
  position: relative;
  flex-wrap: wrap;
}
.chat-assign-line b { color: var(--wa-name); font-weight: 700; }
.chat-assign-line #chat-release-btn,
.chat-assign-line #chat-transfer-btn {
  padding: 4px 12px;
  font-size: 12px;
}
/* Popover do Transferir (Fase 19/bloco 5, D6): abre PARA CIMA, porque a linha
   mora colada no composer, no pe da tela. A mecanica de abrir/fechar e a de
   todo `.ck-pop` (chat-kit.css: `.open` mostra); aqui so o lugar, o teto de
   altura (lista longa rola) e o deslize no sentido certo. */
.chat-transfer-pop {
  bottom: calc(100% + 6px);
  /* O canto padrao; o motor alinha pelo botao a cada abertura (a linha centraliza). */
  left: 12px;
  min-width: 240px;
  max-width: calc(100% - 24px);
  max-height: min(50vh, 320px);
  overflow-y: auto;
  transform: translateY(6px);
}
.chat-transfer-pop.open { transform: none; }
.chat-transfer-pop .ck-empty { padding: 10px 12px; font-size: 12.5px; }
/* Em tela de toque (o /m, o tablet e a "versao completa" no celular) cada destino
   e um alvo de toque de 44 px, como os outros botoes da tela (bloco 3). */
@media (pointer: coarse) {
  .chat-transfer-pop .ck-item,
  #crm-assign-pop .ck-item { min-height: 44px; }
}

/* ── Bloco B (D5): barra de citação do composer. Mesma barra lateral
   colorida do bloco de citação (verde/azul conforme quem escreveu a
   mensagem citada); [hidden]!important porque um dia sem ela (a mesma
   armadilha do popover: classe com display escondida por [hidden] sozinho
   não colapsa) deixaria a barra flutuando sobre o composer vazio. ── */
.chat-reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--wa-header);
  border-top: 1px solid var(--wa-divider);
  border-left: 4px solid var(--wa-green-dark);
  flex-shrink: 0;
}
.chat-reply-bar[hidden] { display: none !important; }
.chat-reply-bar--in { border-left-color: var(--azul); }
.chat-reply-bar__body { flex: 1; min-width: 0; }
.chat-reply-bar__who {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  /* --wa-green-text (nao --wa-green-dark): medicao headless (task-7) mediu
     2.76:1 contra var(--wa-header), mesma razao do bubble-quote__who. Ver o
     comentario da variavel no :root. */
  color: var(--wa-green-text);
}
.chat-reply-bar--in .chat-reply-bar__who { color: var(--azul); }
.chat-reply-bar__text {
  display: block;
  font-size: 13px;
  /* --wa-icon (nao --wa-meta): mesmo precedente do #chat-composer-disabled
     acima (Task 4 do B2): var(--wa-meta) contra var(--wa-header) mede
     4.14:1, abaixo do minimo; var(--wa-icon) mede 5.40:1. */
  color: var(--wa-icon);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* #chat-reply-close usa a MESMA folha de ícone do composer (.wa-ic), mas
   mora FORA de #chat-composer (item 25: precisa estar antes dele, no mesmo
   bloco). Por isso o seletor de baixo soma este escopo aos 5 já existentes,
   em vez de duplicar as regras. */
#chat-reply-close {
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
}

/* ── Bloco 4 da Fase 19: arrastar e colar para anexar ──
   Duas peças do parcial do composer: o véu "Solte para anexar" e o aviso dos
   anexos que não saíram. Seção própria, junto do composer, para o merge com as
   outras folhas do bloco ficar limpo.

   O véu cobre o PAINEL da conversa (o pai do parcial: .right no Atendimento,
   .cp-chat no detalhe do lead e no modal do Kanban, os dois position:relative)
   enquanto um arquivo é arrastado sobre ele. É puramente visual:
   pointer-events:none, para nunca virar alvo do arraste (os eventos seguem
   chegando aos elementos de baixo e sobem até o painel, que decide). Mesma
   família das outras camadas do produto (.ck-ov, .dmw-lightbox): fundo navy
   translúcido com desfoque, caixa tracejada branca com o ícone em dourado,
   título no display do Immersive. O navy a .68 (e não .6) é medido: o texto
   branco sobre a faixa do Atendimento dava 4,39:1 a .6, abaixo do 4,5:1 do
   texto pequeno do estado bloqueado; a .68 mede 5,28:1 no título e 5,60:1 no
   motivo. z-index 90: acima dos popovers do composer (75), abaixo das
   janelas (140 em diante). [hidden] com !important pelo mesmo motivo do
   .chat-reply-bar: display:flex numa classe vence o atributo sozinho. ── */
.chat-dropveil {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 33, 61, .68);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;
  animation: dropveilIn .14s ease;
}
.chat-dropveil[hidden] { display: none !important; }
@keyframes dropveilIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.chat-dropveil__caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(100%, 420px);
  padding: 34px 28px;
  border: 2px dashed rgba(255, 255, 255, .78);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  text-align: center;
}
.chat-dropveil__ic {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  color: var(--gold-bright);
}
.chat-dropveil__ic--bloq { display: none; }
.chat-dropveil__titulo {
  font-family: var(--ff-display), 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
/* Não dá para anexar agora: o mesmo véu diz o motivo (o título vira o texto de
   bloqueio que a tela já tem). Borda cheia e sem o dourado: nada a soltar. */
.chat-dropveil.is-bloqueado .chat-dropveil__caixa {
  border-style: solid;
  border-color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .05);
}
.chat-dropveil.is-bloqueado .chat-dropveil__ic--ok { display: none; }
.chat-dropveil.is-bloqueado .chat-dropveil__ic--bloq { display: block; color: rgba(255, 255, 255, .85); }
.chat-dropveil.is-bloqueado .chat-dropveil__titulo { font-size: 17px; font-weight: 500; }

/* O aviso dos anexos que não saíram: uma barra em fluxo, logo acima do
   composer (o desenho do .chat-reply-bar, com a barra lateral âmbar do aviso
   em vez do verde da citação). Fica em fluxo, e não flutuando, para nunca
   cobrir a conversa nem o campo. Texto em var(--wa-icon) (5,6:1 sobre o fundo
   âmbar claro), pelo mesmo critério de contraste do #chat-composer-disabled. */
.chat-anexo-aviso {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 8px 8px 12px;
  background: #FFF6E0;
  border-top: 1px solid var(--wa-divider);
  border-left: 4px solid var(--aviso, #F5A623);
  flex-shrink: 0;
}
.chat-anexo-aviso[hidden] { display: none !important; }
.chat-anexo-aviso__corpo { flex: 1; min-width: 0; }
.chat-anexo-aviso__titulo {
  display: block;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.chat-anexo-aviso__lista {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 120px;
  overflow-y: auto;
}
.chat-anexo-aviso__lista:empty { display: none; }
.chat-anexo-aviso__lista li {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--wa-icon);
  overflow-wrap: anywhere;
}
.chat-anexo-aviso__x {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wa-icon);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: .14s;
  padding: 0;
}
.chat-anexo-aviso__x:hover { background: rgba(0, 0, 0, .06); color: var(--wa-name); }
@media (pointer: coarse) {
  .chat-anexo-aviso__x { min-width: 44px; min-height: 44px; }
}
/* No /m a pilha do composer (.m-conversa__composer, m.css) tem `order`
   explícito por faixa, e um filho sem `order` nasce em 0, no TOPO, acima da
   barra de janela e do banner (o mesmo vazamento que a barra de citação teve,
   ver m.css). O 5 empata com .m-acoes e .chat-reply-bar e o DOM desempata: o
   aviso fica logo acima do campo, como no computador. Escopado em
   .m-conversa__composer porque no computador o pai é um flex column SEM
   `order`, e um 5 ali jogaria o aviso para baixo do composer. */
.m-conversa__composer .chat-anexo-aviso { order: 5; }

/* Confirmar o print colado (rodada de correção 1 do bloco 4): colar SÓ uma
   imagem abre a janela "Enviar a imagem colada?". A casca é a .ck-modal-ov /
   .ck-modal do chat-kit (a mesma de "Editar mensagem", universal nas 4 telas,
   inclusive o /m); aqui só o conteúdo: o contato, as miniaturas, a legenda do
   campo e o aviso do teto. Uma imagem só aparece inteira (para conferir o que
   vai sair); várias, em grade de miniaturas. O texto é sempre textContent, e as
   miniaturas são blob: liberados ao fechar. [hidden] com !important nas linhas
   opcionais: a regra de display delas venceria o atributo sozinho. */
.chat-paste__para {
  margin: 0;
  font-size: 13.5px;
  color: var(--ck-ink);
  overflow-wrap: anywhere;
}
/* 288 px = três fileiras de 88 px e as duas folgas: as 10 miniaturas do teto
   (4 por fileira na janela de 430 px) cabem sem rolar. Com 260 a terceira
   fileira saía cortada pela metade (visto no Chrome). Passando disso, rola. */
.chat-paste__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 288px;
  overflow-y: auto;
}
.chat-paste__thumb {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border: 1px solid var(--ck-hair);
  border-radius: 10px;
  background: #F1F3F7;
}
.chat-paste__thumbs.is-unica .chat-paste__thumb {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
}
.chat-paste__legenda {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ck-muted);
  overflow-wrap: anywhere;
}
.chat-paste__aviso {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ck-amber-ink);
}
/* O corpo da janela (.ck-modal, bloco 3) é coluna com altura limitada e rola: os filhos não encolhem,
   senão a miniatura e a legenda saem cortadas em tela baixa em vez de o corpo rolar. */
.chat-paste__para,
.chat-paste__thumbs,
.chat-paste__legenda,
.chat-paste__aviso { flex: none; }
.chat-paste__legenda[hidden],
.chat-paste__aviso[hidden] { display: none !important; }
/* No celular os dois botoes da janela ganham a area de toque de 44 px (o /m
   recebe esta janela: o colar e o unico dos anexos que ele ganhou). */
@media (pointer: coarse) {
  #chat-paste-modal .ck-btn { min-height: 44px; }
}

/* ── Bloco B (D2/D6/D7/D8/D9/D13): menu por bolha, editar, revisões.
   #msg-menu/#msg-revisions herdam de .ck-pop (chat-kit.css) o open-by-class
   com opacity/visibility, universal nas 4 telas, inclusive /m (que não
   carrega app.css/pages.css). Aqui só o que .ck-pop não cobre: fixar no
   VIEWPORT (não dentro de um ancestral que o poll troca de innerHTML, como
   #cp-msgs) e o conteúdo específico de cada um. #chat-edit-modal herda de
   .ck-modal-ov/.ck-modal pelo mesmo motivo. */
#msg-menu,
#msg-revisions {
  position: fixed;
}
#msg-revisions {
  max-width: 320px;
  max-height: 320px;
  overflow-y: auto;
}
.msg-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  background: none;
  border-radius: 9px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.msg-menu-item:hover { background: var(--surface-2); }
.msg-menu-item[hidden] { display: none !important; }
/* --wa-red-text (nao --red): medicao headless (task-7, folha inferior do
   celular) mediu var(--red) (#D45B5B) contra o fundo branco de .ck-pop em
   3.86:1, abaixo do minimo de 4.5:1. --wa-red-text e a MESMA identidade
   (vermelho de "apagar"), escurecida so o suficiente pra ler: 5.9:1 medido. */
.msg-menu-item--danger { color: var(--wa-red-text); }
.msg-menu-item--danger:hover { background: #FDF1F1; }
.msg-menu-reason {
  margin-top: 4px;
  padding: 8px 12px 4px;
  border-top: 1px solid var(--hair);
  font-size: 12px;
  line-height: 1.4;
  color: var(--faint);
}
.msg-menu-reason[hidden] { display: none !important; }

/* #chat-edit-modal: só o textarea/dica; título e botões já vêm de
   .ck-modal__hd/.ck-modal__ft/.ck-btn (chat-kit.css). */
#chat-edit-input { min-height: 90px; }
.chat-edit-hint { margin: 8px 0 0; font-size: 12px; color: var(--faint); }

/* #msg-revisions: lista de revisões (mais recente primeiro, ordem do servidor). */
.msg-revisions-list { list-style: none; margin: 0; padding: 4px; display: flex; flex-direction: column; gap: 8px; }
.msg-revisions-list li { font-size: 12.5px; color: var(--ink); border-bottom: 1px solid var(--hair); padding-bottom: 8px; }
.msg-revisions-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.msg-revisions-list time { display: block; font-size: 11px; font-weight: 700; color: var(--faint); margin-bottom: 2px; }
.msg-revisions-empty { padding: 14px 12px; font-size: 12.5px; color: var(--faint); text-align: center; }

/* ============================================================
   COLUNA CENTRAL (.cp-center): funil / origem / follow-ups
   ============================================================ */
.cp-center {
  width: 25%;
  min-width: 240px;
  max-width: 340px;
  background: var(--surface);
  border-left: 1px solid var(--wa-divider);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}

.cp-center::-webkit-scrollbar { width: 5px; }
.cp-center::-webkit-scrollbar-thumb {
  background: var(--hair);
  border-radius: 3px;
}

/* ── SEÇÕES ── */
.cp-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--hair-2);
}

.cp-section-hd {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* seção que cresce e rola por dentro (follow-ups) */
.cp-section-grow {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-bottom: none;
  padding-bottom: 0;
}

.cp-section-grow > * { flex-shrink: 0; }

/* ── SELECT DE ESTÁGIO ── */
#modal-stage-select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--surface-2);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  outline: none;
  transition: .14s;
  appearance: auto;
}
/* Piso de toque (bloco 3): o #id vence o piso genérico do app.css. O select é
   escondido (o stepper da etapa projeta nele), mas continua sendo um campo. */
@media (pointer: coarse) { #modal-stage-select { font-size: 16px; } }
#modal-stage-select:focus {
  border-color: var(--azul);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47, 80, 150, .12);
}

/* ── ETIQUETAS ── */
.tags-current {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
  margin-bottom: 6px;
}

.tags-add-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.tags-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 11px;
  border: 1px dashed var(--hair);
  border-radius: 30px;
  background: none;
  color: var(--faint);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Hanken Grotesk', sans-serif;
  transition: .14s;
}
.tags-add-btn:hover {
  border-color: var(--azul);
  color: var(--azul);
}

.tags-pop {
  position: absolute;
  top: 32px;
  left: 0;
  z-index: 70;
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: 0 18px 44px -14px rgba(20, 33, 61, .35);
  padding: 6px;
}

/* ── ORIGEM ── */
#origem-info {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* ── FOLLOW-UPS ── */
#task-details {
  flex-shrink: 0;
  margin-bottom: 8px;
}

#task-details > summary.task-trigger {
  font-size: 13px;
  font-weight: 600;
  color: var(--azul);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 0;
  user-select: none;
}
#task-details > summary.task-trigger::-webkit-details-marker { display: none; }
#task-details > summary.task-trigger::marker { display: none; }
#task-details > summary.task-trigger:hover { color: var(--azul-deep); }

.task-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0 4px;
}

.task-row {
  display: flex;
  gap: 8px;
}

.task-form .input,
.task-form .input-sm {
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid var(--hair);
  background: var(--surface-2);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12.5px;
  color: var(--ink);
  outline: none;
  transition: .14s;
}
.task-form .input:focus,
.task-form .input-sm:focus {
  border-color: var(--azul);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47, 80, 150, .12);
}

.cp-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0 16px;
}
.cp-scroll::-webkit-scrollbar { width: 4px; }
.cp-scroll::-webkit-scrollbar-thumb {
  background: var(--hair);
  border-radius: 2px;
}

#tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── BOTÕES PADRÃO ── */
.btn-sm {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: 9px;
}

/* ============================================================
   COLUNA HISTÓRICO (.cp-hist)
   ============================================================ */
.cp-hist {
  width: 25%;
  min-width: 220px;
  max-width: 320px;
  background: var(--surface-2);
  border-left: 1px solid var(--hair-2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

/* ── NOTAS INTERNAS ── */
.note-form {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.note-form .input,
.note-form .input-sm {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12.5px;
  background: #FFFDF8;
  color: var(--ink);
  resize: vertical;
  min-height: 58px;
  outline: none;
  transition: .14s;
}
.note-form .input:focus,
.note-form .input-sm:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 168, 92, .18);
}

.notes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

/* ── SEPARADOR DE SEÇÃO "HISTÓRICO" ── */
.cp-hist-hd {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 14px 16px 6px;
  border-top: 1px solid var(--hair-2);
  flex-shrink: 0;
}

.cp-hist-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0 16px;
}
.cp-hist-list::-webkit-scrollbar { width: 4px; }
.cp-hist-list::-webkit-scrollbar-thumb {
  background: var(--hair);
  border-radius: 2px;
}

/* cp-hist tem scroll próprio no wrapper */
.cp-hist {
  overflow-y: auto;
}
.cp-hist::-webkit-scrollbar { width: 5px; }
.cp-hist::-webkit-scrollbar-thumb {
  background: var(--hair);
  border-radius: 3px;
}

/* seções dentro do histórico */
.cp-hist .cp-section {
  border-bottom: 1px solid var(--hair-2);
  padding: 14px 16px;
}

/* ============================================================
   CLASSES DE SUPORTE (botões genéricos injetados pelo JS)
   ============================================================ */

/* input-sm sem o padding enorme do .input padrão */
.input-sm {
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 9px;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1180px) {
  .inbox-list {
    min-width: 280px;
    max-width: 360px;
  }
  .cp-center,
  .cp-hist {
    min-width: 200px;
  }
}

@media (max-width: 920px) {
  .cp-hist { display: none; }
  .cp-center { width: 33%; }
}

@media (max-width: 720px) {
  .inbox-list {
    width: 100%;
    max-width: none;
  }
  .cp-chat,
  .cp-center {
    display: none;
  }
  /* quando uma conversa estiver selecionada, JS pode toggle */
}

/* ============================================================
   OVERRIDES DE SHELL PARA PÁGINA INBOX (full-height, sem padding)
   ============================================================ */

/* A página de inbox usa toda a altura disponível sob o nav */
.page:has(.inbox-page),
.page:has(.inbox) {
  padding: 0;
  max-width: none;
}

/* inbox-page: o wrapper main-content ocupa altura total */
.main-content.inbox-page {
  padding: 0;
  margin: 0;
  max-width: none;
  height: calc(100vh - var(--nav-h));
  /* rola na horizontal quando a viewport é menor que o min-width do painel
     (.wa-frame), preservando o tamanho mínimo da tela em vez de esmagar o chat;
     vertical fica travado (o painel preenche exatamente a altura). */
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

/* Fallback sem :has para browsers mais antigos */
.page:has(.inbox) {
  padding-bottom: 0;
}

/* ============================================================
   EYEBROW SUPERIOR OPCIONAL (WA-style label sobre o painel)
   ============================================================ */
.inbox-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 10px 22px 6px;
  background: var(--bg);
  flex-shrink: 0;
}
.inbox-eyebrow svg { width: 14px; height: 14px; color: var(--gold); }
.inbox-eyebrow .sep { opacity: .45; }
.inbox-eyebrow b { color: var(--azul-deep); font-weight: 700; }

/* ============================================================
   MODAL: inputs/selects dentro do contexto do chat
   ============================================================ */
.modal-ov {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(18, 24, 42, .42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-box {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 40px 90px -28px rgba(20, 33, 61, .5);
  overflow: hidden;
  width: 100%;
}

.modal-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hair-2);
}

.modal-title {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.modal-close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: var(--faint);
  border-radius: 9px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
}
.modal-close:hover { background: #F1F3F7; color: var(--ink); }

.modal-body {
  padding: 18px;
}

.modal-ft {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--hair-2);
}

/* Teclado do iPhone (pendências L5.1): as janelas antigas (.modal-ov/.modal-box) seguem
   o viewport VISUAL como as .ck-modal (chat-kit.css, no fim do arquivo, tem a explicação
   inteira e a armadilha do var() inválido). O fundo de TODA .modal-ov acompanha a faixa
   visível, e o "Registrar Venda" (#purchase-modal, o único desta família com campo e sem
   teto próprio) vira coluna com teto dentro dela: só o corpo rola. Fora daqui ficam as
   que não têm campo de texto (#window-warn-modal, #confirm-modal, #lost-modal,
   #bussola-modal): o fundo delas acompanha, a caixa é curta e não precisa de teto. SÓ em
   pointer: coarse e SÓ com dvh; a reserva de cada var() vale sozinha. */
@media (pointer: coarse) {
  @supports (height: 100dvh) {
    .modal-ov { box-sizing: border-box; top: var(--vv-top, 0px); bottom: auto; height: var(--vv-h, 100%); }
    #purchase-modal .modal-box { display: flex; flex-direction: column; max-height: calc(var(--vv-h, 100dvh) - 40px); }
    #purchase-modal .modal-hd, #purchase-modal .modal-ft { flex: none; }
    #purchase-modal .modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  }
}

/* ============================================================
   LIGHTBOX DE IMAGEM (estilo WhatsApp): clique amplia a imagem
   sobre fundo escuro/embaçado. Markup criado por DMW.lightbox
   (ui-immersive.js); fecha por ✕, clique no fundo ou Esc.

   Fase 19, bloco 3 (o MESMO visor serve o /app e o /m):
   - CAMADAS: o ✕, as setas e a barra de zoom têm z-index explícito (3), acima
     da foto (1). A foto sempre carrega `transform` (a escala), e um elemento
     com transform é pintado POR CIMA de um irmão posicionado sem z-index: era
     isso que enterrava o ✕ sob uma foto alta (todo print de iPhone).
   - TAMANHO: a foto cabe na ÁREA VISÍVEL (dvh, descontada a área segura), e
     não nos 92vh de antes (no Safari o vh é maior que a área visível).
   - TOQUE: o palco é a tela inteira com `touch-action: none`; a pinça, o
     arrastar e o toque duplo são do JS (Pointer Events), e a pinça deixa de
     ampliar a PÁGINA.
   ============================================================ */
.dmw-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500; /* acima das demais modais (warn=420, confirm=440) */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 16px de respiro em volta da foto, SOMADOS à área segura do aparelho (o
     entalhe e a barra de gestos): é a área em que a foto cabe e se centraliza. */
  padding:
    calc(env(safe-area-inset-top) + 16px)
    calc(env(safe-area-inset-right) + 16px)
    calc(env(safe-area-inset-bottom) + 16px)
    calc(env(safe-area-inset-left) + 16px);
  background: rgba(10, 14, 24, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
  cursor: zoom-out;
  /* A foto ampliada passa da tela: sem isto ela vira área rolável. */
  overflow: hidden;
  /* O gesto de dois dedos é da FOTO (ui-immersive.js), não da página: sem isto
     a pinça vira zoom nativo e leva o ✕, as setas e a barra para fora da tela. */
  touch-action: none;
}
.dmw-lightbox.open { opacity: 1; visibility: visible; }

.dmw-lightbox__img {
  /* Camada da foto (1): abaixo do ✕, das setas e da barra de zoom (3). */
  position: relative;
  z-index: 1;
  /* Cabe na ÁREA VISÍVEL: o `vh` fica de reserva para o navegador sem `dvh`
     (o navegador que não entende a unidade descarta a segunda linha). */
  max-width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
  max-height: calc(100vh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 70px -20px rgba(0, 0, 0, .7);
  cursor: default;
  transform: scale(.96);
  transition: transform .18s ease;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}
.dmw-lightbox.open .dmw-lightbox__img { transform: scale(1); }

/* Barra de zoom (+/-): canto inferior central.
   Mesma razao do ✕: embaixo fica a barra de gestos do iPhone, e sem o inset
   os botoes caem debaixo dela. */
.dmw-lightbox__zoom {
  position: absolute;
  z-index: 3;
  bottom: calc(env(safe-area-inset-bottom) + 22px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.dmw-lightbox__zoom button {
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  font-size: 0; /* esconde o glyph +/− (fallback); o ícone é desenhado via ::before/::after */
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: background .15s ease;
}
.dmw-lightbox__zoom button:hover { background: rgba(0, 0, 0, .8); }
/* Ícones +/− desenhados (centralização exata, independente da fonte) */
.dmw-lightbox__zoom button::before,
.dmw-lightbox__zoom button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  border-radius: 2px;
}
.dmw-lightbox__zoom button::before { /* barra horizontal (− e +) */
  width: 16px;
  height: 2.5px;
  transform: translate(-50%, -50%);
}
.dmw-lightbox__zoom button[data-lb="in"]::after { /* barra vertical (só o +) */
  width: 2.5px;
  height: 16px;
  transform: translate(-50%, -50%);
}

/*
 * ⚠️ `safe-area-inset-top`: no celular o visor cobre a tela INTEIRA, e a
 * faixa de cima e do sistema (relogio, sinal, bateria). Com `top` fixo o ✕
 * nascia embaixo daqueles elementos: o unico botao de saida de uma tela que
 * cobre tudo ficava inalcancavel. No computador o inset e 0 e nada muda.
 */
.dmw-lightbox__x {
  position: absolute;
  /* Camada 3: sem z-index a foto (que sempre carrega transform) o cobria. */
  z-index: 3;
  top: calc(env(safe-area-inset-top) + 18px);
  right: calc(env(safe-area-inset-right) + 22px);
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: background .15s ease;
}
.dmw-lightbox__x:hover { background: rgba(0, 0, 0, .8); }

/* Setas de anterior/proximo (D2, usadas pela galeria em D3): só aparecem
   quando DMW.lightbox recebe opts.onPrev/opts.onNext; a seta sem callback
   fica com o atributo `hidden`. `[hidden]` sozinho perde para o
   `display: grid` desta classe (mesma armadilha do `.ck-pane[hidden]` em
   chat-kit.css e das demais listadas em pages.css/filters.css/
   engagement.css), por isso a regra `[hidden]` dedicada logo abaixo, com
   !important no mesmo padrão das outras. */
.dmw-lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 3;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: background .15s ease;
}
.dmw-lightbox__nav[hidden] { display: none !important; }
.dmw-lightbox__nav:hover { background: rgba(0, 0, 0, .8); }
.dmw-lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dmw-lightbox__nav--prev { left: calc(env(safe-area-inset-left) + 14px); }
.dmw-lightbox__nav--next { right: calc(env(safe-area-inset-right) + 14px); }

/* ============================================================
   BTN DOURADO (usado no modal de fora da janela 24h)
   ============================================================ */
.btn-dourado {
  background: linear-gradient(180deg, #DBC07A, var(--gold));
  color: #3a2e10;
  border: 0;
  box-shadow: 0 8px 18px -6px rgba(201, 168, 92, .6);
}
.btn-dourado:hover { filter: brightness(1.04); }

/* btn-md */
.btn-md {
  height: 38px;
  padding: 0 16px;
  font-size: 13.5px;
}

/* ── Lead detail: framing (barra fina + frame de altura total) ────────── */
.ld-page{display:flex;flex-direction:column;gap:14px;height:calc(100vh - 132px);min-height:520px}
.lead-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
.lead-back{display:inline-flex;align-items:center;gap:7px;color:var(--azul);font-weight:600;font-size:13.5px;text-decoration:none}
.lead-back svg{width:16px;height:16px}
.lead-back:hover{color:var(--azul-deep)}
/* Detalhes: grid de duas colunas (chat à esquerda + CRM 340px à direita). Escopado
   em .ld-page: o .chat-panel é compartilhado com o modal do Kanban e não muda lá.
   .chat-panel usa display:contents → .cp-chat (col 1fr) e .ck-crm (col 340px)
   tornam-se itens diretos do .lead-grid. (CRM inline é só `.ck-crm`, sem `.inline`:
   o prototype adicionava `.inline` via JS, mas o port nunca portou isso.) */
.lead-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:minmax(0,1fr);gap:18px}
.ld-page .chat-panel{display:contents}
.ld-page .cp-chat{min-width:0;min-height:0;position:relative;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden}
.ld-page .cp-chat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:6;background:linear-gradient(90deg,var(--azul),var(--gold-bright))}
.ld-page .ck-crm{min-width:0;min-height:0;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden;background:#fff}
@media (max-width:1080px){
  .lead-grid{grid-template-columns:minmax(0,1fr)}
  .ld-page .ck-crm{display:none}
}
/* I-1: o _chat-header (.right-header) só tem layout flex sob .wa-scope (inbox).
   Na tela Detalhes ele fica fora do .wa-scope → precisa do layout aqui (claro). */
.ld-page .right-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;background:var(--wa-header,#f0f2f5);border-bottom:1px solid var(--wa-divider,#e9edef);flex:0 0 auto}
.ld-page .rh-left{display:flex;align-items:flex-start;gap:12px;min-width:0;flex:1}
.ld-page .rh-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.ld-page .rh-name{display:flex;align-items:center;gap:8px;min-width:0;font-size:16px;font-weight:600;color:var(--wa-name,#111b21)}
.ld-page .rh-name #cp-name-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-page .rh-phone{font-family:var(--ff-mono,monospace);font-size:12px;color:var(--wa-meta,#667781);flex:none}
.ld-page .rh-avatar{width:42px;height:42px;border-radius:50%;flex:0 0 42px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;background:linear-gradient(135deg,#c2992f,#e0b94f)}
.ld-page .rh-badges{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.ld-page .ck-actions{display:flex;align-items:center;gap:6px;flex:none}

/* ── Busca dentro da conversa: destaque temporário na bubble alvo ── */
.search-hit { animation: search-hit-flash 1.8s ease; }
@keyframes search-hit-flash { 0%,40% { background: rgba(201,168,92,.35); } 100% { background: transparent; } }

/* ============================================================
   GALERIA DE MIDIA POR LEAD (Bloco D, D3): fotos/videos/documentos
   abertos por #cp-gallery-btn no cabecalho. A modal (#gal-modal) e
   construida por JS sobre .ck-modal-ov/.ck-modal (chat-kit.css); aqui
   so o miolo especifico da galeria.
   ============================================================ */
/* max-width, nao width: a base .ck-modal (chat-kit.css) ja da width:100% do
   overlay, que encolhe sozinho em tela estreita; so falta erguer o TETO acima
   dos 430px padrao (mesma tecnica de #lm-modal .ck-modal, chat-kit.css). Com
   `width` aqui, o `max-width:430px` da .ck-modal (que este seletor nao tocava)
   prendia a caixa em 430px mesmo em 1440px de viewport (achado por medicao
   com numero, D6): grade de 4 colunas cabia, mas em 96px por item em vez dos
   ~220px pretendidos, e a lista de documentos ficava com a coluna do nome
   estreita demais (nome longo virava 12 linhas em vez de 3-4). */
.gal { max-width: min(920px, 96vw); max-height: 86vh; display: flex; flex-direction: column; }
.gal-tabs { display: flex; flex: none; gap: 4px; padding: 8px 18px; border-bottom: 1px solid var(--hair); }
.gal-tab { flex: 1; border: 0; background: transparent; border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--wa-meta); cursor: pointer; }
.gal-tab:hover { background: var(--surface-2, #F7F9FC); }
.gal-tab.is-on { background: var(--surface-2, #F7F9FC); color: var(--wa-name, #111b21); }
.gal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
.gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
@media (max-width: 640px) {
  .gal-grid { grid-template-columns: repeat(3, 1fr); }
}
.gal-grid--videos { grid-template-columns: repeat(2, 1fr); }
.gal-item { margin: 0; position: relative; aspect-ratio: 1; background: #eee; border-radius: 8px; overflow: hidden; }
.gal-item img, .gal-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-item__abrir { position: absolute; inset: 0; border: 0; background: none; padding: 0; cursor: zoom-in; }
/* L2.3 (rodada 1): o tile de VIDEO e so a capa; o link cobre o tile inteiro (abre o video
   numa aba nova, sem o marcador da galeria, e por isso grava o media.viewed) e o glifo de
   play fica no centro. A barra de acoes vem depois no markup e fica por cima, no topo. */
.gal-item__assistir { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; text-decoration: none; cursor: pointer; }
.gal-item__play { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 33, 61, .62); }
.gal-item__play svg { width: 20px; height: 20px; margin-left: 2px; }
.gal-item__assistir:hover .gal-item__play { background: rgba(20, 33, 61, .8); }
.gal-item__assistir:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.gal-item__acoes {
  position: absolute; left: 0; right: 0; bottom: 0; height: 32px;
  display: flex; align-items: center; justify-content: flex-end; gap: 2px;
  padding: 0 4px; background: rgba(0, 0, 0, .6);
}
.gal-item__acoes .gal-ic { color: #fff; }
.gal-item__acoes .gal-ic:hover { background: rgba(255, 255, 255, .22); }
.gal-ic { width: 26px; height: 26px; flex: none; border: 0; border-radius: 7px; display: grid; place-items: center; color: var(--wa-icon, #54656f); background: none; text-decoration: none; cursor: pointer; }
.gal-ic svg { width: 15px; height: 15px; }
.gal-ic:hover { background: rgba(0, 0, 0, .06); }
/* Alvo de toque: 26px (bom para mouse) mede menos que os 40px mínimos em tela
   de celular (achado por medição com número, D6). Sobe para 44px, o mesmo
   tamanho já usado nas setas do visor (.dmw-lightbox__nav) e no X dele
   (.dmw-lightbox__x), e cresce a barra de ações junto, senão o ícone maior
   estoura a barra de 32px por cima da miniatura. Precisa vir DEPOIS da regra
   base de .gal-ic/.gal-item__acoes acima (mesma especificidade: quem for
   declarado por último no arquivo vence, e um @media antes da base perde
   para ela mesmo com a condição batendo). */
@media (max-width: 640px) {
  .gal-item__acoes { height: 44px; }
  .gal-ic { width: 44px; height: 44px; }
}
/* C1 (revisão final): só nos vídeos, a barra de ações vai para o TOPO do
   tile. Embaixo (a base acima) ela cobria o painel de controles nativos do
   <video> (play, barra de progresso), medido com elementFromPoint no play:
   devolvia a barra, não o vídeo. Aqui a especificidade (duas classes) já
   vence a base (uma classe) sem depender de ordem no arquivo, ao contrário
   do bloco de toque acima. (L2.3, rodada 1: o tile de video deixou de ter controles
   nativos, e a barra segue no topo para o glifo de play ficar livre no centro.) */
.gal-grid--videos .gal-item__acoes { top: 0; bottom: auto; }
.gal-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.gal-doc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; }
.gal-doc:hover { background: var(--surface-2, #F7F9FC); }
.gal-doc__ic { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2, #F7F9FC); color: var(--wa-icon, #54656f); }
.gal-doc__ic svg { width: 18px; height: 18px; }
.gal-doc__nome { flex: 1; min-width: 0; font-size: 13.5px; color: var(--wa-name, #111b21); overflow-wrap: break-word; }
.gal-doc__meta { flex: none; font-size: 12px; color: var(--wa-meta); }
.gal-doc__acoes { display: flex; align-items: center; gap: 2px; flex: none; }
.gal-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--wa-meta); }
/* #gal-mais e .ck-btn (display: inline-flex), e [hidden] sozinho perde para
   esse display explicito (mesma armadilha ja documentada e resolvida no
   projeto para .ck-pane/.ck-field/.dmw-lightbox__nav e outras). */
#gal-mais[hidden] { display: none !important; }
.gal-vazio { text-align: center; padding: 32px; color: var(--wa-meta); }
/* Falha do "Ver mais" (mais=true): as paginas ja carregadas ficam na tela, e
   isto entra como uma linha embaixo delas, nao como substituto do .gal-vazio.
   Cor igual ao texto de .sc-error (chat-kit.css usa var(--ck-red-ink) para o
   mesmo tom; aqui em literal porque chat.css nao referencia tokens --ck-*). */
.gal-erro { padding: 6px 8px 2px; text-align: center; font-size: 12px; color: #B5302E; }


/* ============================================================
   GALERIA DA CONTA (Fase 19, bloco 10B): os arquivos que a empresa
   enviou, para mandar de novo nesta conversa (#mlib-modal, parcial
   _media-library-modal.eta), aberta pelo #chat-gallery-btn ao lado
   do clipe. Casca .ck-modal-ov/.ck-modal do chat-kit (universal nas
   quatro telas); aqui só o miolo. No /m a mesma janela vira folha
   que sobe de baixo (m.css).

   O desenho: as ABAS dizem qual conjunto (sublinhado, como as abas do
   painel), os TIPOS filtram (pílulas), e a grade é de cartões quadrados
   com o nome e a contagem embaixo. O dourado aparece num lugar só: a
   marca do arquivo que alguém SALVOU para a equipe, no cartão e no
   botão "Salvo na galeria". O azul é a escolha e o envio.

   ⚠️ As partes que somem usam [hidden] e TÊM a regra display:none aqui
   (a armadilha do [hidden] contra display:flex), e a casca abre pela
   classe .open do chat-kit, nunca por style.display.
   ============================================================ */
/* Acima do modal de chat do Kanban (200), como #fu-modal/#tags-modal; abaixo
   do aviso de janela de 24h (410/420) e do visor de foto (500). */
#mlib-modal { z-index: 300; }
.mlib {
  max-width: min(1000px, 96vw);
  /* Altura fixa: trocar de aba ou de filtro não faz a janela pular de tamanho. */
  height: min(780px, calc(100vh - 40px));
  height: min(780px, calc(100dvh - 40px));
}
/* Teclado do iPhone (pendências L5.1, rodada 1): a galeria da conta no /app (iPad, ou o celular
   que saiu do /m) tem busca e legenda, e a barra de envio (legenda e botões) soma mais do que cabe
   na faixa de um teclado de pé: o overflow:hidden do .ck-modal a cortava (medido a 1180x820 com a
   faixa em 350 px: botão 340..379 numa caixa que acaba em 330). No toque a caixa rola e a barra
   fica fixa no pé, e o teto sai da faixa visível, com a mesma folga de 40px. A galeria do lead
   (.gal, sem campo de texto, 86vh) ganha o teto na faixa pelo mesmo motivo: o 86vh dela vencia o
   teto genérico do toque (este arquivo vem depois do chat-kit.css) e passava da faixa. SÓ em
   pointer: coarse e SÓ com dvh; ver chat-kit.css. O .mlib do /m tem o teto próprio no m.css. */
@media (pointer: coarse) {
  @supports (height: 100dvh) {
    .mlib { height: min(780px, calc(var(--vv-h, 100dvh) - 40px)); overflow-y: auto; overscroll-behavior: contain; }
    .mlib__pe { position: sticky; bottom: 0; z-index: 1; }
    .gal { max-height: min(86vh, calc(var(--vv-h, 100dvh) - 40px)); }
  }
}
.mlib__alca { display: none; }
.mlib__hd { align-items: flex-start; }
.mlib__titulos { min-width: 0; }
.mlib__sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted, #5A6373); }

.mlib__abas {
  display: flex; flex: none; padding: 0 18px;
  border-bottom: 1px solid var(--hair, #E6E9F0);
  overflow-x: auto; scrollbar-width: none;
}
.mlib__abas::-webkit-scrollbar { display: none; }
.mlib__aba {
  position: relative; flex: none;
  border: 0; background: none; cursor: pointer; white-space: nowrap;
  padding: 12px 2px 11px; margin-right: 22px;
  font-family: var(--ff-display, 'Outfit', sans-serif); font-size: 14px; font-weight: 600;
  color: var(--muted, #5A6373);
}
.mlib__aba::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  border-radius: 2px 2px 0 0; background: transparent;
}
.mlib__aba:hover { color: var(--ink, #161A23); }
.mlib__aba.is-on { color: var(--azul, #2F5096); }
.mlib__aba.is-on::after { background: var(--azul, #2F5096); }

.mlib__barra { display: flex; align-items: center; gap: 12px; padding: 12px 18px 10px; flex: none; flex-wrap: wrap; }
.mlib__tipos { display: flex; gap: 6px; flex-wrap: wrap; }
.mlib__tipo {
  border: 1px solid var(--hair, #E6E9F0); background: #fff; color: var(--ink, #161A23);
  border-radius: 999px; padding: 6px 13px; cursor: pointer;
  font-family: var(--ff-body, 'Hanken Grotesk', sans-serif); font-size: 12.5px; font-weight: 600;
}
.mlib__tipo:hover { border-color: #C9D2E6; }
.mlib__tipo.is-on { background: var(--azul, #2F5096); border-color: var(--azul, #2F5096); color: #fff; }
.mlib__busca {
  margin-left: auto; flex: 0 1 300px; min-width: 220px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 11px; border-radius: 10px; background: #F1F3F7;
}
.mlib__busca svg { width: 16px; height: 16px; flex: none; color: var(--faint, #8A93A4); }
.mlib__busca input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent; padding: 9px 0;
  font-family: var(--ff-body, 'Hanken Grotesk', sans-serif); font-size: 13.5px; color: var(--ink, #161A23);
}
.mlib__busca:focus-within { background: #fff; box-shadow: 0 0 0 2px rgba(47, 80, 150, .35); }
.mlib__aba:focus-visible,
.mlib__tipo:focus-visible,
.mlib-item:focus-visible { outline: 2px solid var(--azul, #2F5096); outline-offset: 2px; }

.mlib__dica { flex: none; margin: 0 18px 10px; font-size: 12px; line-height: 1.45; color: var(--muted, #5A6373); }
.mlib__dica[hidden] { display: none; }

.mlib__corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 18px; }
.mlib-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 16px 12px; }

.mlib-item {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer; text-align: left;
  font-family: var(--ff-body, 'Hanken Grotesk', sans-serif);
}
.mlib-item__vis {
  position: relative; display: grid; place-items: center; aspect-ratio: 1;
  border-radius: 12px; overflow: hidden;
  background: var(--surface-2, #F7F9FC); border: 1px solid var(--hair, #E6E9F0);
  color: var(--azul, #2F5096);
  transition: border-color .14s, box-shadow .14s;
}
.mlib-item__vis img,
.mlib-item__vis video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mlib-item:hover .mlib-item__vis { border-color: #C9D2E6; }
.mlib-item.is-sel .mlib-item__vis { border-color: var(--azul, #2F5096); box-shadow: 0 0 0 2px var(--azul, #2F5096); }
.mlib-item__vis--audio { background: rgba(47, 80, 150, .07); }
.mlib-item__vis--document { background: #F2F4F8; color: var(--muted, #5A6373); }
.mlib-item__glifo { width: 38%; height: 38%; display: grid; place-items: center; }
.mlib-item__glifo svg { width: 100%; height: 100%; stroke-width: 1.6; }
.mlib-item__ext {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  padding: 2px 7px; border-radius: 6px; border: 1px solid var(--hair, #E6E9F0); background: #fff;
  font-family: var(--ff-display, 'Outfit', sans-serif); font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  color: var(--azul-deep, #21396C);
}
.mlib-item__play {
  position: absolute; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(20, 33, 61, .62); color: #fff;
}
.mlib-item__play svg { width: 18px; height: 18px; margin-left: 2px; }
/* A marca do arquivo SALVO para a equipe: o único dourado da janela. */
.mlib-item__salvo {
  position: absolute; top: 0; left: 10px; width: 24px; height: 30px;
  display: grid; place-items: center;
  border-radius: 0 0 7px 7px; background: #fff;
  box-shadow: 0 1px 3px rgba(20, 33, 61, .3);
  color: var(--gold, #C9A85C);
}
/* A aba branca separa o dourado de qualquer foto (um folheto de promoção pode
   ser exatamente essa cor), e o contorno mais escuro o separa do branco da aba. */
.mlib-item__salvo svg { width: 14px; height: 18px; overflow: visible; }
.mlib-item__salvo path { stroke: #A8863F; stroke-width: 1.4px; stroke-linejoin: round; }
.mlib-item__check {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%;
  display: none; place-items: center;
  background: var(--azul, #2F5096); color: #fff; box-shadow: 0 0 0 2px #fff;
}
.mlib-item__check svg { width: 14px; height: 14px; }
.mlib-item.is-sel .mlib-item__check { display: grid; }
.mlib-item__nome {
  padding: 0 2px; font-size: 13px; font-weight: 600; color: var(--ink, #161A23);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mlib-item__meta { display: flex; justify-content: space-between; gap: 8px; padding: 0 2px; font-size: 11.5px; color: var(--muted, #5A6373); }

.mlib-esqueleto { aspect-ratio: 1; border-radius: 12px; background: #F1F3F7; }
.mlib-grade--carregando { margin-top: 2px; }
.mlib-mais { display: flex; justify-content: center; padding: 20px 0 4px; }
.mlib-vazio {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  max-width: 470px; margin: 0 auto; padding: 56px 20px; text-align: center;
  font-size: 13.5px; line-height: 1.5; color: var(--muted, #5A6373);
}
.mlib-vazio strong { font-family: var(--ff-display, 'Outfit', sans-serif); font-size: 16px; font-weight: 600; color: var(--ink, #161A23); }
.mlib-vazio .ck-btn { margin-top: 6px; }
.mlib-vazio--erro strong { color: #B5302E; }

.mlib__pe { flex: none; border-top: 1px solid var(--hair-2, #EEF1F7); background: #fff; }
.mlib__retencao { margin: 0; padding: 12px 18px; font-size: 12px; color: var(--muted, #5A6373); }
.mlib__retencao[hidden],
.mlib__envio[hidden],
.mlib__legenda[hidden],
.mlib__sem-legenda[hidden],
.mlib__nao-reenvia[hidden],
.mlib__erro[hidden] { display: none !important; }
.mlib__envio { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 16px; }
.mlib__sel { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mlib__mini {
  position: relative; flex: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--surface-2, #F7F9FC); border: 1px solid var(--hair, #E6E9F0); color: var(--azul, #2F5096);
}
.mlib__mini img,
.mlib__mini video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mlib__mini .mlib-item__glifo { width: 54%; height: 54%; }
.mlib__mini .mlib-item__ext { display: none; }
.mlib__sel-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mlib__sel-nome { font-size: 14px; font-weight: 600; color: var(--ink, #161A23); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlib__sel-meta { font-size: 12px; color: var(--muted, #5A6373); }
.mlib__sel-acoes { flex: none; display: flex; align-items: center; gap: 8px; }
.mlib__sel-acoes a.ck-btn { text-decoration: none; }
.mlib__enviar { display: flex; align-items: center; gap: 10px; }
.mlib__legenda { flex: 1; min-width: 0; display: block; }
.mlib__sem-legenda { flex: 1; margin: 0; font-size: 13px; color: var(--muted, #5A6373); }
/* Nit 3 da re-revisão: o item que o CRM não reenvia (o botão de enviar fica desabilitado). */
.mlib__nao-reenvia { flex: 1; margin: 0; font-size: 13px; color: var(--muted, #5A6373); }
/* O chat-kit não desenha o primário desabilitado: sem isto o botão parecia ativo. */
.mlib__mandar.ck-btn.primary:disabled,
.mlib__mandar.ck-btn.primary:disabled:hover { background: #AEB9CF; color: #F4F6FA; cursor: not-allowed; }
.mlib__salvar svg,
.mlib__mandar svg { width: 16px; height: 16px; }
.mlib__salvar.is-on { border-color: rgba(201, 168, 92, .6); background: #FBF5E6; color: #7C632F; }
.mlib__salvar.is-on svg { fill: var(--gold, #C9A85C); stroke: var(--gold, #C9A85C); }
.mlib__para { margin: 0; font-size: 12px; color: var(--muted, #5A6373); }
.mlib__erro { margin: 0; font-size: 12.5px; color: #B5302E; }

/* Janela estreita do /app (o /m tem a folha própria em m.css). */
@media (max-width: 640px) {
  .mlib__barra { gap: 10px; }
  .mlib__busca { margin-left: 0; flex: 1 1 100%; min-width: 0; }
  .mlib-grade { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px 10px; }
  .mlib__enviar { flex-wrap: wrap; }
  .mlib__legenda { flex: 1 1 100%; }
  .mlib__salvar,
  .mlib__mandar { flex: 1 1 0; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .mlib-item__vis { transition: none; }
}