:root {
  /* ---------- Identidade Thyros ZAP (redesign completo) ----------
     Tokens nomeados (§19 do briefing de marca) são a fonte da verdade.
     --orange-N, --ink, --bg, --ok e --warn continuam existindo como ALIASES
     pro valor novo -- são referenciados centenas de vezes no resto deste
     arquivo e em public js (inline style com var(--orange-600) etc.); manter
     os nomes antigos evitou reescrever cada seletor um por um, só o valor
     por trás mudou. Nunca introduzir HEX novo direto num componente --
     sempre um destes tokens (ou um novo, adicionado aqui). */
  --primary: #2563eb;
  --primary-dark: #0f1b3d;
  --sidebar: #07152f;
  --sidebar-hover: #102653;

  --accent: #14b8a6;
  --accent-hover: #0d9488;
  --accent-light: #ccfbf1;

  --secondary: #8b5cf6;
  --secondary-light: #ede9fe;

  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #38bdf8;

  --background: #f8fafc;
  --surface: #ffffff;
  --surface-alt: #f1f5f9;

  --border: #e2e8f0;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  --white: #ffffff;

  /* Gradientes de marca -- usar só em logo, botões especiais, badges premium,
     onboarding (§2). Nunca a interface inteira. */
  --gradient-primary: linear-gradient(135deg, #2563eb 0%, #14b8a6 100%);
  --gradient-premium: linear-gradient(135deg, #2563eb 0%, #8b5cf6 100%);
  --gradient-zap: linear-gradient(135deg, #14b8a6 0%, #2563eb 50%, #8b5cf6 100%);

  /* ---------- Aliases (nomes antigos, valores novos) ----------
     Escala azul (Tailwind blue 50-900) -- --primary é exatamente o blue-600
     dessa escala, --orange-700 é o blue-700 usado como hover/texto de badge
     "info" (bate com --info do §8: bg #EFF6FF/texto #1D4ED8 = blue-50/700). */
  /* orange-50 é usado quase só como fundo neutro de hover/container em todo
     o app (não como badge colorido -- badges usam orange-100/700, ver
     abaixo) -- redefinido pra neutro (§12: tabela/hover usam fundo neutro,
     não azul) em vez de repetir "evite azul em excesso" em cada seletor.
     As poucas exceções que querem mesmo um tom azulado (chip de resposta,
     linha não lida, opção selecionada) usam orange-100 direto, não este. */
  --orange-50: var(--surface-alt);
  --orange-100: #dbeafe;
  --orange-200: #bfdbfe;
  --orange-300: #93c5fd;
  --orange-400: #60a5fa;
  --orange-500: #3b82f6;
  --orange-600: var(--primary);
  --orange-700: #1d4ed8;
  --orange-900: #1e3a8a;
  --ink: var(--text-primary);
  --ink-soft: var(--text-secondary);
  --bg: var(--background);
  --ok: var(--success);
  --warn: var(--warning);
  --radius: 12px;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-hover: 0 8px 24px rgba(15, 23, 42, 0.08);

  /* ---------- Escala de espaçamento (nova, aditiva) ----------
     Não é uma varredura mecânica dos paddings/margins existentes (arriscado
     demais num arquivo deste tamanho, pra um ganho puramente estético) --
     fica disponível pra uso oportunista sempre que uma regra for tocada por
     outro motivo. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ---------- Raio: 3 níveis (aditivo -- --radius acima continua existindo
     e sendo usado, é o mesmo valor de --radius-md) ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* ---------- Elevação: 3 níveis (aditivo -- --shadow/--shadow-hover acima
     continuam existindo, os dois primeiros são só apelidos deles) ---------- */
  --elevation-1: var(--shadow);
  --elevation-2: var(--shadow-hover);
  --elevation-3: 0 16px 40px rgba(15, 23, 42, 0.16);

  /* ---------- Transição: easing/duração padrão pra novas regras ---------- */
  --transition-fast: .12s ease-out;
  --transition-base: .2s ease-out;
}

* { box-sizing: border-box; }
/* overflow:hidden aqui é o que faz a correção de teclado virtual mobile
   (--app-vh, ver app.js e .app-shell abaixo) funcionar de verdade — sem
   isso, focar um campo de texto no celular fazia o navegador rolar a
   PÁGINA inteira pra "ajudar" a trazer o campo pra vista (comportamento
   nativo do browser), o que empurrava o app-shell inteiro pra fora da
   posição esperada e cortava o composer por baixo do teclado (às vezes
   parecendo até fechar o teclado sozinho, de tanto a página brigar com o
   scroll). O app inteiro é um SPA de tela única — nenhum scroll de
   documento é esperado, só das áreas internas (.chat-messages,
   .conv-list-col etc., que já têm overflow-y:auto próprio). */
html, body { height: 100%; overflow: hidden; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
h1 { font-weight: 700; }
h2 { font-weight: 650; }
h3 { font-weight: 600; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }

/* ---------- Buttons / Inputs ---------- */
.btn-primary {
  background: var(--orange-600);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 9px;
  font-weight: 600;
  transition: background .15s;
}
.btn-primary:hover { background: var(--orange-700); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-secondary {
  background: var(--orange-100);
  color: var(--orange-700);
  border: none;
  padding: 10px 18px;
  border-radius: 9px;
  font-weight: 600;
}
.btn-secondary:hover { background: var(--orange-200); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-soft);
  padding: 8px 14px;
  border-radius: 9px;
  font-weight: 500;
}
.btn-ghost:hover { border-color: var(--orange-300); color: var(--orange-700); }
.btn-block { width: 100%; }
.btn-icon {
  background: var(--orange-50);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--orange-600);
}
.btn-icon:hover { background: var(--orange-100); }

label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin: 14px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=tel], select, textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  outline: none;
  background: var(--white);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }

/* ---------- Utilitários genéricos usados em vários lugares ---------- */
.form-error { color: var(--danger); font-size: 13px; margin-top: 10px; }
.tag-pill { background: var(--orange-100); color: var(--orange-700); border-radius: 20px; padding: 1px 8px; font-size: 11px; font-weight: 600; }

/* ---------- App shell ---------- */
/* 100dvh (altura de viewport "dinâmica") em vez de 100vh evita o teclado/
   barra de endereço do celular cortando o rodapé do app — navegador que não
   suporta a unidade simplesmente ignora a segunda declaração e fica com
   100vh mesmo. */
/* position:fixed (não só height) é a parte que importa pro teclado mobile —
   um elemento fixed ignora o scroll do document por definição, então mesmo
   que o navegador tente "ajudar" rolando a página ao focar um campo, o
   app-shell não se move nem um pixel; só a altura encolhe (--app-vh) pra
   abrir espaço pro teclado.
   `top: 0` sozinho não bastava: fixed é ancorado no viewport de LAYOUT, mas
   o iOS pode deslocar o viewport VISUAL pra baixo dele (visualViewport.
   offsetTop > 0) na mesma hora em que tenta rolar o campo focado pra vista
   -- o app-shell, ainda em top:0 do layout, ficava ancorado ACIMA do que a
   pessoa via de verdade na tela, sobrando um vão cinza (fundo do <body>)
   embaixo dele, entre o composer e o teclado. --app-vh-offset (api.js,
   visualViewport.offsetTop) compensa isso -- 0px sempre que não há
   descompasso (a maioria do tempo), então não muda nada fora desse cenário. */
.app-shell { position: fixed; top: var(--app-vh-offset, 0px); left: 0; width: 100%; display: flex; flex-direction: column; height: 100vh; height: 100dvh; height: var(--app-vh, 100dvh); }
.app-shell-body { display: flex; flex: 1; min-height: 0; }
.impersonation-banner {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 10px 20px;
  background: var(--gradient-premium);
  color: white;
  font-size: 13px; font-weight: 600;
}
.impersonation-banner .btn-primary {
  background: white; color: var(--primary);
  padding: 6px 14px; font-size: 12.5px;
}
.impersonation-banner .btn-primary:hover { background: var(--orange-100); }
.rail {
  width: 68px;
  background: var(--sidebar);
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 0;
  gap: 6px;
  flex-shrink: 0;
}
.rail-logo {
  width: 36px; height: 36px; border-radius: 10px; background: var(--gradient-zap);
  color: white; display: flex; align-items: center; justify-content: center; font-weight: 800;
  margin-bottom: 16px;
}
.rail-btn {
  position: relative;
  width: 44px; height: 44px; border-radius: 12px; border: none;
  background: transparent; color: #94a3b8;
  display: flex; align-items: center; justify-content: center;
  transition: background 150ms ease, color 150ms ease;
}
.rail-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn:hover { background: var(--sidebar-hover); color: #fff; }
#btn-sound-toggle.muted { color: #64748b; opacity: .6; }
/* [hidden] não é suficiente pra <svg> inline em todo motor (a folha de
   estilo padrão do navegador que faz isso funcionar em <img>/<div> não é
   garantida pra elementos SVG) -- regra explícita pra sempre funcionar. */
.rail-btn svg[hidden] { display: none; }
/* Fatura vencida há 1+ dia: admin_empresa/supervisor continuam vendo a rail
   inteira (nunca esconde os botões), só não conseguem clicar em nada que não
   seja Financeiro — force-navegado pra lá até regularizar o pagamento. */
.rail-btn.billing-locked { opacity: .3; pointer-events: none; cursor: not-allowed; }

.billing-block-screen {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(circle at 30% 20%, rgba(37,99,235,.25), transparent 55%), var(--sidebar);
}
.billing-block-card {
  background: var(--white); border-radius: 20px; padding: 40px 36px; max-width: 420px;
  text-align: center; box-shadow: 0 24px 64px rgba(0,0,0,.35);
}
.billing-block-icon { font-size: 44px; margin-bottom: 12px; }
.billing-block-card h2 { font-size: 18px; margin-bottom: 10px; color: var(--ink); }
.billing-block-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 22px; }
.rail-btn.active { background: var(--primary); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.rail-spacer { flex: 1; }
.rail-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--gradient-premium);
  color: white; font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center; margin-top: 4px;
}
.view-root { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* ---------- Generic view header ---------- */
.view-header {
  padding: 18px 24px; border-bottom: 1px solid var(--border); background: var(--white);
  display: flex; align-items: center; justify-content: space-between;
}
.view-header h1 { font-size: 18px; margin: 0; }
.view-header .sub { color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }
/* Único header do app com um <select> cru como filho direto (Kanban, escolha
   de departamento) -- a regra genérica "select { width:100% }" (mais acima
   neste arquivo) virava o flex-basis dele dentro do .view-header (flex row),
   espremendo o <h1> vizinho até quebrar linha à toa, mesmo com espaço de
   sobra na tela. Seletor de filho direto mantém isso restrito só ao Kanban. */
.view-header > select { width: auto; flex-shrink: 0; }
.view-body { flex: 1; min-height: 0; overflow: auto; padding: 22px 24px; }
.view-body.flush { padding: 0; overflow: hidden; }

/* ---------- Inbox ---------- */
/* flex:1;min-height:0 (não height:100%) -- .view-root já é display:flex, e
   um filho dele só ganha altura de verdade virando item flex com min-height:0
   (senão o default min-height:auto deixa ele crescer pra caber o conteúdo em
   vez de encolher/rolar internamente -- .chat-messages tinha altura de
   MILHARES de pixels por causa disso, empurrando o composer bem lá embaixo,
   fora da tela, sem chance de rolar até ele no mobile). */
.inbox-layout { display: flex; flex: 1; min-height: 0; }
.inbox-rail {
  width: 56px; border-right: 1px solid var(--border); background: var(--white);
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; flex-shrink: 0;
}
.inbox-rail-btn {
  position: relative;
  width: 38px; height: 38px; border-radius: 10px; border: none; background: transparent; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
}
.inbox-rail-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inbox-rail-btn:hover { background: var(--orange-50); color: var(--orange-600); }
.inbox-rail-btn.active { background: var(--orange-600); color: white; }
.inbox-rail-divider { width: 26px; height: 1px; background: var(--border); margin: 6px 0; flex-shrink: 0; }
.rail-badge {
  position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; border-radius: 20px;
  background: var(--danger); color: white; font-size: 10px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--white);
}
.conv-list-col {
  width: 320px; border-right: 1px solid var(--border); background: var(--white);
  display: flex; flex-direction: column; flex-shrink: 0;
}
.conv-list-header { display: flex; align-items: center; gap: 8px; padding: 14px 14px 4px; }
.conv-list-header h2 { font-size: 15px; margin: 0; }
.conv-count { background: var(--orange-100); color: var(--orange-700); font-size: 11px; font-weight: 700; border-radius: 20px; padding: 1px 8px; }
.conv-search { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.conv-group-filter { display: flex; gap: 4px; padding: 0 12px 10px; border-bottom: 1px solid var(--border); }
.conv-group-filter-btn {
  flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--ink-soft);
  font-size: 11.5px; font-weight: 700; padding: 6px 8px; border-radius: 8px; transition: all .12s;
}
.conv-group-filter-btn:hover { border-color: var(--orange-300); color: var(--orange-700); }
.conv-group-filter-btn.active { background: var(--orange-600); border-color: var(--orange-600); color: #fff; }
.group-badge {
  display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700;
  color: var(--orange-700); background: var(--orange-100); padding: 2px 8px; border-radius: 20px;
  vertical-align: middle; margin-left: 6px; white-space: nowrap;
}
.avatar-group { font-size: 15px !important; }
.conv-items { flex: 1; overflow-y: auto; }
.conv-item {
  position: relative;
  display: flex; gap: 10px; padding: 12px; border-bottom: 1px solid var(--orange-50);
  align-items: flex-start;
}
.conv-item:hover { background: var(--orange-50); }
.conv-item-unread { background: var(--orange-100); }
.conv-item-unread:hover { background: var(--orange-200); }
.conv-item-unread .name { font-weight: 800; }
.conv-item-menu-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  opacity: 0; transition: opacity .12s;
  width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border); background: white;
  display: flex; align-items: center; justify-content: center; color: var(--ink-soft);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.conv-item-menu-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.conv-item:hover .conv-item-menu-btn { opacity: 1; }
.conv-item-menu-btn:hover { background: var(--orange-50); color: var(--orange-600); border-color: var(--orange-300); }
.conv-actions-menu {
  position: fixed; z-index: 200; background: white; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 8px; width: 230px;
}
.conv-actions-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; padding: 9px 10px; border-radius: 8px; font-size: 13px; color: var(--ink);
}
.conv-actions-menu button:hover { background: var(--orange-50); }
.conv-item.active { background: var(--orange-100); }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 13px;
}
.conv-item-main { flex: 1; min-width: 0; }
.conv-item-top { display: flex; justify-content: space-between; gap: 8px; }
.conv-item-top .name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item-top .time { font-size: 11px; color: var(--ink-soft); flex-shrink: 0; }
.conv-item-preview { color: var(--ink-soft); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.wa-icon { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; flex-shrink: 0; }
.conv-item-meta { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.badge {
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  background: var(--orange-100); color: var(--orange-700);
}
.unread-dot {
  background: var(--orange-600); color: white; border-radius: 50%;
  min-width: 18px; height: 18px; font-size: 10.5px; display: flex; align-items: center; justify-content: center;
  padding: 0 4px; margin-left: auto;
}
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color: var(--ink-soft); gap:8px; text-align:center; padding: 30px;}

.chat-col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--background); }
/* flex-shrink:0 explícito -- header e composer nunca devem ceder espaço,
   só .chat-messages (flex:1) absorve quando a altura disponível encolhe
   (teclado do iOS, ver --app-vh em app.js). */
.chat-header { padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--white); display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.chat-header > div { min-width: 0; }
.chat-header .name, .chat-header .phone { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-header .name { font-weight: 700; font-size: 14.5px; }
.chat-header .phone { color: var(--ink-soft); font-size: 12px; }
/* min-width:0 é o que permite o pill encolher de verdade num header
   apertado -- sem isso (achado testando teclado em tela pequena, iPhone
   SE), o texto "Participantes: Fulano, Beltrano" quebrava em várias linhas
   dentro do pill em vez de truncar, inflando a altura do .chat-header
   inteiro (chegava a 138px) e sobrando pouco espaço pra .chat-messages/
   .chat-compose quando o teclado também reduzia a viewport -- o composer
   acabava passando do fundo da tela visível. */
.participants-row { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px; background: var(--orange-100); font-size: 11px; color: var(--ink-soft); min-width: 0; max-width: 160px; flex-shrink: 0; }
.participants-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.participants-avatars { display: flex; flex-shrink: 0; }
.participants-avatars .avatar { border: 2px solid var(--white); margin-left: -8px; }
.participants-avatars .avatar:first-child { margin-left: 0; }
.chat-header-actions { margin-left: auto; display: flex; gap: 8px; }
/* min-width:0 + ellipsis -- mesmo problema do pill de participantes acima:
   sem isso, "Em atendimento ▾" espremia de largura num header apertado e o
   texto quebrava em 3 linhas dentro do próprio botão, inflando a altura do
   .chat-header inteiro (achado testando o teclado no iPhone SE, a tela mais
   estreita suportada). Truncar com "..." em vez de quebrar linha OU
   simplesmente não encolher (que geraria overflow horizontal pra fora da
   tela em vez de wrap vertical -- mesmo problema, lado diferente). */
.status-menu-wrap { position: relative; min-width: 0; }
#btn-status-toggle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.status-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  background: white; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 8px; width: 230px;
}
.status-menu-title { font-size: 11px; text-transform: uppercase; color: var(--ink-soft); letter-spacing: .04em; padding: 4px 10px 8px; }
.status-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; padding: 9px 10px; border-radius: 8px; font-size: 13px; color: var(--ink);
}
.status-menu button:hover { background: var(--orange-50); }
.claim-panel { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 20px; text-align: center; color: var(--ink-soft); font-size: 13px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.day-divider { text-align: center; margin: 14px 0 8px; }
.day-divider span {
  background: var(--orange-100); color: var(--orange-700); font-size: 11px; font-weight: 700;
  padding: 4px 14px; border-radius: 20px; text-transform: capitalize;
}
/* Marca onde a conversa "parou" na última visita -- só aparece uma vez, na
   posição calculada por computeUnreadBoundaryId (views.inbox.js), e fica
   fixo ali até a conversa ser reaberta de novo (não recalcula a cada poll). */
.unread-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; }
.unread-divider::before, .unread-divider::after { content: ""; flex: 1; height: 1px; background: var(--accent); opacity: .35; }
.unread-divider span { color: var(--accent-hover); font-size: 11px; font-weight: 700; white-space: nowrap; }
/* Esqueleto exibido em #chat-messages enquanto a página inicial de uma
   conversa recém-aberta carrega (ver renderMessages/messagesSkeletonHtml). */
.msg-skeleton { display: flex; flex-direction: column; gap: 14px; padding: 4px 0; }
.msg-skeleton-row { display: flex; }
.msg-skeleton-in { justify-content: flex-start; }
.msg-skeleton-out { justify-content: flex-end; }
.msg-skeleton-bubble {
  height: 34px; border-radius: 14px;
  background: linear-gradient(90deg, var(--surface-alt) 25%, #e2e8f0 37%, var(--surface-alt) 63%);
  background-size: 400% 100%; animation: msg-skeleton-shimmer 1.4s ease infinite;
}
@keyframes msg-skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
/* Flash breve quando um clique numa citação rola até a mensagem original
   (jumpToMessage/scrollAndHighlightMessage). */
@keyframes msg-highlight-flash { 0%, 100% { box-shadow: none; } 25%, 60% { box-shadow: 0 0 0 3px var(--accent); } }
.msg-highlight { animation: msg-highlight-flash 1.5s ease; }
.msg-row { display: flex; align-items: flex-end; gap: 4px; max-width: 62%; }
.msg-row-in { align-self: flex-start; }
.msg-row-out { align-self: flex-end; flex-direction: row-reverse; }
/* overflow-wrap:anywhere -- sem isso, uma palavra/URL comprida sem espaço
   (link colado, por exemplo) não quebrava linha nenhuma e vazava pra fora do
   balão em vez de ficar contida nele (parecia "cortada"). */
.msg-bubble { padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; position: relative; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.msg-bubble a { color: inherit; text-decoration: underline; }
.msg-in { background: var(--white); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
/* Tom suave (accent-light), não azul forte -- §4 do briefing pede
   explicitamente pra não deixar todo balão enviado num azul saturado. */
.msg-out { background: var(--accent-light); color: var(--text-primary); border-bottom-right-radius: 4px; }
.typing-indicator { padding: 0 20px 10px; }
.typing-bubble {
  display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px;
  background: var(--white); border: 1px solid var(--border); border-radius: 14px; border-bottom-left-radius: 4px;
}
.typing-bubble span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft);
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-bubble span:nth-child(2) { animation-delay: .15s; }
.typing-bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.msg-sender-name { font-weight: 700; font-size: 12.5px; margin-bottom: 2px; opacity: .9; }
.msg-sender-link { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.msg-sender-link:hover { opacity: 1; }
.msg-group-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; margin-bottom: 2px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase;
}
.msg-group-avatar-spacer { width: 28px; flex-shrink: 0; }

/* ---------- Player de áudio estilo WhatsApp ---------- */
.voice-player { display: flex; align-items: center; gap: 10px; min-width: 210px; padding: 2px 0; }
.voice-play-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none; flex-shrink: 0; cursor: pointer;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
}
.voice-play-btn svg { width: 16px; height: 16px; }
.voice-waveform { flex: 1; display: flex; align-items: center; gap: 2px; height: 26px; cursor: pointer; }
.voice-bar { width: 3px; border-radius: 2px; background: rgba(0, 0, 0, .18); transition: background .1s; }
.voice-bar.played { background: var(--accent); }
.msg-out .voice-bar { background: rgba(15, 23, 42, .18); }
.msg-out .voice-bar.played { background: var(--accent-hover); }
.voice-duration { font-size: 11px; color: var(--ink-soft); flex-shrink: 0; min-width: 30px; text-align: right; }
.msg-out .voice-duration { color: var(--text-secondary); }

/* ---------- Preview de vídeo clicável (abre no lightbox) ---------- */
.msg-media-video-preview { position: relative; display: inline-block; cursor: zoom-in; }
.msg-media-video-preview video { pointer-events: none; }
.msg-media-video-play-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.msg-media-video-play-overlay svg {
  width: 46px; height: 46px; color: #fff; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .5));
}
.msg-media-image { cursor: zoom-in; }

/* ---------- Lightbox de imagem/vídeo ---------- */
.media-lightbox-backdrop {
  position: fixed; inset: 0; background: rgba(20, 15, 10, .92); z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.media-lightbox-toolbar {
  position: absolute; top: 16px; right: 16px; display: flex; align-items: center; gap: 8px; z-index: 1;
}
.media-lightbox-toolbar button, .media-lightbox-toolbar a {
  width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .12);
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 16px; text-decoration: none; backdrop-filter: blur(4px);
}
.media-lightbox-toolbar button:hover, .media-lightbox-toolbar a:hover { background: rgba(255, 255, 255, .22); }
.media-lightbox-toolbar [data-action="zoom-reset"] { width: auto; padding: 0 12px; font-size: 12px; font-weight: 700; }
.media-lightbox-body { max-width: 92vw; max-height: 88vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.media-lightbox-img { max-width: 92vw; max-height: 88vh; transition: transform .15s ease; object-fit: contain; cursor: zoom-in; }
.media-lightbox-img.is-zoomed { cursor: grab; }
.media-lightbox-img.is-dragging { cursor: grabbing; transition: none; }
.media-lightbox-video { max-width: 92vw; max-height: 88vh; }
.media-lightbox-body-doc { width: 92vw; height: 88vh; align-items: stretch; }
.media-lightbox-pdf { width: 100%; height: 100%; border: none; border-radius: 6px; background: #fff; }
.media-lightbox-spreadsheet { width: 100%; height: 100%; background: #fff; border-radius: 6px; padding: 14px; overflow: auto; }
.xlsx-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.xlsx-tab { border: 1px solid var(--border); background: var(--orange-50); color: var(--ink-soft); border-radius: 8px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.xlsx-tab.active { background: var(--orange-600); color: #fff; border-color: var(--orange-600); }
.xlsx-table-scroll { overflow: auto; }
.xlsx-table-scroll table { border-collapse: collapse; font-size: 12.5px; }
.xlsx-table-scroll td, .xlsx-table-scroll th { border: 1px solid var(--border); padding: 4px 8px; white-space: nowrap; }

.msg-doc-preview-trigger {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
  max-width: 260px; transition: border-color .15s, background .15s;
}
.msg-doc-preview-trigger:hover { border-color: var(--accent); background: var(--surface-alt); }
.doc-preview-icon {
  width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; color: white;
  display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
}
.doc-preview-icon-pdf { background: var(--danger); }
.doc-preview-icon-spreadsheet { background: var(--success); }
.doc-preview-info { min-width: 0; flex: 1; }
.doc-preview-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.doc-preview-hint { font-size: 11px; color: var(--ink-soft); margin-top: 1px; }
.msg-doc-preview-trigger:hover .doc-preview-hint { color: var(--accent-hover); }
.msg-time { font-size: 10px; opacity: .65; margin-top: 4px; display:flex; align-items:center; justify-content:flex-end; gap:3px; }
.msg-tick { width: 15px; height: 11px; flex-shrink: 0; fill: currentColor; opacity: .75; }
.msg-tick-read { fill: var(--info) !important; opacity: 1; }
.msg-failed { color: var(--danger); font-size: 11px; margin-top: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-retry-btn {
  border: 1px solid var(--danger); color: var(--danger); background: none; border-radius: 20px;
  padding: 2px 10px; font-size: 10.5px; font-weight: 600; cursor: pointer; flex-shrink: 0;
}
.msg-retry-btn:hover { background: var(--danger); color: #fff; }
.msg-retry-btn:disabled { opacity: .5; cursor: default; }

/* Editor de template (criar/editar/enviar) -- formulário à esquerda, preview
   ao vivo à direita, mesmo layout nos 3 lugares (openCreateTemplateModal em
   views.settings.js, openMetaTemplateSendModal em views.inbox.js). */
.tpl-editor-layout { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.tpl-editor-form { flex: 1 1 320px; min-width: 280px; }
.tpl-editor-preview { flex: 0 0 280px; position: sticky; top: 0; }

/* Preview "exatamente como a pessoa recebe no WhatsApp" -- cores fixas
   (papel de parede + bolha do WhatsApp), de propósito não seguem o tema
   laranja do CRM: aqui o objetivo é simular o app do WhatsApp, não o nosso. */
.wa-preview-phone {
  width: 100%; max-width: 280px; margin: 0 auto; border-radius: 18px; overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.18); border: 6px solid #1f1f1f; background: #1f1f1f;
}
.wa-preview-screen {
  background: #e5ddd5; min-height: 160px; padding: 14px 10px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
}
.wa-preview-bubble {
  background: #fff; border-radius: 8px; padding: 6px 8px 6px 9px; font-size: 13.5px;
  line-height: 1.35; color: #111b21; box-shadow: 0 1px 1px rgba(0,0,0,.1);
  max-width: 92%; margin-left: auto; overflow-wrap: anywhere;
}
.wa-preview-header-text { font-weight: 700; margin-bottom: 4px; }
.wa-preview-media {
  background: #d9d9d9; border-radius: 6px; height: 90px; display: flex; align-items: center;
  justify-content: center; gap: 6px; font-size: 12px; color: #555; margin-bottom: 4px;
}
.wa-preview-body { white-space: normal; }
.wa-preview-placeholder { color: #8b98a3; font-style: italic; }
.wa-preview-var { background: #ffd9a8; color: #7a4a00; border-radius: 3px; padding: 0 3px; font-weight: 600; }
.wa-preview-footer { font-size: 11.5px; color: #667781; margin-top: 4px; }
.wa-preview-meta { display: flex; justify-content: flex-end; align-items: center; gap: 3px; font-size: 10px; color: #667781; margin-top: 2px; }
.wa-preview-buttons { margin-left: auto; max-width: 92%; background: #fff; border-radius: 8px; margin-top: 2px; }
.wa-preview-button { padding: 8px 0; text-align: center; font-size: 13px; color: #00a5f4; border-top: 1px solid #eee; font-weight: 500; }
.wa-preview-button:first-child { border-top: none; }
.msg-hover-btn {
  opacity: 0; transition: opacity .12s; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border); background: white;
  display: flex; align-items: center; justify-content: center; color: var(--ink-soft); margin-bottom: 4px;
}
.msg-row:hover .msg-hover-btn { opacity: 1; }
.msg-hover-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.msg-hover-btn.locked { color: var(--ink-soft); cursor: not-allowed; }
.msg-hover-btn.locked svg { fill: currentColor; stroke: none; width: 12px; height: 12px; }
.msg-quote {
  border-left: 3px solid rgba(0,0,0,.2); background: rgba(0,0,0,.06); border-radius: 6px;
  padding: 4px 8px; margin-bottom: 6px; font-size: 12px; opacity: .85; cursor: pointer;
}
.msg-reaction-chip { cursor: pointer; }
.msg-out .msg-quote { border-left-color: rgba(15,23,42,.25); background: rgba(15,23,42,.06); }
.msg-quote .quote-sender { font-weight: 700; display: block; }
.msg-quote .quote-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.msg-reactions { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.msg-reaction-chip { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 1px 7px; font-size: 11px; color: var(--ink); }
.msg-favorite-star { position: absolute; top: -6px; right: -6px; font-size: 12px; }
.msg-actions-menu {
  position: fixed; z-index: 200; background: white; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 8px; width: 210px;
}
.msg-actions-emoji-row { display: flex; align-items: center; gap: 4px; padding: 2px 2px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.msg-actions-emoji-row button { background: var(--orange-50); border: none; border-radius: 8px; width: 32px; height: 32px; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.msg-actions-emoji-row button:hover { background: var(--orange-100); }
.emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 6px 2px; max-height: 140px; overflow-y: auto; }
.emoji-grid button { background: none; border: none; font-size: 17px; border-radius: 6px; padding: 4px; }
.emoji-grid button:hover { background: var(--orange-50); }

/* Seletor de emojis do composer (painel completo, separado da reação rápida
   de mensagem acima) -- mesma linguagem visual (borda, radius, sombra) das
   caixas .msg-actions-menu, só maior e com abas/busca. */
.emoji-picker-panel {
  position: fixed; z-index: 250; background: white; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); width: 320px; max-height: 420px; display: flex; flex-direction: column; overflow: hidden;
}
.emoji-picker-search { padding: 8px; border-bottom: 1px solid var(--border); }
.emoji-picker-search input { width: 100%; padding: 7px 10px; font-size: 13px; }
.emoji-picker-tabs { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; }
.emoji-picker-tabs button { background: none; border: none; font-size: 16px; padding: 5px 7px; border-radius: 8px; flex-shrink: 0; }
.emoji-picker-tabs button.active, .emoji-picker-tabs button:hover { background: var(--orange-100); }
.emoji-picker-body { flex: 1; overflow-y: auto; padding: 8px; }
.emoji-picker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.emoji-picker-grid button { background: none; border: none; font-size: 20px; border-radius: 8px; padding: 6px; line-height: 1; }
.emoji-picker-grid button:hover { background: var(--orange-50); }
.emoji-picker-empty { text-align: center; color: var(--ink-soft); font-size: 12.5px; padding: 20px 10px; }
@media (max-width: 900px) {
  .emoji-picker-panel {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100% !important; max-height: calc(var(--app-vh, 100vh) * 0.6); border-radius: 16px 16px 0 0;
  }
}

/* Picker de atalhos ("/algo" no composer) -- reaproveita só a base visual
   de .emoji-picker-panel (fundo, borda, raio, sombra, position:fixed);
   posicionamento e formato são PRÓPRIOS daqui pra baixo. Diferente do
   emoji, este NÃO herda o bottom-sheet de tela cheia (ver override mobile
   no fim deste bloco) -- é sempre ancorado de verdade ao composer via
   getBoundingClientRect (positionShortcutPicker, views.inbox.js), nunca
   uma coordenada fixa da página. Formato dropdown vertical (cabeçalho +
   lista de 2 linhas por item: comando/categoria em cima, descrição
   embaixo), não mais a cápsula horizontal de antes. */
.shortcut-picker-panel {
  display: flex; flex-direction: column; width: 380px;
  opacity: 0; transform: translateY(6px); transition: opacity .12s ease, transform .12s ease;
}
.shortcut-picker-panel.open { opacity: 1; transform: translateY(0); }
.shortcut-picker-header {
  padding: 10px 14px; font-size: 11.5px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.shortcut-picker-list { display: flex; flex-direction: column; padding: 6px; overflow-y: auto; flex: 1; min-height: 0; }
.shortcut-picker-item {
  display: flex; flex-direction: column; gap: 3px; text-align: left; background: none; border: none;
  border-radius: 8px; padding: 8px 10px; width: 100%;
}
/* Separador discreto entre atalhos -- só quando NÃO está em hover/ativo
   (senão a linha cortava o retângulo colorido do hover ao meio). */
.shortcut-picker-list .shortcut-picker-item:not(:last-child):not(:hover):not(.active) { border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; }
.shortcut-picker-item:hover, .shortcut-picker-item.active { background: var(--accent-light); }
.shortcut-picker-item-top { display: flex; align-items: center; gap: 8px; }
.shortcut-picker-name { font-weight: 700; color: var(--primary); font-size: 13.5px; }
.shortcut-picker-preview {
  color: var(--text-secondary); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.shortcut-picker-empty { text-align: center; color: var(--text-muted); font-size: 12.5px; padding: 24px 10px; }
@media (max-width: 900px) {
  .shortcut-picker-panel {
    /* Opt-out do bottom-sheet de tela cheia herdado de .emoji-picker-panel --
       no celular o menu continua ancorado ao composer (JS calcula
       top/left/width a cada frame, ver positionShortcutPicker), só mais
       compacto, nunca ocupando a tela inteira nem grudado no fundo. */
    position: fixed !important; bottom: auto !important; left: auto !important; right: auto !important;
    width: auto !important; border-radius: 12px !important;
  }
}

.reply-preview-bar { display: flex; align-items: center; gap: 8px; padding: 8px 20px; background: var(--orange-100); border-top: 1px solid var(--border); font-size: 12px; }
.reply-preview-bar .rp-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.reply-preview-bar .rp-sender { font-weight: 700; color: var(--orange-700); margin-right: 4px; }
.chat-compose { padding: 14px 20px; border-top: 1px solid var(--border); background: var(--white); display: flex; gap: 10px; align-items: flex-end; }
.chat-compose textarea { flex: 1; resize: none; min-height: 42px; max-height: 120px; }
/* Fallback pra qualquer largura -- mesmo com o menu "⋮" liberando espaço no
   mobile (ver .compose-overflow-btn abaixo), continua valendo como rede de
   segurança: nunca quebra pra uma 2ª linha invisível dentro da textarea,
   corta limpo numa linha só não importa o quanto o composer aperte. */
.chat-compose textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Menu "⋮" (anexo/emoji/anotação) -- some no desktop (tela larga, cabem os
   3 ícones separados numa linha só); só aparece no mobile, ver media query
   mais abaixo. */
.compose-overflow-btn { display: none; }
.compose-overflow-menu {
  position: fixed; z-index: 220; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--elevation-2); padding: 6px; width: 200px; display: flex; flex-direction: column; gap: 2px;
}
.compose-overflow-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; padding: 10px 10px; border-radius: var(--radius-sm);
  font-size: 13.5px; color: var(--text-primary); cursor: pointer;
}
.compose-overflow-menu button:hover { background: var(--surface-alt); }
.compose-overflow-menu .icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }

/* Gravação de áudio no composer -- botão de microfone fica na mesma posição
   do botão "Enviar" (ver #btn-mic ao lado dele em views.inbox.js); ao gravar,
   substitui a textarea por um indicador (cancelar/pausar + onda ao vivo +
   cronômetro), mesma altura mínima da textarea pra não pular o layout. */
.voice-record-indicator {
  flex: 1; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 4px;
}
.voice-record-cancel, .voice-record-pause {
  background: none; border: none; font-size: 16px; flex-shrink: 0;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.voice-record-cancel { font-size: 18px; color: var(--danger); }
.voice-record-cancel:hover { background: rgba(220, 38, 38, .1); }
.voice-record-pause { color: var(--ink); }
.voice-record-pause:hover { background: rgba(0, 0, 0, .06); }
.voice-record-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--danger); flex-shrink: 0;
  animation: voice-record-pulse 1.2s ease-in-out infinite;
}
.voice-record-dot.paused { background: var(--ink-soft); animation: none; }
@keyframes voice-record-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.voice-record-time { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--ink); min-width: 34px; text-align: right; }
#btn-mic.recording { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Onda ao vivo enquanto grava -- uma barra nova a cada ~100ms (altura pelo
   volume real captado via AnalyserNode, ver startVoiceRecording), empurrando
   as anteriores; mesma linguagem visual das barras do player de áudio já
   enviado (.voice-bar), só que viva em vez de decorativa/determinística. */
.voice-record-waveform {
  flex: 1; display: flex; align-items: center; gap: 2px; height: 28px; overflow: hidden; min-width: 0;
}
.voice-record-bar {
  width: 3px; min-width: 3px; border-radius: 2px; background: var(--accent); flex-shrink: 0;
  transition: height .08s ease-out;
}

/* Modo "+ Anotação interna" do composer -- mesma estrutura de .chat-compose,
   só com o acento amarelo pra já prever visualmente o que vai virar. */
.internal-note-compose { background: #fffbeb; flex-direction: column; align-items: stretch; gap: 8px; }
.internal-note-compose textarea {
  border-color: #fde68a; background: white; min-height: 60px; resize: none;
}
.internal-note-compose textarea:focus { border-color: var(--warning); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); }
.internal-note-compose-actions { display: flex; justify-content: flex-end; gap: 8px; }
.internal-note-submit { background: var(--warning); }
.internal-note-submit:hover { background: #b45309; }

/* Barra de formatação (negrito/itálico/tachado/limpar) que aparece ao
   selecionar texto no composer -- mesmos marcadores que o WhatsApp entende
   de verdade (*negrito*, _itálico_, ~tachado~). Posicionada via JS (fixed,
   acima do textarea), escondida por padrão. */
.compose-format-toolbar {
  position: fixed; z-index: 260; background: var(--white); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); display: flex; align-items: center; padding: 4px; gap: 2px;
}
.compose-format-toolbar button {
  background: none; border: none; width: 30px; height: 30px; border-radius: 7px; font-size: 13px;
  display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.compose-format-toolbar button:hover { background: var(--orange-50); color: var(--orange-600); }
.compose-format-toolbar .compose-format-sep { width: 1px; height: 18px; background: var(--border); margin: 0 2px; }
/* Botão de enviar mensagem -- ação de comunicação, usa o accent teal em vez
   do azul primário genérico (§4/§5 do briefing de marca). */
#btn-send, #mtpl-send { background: var(--accent); }
#btn-send:hover, #mtpl-send:hover { background: var(--accent-hover); }

.detail-col { width: 300px; border-left: 1px solid var(--border); background: var(--white); flex-shrink: 0; overflow-y: auto; padding: 20px; }
.detail-col .avatar-lg { width: 64px; height: 64px; border-radius: 50%; font-size: 22px; margin: 0 auto 12px; }
.detail-col .avatar-lg.avatar-group { font-size: 28px; }
.group-member-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.group-member-row:last-child { border-bottom: none; }
.group-member-info { flex: 1; min-width: 0; }
.group-member-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.group-member-phone { font-size: 11.5px; color: var(--ink-soft); }
.detail-section { margin-top: 20px; }
.detail-section h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 8px; }
.detail-field { margin-bottom: 10px; }
.detail-field-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }
.detail-field-value { font-size: 13px; color: var(--ink); margin-top: 1px; min-height: 17px; word-break: break-word; }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; color: white; margin: 0 6px 6px 0; }

/* ---------- Kanban ---------- */
.kanban-board { display: flex; gap: 16px; height: 100%; overflow-x: auto; padding-bottom: 8px; }
.kanban-col { width: 270px; flex-shrink: 0; background: var(--orange-50); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; }
.kanban-col-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 0 4px; }
.kanban-col-header .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.kanban-col-title { font-weight: 700; font-size: 13px; }
.kanban-count { background: var(--white); border-radius: 20px; font-size: 11px; padding: 1px 8px; color: var(--ink-soft); }
.kanban-cards { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.kanban-card {
  background: white; border-radius: 10px; padding: 12px; border: 1px solid var(--border); cursor: grab;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.kanban-card:hover { border-color: var(--orange-300); }
.kanban-card.dragging { opacity: .4; }
.kanban-card .name { font-weight: 600; font-size: 13px; }
.kanban-card .preview { color: var(--ink-soft); font-size: 12px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-card .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.kanban-col-drop { outline: 2px dashed var(--orange-400); outline-offset: -4px; border-radius: 10px; }

/* ---------- Tables (contacts / users) ---------- */
.data-table { width: 100%; border-collapse: collapse; background: white; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.data-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; color: var(--ink-soft); background: var(--orange-50); padding: 10px 16px; letter-spacing: .03em; }
.data-table td { padding: 12px 16px; border-top: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
.data-table tr:hover td { background: var(--orange-50); }
.data-table tr[data-id] { cursor: pointer; }
.cell-main { font-weight: 600; }
.cell-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }
.cell-muted { color: var(--ink-soft); }
.row-chevron { opacity: 0; transition: opacity .12s; color: var(--orange-400); flex-shrink: 0; }
.data-table tr:hover .row-chevron { opacity: 1; }
.table-empty-row { text-align: center; color: var(--ink-soft); padding: 44px 20px; }
.table-empty-row .table-empty-icon { font-size: 30px; margin-bottom: 8px; display: block; }
.row-flex { display: flex; align-items: center; gap: 10px; }
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; align-items: center; }
.toolbar input[type=text] { max-width: 280px; }
.toolbar .spacer { flex: 1; }
.role-pill { padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.role-admin_geral { background: var(--secondary-light); color: #6d28d9; }
.role-admin_empresa { background: #fde7f3; color: #be185d; }
.role-supervisor { background: var(--orange-100); color: var(--orange-700); }
.role-atendente { background: var(--accent-light); color: #0f766e; }

/* ---------- User modal: avatar color swatches + role option cards ---------- */
.avatar-swatch-row { display: flex; gap: 8px; flex-wrap: wrap; }
.avatar-swatch {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
  padding: 0; transition: transform .1s;
}
.avatar-swatch:hover { transform: scale(1.1); }
.avatar-swatch.selected { border-color: var(--ink); box-shadow: 0 0 0 2px white, 0 0 0 3px var(--ink); }
.role-option-list { display: flex; flex-direction: column; gap: 8px; }
.role-option {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .1s, background .1s;
}
.role-option:hover { border-color: var(--orange-300); }
.role-option.selected { border-color: var(--orange-500); background: var(--orange-100); }
.role-option input[type=radio] { accent-color: var(--orange-600); flex-shrink: 0; }
.role-option-body { flex: 1; min-width: 0; }
.role-option-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.role-option-desc { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.dept-color-preview { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; flex-shrink: 0; }
.password-field-wrap { position: relative; }
.password-field-wrap input { padding-right: 40px; }
.btn-toggle-pw {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 6px 8px; font-size: 14px; line-height: 1;
}
.toggle-switch-row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.toggle-switch-row .label-text { font-size: 13px; font-weight: 600; }
.toggle-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle-switch .track {
  position: absolute; inset: 0; background: var(--border); border-radius: 20px; transition: background .15s;
}
.toggle-switch .thumb {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: white; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s;
}
.toggle-switch input:checked ~ .track { background: var(--ok); }
.toggle-switch input:checked ~ .thumb { transform: translateX(18px); }

/* ---------- Settings ---------- */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1000px; }
.card { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.card h3 { margin: 0 0 4px; font-size: 15px; }
.card .desc { color: var(--ink-soft); font-size: 12.5px; margin-bottom: 10px; }
.status-line { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 13px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }
.status-dot.ok { background: var(--ok); }
.qr-box { text-align: center; padding: 16px; background: var(--orange-50); border-radius: 10px; margin-top: 12px; }
.qr-box img { max-width: 220px; border-radius: 8px; }

/* ---------- Configurações do sistema (subabas, admin_geral) ----------
   Painel CLARO (era var(--sidebar), azul-marinho escuro) -- dois blocos
   escuros grudados (rail principal + este subnav) formavam uma faixa única
   de ~25% da largura da tela, destoando do resto do app (rail fino escuro +
   conteúdo claro em toda outra tela). Nenhuma lógica JS depende da cor (só
   alterna a classe .active), mudança contida só neste bloco de CSS. */
.settings-shell { display: flex; height: 100%; min-height: 0; overflow: hidden; }
.settings-subnav {
  width: 260px; flex-shrink: 0; height: 100%; overflow-y: auto;
  background: var(--surface-alt); border-right: 1px solid var(--border);
  padding: 16px 12px 20px; color: var(--text-primary);
}
.settings-subnav-title {
  font-size: 15px; font-weight: 800; color: var(--text-primary); padding: 2px 10px 14px;
  display: flex; flex-direction: column; gap: 3px;
}
.settings-subnav-title .sub { font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.settings-subnav-search { position: relative; margin-bottom: 16px; }
.settings-subnav-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-muted); }
.settings-subnav-search input {
  width: 100%; background: var(--white); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 10px; padding: 9px 12px 9px 34px; font-size: 13px;
}
.settings-subnav-search input::placeholder { color: var(--text-muted); }
.settings-subnav-search input:focus { border-color: var(--primary); }
.settings-subnav-group-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); padding: 14px 10px 6px;
}
.settings-subnav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; color: var(--text-secondary); padding: 9px 10px; border-radius: 9px;
  font-size: 13.5px; cursor: pointer; transition: background .15s, color .15s;
}
.settings-subnav-item svg, .settings-subnav-item .icon { flex-shrink: 0; width: 16px; text-align: center; }
.settings-subnav-item:hover { background: var(--border); color: var(--text-primary); }
.settings-subnav-item.active { background: var(--primary); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
.settings-subcontent { flex: 1; min-width: 0; height: 100%; overflow-y: auto; padding: 30px 36px; }
.settings-subcontent-header { margin-bottom: 22px; }
.settings-subcontent-header h2 { margin: 0 0 4px; font-size: 18px; }
.settings-subcontent-header .desc { color: var(--ink-soft); font-size: 12.5px; }
.settings-subcontent-body { max-width: 640px; }
.settings-subcontent-body.wide { max-width: 900px; }

.brand-upload-row { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.brand-upload-preview {
  width: 64px; height: 64px; border-radius: 14px; flex-shrink: 0; overflow: hidden;
  background: var(--orange-50); border: 1px dashed var(--orange-200);
  display: flex; align-items: center; justify-content: center;
}
.brand-upload-preview-sm { width: 44px; height: 44px; border-radius: 10px; }
.brand-upload-preview img { width: 100%; height: 100%; object-fit: contain; }
.brand-upload-empty { font-size: 10px; color: var(--ink-soft); text-align: center; padding: 0 4px; line-height: 1.3; }
.brand-upload-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.brand-upload-col input[type=text] { margin: 0; }

/* ---------- Dashboard ---------- */
.dash-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--orange-50); border: 1px solid var(--orange-100); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 24px;
}
.dash-toolbar-field { display: flex; flex-direction: column; gap: 3px; }
.dash-toolbar-field label { margin: 0; font-size: 10.5px; }
.dash-toolbar-field input, .dash-toolbar-field select { margin: 0; padding: 7px 10px; font-size: 12.5px; min-width: 130px; }
.dash-segmented { display: flex; background: white; border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.dash-segmented button {
  border: none; background: none; padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  border-radius: 6px; cursor: pointer; transition: background .15s, color .15s;
}
.dash-segmented button.active { background: var(--orange-600); color: #fff; }
.dash-toolbar-spacer { flex: 1; }

.dash-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 26px; }
.dash-kpi-card { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.dash-kpi-card .dash-kpi-label { font-size: 11.5px; color: var(--ink-soft); font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.dash-kpi-card .dash-kpi-value { font-size: 22px; font-weight: 800; color: var(--orange-700); }
.dash-kpi-card .dash-kpi-sub { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.dash-kpi-card-warn { border-color: #fde68a; background: linear-gradient(180deg, #fffbeb, white); }
.dash-kpi-card-warn .dash-kpi-value { color: #b45309; }

.dash-leaderboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 20px; }
.dash-leaderboard-card { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.dash-leaderboard-title { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.dash-leaderboard-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--orange-50); }
.dash-leaderboard-row:first-of-type { border-top: none; }
.dash-leaderboard-medal { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.dash-leaderboard-name { font-weight: 600; font-size: 13px; flex-shrink: 0; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-leaderboard-meta { margin-left: auto; text-align: right; }
.dash-leaderboard-pct { font-size: 12.5px; font-weight: 700; color: var(--orange-700); }
.dash-leaderboard-sub { font-size: 10.5px; color: var(--ink-soft); margin-top: 1px; }

.dash-compare-good { color: var(--ok); font-weight: 700; }
.dash-compare-bad { color: var(--danger); font-weight: 700; }

.dash-profile-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.dash-profile-avatar {
  width: 46px; height: 46px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dash-profile-name { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.dash-profile-role { font-size: 11.5px; color: var(--ink-soft); text-transform: capitalize; }

.dash-weekday-summary { display: flex; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.dash-weekday-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dash-weekday-bar-track { width: 100%; max-width: 26px; height: 70px; background: var(--orange-50); border-radius: 6px; display: flex; align-items: flex-end; overflow: hidden; }
.dash-weekday-bar-fill { width: 100%; background: linear-gradient(180deg, #60a5fa, #2563eb); border-radius: 6px 6px 0 0; min-height: 2px; transition: height .2s; }
.dash-weekday-bar-count { font-size: 11px; font-weight: 700; color: var(--ink); }
.dash-weekday-bar-label { font-size: 10px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }

.dash-section-title { font-size: 14.5px; font-weight: 700; margin: 0 0 14px; color: var(--ink); }
.dash-card { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 24px; }

.dash-heatmap-wrap { overflow-x: auto; }
.dash-heatmap { border-collapse: separate; border-spacing: 3px; font-size: 10.5px; }
.dash-heatmap th { font-weight: 600; color: var(--ink-soft); padding: 0 2px 4px; text-align: center; min-width: 22px; }
.dash-heatmap td.dash-heatmap-daylabel { color: var(--ink-soft); font-weight: 600; padding-right: 8px; text-align: right; white-space: nowrap; }
.dash-heatmap-cell {
  width: 22px; height: 20px; border-radius: 4px; background: var(--orange-50); cursor: default;
  display: flex; align-items: center; justify-content: center; font-size: 9px; color: #fff;
  transition: transform .1s;
}
.dash-heatmap-cell:hover { transform: scale(1.25); position: relative; z-index: 1; }
.dash-heatmap-legend { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 11px; color: var(--ink-soft); }
.dash-heatmap-legend-scale { display: flex; height: 10px; width: 140px; border-radius: 4px; overflow: hidden; }
.dash-heatmap-legend-scale span { flex: 1; }

.dash-chart-box { position: relative; height: 280px; }
.dash-chart-box.pie { height: 320px; max-width: 420px; margin: 0 auto; }

.card-header-row { display: flex; align-items: flex-start; gap: 14px; }
.card-icon-badge {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: var(--orange-100); display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.card-header-row .card-title-wrap { flex: 1; }
.card-header-row .card-title-wrap h3 { margin: 0; font-size: 15.5px; }
.card-header-actions { margin-left: auto; flex-shrink: 0; }

.channels-list { display: flex; flex-direction: column; gap: 12px; }
.channel-item {
  border: 1px solid var(--border); border-radius: 14px; padding: 16px;
  transition: border-color .12s, box-shadow .12s;
}
.channel-item:hover { border-color: var(--orange-300); box-shadow: var(--shadow); }
.channel-item-top { display: flex; align-items: center; gap: 12px; }
.channel-item-info { flex: 1; min-width: 0; }
.channel-item-name, .channel-item-phone { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel-status-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; background: #fef2f2; color: #b91c1c; flex-shrink: 0;
}
.channel-status-pill.ok { background: #ecfdf5; color: #047857; }
.channel-status-pill.pending { background: #fffbeb; color: #b45309; }
.channel-item-name { font-weight: 700; font-size: 14px; }
.channel-item-phone { color: var(--ink-soft); font-size: 12px; margin-top: 1px; }
.channel-item-actions { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.channel-kebab-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: white;
  display: flex; align-items: center; justify-content: center; color: var(--ink-soft); flex-shrink: 0;
}
.channel-kebab-btn:hover { background: var(--orange-50); color: var(--orange-600); border-color: var(--orange-300); }
.channel-kebab-btn svg { width: 15px; height: 15px; fill: currentColor; }
.channels-empty {
  text-align: center; padding: 30px 16px; color: var(--ink-soft); font-size: 13px;
  border: 1.5px dashed var(--border); border-radius: 12px;
}
.channels-limit-warning {
  margin-top: 12px; padding: 10px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 600;
  background: #fffbeb; color: #b45309; border: 1px solid #fde68a;
}
.channel-webhook-details { margin-top: 10px; }
.channel-webhook-details summary { font-size: 12px; color: var(--orange-600); cursor: pointer; font-weight: 600; }
.channel-webhook-details summary:hover { color: var(--orange-700); }
.provider-badge-meta {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1877f2, #0a5fcc); color: white;
  font-weight: 800; font-size: 10.5px; letter-spacing: .03em;
}
.provider-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 640px) { .provider-choice-grid { grid-template-columns: 1fr; } }
.provider-choice-card {
  text-align: left; border: 1.5px solid var(--border); border-radius: 14px; padding: 18px;
  background: white; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.provider-choice-card:hover { border-color: var(--orange-400); box-shadow: var(--shadow); }
.provider-choice-badge {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 800; letter-spacing: .03em; color: white; margin-bottom: 10px;
}
.provider-choice-badge.meta { background: linear-gradient(135deg, #1877f2, #0a5fcc); }
.provider-choice-badge.zapi { background: var(--accent); }
.provider-choice-title { font-weight: 700; font-size: 15px; color: var(--ink); }
.provider-choice-features { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12.5px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 4px; }

/* ---------- Modal de canal (criar/editar) ---------- */
.channel-modal { width: 460px; }
.channel-modal-header { display: flex; align-items: center; gap: 13px; margin-bottom: 2px; }
.channel-modal-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; color: #fff;
}
.channel-modal-icon.zapi { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); }
.channel-modal-icon.meta { background: linear-gradient(135deg, #1877f2, #0a5fcc); }
.channel-modal-header h3 { margin: 0; font-size: 17px; }
.channel-modal-subtitle { font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; font-weight: 600; }
.channel-modal-card {
  margin-top: 20px; padding: 16px 16px 14px; border-radius: 14px;
  background: var(--bg); border: 1px solid var(--border);
}
.channel-modal-card .modal-section-title { margin-top: 0; padding-top: 0; border-top: none; display: flex; align-items: center; gap: 7px; font-size: 12px; }
.channel-modal-card label:first-of-type { margin-top: 2px; }
.field-optional {
  font-weight: 600; font-size: 10px; color: var(--ink-soft); background: var(--white);
  border: 1px solid var(--border); padding: 1px 7px; border-radius: 20px; margin-left: 5px;
  text-transform: none; letter-spacing: 0; vertical-align: 1px;
}
.channel-modal-switch {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 16px; padding: 10px 14px; border-radius: 10px;
  background: transparent; border: 1px dashed var(--border); color: var(--ink-soft);
  font-size: 12.5px; font-weight: 700; transition: border-color .15s, color .15s, background .15s;
}
.channel-modal-switch:hover { border-color: var(--orange-300); color: var(--orange-700); background: var(--orange-50); }
.squads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.squad-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.squad-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.squad-card-header strong { font-size: 14px; }
.squad-card-members { display: flex; flex-wrap: wrap; gap: 6px; }
.squad-member-chip {
  display: inline-flex; align-items: center; gap: 5px; background: var(--orange-100); color: var(--ink);
  border-radius: 20px; padding: 2px 8px 2px 2px; font-size: 11.5px; font-weight: 600;
}
.squad-member-picker { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 6px; }
.squad-member-option { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.squad-member-option:hover { background: var(--orange-50); }
.squad-member-option input { margin: 0; }

.stage-row { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--border); }
.stage-row:last-child { border-bottom: none; }
.stage-color-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; cursor: pointer; padding: 0;
  border: 2px solid white; box-shadow: 0 0 0 1px var(--border); transition: box-shadow .12s;
}
.stage-color-dot:hover { box-shadow: 0 0 0 2px var(--orange-300); }
.stage-name-input {
  flex: 1; border: 1.5px solid transparent; background: transparent; margin: 0;
  padding: 6px 8px; border-radius: 8px; font-size: 13.5px;
}
.stage-name-input:hover { background: var(--orange-50); }
.stage-name-input:focus { border-color: var(--orange-300); background: white; }
.color-popover { padding: 10px; width: auto; }
.dept-icon-badge {
  width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.form-row { display: flex; gap: 12px; }
.form-row > div { flex: 1; }
.code-box { background: var(--ink); color: #f5f5f4; font-family: Consolas, monospace; font-size: 12px; padding: 12px 14px; border-radius: 8px; overflow-x: auto; margin-top: 8px; }

/* ---------- Agenda ---------- */
.agenda-shell { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.agenda-nav-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 24px;
  border-bottom: 1px solid var(--border); background: var(--white); flex-shrink: 0;
}
.agenda-nav-bar .btn-icon { width: 30px; height: 30px; font-size: 15px; font-weight: 700; }
.agenda-range-label { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-left: 4px; text-transform: capitalize; }

.agenda-grid-scroll { flex: 1; overflow: auto; position: relative; cursor: grab; background: var(--white); }
.agenda-grid-scroll.is-dragging { cursor: grabbing; user-select: none; }
.agenda-grid-inner { position: relative; }

.agenda-grid-header { position: sticky; top: 0; z-index: 4; display: flex; background: var(--white); border-bottom: 1px solid var(--border); }
.agenda-hour-corner { position: sticky; left: 0; z-index: 5; width: 56px; flex-shrink: 0; background: var(--white); border-right: 1px solid var(--border); }
.agenda-day-header {
  width: 140px; flex-shrink: 0; text-align: center; padding: 8px 0 10px; border-right: 1px solid var(--border);
}
.agenda-day-header .dow { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); letter-spacing: .04em; }
.agenda-day-header .num {
  margin: 4px auto 0; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--ink);
}
.agenda-day-header.is-today .num { background: var(--orange-600); color: white; }

.agenda-grid-body { display: flex; }
.agenda-hour-col { position: sticky; left: 0; z-index: 2; width: 56px; flex-shrink: 0; background: var(--white); border-right: 1px solid var(--border); }
.agenda-hour-label {
  font-size: 10.5px; color: var(--ink-soft); text-align: right; padding: 2px 8px 0 0;
  box-sizing: border-box; transform: translateY(-7px);
}
.agenda-days { display: flex; position: relative; }
.agenda-day-col { width: 140px; flex-shrink: 0; position: relative; border-right: 1px solid var(--border); }
.agenda-day-col.is-today { background-color: var(--orange-50); }

.agenda-now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 3; pointer-events: none; }
.agenda-now-line::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

.agenda-appt {
  position: absolute; border-radius: 7px; padding: 4px 7px; overflow: hidden; cursor: pointer;
  background: linear-gradient(180deg, #60a5fa, #2563eb); color: white;
  box-shadow: 0 1px 3px rgba(37,99,235,.35); z-index: 1;
}
.agenda-appt:hover { filter: brightness(1.08); }
.agenda-appt .t { font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-appt .tm { font-size: 10px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.agenda-created-by { font-size: 12px; color: var(--ink-soft); margin: -8px 0 10px; }
.agenda-participant-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 9px; padding: 6px; }
.agenda-participant-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.agenda-participant-row:hover { background: var(--orange-50); }
.agenda-participant-row input { width: auto; margin: 0; }
.agenda-participant-name { flex: 1; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal input[type=date], .modal input[type=time] {
  width: 100%; border: 1.5px solid var(--border); border-radius: 9px; padding: 9px 10px;
  outline: none; background: var(--white); color: var(--ink); box-sizing: border-box;
}
.modal input[type=date]:focus, .modal input[type=time]:focus { border-color: var(--orange-400); }

/* ---------- Companies (admin_geral) ---------- */
.stat-row { display: flex; gap: 16px; margin-bottom: 20px; }
.stat-row.centered { justify-content: center; }
.stat-card {
  background: white; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 22px; min-width: 150px; display: flex; align-items: center; gap: 14px;
}
.stat-icon {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: var(--orange-100); display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.stat-value { font-size: 24px; font-weight: 800; color: var(--orange-700); line-height: 1.1; }
.stat-label { color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }

.companies-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.companies-toolbar input[type=text] { max-width: 280px; }
.status-filter-row { display: flex; gap: 6px; }
.status-filter-btn {
  background: white; border: 1.5px solid var(--border); border-radius: 20px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  transition: border-color .12s, color .12s, background .12s;
}
.status-filter-btn:hover { border-color: var(--orange-300); }
.status-filter-btn.active { background: var(--orange-600); border-color: var(--orange-600); color: white; }

.companies-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px;
}
.company-card {
  position: relative;
  background: white; border: 1px solid var(--border); border-radius: 18px;
  padding: 20px; display: flex; flex-direction: column;
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.company-card:hover { box-shadow: var(--shadow); border-color: var(--orange-300); transform: translateY(-2px); }
.company-card.inactive { opacity: .68; }
.company-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.company-avatar {
  width: 48px; height: 48px; border-radius: 13px;
  background: linear-gradient(135deg, var(--orange-500), var(--orange-700));
  color: white; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; flex-shrink: 0;
}
.company-kebab-btn {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: none;
  display: flex; align-items: center; justify-content: center; color: var(--ink-soft); flex-shrink: 0;
}
.company-kebab-btn:hover { background: var(--orange-50); border-color: var(--border); color: var(--orange-600); }
.company-kebab-btn svg { width: 16px; height: 16px; fill: currentColor; }
.tag-pill-muted { background: var(--orange-50); color: var(--ink-soft); }
.company-card-name { font-weight: 700; font-size: 15.5px; margin-top: 14px; }
.company-status-row { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 12px; color: var(--ink-soft); }
.company-card-meta-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); }
.company-card-meta-row .meta-item { display: flex; align-items: center; gap: 5px; }
.company-card-footer { margin-top: 16px; }
.company-card-footer .btn-primary { width: 100%; padding: 9px; font-size: 13px; }
.companies-empty {
  grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--ink-soft);
}
.companies-empty .companies-empty-icon { font-size: 40px; margin-bottom: 10px; }
.companies-empty .btn-primary { margin-top: 16px; }

/* ---------- Modal ---------- */
/* height explícito em var(--app-vh) por cima do inset:0 -- achado na mesma
   revisão de PWA/mobile do .modal acima: só encolher o max-height do modal
   não bastava, porque o BACKDROP (quem centraliza) continuava ocupando a
   altura cheia de ANTES do teclado abrir (position:fixed + inset:0 não
   acompanha o visualViewport sozinho -- mesmo motivo pelo qual .app-shell
   já precisou do mesmo tratamento antes). Sem isso, o modal ficava
   centralizado dentro de uma área maior que a de verdade visível, e a
   metade de baixo saía da tela atrás do teclado mesmo já mais curto. */
.modal-backdrop { position: fixed; inset: 0; top: var(--app-vh-offset, 0px); height: var(--app-vh, 100vh); background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; z-index: 100; }
/* max-height em var(--app-vh) (não 88vh estático) -- achado numa revisão de
   PWA/mobile: com o teclado aberto, visualViewport encolhe mas `vh` não
   muda nada, então um modal com muitos campos (Contato, Empresa, Usuário,
   Agenda...) calculava a altura contra a tela CHEIA de antes do teclado
   abrir -- um campo mais pro fim do formulário ficava literalmente atrás
   do teclado, sem nenhum jeito de rolar até ele. --app-vh (api.js) segue a
   altura de verdade VISÍVEL; 100vh de fallback cobre o instante antes do
   JS rodar (ou navegador sem visualViewport). */
.modal { background: white; border-radius: 16px; padding: 24px; width: 420px; max-width: 92vw; max-height: calc(var(--app-vh, 100vh) * 0.88); overflow-y: auto; box-shadow: var(--shadow); }
.modal h3 { margin-top: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ---------- Baixa manual / detalhe de recebimento (Financeiro) ----------
   Dialog dedicado, mais vivo que o CRUD genérico -- é sobre dinheiro
   entrando de verdade, merece parecer uma confirmação de pagamento, não só
   mais um formulário cinza. Escopado a `.settle-modal` de propósito, não
   toca em `.modal` genérico usado por dezenas de outros dialogs. */
.settle-modal { width: 480px; }
.settle-modal-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.settle-modal-header h3 { margin: 0; font-size: 17px; }
.settle-modal-icon {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
  box-shadow: 0 6px 16px rgba(16, 185, 129, .28);
}
.settle-modal-company { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; margin-top: 2px; }
.settle-modal-summary {
  display: flex; align-items: center; gap: 14px; background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: var(--radius-md, 12px); padding: 12px 16px; margin-bottom: 16px;
}
.settle-summary-item { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.settle-summary-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; }
.settle-summary-value { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.settle-summary-amount { color: #059669; font-size: 17px; }
.settle-summary-divider { width: 1px; align-self: stretch; background: var(--border); }
.settle-note {
  font-size: 12.5px; color: var(--text-secondary); background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm, 8px); padding: 10px 12px; margin-bottom: 14px; line-height: 1.5;
}
.settle-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.settle-form label { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; }
.settle-form-full { grid-column: 1 / -1; }
.settle-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.settle-detail-card {
  display: flex; align-items: flex-start; gap: 10px; background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); padding: 10px 12px;
}
.settle-detail-card-wide { grid-column: 1 / -1; }
.settle-detail-icon { font-size: 17px; line-height: 1; margin-top: 1px; }
.settle-detail-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); font-weight: 700; }
.settle-detail-value { font-size: 13px; color: var(--text-primary); margin-top: 2px; word-break: break-word; font-weight: 600; }
.settle-detail-amount { color: #059669; font-size: 15px; }
.btn-settle-confirm {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; border: none;
  padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: 13.5px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(16, 185, 129, .32); transition: transform var(--transition-fast, .12s ease-out), box-shadow var(--transition-fast, .12s ease-out);
}
.btn-settle-confirm:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 185, 129, .4); }
.btn-settle-confirm:disabled { opacity: .6; cursor: default; transform: none; }
@media (max-width: 640px) {
  .settle-form, .settle-detail-grid { grid-template-columns: 1fr; }
}
.modal-section-title {
  margin: 20px 0 4px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--orange-600);
}
.modal-wide { width: 700px; }

/* ---------- Modal de detalhe da empresa (Empresas → clicar no card) ----------
   Abas: Dados, Usuários (ativo/inativo), Financeiro (por ano), Plano --
   header em destaque com gradiente da marca, igual ao hero do Financeiro do
   cliente (mesma linguagem visual, "cores vivas" pedido explicitamente). */
.company-detail-modal { width: 640px; }
.cd-hero {
  display: flex; align-items: center; gap: 14px; background: var(--gradient-zap);
  border-radius: var(--radius-md, 12px); padding: 16px 18px; margin-bottom: 14px; color: #fff;
}
.cd-hero-avatar {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; font-size: 19px; font-weight: 800; background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .35);
}
.cd-hero-info h3 { margin: 0 0 6px; color: #fff; font-size: 17px; }
.cd-hero-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.cd-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.cd-badge-ok { background: rgba(255, 255, 255, .22); color: #fff; }
.cd-badge-off { background: rgba(255, 255, 255, .14); color: #fff; opacity: .8; }
.cd-badge-danger { background: #fff; color: #b91c1c; }
.cd-tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.cd-tab {
  background: none; border: none; border-bottom: 2.5px solid transparent; padding: 8px 4px 10px; margin-right: 14px;
  font-size: 13px; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: color .12s, border-color .12s;
}
.cd-tab:hover { color: var(--text-primary); }
.cd-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.cd-tab-content { min-height: 160px; }
.cd-filter-row { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.cd-filter-btn {
  background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-secondary);
  font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: 20px; cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.cd-filter-btn:hover { border-color: var(--primary); }
.cd-filter-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.cd-user-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.cd-user-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); background: var(--surface-alt); }
.cd-user-info { flex: 1; min-width: 0; }
.cd-user-name { font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-user-email { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-plan-card {
  background: var(--gradient-zap); color: #fff; border-radius: var(--radius-md, 12px); padding: 20px;
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.cd-plan-name { font-size: 18px; font-weight: 800; }
.cd-plan-price { font-size: 22px; font-weight: 800; }
.cd-plan-price span { font-size: 12px; font-weight: 600; opacity: .85; }
@media (max-width: 640px) {
  .company-detail-modal { width: 100%; }
  .cd-tabs { overflow-x: auto; }
}

/* Modal "Trocar plano" (Empresas → menu de ações) — comparação de preço,
   detalhamento do prorata do ciclo atual e resultado após confirmar. */
.cp-current-plan-card {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 12px 14px; border-radius: 10px; background: var(--surface-alt); border: 1px solid var(--border);
}
.cp-current-plan-name { font-weight: 600; }
.cp-current-plan-price { font-weight: 700; color: var(--primary); }
.cp-comparison-row { display: flex; align-items: center; gap: 16px; }
.cp-comparison-arrow { font-size: 18px; color: var(--text-muted); }
.cp-comparison-value { font-weight: 700; font-size: 15px; }
.cp-proration-box {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px;
  border-radius: 10px; background: var(--surface-alt); border: 1px solid var(--border);
}
.cp-proration-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.cp-proration-row.total { padding-top: 8px; border-top: 1px dashed var(--border); font-size: 14px; }
.cp-result-check { padding: 6px 0; font-size: 13.5px; }
.cp-result-check.warn { color: var(--warning); }
.table-wrap { overflow-x: auto; }
.modal-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-items: start; }
.modal-col { display: flex; flex-direction: column; min-width: 0; }
.modal-col .modal-section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
@media (max-width: 640px) {
  .modal-2col { grid-template-columns: 1fr; }
}

/* Menu de subabas (Configurações do sistema / Configurações da empresa /
   Dashboard) em tela estreita: a barra lateral fixa de 260px some quase todo
   o espaço restante numa tela de celular — vira uma barra horizontal em cima
   do conteúdo em vez de uma coluna ao lado. */
@media (max-width: 760px) {
  .settings-shell { flex-direction: column; }
  .settings-subnav {
    width: 100%; height: auto; max-height: 210px; flex-shrink: 0;
    padding: 12px; display: flex; flex-direction: column;
  }
  .settings-subcontent { width: 100%; padding: 20px 16px; }
}

/* ---------- Confirm dialog ---------- */
.confirm-backdrop { animation: confirm-fade .12s ease-out; }
.confirm-modal {
  width: 360px; text-align: center; padding: 32px 28px 26px;
  animation: confirm-pop .16s cubic-bezier(.2,.9,.3,1.3);
}
.confirm-icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange-100), var(--orange-200));
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.confirm-modal h3 { margin: 0 0 8px; font-size: 17px; }
.confirm-message { color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; margin: 0; }
.confirm-actions { justify-content: center; margin-top: 24px; }
.confirm-actions button { min-width: 110px; }
.confirm-actions #confirm-ok:focus, .confirm-actions #confirm-ok:focus-visible {
  outline: 3px solid var(--orange-200); outline-offset: 2px;
}
@keyframes confirm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirm-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }

/* ---------- Pedir para participar / pedido de entrada (join requests) ---------- */
.join-request-modal {
  width: 400px; text-align: center; padding: 32px 28px 26px;
  animation: confirm-pop .16s cubic-bezier(.2,.9,.3,1.3);
}
.join-request-modal h3 { margin: 0 0 10px; font-size: 17px; }
.join-request-modal label { display: block; text-align: left; margin: 18px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.join-request-modal textarea {
  width: 100%; resize: vertical; font-size: 13.5px;
}
.join-request-reason-box {
  margin-top: 14px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--surface-alt); border-left: 3px solid var(--accent);
  font-size: 13px; font-style: italic; color: var(--text-secondary); text-align: left;
}
.join-request-modal .modal-actions { justify-content: center; margin-top: 22px; }
.join-request-modal .modal-actions button { min-width: 110px; }

/* ---------- Import contatos (Excel) ---------- */
.import-step { display: flex; gap: 12px; margin-bottom: 18px; }
.import-step-num {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--orange-600); color: white; font-weight: 800; font-size: 12.5px;
  display: flex; align-items: center; justify-content: center;
}
.import-step-body { flex: 1; min-width: 0; }
.import-step-title { font-weight: 700; font-size: 13.5px; }
.import-step-desc { color: var(--ink-soft); font-size: 12px; margin: 3px 0 10px; line-height: 1.5; }
.import-dropzone {
  border: 1.5px dashed var(--border); border-radius: 12px; padding: 20px; text-align: center;
  cursor: pointer; transition: border-color .12s, background .12s; color: var(--ink-soft); font-size: 13px;
}
.import-dropzone:hover, .import-dropzone.dragover { border-color: var(--orange-400); background: var(--orange-100); }
.import-dropzone .import-dropzone-icon { font-size: 24px; display: block; margin-bottom: 6px; }
.import-filename { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--orange-700); }
.import-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.import-summary-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 700;
}
.import-summary-chip.ok-chip { background: #ecfdf5; color: #047857; }
.import-summary-chip.warn-chip { background: #fffbeb; color: #b45309; }
.import-summary-chip.bad-chip { background: #fef2f2; color: #b91c1c; }
.import-preview-table-wrap { max-height: 260px; overflow-y: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.import-preview-table-wrap .data-table { border: none; border-radius: 0; }
.import-preview-table-wrap thead th { position: sticky; top: 0; z-index: 1; }
.import-row-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.import-row-status.ok-status { color: #047857; }
.import-row-status.warn-status { color: #b45309; }
.import-row-status.bad-status { color: #b91c1c; }
.import-row-reason { font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }
tr.import-row-invalid td, tr.import-row-duplicate td { background: #fffbeb; }
.import-preview-table-wrap tbody tr[data-idx] { cursor: pointer; }
.import-preview-table-wrap tbody tr[data-idx]:hover td { background: var(--orange-50); }
tr.import-row-editing td { background: var(--orange-100); }
.import-edit-input { width: 100%; padding: 5px 8px; font-size: 12.5px; border: 1px solid var(--orange-300); border-radius: 6px; }

/* ---------- Financeiro ---------- */
.finance-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.finance-toolbar .spacer { flex: 1; }
/* Linha de tabela clicável (Financeiro → baixa manual, Dashboard → drill-down
   de vendedor) -- classe já usada em alguns lugares sem nenhuma regra
   correspondente (nenhum cursor/hover indicava que dava pra clicar). */
.data-table tr.row-clickable { cursor: pointer; }
.data-table tr.row-clickable:hover { background: var(--surface-alt); }
.invoice-status-pill { padding: 3px 11px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.invoice-status-pill.paid { background: #ecfdf5; color: #047857; }
.invoice-status-pill.pending { background: #fffbeb; color: #b45309; }
.invoice-status-pill.late { background: #fef2f2; color: #b91c1c; }

/* ---------- Financeiro/Faturamento do cliente (views.billing.js) ----------
   Padrão pra TODOS os papéis de empresa (admin_empresa/supervisor/atendente)
   -- não confundir com views.financeiro.js (só admin_geral, todas as
   empresas), que não foi tocado aqui. Hero em destaque com a próxima fatura
   + CTA de pagar, 3 estatísticas rápidas ao lado, e o histórico dentro de um
   card próprio -- em vez de só um título e uma tabela solta na página. */
.billing-hero {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch;
  background: var(--gradient-zap); border-radius: var(--radius-lg, 20px); padding: 24px 26px;
  margin-bottom: 20px; box-shadow: 0 12px 32px rgba(37, 99, 235, .18); color: #fff;
}
.billing-hero-main { flex: 1 1 220px; min-width: 220px; }
.billing-hero-eyebrow { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.billing-hero-amount { font-size: 34px; font-weight: 800; margin: 6px 0 4px; letter-spacing: -.01em; }
.billing-hero-ok { font-size: 26px; font-weight: 800; margin: 8px 0 4px; }
.billing-hero-due { font-size: 13px; font-weight: 600; opacity: .9; display: inline-flex; align-items: center; gap: 5px; }
.billing-hero-due-late { color: #fecaca; }
.billing-hero-due-today, .billing-hero-due-soon { color: #fde68a; }
.billing-hero-hint { font-size: 12.5px; opacity: .85; margin-top: 10px; max-width: 320px; }
.btn-billing-pay {
  margin-top: 14px; background: #fff; color: #1d4ed8; border: none; padding: 11px 22px;
  border-radius: 10px; font-weight: 800; font-size: 13.5px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18); transition: transform var(--transition-fast, .12s ease-out);
}
.btn-billing-pay:hover { transform: translateY(-1px); }
.billing-hero-stats { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.billing-stat {
  display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 14px; padding: 12px 16px; min-width: 130px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.billing-stat-icon { font-size: 19px; }
.billing-stat-value { font-size: 17px; font-weight: 800; line-height: 1.1; }
.billing-stat-label { font-size: 10.5px; opacity: .85; font-weight: 600; margin-top: 1px; }
.billing-table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 16px); padding: 20px 0 8px; box-shadow: var(--elevation-1, var(--shadow)); }
.billing-table-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 20px 14px; flex-wrap: wrap; }
.billing-table-card-header h3 { margin: 0; font-size: 15px; }
.billing-info-tip {
  background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-secondary);
  font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 20px; cursor: pointer;
}
.billing-info-tip:hover { border-color: var(--primary); color: var(--primary); }
.billing-table-card .data-table { margin: 0; }
@media (max-width: 640px) {
  .billing-hero { flex-direction: column; }
  .billing-hero-stats { justify-content: space-between; }
  .billing-stat { flex: 1; min-width: 0; }
}

.pay-modal-header { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.pay-modal-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; font-size: 21px; background: var(--gradient-zap); color: #fff;
  box-shadow: 0 6px 14px rgba(37, 99, 235, .28);
}
.pay-modal-amount { font-size: 21px; font-weight: 800; color: var(--text-primary); line-height: 1.15; }
.pay-modal-due { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }

.pay-method-tabs { display: flex; gap: 8px; margin: 14px 0; }
.pay-method-tab {
  flex: 1; padding: 10px; border-radius: 10px; border: 1.5px solid var(--border); background: white;
  font-size: 13px; font-weight: 700; color: var(--ink-soft); cursor: pointer; transition: border-color .12s, color .12s, background .12s;
}
.pay-method-tab:hover { border-color: var(--orange-300); }
.pay-method-tab.active { background: var(--orange-600); border-color: var(--orange-600); color: white; }
.pay-pix-box { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pay-pix-box img { width: 200px; height: 200px; border-radius: 10px; border: 1px solid var(--border); padding: 8px; }
.pay-pix-box label { align-self: flex-start; }
.pay-pix-box .row-flex { width: 100%; }
.asaas-status-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); margin-top: 8px; }
.month-nav { display: flex; align-items: center; gap: 10px; }
.month-nav-label { font-weight: 700; font-size: 14.5px; min-width: 140px; text-align: center; }

/* ---------- Paginação ---------- */
.pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 4px 2px; }
.pagination-info { font-size: 12.5px; color: var(--ink-soft); }
.pagination-controls { display: flex; align-items: center; gap: 10px; }
.pagination-page { font-size: 12.5px; font-weight: 600; color: var(--ink); min-width: 110px; text-align: center; }

/* ---------- Contatos e Financeiro/Faturamento responsivos no mobile ----------
   .data-table é uma tabela HTML de verdade (thead + linhas) -- ótima no
   desktop, mas com 5-6 colunas nunca cabe numa tela de ~375-414px. Nas
   telas pedidas (Contatos, Financeiro do admin_geral, Financeiro/Faturamento
   do admin_empresa/supervisor) o JS marca a própria <table> com
   .responsive-table -- só ali cada <tr> vira uma "carta" empilhada (thead
   escondido, cada <td> com um rótulo via attr(data-label)). Outras telas
   com .data-table (Usuários, Empresas, Automação, Configurações) não foram
   tocadas nesta rodada, fora do que foi pedido. */
@media (max-width: 900px) {
  /* Cabeçalho com botões (hoje só usado por Contatos) -- título ocupa a
     linha inteira, botões de ação viram uma segunda linha dividindo o
     espaço igualmente, em vez de espremer tudo numa linha só. */
  .responsive-view-header { flex-wrap: wrap; row-gap: 10px; padding: 14px 16px; }
  .responsive-view-header > div:first-child { width: 100%; }
  .responsive-view-header .row-flex { width: 100%; }
  .responsive-view-header .row-flex button { flex: 1; }

  .view-body { padding: 14px 14px 20px; }

  /* Cards de estatística (contagem de contatos, total/recebido/pendente do
     mês) nunca coube 3 lado a lado numa tela de celular -- viram 2 por
     linha (ou 1, se ainda não couber) em vez de espremer/vazar da tela. */
  .stat-row { flex-wrap: wrap; gap: 10px; }
  .stat-card { flex: 1 1 calc(50% - 5px); min-width: 0; padding: 12px 14px; }
  .stat-value { font-size: 19px; }

  /* Busca de Contatos ocupando a largura inteira em vez do max-width fixo
     pensado pro desktop. */
  .toolbar { flex-wrap: wrap; }
  .toolbar input[type=text] { max-width: none; width: 100%; }

  /* Campos lado a lado em formulário (CEP/Cidade, validade/CVV do cartão
     etc.) empilham em vez de espremer -- usado em todo modal do app, não
     só Contatos/Financeiro, mas é uma correção só de mobile, sem downside
     em nenhum lugar que já usa .form-row. */
  .form-row { flex-direction: column; gap: 12px; }

  .responsive-table thead { display: none; }
  .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td {
    display: block; width: 100%;
  }
  .responsive-table tr { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; padding: 4px 14px; }
  .responsive-table tr:hover td { background: none; }
  .responsive-table td {
    border-top: none; padding: 7px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  .responsive-table td:first-child { padding-top: 12px; font-weight: 700; }
  .responsive-table td:last-child { padding-bottom: 12px; }
  .responsive-table td[data-label]::before {
    content: attr(data-label); font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: var(--ink-soft); flex-shrink: 0;
  }
  /* Linha "nenhum resultado" (colspan) continua centralizada em bloco --
     senão o flex/space-between genérico acima jogaria o ícone+texto pra
     esquerda. */
  .responsive-table td[colspan] { display: block; }
  /* Toque não tem :hover -- a setinha de "ver detalhes" (opacity:0 até
     passar o mouse) nunca aparecia no touch; aqui vira uma dica visual fixa
     e discreta em vez de simplesmente sumir sempre. */
  .responsive-table .row-chevron { opacity: .45; }
}

/* ---------- Lightbox de PDF/planilha mais aproveitável no mobile ----------
   92vw/88vh (tamanho pensado pro desktop) sobra pouco espaço de verdade numa
   tela de celular -- aqui vira quase tela cheia, e a toolbar/tabela encolhem
   pra caber melhor. Zoom real do PDF em si é feito soltando temporariamente
   o viewport (ver setDocViewportZoomable em views.inbox.js) -- CSS aqui é só
   aproveitamento de espaço. */
@media (max-width: 900px) {
  /* .media-lightbox-body base já tem max-width:92vw/max-height:88vh (pensado
     pro desktop) -- sem sobrescrever aqui, width:100vw/100vh sozinho ficava
     preso nesse teto herdado e nunca chegava perto de tela cheia de verdade. */
  .media-lightbox-body-doc { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; }
  .media-lightbox-pdf, .media-lightbox-spreadsheet { border-radius: 0; }
  .media-lightbox-spreadsheet { padding: 10px; }
  .media-lightbox-toolbar { top: 10px; right: 10px; gap: 6px; }
  .media-lightbox-toolbar button, .media-lightbox-toolbar a { width: 34px; height: 34px; font-size: 14px; }
  .xlsx-table-scroll table { font-size: 11px; }
  .xlsx-table-scroll td, .xlsx-table-scroll th { padding: 3px 6px; }
}

/* ---------- Automação (Flow Builder) ---------- */
.flow-editor { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.flow-toolbar {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid var(--border); background: var(--white); flex-shrink: 0;
}
.flow-name-input {
  border: 1px solid transparent; background: none; font-size: 15px; font-weight: 700; color: var(--ink);
  padding: 6px 10px; border-radius: 8px; min-width: 160px;
}
.flow-name-input:hover, .flow-name-input:focus { border-color: var(--border); background: var(--orange-50); }
.flow-toolbar-spacer { flex: 1; }
.flow-save-indicator { font-size: 12px; min-width: 70px; }
.flow-saving { color: var(--ink-soft); }
.flow-saved { color: var(--ok); font-weight: 600; }

.flow-validation-banner {
  padding: 9px 18px; background: #fffbeb; color: #b45309; font-size: 12.5px; font-weight: 600;
  border-bottom: 1px solid #fde68a; flex-shrink: 0;
}
.flow-validation-banner.hidden { display: none; }

.flow-body { display: flex; flex: 1; min-height: 0; }

.flow-sidebar {
  width: 210px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--white);
  padding: 14px 12px; overflow-y: auto;
}
.flow-sidebar-title { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.flow-palette-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: grab; margin-bottom: 6px;
  border: 1px solid var(--border); background: var(--white); transition: border-color .12s, box-shadow .12s;
}
.flow-palette-item:hover { border-color: var(--orange-300); box-shadow: var(--shadow); }
.flow-palette-icon {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; font-size: 13px;
  display: flex; align-items: center; justify-content: center; color: #fff;
}

.flow-canvas-wrap { position: relative; flex: 1; min-width: 0; overflow: hidden; background: var(--bg); }
.flow-canvas {
  position: relative; width: 100%; height: 100%; overflow: hidden; cursor: grab;
  background-image: radial-gradient(circle, var(--orange-200) 1px, transparent 1px);
  background-size: 22px 22px;
}
.flow-canvas.panning { cursor: grabbing; }
.flow-canvas-content { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.flow-edges-svg { position: absolute; top: 0; left: 0; width: 6000px; height: 4000px; overflow: visible; pointer-events: none; transform-origin: 0 0; }
.flow-edge { fill: none; stroke: var(--orange-300); stroke-width: 2.5; pointer-events: none; }
.flow-edge-pending { stroke: var(--orange-400); stroke-dasharray: 6 4; }
.flow-edge-hit { fill: none; stroke: transparent; stroke-width: 20; pointer-events: stroke; cursor: pointer; }
.flow-edge-group:hover .flow-edge { stroke: var(--orange-600); stroke-width: 3; }

.flow-node {
  position: absolute; background: var(--white); border: 1.5px solid var(--border); border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06); cursor: grab; user-select: none;
}
.flow-node:hover { border-color: var(--orange-300); }
.flow-node.selected { border-color: var(--orange-500); box-shadow: 0 0 0 3px var(--orange-100), 0 6px 18px rgba(37,99,235,.15); }
.flow-node.simulated { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.flow-node.drop-target { border-color: var(--ok); box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.28); transform: scale(1.02); }
.flow-node-header {
  display: flex; align-items: center; gap: 7px; padding: 9px 10px; border-radius: 12px 12px 0 0;
  color: #fff; font-size: 12.5px; font-weight: 700;
}
.flow-node-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-node-menu-btn { background: rgba(255,255,255,.2); border: none; color: #fff; border-radius: 6px; width: 20px; height: 20px; cursor: pointer; font-size: 13px; line-height: 1; }
.flow-node-menu-btn:hover { background: rgba(255,255,255,.35); }
.flow-node-body { padding: 10px 12px; font-size: 12px; color: var(--ink-soft); min-height: 20px; line-height: 1.5; word-break: break-word; }
.flow-node-empty { color: var(--orange-300); font-style: italic; }

.flow-port {
  position: absolute; width: 13px; height: 13px; border-radius: 50%;
  background: var(--white); border: 2.5px solid var(--orange-400); cursor: crosshair; z-index: 2;
}
.flow-port:hover { background: var(--orange-400); }
.flow-port-in { left: -7px; top: 34px; }
.flow-port-out { right: -7px; top: 34px; }
.flow-port-label {
  position: absolute; right: 18px; top: -8px; font-size: 10px; font-weight: 700; color: var(--ink-soft);
  white-space: nowrap; background: var(--white); padding: 0 3px;
  /* O texto do rótulo ("Sim"/"Não" etc.) fica sobre a área visível do card,
     mas é filho de .flow-port — sem isso, clicar em cima do texto era
     interpretado como clique na porta (closest(".flow-port") casava) e o
     mousedown do node inteiro saía de fininho sem selecionar nada. Blocos
     com 1 saída nunca tinham esse problema (label vazio = span nem existe). */
  pointer-events: none;
}

.flow-zoom-controls {
  position: absolute; bottom: 16px; right: 16px; display: flex; align-items: center; gap: 4px;
  background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 4px;
  box-shadow: var(--shadow); font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
}

.flow-config-panel {
  width: 300px; flex-shrink: 0; border-left: 1px solid var(--border); background: var(--white);
  overflow-y: auto;
}
.roleta-attendant-list {
  max-height: 180px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px;
  padding: 4px; margin-top: 4px;
}
.roleta-attendant-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12.5px;
  font-weight: 500; color: var(--ink); border-radius: 6px; cursor: pointer;
}
.roleta-attendant-item:hover { background: var(--orange-50); }
.roleta-attendant-item input { margin: 0; }
.flow-config-header { padding: 14px 16px; color: #fff; font-weight: 700; font-size: 13.5px; }
.flow-config-body { padding: 14px 16px; }
.flow-config-empty { padding: 24px 18px; color: var(--ink-soft); font-size: 12.5px; text-align: center; line-height: 1.6; }

.flow-schedule-row { display: grid; grid-template-columns: 1fr 90px 90px; gap: 8px; align-items: center; margin-bottom: 8px; }
.flow-schedule-row input[type=time] { margin: 0; padding: 6px 8px; font-size: 12px; }

.flow-options-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.flow-option-row { display: grid; grid-template-columns: 56px 1fr 26px; gap: 6px; align-items: center; }
.flow-option-row input { margin: 0; padding: 7px 8px; font-size: 12.5px; }
.flow-option-row .opt-remove {
  width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border); background: white;
  color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.flow-option-row .opt-remove:hover { background: #fef2f2; border-color: var(--danger); color: var(--danger); }

.flow-issues-list { margin: 4px 0 0; padding-left: 20px; font-size: 13px; color: var(--danger); line-height: 1.8; }

.flow-test-result { margin-top: 14px; max-height: 280px; overflow-y: auto; }
.flow-test-step { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; flex-wrap: wrap; }
.flow-test-step:last-child { border-bottom: none; }
.flow-log-error { width: 100%; margin-top: 4px; font-size: 11.5px; color: var(--danger); background: #fef2f2; padding: 6px 10px; border-radius: 8px; }

@media (max-width: 900px) {
  .flow-sidebar, .flow-config-panel { display: none; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: white; padding: 11px 20px; border-radius: 10px; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2); z-index: 200;
}
.toast-error { background: var(--danger); }

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
   MOBILE / PWA — celular e tablet só acessam a Caixa de Entrada (a
   restrição de verdade é em JS, ver currentView() em app.js); aqui é só a
   parte visual: layout de 1 painel por vez estilo WhatsApp (lista <-> chat
   <-> detalhes do contato), nunca as 3 colunas espremidas lado a lado.
   ===================================================================== */
/* Botão de "voltar" e "X" do painel de detalhes só existem no fluxo mobile
   — em telas largas as 3 colunas (rail/lista/chat) ficam sempre visíveis ao
   mesmo tempo, então não tem "voltar" nenhum. PRECISA vir antes do media
   query abaixo: mesma especificidade, e CSS resolve empate por ordem no
   arquivo — declarado depois, o :not-mobile escondia ele até dentro do
   media query mobile. */
.chat-back-btn { display: none; }
.detail-col-close { display: none; }

@media (max-width: 900px) {
  /* iOS Safari dá zoom automático na página ao focar qualquer campo com
     font-size menor que 16px -- o padrão do app inteiro é 14px (regra base,
     topo do arquivo), então TODO input/textarea (busca de contatos, campo
     de mensagem, formulários de modal) disparava esse zoom no celular.
     Restrito ao mobile por causa do próprio media query -- desktop continua
     em 14px, sem mudança de tipografia lá. */
  input, select, textarea { font-size: 16px; }

  /* Arquitetura própria pro mobile, não a sidebar do desktop encolhida:
     o rail principal (Agenda/Dashboard/Inbox/logout/avatar) e o rail da
     Caixa de Entrada (Conversas/Fila/Finalizados/Automação) eram DOIS
     menus verticais de 56px cada lado a lado — ~112px fixos comidos numa
     tela de ~375-390px de largura, espremendo lista/chat no resto. Os dois
     viram barras HORIZONTAIS finas empilhadas em cima do conteúdo. */
  .app-shell-body { flex-direction: column; }

  .rail {
    width: 100%; height: 50px; flex-direction: row; align-items: center;
    padding: 0 14px; gap: 10px; flex-shrink: 0;
  }
  /* iPhone com notch/Dynamic Island (só quando o rail é o elemento mais no
     topo -- sem o banner de impersonação por cima, ver @supports abaixo):
     height CRESCE pelo tamanho do notch (não vira padding sozinho) --
     como todo elemento aqui é box-sizing:border-box, só empurrar com
     padding-top numa barra de 50px fixos ia ESPREMER o conteúdo (ícone/
     avatar) contra quase zero de espaço, em vez de ganhar respiro de
     verdade. Height maior + padding-top do MESMO tamanho reserva
     exatamente o notch como uma faixa a mais em cima, sem afetar a altura
     "normal" (50px) onde o ícone/avatar já ficam centralizados. */
  @supports (padding: max(0px)) {
    .impersonation-banner.hidden + .app-shell-body .rail {
      height: calc(50px + env(safe-area-inset-top));
      padding-top: env(safe-area-inset-top);
    }
  }
  .rail-logo { margin-bottom: 0; width: 30px; height: 30px; font-size: 13px; flex-shrink: 0; }
  /* No mobile, empresa e admin_geral só acessam a Caixa de Entrada (ver
     currentView() em app.js) — nenhum botão de navegação (todos têm
     data-view; só #btn-logout não tem) faz sentido aqui, nem o de "inbox",
     redundante por já ser a única tela mostrada. Sobra logo + logout + avatar. */
  .rail-btn[data-view] { display: none; }
  .rail-spacer { flex: 1; }
  .rail-avatar { margin-top: 0; }

  .inbox-layout { flex-direction: column; position: relative; overflow: hidden; }

  .inbox-rail {
    flex-direction: row; width: 100%; height: auto; flex-shrink: 0;
    padding: 4px 10px; gap: 4px; justify-content: flex-start;
    border-right: none; border-bottom: 1px solid var(--border);
    overflow-x: auto;
  }
  .inbox-rail-btn {
    width: auto; height: auto; padding: 9px 12px; border-radius: 8px 8px 0 0; flex-shrink: 0;
  }
  .inbox-rail-btn svg { display: none; }
  .inbox-rail-btn::after { content: attr(data-label); font-size: 13px; font-weight: 600; white-space: nowrap; }
  .inbox-rail-btn.active { background: transparent; color: var(--orange-600); box-shadow: inset 0 -2px 0 var(--orange-600); }
  .inbox-rail.mobile-hide { display: none; }

  /* No mobile, .inbox-layout vira coluna -- .conv-list-col passa a ser item
     no eixo principal (não mais no cross-axis, onde stretch resolvia a
     altura de graça) e precisa de flex:1;min-height:0 pra não crescer até
     caber TODAS as conversas da lista (mesmo bug do .chat-col/.chat-messages,
     ver comentário em .inbox-layout). */
  .conv-list-col { width: 100%; flex: 1; min-height: 0; }
  .conv-list-col.mobile-hide { display: none; }

  .chat-col { display: none; width: 100%; }
  .chat-col.mobile-show { display: flex; }

  .chat-back-btn {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 50%; border: none; background: none; color: var(--ink);
  }
  .chat-back-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .chat-back-btn:hover { background: var(--orange-50); }

  /* Painel de detalhes do contato vira tela cheia por cima do chat, não uma
     3ª coluna (nunca ia caber) — some com o próprio X, ou tocando fora. */
  .detail-col {
    position: fixed; inset: 0; z-index: 60; width: 100%;
    padding-top: 56px;
  }
  .detail-col-close {
    position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; border: none; background: var(--orange-50); color: var(--ink);
  }
  .detail-col-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* Menu de contexto da conversa (⋮) some com o próprio toque, então não
     precisa do hover pra aparecer — em touch não existe hover de verdade. */
  .conv-item-menu-btn { opacity: 1; background: transparent; border-color: transparent; box-shadow: none; }

  /* Composer: anexo/emoji/anotação colapsam num único botão "⋮" (ver
     openComposeOverflowMenu, views.inbox.js) -- com mic+enviar também na
     mesma linha, os 3 ícones separados + textarea ficavam espremidos a ponto
     da textarea sobrar uns 80px de largura, texto e tudo colado. No desktop
     (fora deste media query) os 3 continuam separados, como sempre foram. */
  #btn-attach, #btn-emoji, #btn-note-mode { display: none; }
  .compose-overflow-btn { display: inline-flex; }
  /* Gravar áudio também entra no menu "⋮" (pedido explícito) -- some daqui
     igual aos outros 3, MAS reaparece sozinho assim que a gravação começa
     de verdade (setVoiceRecordingUI já alterna a classe .recording no
     próprio #btn-mic pra trocar o ícone pra ⏹ -- aproveitada aqui só pra
     visibilidade também). Sem isso não haveria como pausar/parar/enviar o
     áudio depois de iniciar a gravação pelo menu. */
  #btn-mic { display: none; }
  #btn-mic.recording { display: inline-flex; }
}

/* Barra de status do iOS/Android no modo PWA instalado (standalone) não
   fica sobrepondo o topo do app — respeita o "notch"/Dynamic Island quando
   existir. O padding-bottom (home indicator) fica em .app-shell mesmo,
   sem problema -- é uniforme, sempre a mesma cor por baixo (a área do
   composer/rail, nunca troca). O padding-TOP é diferente: .app-shell não
   tem background nenhum, então dar padding-top nele sozinho deixava a
   cor do <body> (branca) aparecer no vão do notch -- um "corte branco"
   entre a borda física da tela e onde o conteúdo colorido (rail azul-
   marinho, ou o banner de impersonação por cima dele) começa de verdade.
   Corrigido aplicando o respiro do notch no elemento que está REALMENTE
   no topo visualmente (não no container que os envolve), pra cor dele se
   estender pra dentro do notch em vez de sobrar branco -- o banner de
   impersonação quando visível, o rail quando não. */
@supports (padding: max(0px)) {
  .app-shell { padding-bottom: env(safe-area-inset-bottom); }
  .impersonation-banner { padding-top: calc(10px + env(safe-area-inset-top)); }
}
/* Com o teclado do iOS aberto, --app-vh (app.js) já encolheu pra caber só o
   espaço ACIMA dele -- manter o padding-bottom do home indicator por cima
   disso reservaria espaço duas vezes, deixando um vão vazio entre o composer
   e o teclado (o home indicator fica coberto pelo teclado nesse momento,
   não precisa de respiro). html.keyboard-open é alternado por
   applyViewportHeight em app.js comparando innerHeight com
   visualViewport.height. */
html.keyboard-open .app-shell { padding-bottom: 0; }

/* ---------- Menu fixo inferior (mobile/PWA, admin_empresa/supervisor) ----------
   Some no desktop (some > 900px) -- lá a rail lateral já cobre a navegação.
   No mobile, substitui o padding-bottom de safe-area do próprio .app-shell
   (ver .has-bottom-nav abaixo) -- o próprio menu reserva esse respiro. */
.bottom-nav { display: none; }
.app-shell.has-bottom-nav { padding-bottom: 0; }

@media (max-width: 900px) {
  .bottom-nav {
    display: flex; flex-shrink: 0; width: 100%; height: 58px;
    border-top: 1px solid var(--border); background: var(--surface);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-nav-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; border: none; background: none; color: var(--text-muted); font-size: 10.5px;
    font-family: inherit; cursor: pointer; padding: 6px 4px 4px;
  }
  .bottom-nav-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .bottom-nav-btn.active { color: var(--primary); }
  .bottom-nav-btn.billing-locked { opacity: .4; pointer-events: none; }
  /* Composer/teclado aberto precisam do espaço vertical inteiro pro chat --
     o menu fixo não compete por altura nesse momento (mesmo html.keyboard-open
     já usado pra zerar o padding de safe-area do app-shell). */
  html.keyboard-open .bottom-nav { display: none; }
}

/* ---------- Tela "Atalhos de mensagem" (public/js/views.shortcuts.js) ---------- */
.shortcut-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
  transition: border-color .12s, box-shadow .12s;
}
.shortcut-row:hover { border-color: var(--orange-300); box-shadow: var(--shadow); }
.shortcut-row-main { min-width: 0; flex: 1; }
.shortcut-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.shortcut-row-name { font-weight: 700; color: var(--orange-700); font-size: 14px; }
.shortcut-row-preview { color: var(--ink-soft); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shortcut-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
.shortcut-name-input-wrap { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: 9px; overflow: hidden; }
.shortcut-name-input-wrap .shortcut-name-slash { padding: 0 0 0 12px; color: var(--ink-soft); font-weight: 700; }
.shortcut-name-input-wrap input { border: none; }
.shortcut-global-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.shortcut-global-toggle input { width: auto; }
.shortcut-preview-frame { background: var(--background); border-radius: 12px; padding: 16px; min-height: 90px; display: flex; align-items: flex-start; }