/* Zeloa Copilot — fundação editorial (SPEC §14.3, slice S1.1 — fidelidade visual).
 * Tokens: Variação A do protótipo aprovado (`docs/design/prototypes/preview-direcao-design.html`),
 * registrados em `docs/design/tokens.md`. Sem CDN e sem build: fontes servidas pelo próprio
 * app (`/static/fonts`, licença OFL ao lado dos arquivos). */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Identidade azul sóbrio/branco (SPEC §14.30; base: paleta do zeloav2) */
  --navy-950: #151925;
  --navy-900: #1a2030;
  --ink: #1f2430;
  --navy-800: #2a3142;
  --navy-700: #3a4358;
  --navy-500: #6a7388;
  --navy-300: #a9b0c0;
  --navy-200: #d0d4de;
  --navy-100: #e6e8ee;
  --sky: #dcebff;
  --sky2: #d3e5ff;
  --sky-ink: #1f3a5f;
  --slate: #eef2f8;
  --slate-ink: #3a4358;
  --sun: #ffefb8;
  --sun-ink: #6b5200;
  --peach: #ffe9d2;
  --peach-ink: #8a4a10;
  --rose: #fce8f3;
  --rose-ink: #8a1d52;
  --lilac: #d9d4f7;
  --lilac-soft: #e4e0fa;
  --lilac-ink: #322d86;
  --ok: #22a06b;
  --ok-soft: #c5edd6;
  --ok-ink: #17663f;

  /* Superfícies */
  --bg-app: #f7f7f5;
  --bg-surface: #ffffff;
  --bg-subtle: var(--slate);
  --line: #e6e6e2;
  --line-strong: var(--navy-200);

  /* Texto */
  --text: var(--ink);
  --text-muted: #5d6679;
  --text-faint: #7d8598; /* só metadado decorativo/não essencial; nunca texto de ação */

  /* Marca */
  --brand: var(--ink);
  --brand-hover: var(--navy-800);
  --on-brand: #ffffff;
  --on-brand-muted: var(--navy-300);

  /* Pastéis de semântica (fundo + texto legível sobre ele) */
  --tone-butter: var(--sun);
  --tone-butter-text: var(--sun-ink);
  --tone-plum: var(--lilac-soft);
  --tone-plum-text: var(--lilac-ink);
  --tone-sage: var(--ok-soft);
  --tone-sage-text: var(--ok-ink); /* verde: só sucesso/conexão ativa/reserva */
  --tone-terracotta: var(--peach);
  --tone-terracotta-text: var(--peach-ink);
  --tone-blue: var(--sky);
  --tone-blue-text: var(--sky-ink);

  --danger: #c0245a;

  /* Atendimento: navy = marca/CTA; lilac = seleção/IA; bolha enviada em sky */
  --wine: var(--ink);
  --wine-hover: var(--navy-800);
  --wine-soft: var(--lilac-soft);
  --wa-bubble: var(--sky);
  --wa-ink: var(--sky-ink);
  --wa-green: var(--ink);
  --wa-green-hover: var(--navy-800);
  /* Cor oficial do logo de cada canal (selo e abas da Inbox, §14.40) — igual no tema escuro. */
  --marca-whatsapp: #25D366;
  --marca-airbnb: #FF385C;
  --chat-bg: #f4f6fa;
  --field: var(--slate);

  /* Paleta fechada das tags (SPEC §14.25/§14.30): fundo/texto ≥ 4.5:1, ponto ≥ 3:1 sobre branco */
  --tag-vinho-bg: #e4e0fa; --tag-vinho-fg: #322d86; --tag-vinho-dot: #6a5fd0;
  --tag-verde-bg: #c5edd6; --tag-verde-fg: #17663f; --tag-verde-dot: #1f8f5f;
  --tag-azul-bg: #dcebff; --tag-azul-fg: #1f3a5f; --tag-azul-dot: #3b7fd0;
  --tag-lilas-bg: #d9d4f7; --tag-lilas-fg: #322d86; --tag-lilas-dot: #8a5fd6;
  --tag-amarelo-bg: #ffefb8; --tag-amarelo-fg: #6b5200; --tag-amarelo-dot: #b58a12;
  --tag-laranja-bg: #ffe9d2; --tag-laranja-fg: #8a4a10; --tag-laranja-dot: #d06a1f;
  --tag-rosa-bg: #fce8f3; --tag-rosa-fg: #8a1d52; --tag-rosa-dot: #c0245a;
  --tag-cinza-bg: #eef2f8; --tag-cinza-fg: #3a4358; --tag-cinza-dot: #7b8190;

  /* Tipografia única: Plus Jakarta Sans */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-kicker: 0.6875rem; /* 11px — rótulos de seção uppercase (mínimo do app, SPEC §14.28) */
  --fs-sub: 0.6875rem;   /* 11px — subtítulo de card / apoio fino */
  --fs-meta: 0.75rem;    /* 12px — base densa de controles, badges, preview e metadado */
  --fs-sm: 0.75rem;      /* 12px — texto de apoio, labels, itens de menu */
  --fs-ui: 0.75rem;      /* 12px — controles e botões */
  --fs-body: 0.875rem;   /* 14px — bolhas de mensagem, cabeçalho de conversa, composer */
  --fs-input: 0.8125rem; /* 13px — inputs e selects em desktop */
  --fs-h3: 0.875rem;     /* 14px — subtítulos de card */
  --fs-h2: 1.5rem;       /* 24px — títulos de seção */
  --fs-h1: 1.5rem;       /* 24px — títulos principais */

  /* Espaço */
  --s-1: 4px;
  --s-1-5: 6px;
  --s-2: 8px;
  --s-2-5: 10px;
  --s-3: 12px;
  --s-3-5: 14px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 9999px;

  --shadow-2xs: 0 1px 2px rgba(31, 36, 48, 0.04);
  --shadow-card: 0 1px 3px rgba(31, 36, 48, 0.04), 0 1px 2px rgba(31, 36, 48, 0.02);
  --shadow-pop: 0 12px 28px rgba(31, 36, 48, 0.12), 0 2px 6px rgba(31, 36, 48, 0.05);
  --focus: 0 0 0 2px rgba(31, 36, 48, 0.28);

  --dock-w: 56px;
  --lista-w: 384px; /* md:w-96 do protótipo */
  --config-nav-w: 256px;

  --t-fast: 140ms ease-out;
}

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body { min-height: 100dvh; }

button, input, textarea, select { font: inherit; color: inherit; }
button { appearance: none; border: none; background: none; padding: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }

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

[hidden] { display: none !important; }

.app { min-height: 100dvh; display: flex; flex-direction: column; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.serif { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.015em; }

/* ---------- Ícones e botões icon-only (padrão geométrico do protótipo) ---------- */

.icon {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-fill { fill: currentColor; stroke: none; }
.icon-sm { width: 14px; height: 14px; }
.icon-xs { width: 12px; height: 12px; }

.btn-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  line-height: 1;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn-icon::after {
  content: "";
  position: absolute;
  inset: -4px;
}
.btn-icon > svg,
.btn-icon .icon {
  display: block;
  margin: 0;
  vertical-align: unset;
  transform: none;
  flex-shrink: 0;
}
.btn-icon:hover:not(:disabled) { background: rgba(31, 36, 48, 0.05); color: var(--text); }
.btn-icon:focus-visible { outline: none; box-shadow: var(--focus); }
.btn-icon:disabled { opacity: 0.4; }
.btn-icon[aria-current="page"],
.btn-icon.ativo {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--shadow-2xs);
}
.btn-icon.btn-icon-xs { width: 24px; height: 24px; border-radius: var(--r-xs); }
.btn-icon.btn-icon-xs::after { inset: -5px; }
.btn-icon.btn-icon-sm { width: 28px; height: 28px; border-radius: var(--r-sm); }
.btn-icon.btn-icon-sm::after { inset: -5px; }
.btn-icon.btn-icon-md { width: 32px; height: 32px; border-radius: var(--r-sm); }
.btn-icon.btn-icon-lg { width: 36px; height: 36px; border-radius: var(--r-md); }
.btn-icon.btn-icon-xl { width: 40px; height: 40px; border-radius: var(--r-full); }
.btn-icon-borda { border: 1px solid var(--line); background: var(--bg-surface); }

/* Avatar em iniciais (36px nos cards/header, 32px no dock/mobile) */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--tone-plum);
  color: var(--tone-plum-text);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}
.avatar-sm { width: 32px; height: 32px; font-size: 0.6875rem; }
.avatar-brand { background: var(--brand); color: var(--on-brand); font-weight: 600; box-shadow: var(--shadow-2xs); }
.avatar-neutro { background: var(--bg-subtle); color: var(--text-muted); font-weight: 600; }
.avatar-butter { background: var(--tone-butter); color: var(--tone-butter-text); }
.avatar-sage { background: var(--tone-sage); color: var(--tone-sage-text); }
.avatar-terracotta { background: var(--tone-terracotta); color: var(--tone-terracotta-text); }
.avatar-blue { background: var(--tone-blue); color: var(--tone-blue-text); }
button.avatar:focus-visible { outline: none; box-shadow: var(--focus); }

/* ---------- Botões de texto (delicados e compactos como no protótipo) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: var(--r-md);
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn:disabled { opacity: 0.5; }

.btn-primario { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-2xs); }
.btn-primario:hover:not(:disabled) { background: var(--brand-hover); }
.btn-bloco { width: 100%; min-height: 38px; }

.btn-secundario {
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--line);
  font-weight: 600;
}
.btn-secundario:hover:not(:disabled) { background: var(--bg-subtle); border-color: var(--line-strong); }

.btn-texto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  min-height: 30px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--brand);
}
.btn-texto:hover:not(:disabled) { background: rgba(31, 36, 48, 0.05); }
.btn-texto:focus-visible { outline: none; box-shadow: var(--focus); }

.btn-perigo { color: var(--danger); }
.btn-perigo.btn-secundario { border-color: rgba(192, 36, 90, 0.28); }
.btn-perigo:hover:not(:disabled) { background: var(--tone-terracotta); }

/* ---------- Campos ---------- */

.campo { display: flex; flex-direction: column; gap: 5px; }
.campo + .campo { margin-top: var(--s-3-5); }
.campo label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}
.campo .ajuda { font-size: var(--fs-sub); color: var(--text-muted); line-height: 1.4; }

/* Tom de voz da IA (SPEC §4.38): três presets em radiogroup, selecionado em --brand */
.campo-tom { border: 0; padding: 0; margin: 0; min-width: 0; }
.campo-tom legend { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); padding: 0; margin-bottom: 5px; }
.tom-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.tom-preset { position: relative; }
.tom-preset input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tom-preset span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-full); background: var(--bg-surface);
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.tom-preset input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.tom-preset input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.entrada,
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="number"],
.campo select,
.campo textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  color: var(--text);
  font-size: var(--fs-input);
  line-height: 1.4;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
@media (max-width: 767px) {
  /* Evita auto-zoom do Safari iOS em inputs de formulário */
  .entrada,
  .campo input[type="text"],
  .campo input[type="email"],
  .campo input[type="password"],
  .campo input[type="number"],
  .campo select,
  .campo textarea {
    font-size: 1rem;
  }
}
.campo textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
.campo select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.entrada:focus,
.campo input:focus,
.campo select:focus,
.campo textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
.campo input[aria-invalid="true"] { border-color: var(--danger); }

.campo-senha { position: relative; }
.campo-senha input { padding-right: 40px; }
.campo-senha .btn-icon { position: absolute; top: 0; bottom: 0; right: 5px; margin: auto 0; }

.checkbox {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  font-size: var(--fs-ui);
  color: var(--text-muted);
  cursor: pointer;
}
.checkbox input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); flex-shrink: 0; }

/* Mensagens de estado */
.aviso {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  font-size: var(--fs-ui);
  line-height: 1.45;
}
.aviso .icon { margin-top: 1px; }
.aviso-erro { color: var(--danger); }
.aviso-ok { color: var(--tone-sage-text); }
.aviso-info { color: var(--text-muted); }
.aviso-caixa {
  padding: var(--s-2-5) var(--s-3-5);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--tone-terracotta);
}
.aviso-caixa.aviso-ok { background: var(--tone-sage); }
.aviso-caixa.aviso-info { background: var(--bg-subtle); }

/* Indicador de estado: ponto 6px + texto 12px */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-muted);
}
.estado::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: currentColor;
  flex-shrink: 0;
}
.estado-responder { color: var(--tone-terracotta-text); font-weight: 600; }
.estado-ativo { color: var(--tone-plum-text); }
.estado-resolvido { color: var(--text-muted); }
.estado-ok { color: var(--tone-sage-text); font-weight: 600; }
.estado-perda { color: var(--tone-terracotta-text); }
.estado-pendente { color: var(--tone-butter-text); font-weight: 600; }

/* Pílula de estado do fluxo no cabeçalho da conversa */
.pilula-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-xs);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.3;
  background: var(--tone-plum);
  color: var(--tone-plum-text);
}
.pilula-estado::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: currentColor;
  flex-shrink: 0;
}
.pilula-estado.estado-responder { background: var(--tone-terracotta); color: var(--tone-terracotta-text); }
.pilula-estado.estado-resolvido { background: var(--bg-subtle); color: var(--text-muted); }
.pilula-estado.estado-ok { background: var(--tone-sage); color: var(--tone-sage-text); }
.pilula-estado.estado-pendente { background: var(--tone-butter); color: var(--tone-butter-text); }

/* ================================================================
   Autenticação (Atmosfera creme acolhedora + superfície editorial)
   ================================================================ */

.auth {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: calc(var(--s-6) + env(safe-area-inset-top)) var(--s-4) calc(var(--s-8) + env(safe-area-inset-bottom));
  background: var(--bg-app);
  gap: var(--s-5);
}

.auth-marca {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-1-5);
}

.auth-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2-5);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.auth-wordmark .marca-z {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--shadow-2xs);
}
.auth-frase {
  font-size: var(--fs-meta);
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 36ch;
}
.auth-frase em { font-style: normal; color: var(--text); font-weight: 500; }

.auth-corpo {
  width: 100%;
  max-width: 400px;
}
.auth-conteudo {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-card);
}
@media (min-width: 640px) {
  .auth-conteudo { padding: 28px; }
}
.auth-kicker {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-kicker);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.auth-titulo {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
}
.auth-sub { margin-top: 4px; color: var(--text-muted); font-size: var(--fs-meta); line-height: 1.45; }
.auth-form { margin-top: var(--s-5); }
.auth-form .aviso { margin-top: var(--s-3); }
.auth-form .btn-primario { margin-top: var(--s-4); }
.auth-form .checkbox { margin-top: var(--s-2-5); }
.auth-rodape {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2);
}
.auth-status { margin-top: var(--s-4); }

.lista-contas { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.lista-contas li { margin: 0; }
.lista-contas button {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2-5) var(--s-3-5);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-app);
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.lista-contas button:hover:not(:disabled) { background: var(--bg-subtle); border-color: var(--line-strong); }
.lista-contas button:focus-visible { outline: none; box-shadow: var(--focus); }
.lista-contas .nome-conta { font-size: var(--fs-body); font-weight: 700; color: var(--text); }
.lista-contas .icon { color: var(--text-muted); }

/* ================================================================
   Shell autenticado (tenant)
   ================================================================ */

.shell {
  /* `--app-altura` só existe com o teclado aberto (visualViewport, SPEC §14.28) */
  height: var(--app-altura, 100dvh);
  max-height: var(--app-altura, 100dvh);
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "topo" "principal" "abas";
  background: var(--bg-surface);
  overflow: hidden;
}

.dock { display: none; grid-area: dock; }

/* Topo mobile compacto (padrão do protótipo: título + badge + conta à esquerda, ações 32px à direita) */
.topo {
  grid-area: topo;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2-5);
  padding: calc(var(--s-3) + env(safe-area-inset-top)) var(--s-3-5) var(--s-3);
  border-bottom: 1px solid var(--line);
  background: var(--bg-surface);
}
.topo-titulo { flex: 1; min-width: 0; }
.topo-linha-principal {
  display: flex;
  align-items: center;
  gap: 6px;
}
.topo-titulo .secao-atual {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.topo-titulo .conta {
  display: block;
  margin-top: 1px;
  font-size: var(--fs-sub);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topo-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.principal { grid-area: principal; min-height: 0; min-width: 0; height: 100%; overflow: hidden; display: flex; }
.principal > * { flex: 1; min-width: 0; min-height: 0; height: 100%; }

/* Barra inferior mobile (56px / h-14, ícones 16px, texto 10px) */
.abas {
  grid-area: abas;
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 56px;
  padding: 0 var(--s-2) env(safe-area-inset-bottom);
  border-top: 1px solid var(--line);
  background: var(--bg-surface);
}
.abas a {
  flex: 1;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: var(--fs-kicker);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}
.abas a[aria-current="page"] { color: var(--brand); font-weight: 700; }
.abas a:focus-visible { outline: none; box-shadow: inset var(--focus); }

/* Conversa aberta no celular: tela inteira sem topo/abas competindo */
.shell.shell-foco .topo,
.shell.shell-foco .abas { display: none; }

/* Menu da pessoa (avatar) */
.menu-pessoa { position: relative; display: inline-flex; }
.popover {
  position: absolute;
  z-index: 50;
  min-width: 224px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-pop);
}
.menu-pessoa .popover { top: calc(100% + 6px); right: 0; }
.popover .cabeca { padding: var(--s-2) var(--s-2-5) var(--s-2-5); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.popover .cabeca strong { display: block; font-size: var(--fs-meta); font-weight: 700; color: var(--text); }
.popover .cabeca span { display: block; font-size: var(--fs-sub); color: var(--text-muted); overflow-wrap: anywhere; margin-top: 1px; }
.popover [role="menuitem"] {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 34px;
  padding: 0 var(--s-2-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-meta);
  font-weight: 500;
  text-align: left;
  color: var(--text);
}
.popover [role="menuitem"]:hover,
.popover [role="menuitem"]:focus-visible { outline: none; background: var(--bg-subtle); }

@media (min-width: 768px) {
  .shell {
    grid-template-columns: var(--dock-w) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "dock principal";
  }
  .topo, .abas { display: none; }
  .dock {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: var(--s-4) 0;
    background: var(--bg-subtle);
    border-right: 1px solid var(--line);
  }
  .dock-grupo { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
  .dock-grupo-rodape { gap: var(--s-3); }
  /* Ponto = existe ao menos uma conversa com não lidas (C6, protótipo: -top-1 -right-1, 8px) */
  .dock .com-nao-lidas::after {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    width: 8px;
    height: 8px;
    border-radius: var(--r-full);
    background: var(--tone-terracotta-text);
  }
  .dock .menu-pessoa .popover { top: auto; bottom: 0; right: auto; left: calc(100% + 10px); }
}

/* Dica de ferramenta para ícones do dock (desktop) */
@media (min-width: 768px) and (hover: hover) {
  .dock .btn-icon[data-dica]:hover::before,
  .dock .btn-icon[data-dica]:focus-visible::before {
    content: attr(data-dica);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 8px;
    border-radius: var(--r-xs);
    background: var(--text);
    color: var(--bg-surface);
    font-size: var(--fs-sub);
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 60;
  }
}

/* ================================================================
   Atendimento: Coluna Inbox + Coluna Conversa
   ================================================================ */

.atendimento { display: flex; min-height: 0; height: 100%; overflow: hidden; background: var(--bg-surface); }

.painel-acompanhamento { display: none; flex: 0 0 140px; min-width: 0; overflow-y: auto; border-right: 1px solid var(--line); background: var(--bg-app); }
.acompanhamento-conteudo { padding: var(--s-4) var(--s-3); }
.acompanhamento-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); padding-bottom: var(--s-4); }
.acompanhamento-cabeca h2 { min-width: 0; font-family: var(--font-sans); font-size: 1.15rem; overflow-wrap: anywhere; word-break: break-word; }
.acompanhamento-links { display: grid; gap: 2px; padding: var(--s-3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.acompanhamento-links button { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: 8px 6px; border-radius: var(--r-sm); color: var(--text-muted); font-size: var(--fs-meta); font-weight: 700; text-align: left; }
.acompanhamento-links button:hover, .acompanhamento-links button.ativo { color: var(--brand); background: var(--bg-subtle); }
.acompanhamento-tags { padding-top: var(--s-4); }
.acompanhamento-tags header { display: flex; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.acompanhamento-tags h3 { margin: 0; color: var(--text-muted); font-size: var(--fs-meta); letter-spacing: .06em; text-transform: uppercase; }
.acompanhamento-tags a { color: var(--brand); font-size: var(--fs-sub); }
.acompanhamento-tags-lista { display: grid; gap: 2px; }
.acompanhamento-tags-lista button { display: flex; justify-content: space-between; gap: var(--s-2); width: 100%; padding: 6px; border-radius: var(--r-sm); color: var(--text-muted); font-size: var(--fs-meta); text-align: left; }
.acompanhamento-tags-lista button:hover, .acompanhamento-tags-lista button.ativo { color: var(--brand); background: var(--bg-subtle); }
.acompanhamento-tags-lista button span { color: var(--text-faint); }

.painel-lista {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg-surface);
}
.painel-conversa {
  display: none;
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  flex-direction: column;
  background: var(--bg-surface);
}
.atendimento.com-conversa .painel-lista { display: none; }
.atendimento.com-conversa .painel-conversa { display: flex; }

@media (min-width: 768px) {
  .painel-acompanhamento { display: block; }
  .painel-lista {
    flex: 0 0 288px;
    border-right: 1px solid var(--line);
  }
  .painel-conversa { display: flex; }
  .atendimento.com-conversa .painel-lista { display: flex; }
}
@media (min-width: 1024px) {
  .painel-lista { flex: 0 0 var(--lista-w); }
}

/* ---------- S2b: filtros, ficha comercial e Reservas ---------- */
.filtros-inbox { position: relative; display: flex; gap: 4px; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; padding: 8px 12px; border-bottom: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: transparent transparent; }
.filtros-inbox:hover, .filtros-inbox:focus-within { scrollbar-color: var(--line-strong) transparent; }
.filtros-inbox::-webkit-scrollbar { height: 4px; }
.filtros-inbox::-webkit-scrollbar-thumb { background: transparent; border-radius: var(--r-full); }
.filtros-inbox:hover::-webkit-scrollbar-thumb, .filtros-inbox:focus-within::-webkit-scrollbar-thumb { background: var(--line-strong); }
/* A sombra suave só sugere continuidade; a faixa continua uma linha rolável. */
.filtros-inbox::after { content: ""; position: sticky; right: -12px; flex: 0 0 24px; margin-left: -20px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--bg-surface)); }
.filtro-inbox { flex: 0 0 auto; padding: 6px 9px; border-radius: var(--r-full); color: var(--text-muted); font-size: var(--fs-meta); font-weight: 700; }
.filtro-inbox:hover, .filtro-inbox.ativo { background: var(--bg-subtle); color: var(--brand); }
.pin-indicador { color: var(--tone-plum-text); display: inline-flex; }
.painel-ficha { display: none; flex: 0 0 340px; overflow-y: auto; border-left: 1px solid var(--line); background: var(--bg-app); padding: var(--s-5); }
.painel-ficha:not([hidden]) { display: block; }
.ficha-cabeca { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--s-5); }
.ficha-cabeca h2 { font-family: var(--font-sans); font-size: var(--fs-h2); }
.ficha-secao { padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.ficha-secao > header { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.ficha-secao h3 { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.ficha-linhas, .ficha-lembretes, .ficha-form { display: grid; gap: var(--s-2); font-size: var(--fs-body); }
.ficha-form label { display: grid; gap: 4px; color: var(--text-muted); font-size: var(--fs-meta); font-weight: 700; }
.ficha-form input, .ficha-secao select { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg-surface); }
.lembrete { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); font-size: var(--fs-meta); }
.lembrete .acoes { margin-top: 0; flex-wrap: nowrap; gap: 2px; }
.ficha-secao .acoes { margin-top: var(--s-2); gap: 2px; }
.muted { color: var(--text-muted); }
.prazo-vencido { color: var(--danger); font-weight: 700; }
.reservas { max-width: 900px; margin: 0 auto; padding: var(--s-8); }
.reservas-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.reservas h1 { font-family: var(--font-sans); font-size: 2rem; }
.abas-reservas { display: flex; gap: var(--s-2); }
.abas-reservas a { padding: 7px 10px; color: var(--text-muted); font-size: var(--fs-meta); font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent; }
.abas-reservas a[aria-current="page"] { color: var(--brand); border-color: var(--brand); }
@media (max-width: 1023px) {
  .painel-ficha:not([hidden]) { position: fixed; z-index: 20; inset: auto 0 0; max-height: min(80dvh, 680px); border: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-pop); padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); }
}
@media (max-width: 767px) {
  .painel-acompanhamento { display: none; }
  .ficha-form input, .ficha-secao select { font-size: 16px; }
  .reservas { padding: var(--s-4); }
}

/* Cabeçalho da Inbox (p-3.5 = 14px, border-b, título 14px sans bold + contador 12px muted) */
.lista-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 52px;
  padding: var(--s-3-5);
  border-bottom: 1px solid var(--line);
  background: var(--bg-surface);
}
.lista-cabeca-esq {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}
.lista-cabeca h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-body);
  letter-spacing: -0.015em;
  color: var(--text);
}
.lista-cabeca .contagem {
  font-size: var(--fs-meta);
  color: var(--text-muted);
  white-space: nowrap;
}
.lista-cabeca .conta {
  font-size: var(--fs-sub);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 767px) {
  /* No mobile o cabeçalho já fica em .topo para evitar duplicação */
  .lista-cabeca { display: none; }
}

.lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.lista-conversas { list-style: none; margin: 0; padding: 0; }
.lista-conversas > li + li { border-top: 1px solid var(--line); }

/* Card de Conversa da Inbox (3 andares de largura total conforme protótipo) */
.card-conversa {
  position: relative;
  width: 100%;
  padding: var(--s-3-5);
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--t-fast);
}
.card-conversa:hover { background: rgba(31, 36, 48, 0.02); }
.card-conversa:focus-visible { outline: none; box-shadow: inset var(--focus); }
.card-conversa[aria-current="true"] { background: var(--bg-subtle); }

/* Andar 1: Avatar 36px + Nome/Subtítulo à esquerda | Hora + Botão WhatsApp à direita */
.card-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: 4px;
}
.card-identidade {
  display: flex;
  align-items: center;
  gap: var(--s-2-5);
  min-width: 0;
  flex: 1;
}
.card-titulos { min-width: 0; flex: 1; }
.card-conversa .nome {
  display: block;
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-conversa .subtitulo {
  display: block;
  font-size: var(--fs-sub);
  color: var(--text-muted);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-meta-topo {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.card-conversa .hora {
  font-size: var(--fs-meta);
  color: var(--text-faint);
  white-space: nowrap;
}
.card-conversa.nao-lida .hora,
.card-conversa[aria-current="true"] .hora {
  color: var(--text);
  font-weight: 600;
}
.card-wame {
  color: var(--text-muted);
}
.card-wame:hover:not(:disabled) {
  color: var(--ok-ink);
  background: var(--ok-soft);
}

/* Andar 2: Preview ocupando largura total */
.card-conversa .preview {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-conversa.nao-lida .preview,
.card-conversa[aria-current="true"] .preview {
  color: var(--text);
}

/* Andar 3: Estado à esquerda | Info secundária / não lidas à direita */
.card-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: var(--fs-meta);
}
.card-rodape-dir {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
.nao-lidas {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--fs-sub);
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.skeleton-item {
  height: 88px;
  margin: 0 var(--s-3-5);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--bg-surface) 20%, var(--bg-subtle) 40%, var(--bg-surface) 60%);
  background-size: 300% 100%;
  animation: skeleton 1.6s ease-in-out infinite;
}
@keyframes skeleton { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Esqueleto de mensagens (carregamento inicial da conversa, SPEC §14.28) */
.esqueleto-bolha {
  height: 44px;
  border-radius: 18px;
  background: linear-gradient(90deg, var(--bg-surface) 20%, var(--bg-subtle) 40%, var(--bg-surface) 60%);
  background-size: 300% 100%;
  animation: skeleton 1.6s ease-in-out infinite;
}
.esqueleto-bolha.recebida { align-self: flex-start; border-top-left-radius: 6px; }
.esqueleto-bolha.enviada { align-self: flex-end; border-top-right-radius: 6px; }
.esqueleto-bolha.w1 { width: 38%; }
.esqueleto-bolha.w2 { width: 56%; height: 64px; }
.esqueleto-bolha.w3 { width: 68%; height: 52px; }

.estado-central {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2-5);
  padding: var(--s-8) var(--s-6);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-meta);
  background: var(--bg-app);
}
.painel-lista .estado-central { background: var(--bg-surface); }
.estado-central .icone-circulo {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--bg-subtle);
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.estado-central .titulo {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--text);
}

.carregar-mais {
  display: block;
  margin: var(--s-3) auto;
  min-height: 32px;
  padding: 0 var(--s-3-5);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--bg-surface);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--text);
}
.carregar-mais:hover:not(:disabled) { background: var(--bg-subtle); }
.carregar-mais:focus-visible { outline: none; box-shadow: var(--focus); }

/* ---------- Conversa Aberta ---------- */

.conversa-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 64px;
  padding: calc(var(--s-2) + env(safe-area-inset-top)) var(--s-3-5) var(--s-2);
  border-bottom: 1px solid var(--line);
  background: var(--bg-surface);
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .conversa-cabeca { height: 64px; padding: 0 var(--s-6); }
  .conversa-cabeca .voltar { display: none; }
}
.conversa-cabeca .voltar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* alvo de toque ≥ 44px sem mudar o visual */
  margin-left: -8px;
  padding: 0 8px;
  border: none;
  background: none;
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.conversa-cabeca .voltar:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-xs); }
/* Mobile (protótipo): avatar 28px, sem telefone nem "WhatsApp •", pílula sob o nome, ações com borda */
@media (max-width: 767px) {
  .conversa-cabeca { min-height: 56px; }
  .conversa-cabeca-esq { gap: var(--s-2-5); }
  .conversa-cabeca .avatar-cabeca { width: 28px; height: 28px; font-size: var(--fs-sub); }
  .conversa-cabeca h2 { font-size: 0.8125rem; }
  .conversa-cabeca .telefone,
  .conversa-cabeca .canal,
  .conversa-cabeca .separador-canal { display: none; }
  .conversa-cabeca .detalhe { margin-top: 0; }
  .conversa-cabeca .link-whatsapp { border: 1px solid var(--line); background: var(--bg-surface); }
}
.conversa-cabeca-esq {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  flex: 1;
}
.conversa-cabeca .identidade { flex: 1; min-width: 0; }
.conversa-cabeca .linha-nome {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}
.conversa-cabeca h2 {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conversa-cabeca .telefone {
  font-size: var(--fs-meta);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.conversa-cabeca .detalhe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
.conversa-cabeca .separador-ponto { color: var(--text-faint); }
.conversa-cabeca .acoes { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.link-whatsapp:hover:not(:disabled) { color: var(--ok-ink); background: var(--ok-soft); }

/* Faixa de Janela 24h Meta (px-6 py-1.5, text-xs, justify-between) */
.faixa-janela {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 6px var(--s-3-5);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .faixa-janela { padding: 6px var(--s-6); }
}
.faixa-janela strong { color: var(--text); font-weight: 700; }
.faixa-janela .faixa-texto { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa-janela .so-mobile { display: none; }
@media (max-width: 767px) {
  .faixa-janela .so-desktop { display: none; }
  .faixa-janela .so-mobile { display: inline; }
}
.faixa-janela .faixa-nota { color: var(--text-faint); white-space: nowrap; }
.faixa-janela.fechada { color: var(--tone-butter-text); background: var(--tone-butter); }
.faixa-janela.fechada strong { color: var(--tone-butter-text); }
.faixa-janela.fechada .faixa-nota { color: var(--tone-butter-text); opacity: 0.85; }
@media (max-width: 479px) {
  .faixa-janela { font-size: var(--fs-sub); }
}

/* Thread de mensagens (p-6 space-y-4 sobre --bg-app) */
.thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-3-5);
  background: var(--bg-app);
}
@media (min-width: 768px) {
  .thread { padding: var(--s-6); }
}

.divisor-data {
  display: flex;
  justify-content: center;
  margin: var(--s-1) 0;
}
.divisor-data span {
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: var(--bg-subtle);
  color: var(--text-faint);
  font-size: var(--fs-meta);
  font-weight: 500;
}

.msg-grupo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 85%;
}
.msg-grupo.enviada {
  align-self: flex-end;
  align-items: flex-end;
}
@media (min-width: 768px) {
  .msg-grupo { max-width: 65%; }
}

.bubble {
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  border-top-left-radius: 2px;
  background: var(--bg-surface);
  color: var(--text);
  box-shadow: var(--shadow-2xs);
}
.bubble .texto {
  font-size: var(--fs-body);
  line-height: 1.625;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 767px) {
  .msg-grupo { max-width: 80%; }
  .bubble { padding: var(--s-3-5); }
  .bubble .texto { font-size: var(--fs-meta); line-height: 1.625; }
}
.bubble.enviada {
  border-color: transparent;
  border-radius: var(--r-lg);
  border-top-right-radius: 2px;
  background: var(--brand);
  color: var(--text);
}
.msg-hora {
  margin-top: 4px;
  padding: 0 4px;
  font-size: var(--fs-meta);
  color: var(--text-faint);
}
.msg-hora-interna { display: none; }
/* Mobile (C9): hora e status no rodapé interno da bolha, à direita, discretos */
@media (max-width: 767px) {
  .msg-hora-externa { display: none; }
  .msg-hora-interna {
    display: block;
    margin-top: var(--s-1-5);
    padding: 0;
    text-align: right;
    font-size: 0.6875rem;
    line-height: 1.3;
  }
  .bubble.enviada .msg-hora-interna { color: var(--text-muted); }
}

.carregar-antigas { align-self: center; margin: 0 0 var(--s-1); }

/* ---------- Composer e Barra Contextual de IA ---------- */

.composer-area {
  border-top: 1px solid var(--line);
  background: var(--bg-surface);
  padding: var(--s-3) var(--s-3-5) calc(var(--s-3) + env(safe-area-inset-bottom));
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .composer-area { padding: var(--s-4) var(--s-5); }
}

.aviso-composer { margin-bottom: var(--s-2); }
.alerta-coexistence { margin: var(--s-2) var(--s-3-5) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.alerta-coexistence.urgente { border-color: var(--tone-terracotta); font-weight: 700; }

.barra-ia-wrap { margin-bottom: var(--s-2); }

.barra-ia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  min-height: 30px;
  margin-bottom: var(--s-2);
}

/* Botão primário "Sugerir resposta" em --brand (índigo) texto branco */
.btn-ia-sugerir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--fs-meta);
  font-weight: 700;
  box-shadow: var(--shadow-2xs);
  transition: background-color var(--t-fast), opacity var(--t-fast);
}
.btn-ia-sugerir:hover:not(:disabled) { background: var(--brand-hover); }
.btn-ia-sugerir:focus-visible { outline: none; box-shadow: var(--focus); }
.btn-ia-sugerir:disabled { opacity: 0.55; }

/* Botões quando há rascunho: Ajustar com IA, Reescrever, Melhorar */
.btn-ia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  font-size: var(--fs-meta);
  font-weight: 600;
  background: var(--tone-plum);
  color: var(--tone-plum-text);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.btn-ia:hover:not(:disabled) { background: var(--lilac-soft); }
.btn-ia:focus-visible { outline: none; box-shadow: var(--focus); }
.btn-ia:disabled { opacity: 0.55; }

.btn-ia-neutro {
  background: var(--bg-surface);
  color: var(--text-muted);
  font-weight: 500;
}
.btn-ia-neutro:hover:not(:disabled) {
  background: rgba(31, 36, 48, 0.03);
  color: var(--text);
}

.estado-ia { font-size: var(--fs-meta); color: var(--text-muted); }
.estado-ia.erro { color: var(--danger); }
/* Aviso de saída da IA (§14.51): discreto, nunca bloqueia nem pede ação */
.estado-ia.aviso { color: var(--text-muted); font-style: italic; }
.estado-ia.aviso.forte { color: var(--danger); font-style: normal; font-weight: 600; }

/* Card ancorado de Ajustar com IA (com chips de exemplo e botão Aplicar no Rascunho) */
.card-ajuste-ia {
  margin-top: var(--s-2);
  margin-bottom: var(--s-2-5);
  padding: var(--s-3-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-pop);
  display: flex;
  flex-direction: column;
  gap: var(--s-2-5);
}
.card-ajuste-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.card-ajuste-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--text);
}
.card-ajuste-titulo::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--brand);
}
.card-ajuste-fechar {
  font-size: var(--fs-meta);
  color: var(--text-muted);
  padding: 2px 4px;
}
.card-ajuste-fechar:hover { color: var(--text); }

.chips-ajuste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sub);
}
.chips-ajuste-rotulo { color: var(--text-faint); }
.chip-exemplo {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: var(--fs-sub);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.chip-exemplo:hover:not(:disabled) {
  background: var(--bg-subtle);
  color: var(--text);
}

.card-ajuste-linha {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.entrada-ajuste {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-app);
  font-size: var(--fs-meta);
  color: var(--text);
}
@media (max-width: 767px) { .entrada-ajuste { font-size: 1rem; } }
.entrada-ajuste:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); }

/* Caixa do Composer em 2 andares (textarea no topo + rodapé com microcopy e botão Enviar) */
.composer form {
  display: flex;
  flex-direction: column;
  padding: var(--s-2-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-2xs);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.composer form:focus-within {
  border-color: rgba(31, 36, 48, 0.32);
  box-shadow: var(--shadow-card);
}
.composer textarea {
  width: 100%;
  min-height: 76px; /* rows=3 do protótipo (3 × 22,75px + 8px) */
  max-height: 160px;
  padding: 4px;
  border: none;
  resize: none;
  background: transparent;
  font-size: var(--fs-body);
  line-height: 1.625;
  color: var(--text);
}
@media (max-width: 767px) {
  .composer textarea { font-size: 1rem; line-height: 1.55; min-height: 58px; }
}
.composer textarea::placeholder { color: var(--text-faint); }
.composer textarea:focus { outline: none; }
.composer textarea:disabled { color: var(--text-muted); }

.composer-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: 4px;
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
}
.composer-nota {
  font-size: var(--fs-meta);
  color: var(--text-faint);
}
@media (max-width: 479px) {
  .composer-nota { font-size: var(--fs-kicker); }
}

.btn-enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 8px 16px;
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--fs-meta);
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--shadow-2xs);
  flex-shrink: 0;
  transition: background-color var(--t-fast), opacity var(--t-fast);
}
.btn-enviar > svg { display: block; width: 14px; height: 14px; }
.btn-enviar:hover:not(:disabled) { background: var(--brand-hover); }
.btn-enviar:focus-visible { outline: none; box-shadow: var(--focus); }
.btn-enviar:disabled { opacity: 0.45; }

.placeholder-conversa .icon { width: 22px; height: 22px; color: var(--text-faint); }

/* ---------- Mídia na Thread (Imagem, Vídeo, Áudio, Documento, Figurinha, Especial) ---------- */

.bubble .legenda-midia { margin-top: var(--s-2); }
.bubble .texto-suave { color: var(--text-muted); font-style: italic; }
.bubble.enviada .texto-suave { color: var(--text-muted); }

.bubble.bubble-sticker {
  padding: var(--s-2);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.midia-imagem-wrap {
  max-width: 320px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(31, 36, 48, 0.08);
  background: var(--bg-subtle);
}
.bubble.enviada .midia-imagem-wrap {
  border-color: rgba(31, 36, 48, 0.1);
}
.midia-imagem-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
}
.midia-imagem {
  display: block;
  width: 100%;
  /* 4:3 só reserva espaço ENQUANTO carrega; com a imagem disponível vale a proporção natural
     (`auto`). `contain`, nunca `cover`: foto em pé e print não podem ser cortados. */
  aspect-ratio: auto 4 / 3;
  max-height: 280px;
  object-fit: contain;
  transition: transform var(--t-fast);
}
.midia-imagem-btn:hover .midia-imagem {
  transform: scale(1.015);
}

.midia-sticker-wrap {
  width: 128px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.midia-sticker {
  max-width: 128px;
  max-height: 128px;
  object-fit: contain;
}

.midia-video-wrap {
  max-width: 340px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(31, 36, 48, 0.08);
  background: #1f2430;
}
.midia-video {
  display: block;
  width: 100%;
  max-height: 260px;
  background: #1f2430;
}
.midia-video-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 6px 10px;
  background: var(--bg-subtle);
  font-size: var(--fs-sub);
  color: var(--text-muted);
}
.bubble.enviada .midia-video-rodape {
  background: rgba(255, 255, 255, 0.55);
  color: var(--text-muted);
}
.midia-meta-nome {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.midia-link-download {
  font-weight: 700;
  color: var(--brand);
  text-decoration: underline;
}
.bubble.enviada .midia-link-download {
  color: var(--text);
}

/* Áudio + Transcrição Editorial */
.midia-audio-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s-2-5);
  min-width: 250px;
  max-width: 340px;
}
@media (max-width: 479px) {
  .midia-audio-wrap { min-width: 210px; }
}
.midia-audio-player-linha {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.midia-audio-icone {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--tone-plum);
  color: var(--tone-plum-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bubble.enviada .midia-audio-icone {
  background: rgba(255, 255, 255, 0.55);
  color: var(--text);
}
.midia-audio {
  flex: 1;
  height: 36px;
  min-width: 0;
}
.midia-transcricao {
  padding: var(--s-2-5) var(--s-3);
  border-radius: var(--r-md);
  background: var(--bg-app);
  border-left: 3px solid var(--brand);
  font-size: var(--fs-meta);
  color: var(--text);
}
.bubble.enviada .midia-transcricao {
  background: rgba(255, 255, 255, 0.55);
  border-left-color: var(--wa-ink);
  color: var(--text);
}
.midia-transcricao-kicker {
  display: block;
  font-size: var(--fs-kicker);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-bottom: 2px;
}
.bubble.enviada .midia-transcricao-kicker {
  color: var(--text-muted);
}
.midia-transcricao-texto {
  margin: 0;
  line-height: 1.5;
  color: var(--text);
  font-style: italic;
}
.bubble.enviada .midia-transcricao-texto {
  color: var(--text);
}
.midia-transcricao.pendente,
.midia-transcricao.sem-fala {
  border-left-color: var(--line-strong);
}
.midia-transcricao.falhou {
  border-left-color: var(--danger);
  background: var(--tone-terracotta);
}
.midia-transcricao.falhou .midia-transcricao-kicker {
  color: var(--tone-terracotta-text);
}

/* Card de Documento (PDF / DOCX / XLSX / CSV / TXT) */
.midia-documento-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2-5) var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-app);
  min-width: 240px;
  max-width: 340px;
}
.bubble.enviada .midia-documento-card {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(31, 36, 48, 0.1);
}
.midia-documento-icone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--tone-plum);
  color: var(--tone-plum-text);
  flex-shrink: 0;
  gap: 1px;
}
.bubble.enviada .midia-documento-icone {
  background: rgba(255, 255, 255, 0.55);
  color: var(--text);
}
.midia-documento-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.midia-documento-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.midia-documento-nome {
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.midia-documento-nome:hover { text-decoration: underline; }
.bubble.enviada .midia-documento-nome { color: var(--text); }
.midia-documento-meta {
  font-size: var(--fs-sub);
  color: var(--text-muted);
}
.bubble.enviada .midia-documento-meta { color: var(--text-muted); }
.midia-documento-download {
  flex-shrink: 0;
  color: var(--text-muted);
}
.bubble.enviada .midia-documento-download {
  color: var(--text);
}

/* Estados de carregamento/erro de mídia */
.midia-status {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-2-5) var(--s-3);
  border-radius: var(--r-md);
  border: 1px dashed var(--line-strong);
  background: var(--bg-app);
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
.midia-carregando {
  flex-direction: row;
  align-items: center;
}
.midia-erro {
  border-style: solid;
  border-color: rgba(192, 36, 90, 0.28);
  background: var(--tone-terracotta);
  color: var(--tone-terracotta-text);
}
.midia-erro-linha {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
}
.btn-midia-retry {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(192, 36, 90, 0.3);
  background: var(--bg-surface);
  color: var(--tone-terracotta-text);
  font-size: var(--fs-sub);
  font-weight: 700;
}
.btn-midia-retry:hover { background: var(--bg-subtle); }

/* Mensagens especiais (Template, Interativo, Localização, Contato) */
.msg-especial {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.msg-especial-kicker {
  font-size: var(--fs-kicker);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.bubble.enviada .msg-especial-kicker { color: var(--text-muted); }
.msg-especial-cabeca {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-meta);
}
.msg-especial-sub {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
.bubble.enviada .msg-especial-sub { color: var(--text-muted); }
.msg-especial-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sub);
  color: var(--text-faint);
}

/* Lightbox Modal de Imagem */
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(31, 36, 48, 0.86);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
}
.lightbox-conteudo {
  max-width: min(92vw, 960px);
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.lightbox-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2-5) var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--bg-surface);
}
.lightbox-titulo {
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lightbox-acoes {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}
.lightbox-corpo {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1f2430;
  padding: var(--s-2);
}
.lightbox-img {
  max-width: 100%;
  max-height: 72dvh;
  object-fit: contain;
  border-radius: var(--r-xs);
}
.lightbox-legenda {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-meta);
  color: var(--text);
  background: var(--bg-app);
}

/* Barra de Preview de Anexos no Composer */
.composer-anexos {
  margin-bottom: var(--s-2);
  padding: var(--s-2-5);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-app);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.composer-anexos-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.composer-anexos-contagem {
  font-size: var(--fs-sub);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.composer-anexos-limpar {
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--danger);
  text-decoration: underline;
}
.composer-anexos-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.composer-anexo-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 28px 6px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg-surface);
  max-width: 220px;
  box-shadow: var(--shadow-2xs);
}
.composer-anexo-thumb {
  width: 38px;
  height: 38px;
  border-radius: var(--r-xs);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.composer-anexo-doc-icone {
  width: 38px;
  height: 38px;
  border-radius: var(--r-xs);
  background: var(--tone-plum);
  color: var(--tone-plum-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.composer-anexo-ext {
  font-size: 11px;
  font-weight: 800;
}
.composer-anexo-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.composer-anexo-nome {
  font-size: var(--fs-sub);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-anexo-detalhe {
  font-size: 11px;
  color: var(--text-muted);
}
.composer-anexo-remover {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.composer-anexo-remover:hover {
  background: var(--tone-terracotta);
  color: var(--tone-terracotta-text);
}
.composer-anexo-mais {
  height: 50px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-strong);
  background: var(--bg-subtle);
  color: var(--text);
  font-size: var(--fs-meta);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.composer-rodape-esq {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.composer-acao-icone {
  width: 28px;
  height: 28px;
  color: var(--text-muted);
}
.composer-acao-icone.ativo {
  background: var(--tone-plum);
  color: var(--tone-plum-text);
}

.msg-interativo-cabecalho { display: block; margin-top: var(--s-2); }
.msg-interativo-opcoes { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-2); }
.msg-interativo-opcao, .msg-interativo-escolhida {
  display: block;
  padding: var(--s-1-5) var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-subtle);
  font-size: var(--fs-meta);
}
.msg-interativo-escolhida { margin-top: var(--s-2); font-weight: 700; }

/* ================================================================
   Configurações (Submenu w-64 branco + Conteúdo em cards brancos)
   ================================================================ */

.config { display: flex; min-height: 0; background: var(--bg-app); }

.config-nav {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s-4);
  background: var(--bg-surface);
}
.config-nav-topo { display: flex; flex-direction: column; gap: var(--s-4); }
.config-nav-cabeca .kicker {
  display: block;
  font-size: var(--fs-kicker);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.config-nav .titulo-pagina {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--text);
}
.config-nav .conta {
  margin-top: 1px;
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
.config-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.config-nav a {
  display: flex;
  align-items: center;
  gap: var(--s-2-5);
  min-height: 36px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.config-nav a .icon { width: 14px; height: 14px; color: currentColor; }
.config-nav a .seta { margin-left: auto; }
.config-nav a:hover { background: rgba(31, 36, 48, 0.04); color: var(--text); }
.config-nav a:focus-visible { outline: none; box-shadow: var(--focus); }
.config-nav a[aria-current="page"] {
  background: var(--tone-plum);
  color: var(--tone-plum-text);
  font-weight: 700;
}
.config-nav-rodape {
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-meta);
  color: var(--text-faint);
}

.config-conteudo {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: var(--s-5) var(--s-4) var(--s-10);
  background: var(--bg-app);
}
.config-voltar { margin: 0 0 var(--s-3) calc(-1 * var(--s-2)); }

/* Celular/tablet estreito: índice OU seção */
.config.indice .config-conteudo { display: none; }
.config.secao .config-nav { display: none; }

@media (min-width: 768px) {
  .config-nav {
    flex: 0 0 var(--config-nav-w);
    padding: var(--s-4);
    border-right: 1px solid var(--line);
  }
  .config-nav a .seta { display: none; }
  .config.indice .config-conteudo,
  .config.secao .config-nav { display: flex; }
  .config-conteudo { display: block; padding: var(--s-8); }
  .config-voltar { display: none; }
}

.secao-config { max-width: 672px; display: flex; flex-direction: column; gap: var(--s-5); }
.secao-config.secao-larga { max-width: 768px; }

.cabeca-secao {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}
.cabeca-secao > .btn {
  white-space: nowrap;
  flex-shrink: 0;
}
.cabeca-secao h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: var(--text);
}
.cabeca-secao p {
  margin-top: 2px;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  line-height: 1.45;
}

/* Superfície branca emoldurada de Configurações (p-5 rounded-2xl border bg-white) */
.card-config {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-2xs);
}
@media (min-width: 640px) {
  .card-config { padding: var(--s-5); }
}
.card-config > h3 {
  margin-bottom: var(--s-3);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.card-config > .ajuda-bloco {
  margin: calc(-1 * var(--s-1)) 0 var(--s-3);
  font-size: var(--fs-meta);
  color: var(--text-muted);
}

/* Grid de campos somente leitura (estilo editorial do protótipo em Conta & Operação) */
.grade-campos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3-5);
}
@media (min-width: 600px) {
  .grade-campos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.campo-leitura {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.campo-leitura dt {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--text-muted);
}
.campo-leitura dd {
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-app);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.campo-leitura dd.mono { font-family: var(--font-mono); font-weight: 500; }
.campo-leitura dd .nota {
  display: block;
  margin-top: 3px;
  font-family: var(--font-sans);
  font-size: var(--fs-sub);
  font-weight: 400;
  color: var(--text-muted);
}

/* Linhas "rótulo → valor" dentro de um card branco */
.linhas { margin: 0; }
.linha {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: var(--s-2-5) 0;
  border-bottom: 1px solid var(--line);
}
.linha:first-child { padding-top: 0; }
.linha:last-child { padding-bottom: 0; border-bottom: none; }
.linha dt { font-size: var(--fs-meta); color: var(--text-muted); }
.linha dd { margin: 0; font-size: var(--fs-meta); font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.linha dd.mono { font-family: var(--font-mono); font-weight: 500; }
.linha dd .nota { display: block; margin-top: 2px; font-size: var(--fs-sub); font-weight: 400; color: var(--text-muted); }
@media (min-width: 600px) {
  .linha { grid-template-columns: 180px 1fr; gap: var(--s-3); align-items: baseline; }
}

/* Card de Canal do WhatsApp (fiel ao protótipo: círculo 40px índigo, pill verde e rodapé dividido) */
.card-canal-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.card-canal-identidade {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.marca-canal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--fs-meta);
  font-weight: 700;
}
.card-canal-identidade .texto { min-width: 0; }
.card-canal-identidade strong {
  display: block;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text);
}
.card-canal-identidade p {
  margin-top: 1px;
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
.badge-canal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-meta);
  font-weight: 600;
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.badge-canal::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: currentColor;
}
.badge-canal.ok {
  background: var(--tone-sage);
  color: var(--tone-sage-text);
}
.card-canal-rodape {
  margin-top: var(--s-3-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2-5);
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
.card-canal-rodape strong { color: var(--text); font-weight: 700; }

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }

.form-config { display: flex; flex-direction: column; }
.form-config .acoes { margin-top: var(--s-4); }
.form-config .aviso { margin-top: var(--s-3); }

.endereco {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-app);
}
.endereco code {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--text);
  overflow-wrap: anywhere;
}

.confirmacao {
  margin-top: var(--s-3-5);
  padding: var(--s-3-5);
  border-radius: var(--r-md);
  border: 1px solid rgba(192, 36, 90, 0.2);
  background: var(--tone-terracotta);
}
.confirmacao p { font-size: var(--fs-meta); color: var(--text); font-weight: 500; }
.confirmacao .acoes { margin-top: var(--s-2-5); }

/* Base de Conhecimento — Compêndio Editorial em Grid de 2 Colunas */
.lista-secoes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 680px) {
  .lista-secoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.item-secao {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-2xs);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-2);
}
.item-secao.editando { grid-column: 1 / -1; }
.linha-secao {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
}
.linha-secao strong {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text);
}
.badge-secao-ia {
  font-size: var(--fs-kicker);
  font-weight: 600;
  color: var(--tone-sage-text);
  white-space: nowrap;
}
.badge-secao-inativa {
  font-size: var(--fs-kicker);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.previa-secao {
  font-size: var(--fs-meta);
  line-height: 1.55;
  color: var(--text-muted);
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rodape-secao {
  margin-top: var(--s-1);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sub);
  color: var(--text-faint);
}
.btn-editar-secao {
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--brand);
  text-decoration: underline;
}
.btn-editar-secao:hover { color: var(--brand-hover); }

/* ================================================================
   Administração da plataforma (papel global, sem shell de tenant)
   ================================================================ */

.admin { flex: 1; display: flex; flex-direction: column; min-height: 100dvh; background: var(--bg-app); }
.admin-topo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: calc(var(--s-2-5) + env(safe-area-inset-top)) var(--s-4) var(--s-2-5);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--line);
}
.admin-topo .auth-wordmark { flex: 1; }
.admin-corpo { width: 100%; max-width: 768px; margin: 0 auto; padding: var(--s-6) var(--s-4) var(--s-10); }
.admin-corpo > h1 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h2); line-height: 1.2; }
.admin-corpo > p { margin-top: 4px; color: var(--text-muted); font-size: var(--fs-meta); }
.admin-corpo .aviso { margin-top: var(--s-3); }
.lista-admin { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.item-admin {
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-2xs);
}
.item-admin .linha-topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.item-admin .nome { flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: 700; }
.item-admin .interno { font-size: var(--fs-meta); color: var(--text-muted); margin-top: 2px; }
.form-convite { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.form-convite .entrada { flex: 1 1 220px; }
.item-admin .endereco { margin-top: var(--s-2-5); }
.item-admin .aviso { margin-top: var(--s-2-5); }

@media (min-width: 768px) {
  .admin-topo { padding: var(--s-3) var(--s-8); }
  .admin-corpo { padding: var(--s-8); }
}

/* ---------- Movimento ---------- */

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

/* ---------- Follow-up (S15) ---------- */
.followup-ativo { color: var(--brand); font-weight: 700; }
.campo-linha { display: flex; gap: var(--s-2); align-items: center; }
.campo-linha input { max-width: 120px; }
fieldset.campo { border: 0; padding: 0; margin: var(--s-3-5) 0 0; min-inline-size: 0; }
fieldset.campo legend { padding: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.campo-check label, fieldset.campo label { display: flex; align-items: center; gap: var(--s-2); font-weight: 500; color: var(--text); }

/* ---------- Busca da Inbox (S12) ---------- */
.busca-inbox { display: flex; align-items: center; gap: var(--s-2); margin: 0 var(--s-3) var(--s-2); padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-full); background: var(--bg-subtle); color: var(--text-muted); }
.busca-inbox:focus-within { border-color: var(--brand); }
.busca-inbox-campo { flex: 1; min-width: 0; padding: 8px 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-body); outline: none; }

/* ---------- Tags (S10) ---------- */
.tags-aplicadas, .lista-tags { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.tags-aplicadas li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.lista-tags li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) 0; border-top: 1px solid var(--line); }
.form-linha { display: flex; gap: var(--s-2); align-items: center; }
.form-linha input { flex: 1; min-width: 0; }
.form-config.form-linha { display: flex; flex-direction: row; align-items: center; }
.campo-linha select { flex: 0 0 auto; width: auto; }

/* ================================================================
   Atendimento v2 — mobile-first (SPEC §14.24, protótipo de imagem aprovado)
   Vinho = marca/seleção/CTA · verde suave = mensageria · base branco/cinza quente.
   ================================================================ */

/* ---------- Topo e navegação inferior (celular) ---------- */
@media (max-width: 767px) {
  .topo { border-bottom: 0; padding: calc(var(--s-3) + env(safe-area-inset-top)) var(--s-4) var(--s-2); }
  .topo-titulo .secao-atual { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
  .topo[data-tela="atendimento"] .secao-atual { font-family: var(--font-sans); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
  .topo-titulo .conta { font-size: var(--fs-meta); }

  .abas { min-height: 60px; padding: 0 var(--s-2) env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-surface) 94%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); }
  .abas a, .abas button { flex: 1; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-muted); font-size: 0.6875rem; font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color var(--t-fast); }
  .abas .aba-icone { position: relative; display: inline-flex; }
  .abas .aba-icone .icon { width: 22px; height: 22px; }
  .abas [aria-current="page"] { color: var(--wine); }
  .abas [aria-current="page"] .icon { stroke-width: 2.2; }
  .abas a:focus-visible, .abas button:focus-visible { outline: none; box-shadow: inset var(--focus); }
  .abas .com-nao-lidas .aba-icone::after { content: ""; position: absolute; top: -2px; right: -3px; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--wine); border: 2px solid var(--bg-surface); box-sizing: content-box; }
}
@media (min-width: 768px) {
  .abas { display: none; }
}

/* ---------- Inbox: controles, chips e linhas ---------- */
.inbox-controles { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-4) var(--s-2); }
.inbox-controles .busca-inbox { flex: 1; min-width: 0; margin: 0; }
.busca-inbox { position: relative; display: flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-md); background: var(--field); color: var(--text-muted); }
.busca-inbox-campo { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 1rem; color: var(--text); }
.busca-inbox-campo:focus { outline: none; }
.busca-inbox:focus-within { box-shadow: var(--focus); }
.btn-filtro { position: relative; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--field); color: var(--text); flex-shrink: 0; }
.btn-filtro.ativo { background: var(--wine-soft); color: var(--wine); }
.btn-filtro.ativo::before { content: ""; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--wine); }

.filtros-inbox { gap: var(--s-2); padding: var(--s-1) var(--s-4) var(--s-3); border-bottom: 0; }
.filtros-inbox::after { display: none; }
.filtro-inbox { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 var(--s-3-5); border-radius: var(--r-full); background: var(--field); color: var(--text-muted); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; transition: background-color var(--t-fast), color var(--t-fast), transform 120ms ease-out; }
.filtro-inbox:active { transform: scale(0.96); }
.filtro-inbox:hover { background: var(--field); color: var(--text); }
.filtro-inbox.ativo, .filtro-inbox.ativo:hover { background: var(--wine); color: #fff; }
.lista-rotulo { padding: var(--s-2) var(--s-4) var(--s-1); color: var(--text-muted); font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; }

.lista-conversas > li + li { border-top: 0; }
.card-conversa { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2-5) var(--s-4); }
.card-conversa:hover { background: var(--field); }
.card-conversa[aria-current="true"] { background: var(--field); }
.avatar-canal { position: relative; flex-shrink: 0; display: inline-flex; }
.avatar-canal .avatar { width: 48px; height: 48px; font-size: 0.9375rem; }
.selo-canal { position: absolute; right: -2px; bottom: -2px; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 2px solid var(--bg-surface); border-radius: var(--r-full); background: var(--marca-whatsapp); color: #fff; box-sizing: content-box; }
.selo-canal .icon { width: 10px; height: 10px; }
a.selo-canal::after { content: ""; position: absolute; inset: -12px; }
.card-corpo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.card-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-width: 0; }
.card-conversa .nome { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; }
.card-conversa .hora { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }
.card-conversa.nao-lida .hora { color: var(--wine); font-weight: 700; }
.card-conversa .preview { flex: 1; min-width: 0; margin: 0; font-size: 0.875rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-conversa.nao-lida .preview, .card-conversa.responder .preview { color: var(--text); }
.card-conversa.nao-lida .nome, .card-conversa.responder .nome { font-weight: 700; }
.card-sinais { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nao-lidas { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--wine); color: #fff; font-size: 0.6875rem; font-weight: 700; line-height: 20px; }
.avatar { background: var(--field); color: var(--text-muted); }
.avatar-brand { background: var(--brand); color: var(--on-brand); }
.avatar-neutro { background: var(--field); color: var(--text-muted); }

/* telas mobile: Acompanhamento e Tags */
.tela-mobile { display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--bg-surface); }
.tela-mobile .lista { flex: 1; }
.lista-linhas { display: grid; padding-bottom: var(--s-4); }
.linha-lista { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 64px; padding: var(--s-2) var(--s-4); text-align: left; transition: background-color var(--t-fast); }
.linha-lista:active, .linha-lista:hover { background: var(--field); }
.linha-lista:focus-visible { outline: none; box-shadow: inset var(--focus); }
.linha-lista .avatar { width: 44px; height: 44px; font-size: 0.875rem; flex-shrink: 0; }
.linha-textos { flex: 1; min-width: 0; display: grid; }
.linha-textos strong { font-size: 0.9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-textos small { font-size: 0.8125rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-seta { color: var(--text-faint); display: inline-flex; }
.linha-contagem { color: var(--text-muted); font-size: 0.8125rem; }
.tag-ponto { width: 12px; height: 12px; border-radius: var(--r-full); background: var(--wine); opacity: 0.55; flex-shrink: 0; margin: 0 var(--s-1); }
.link-gerenciar { display: block; margin: var(--s-2) var(--s-4) var(--s-6); color: var(--wine); font-size: 0.875rem; font-weight: 600; }

/* ---------- Sheets ---------- */
.sheet-raiz { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(31, 36, 48, 0.34); cursor: default; animation: sheet-fade 200ms ease-out both; }
.sheet-corpo { position: relative; width: 100%; max-width: 560px; max-height: 88dvh; display: flex; flex-direction: column; border-radius: 20px 20px 0 0; background: var(--bg-surface); box-shadow: var(--shadow-pop); outline: none; animation: sheet-up 280ms cubic-bezier(0.32, 0.72, 0, 1) both; }
.sheet-raiz.saindo .sheet-backdrop { animation: sheet-fade 180ms ease-in reverse both; }
.sheet-raiz.saindo .sheet-corpo { animation: sheet-up 180ms ease-in reverse both; }
.sheet-alca { width: 36px; height: 4px; margin: 8px auto 0; border-radius: var(--r-full); background: var(--line-strong); flex-shrink: 0; }
.sheet-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-1) var(--s-5); }
.sheet-cabeca h2 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
.sheet-conteudo { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom)); }
.sheet-identidade { display: grid; padding: 0 var(--s-1) var(--s-2); }
.sheet-identidade strong { font-size: 0.9375rem; }
.sheet-identidade span { color: var(--text-muted); font-size: 0.8125rem; }
.sheet-lista { display: grid; }
.sheet-item { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 52px; padding: 0 var(--s-1); border-radius: var(--r-md); text-align: left; font-size: 1rem; color: var(--text); transition: background-color var(--t-fast); }
.sheet-item:hover, .sheet-item:active { background: var(--field); }
.sheet-item:focus-visible { outline: none; box-shadow: var(--focus); }
.sheet-item-icone { display: inline-flex; width: 28px; justify-content: center; color: var(--text-muted); }
.sheet-item.perigo, .sheet-item.perigo .sheet-item-icone { color: var(--danger); }
.sheet-item-texto { display: grid; }
.sheet-item-texto small { color: var(--text-muted); font-size: 0.8125rem; }
.sheet-cancelar { width: 100%; margin-top: var(--s-3); min-height: 48px; border-radius: var(--r-md); }
.sheet-secao { margin: var(--s-3) 0 var(--s-1); color: var(--text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sheet-radios { display: grid; }
.sheet-radio { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 48px; padding: 0 var(--s-1); border-radius: var(--r-md); text-align: left; font-size: 1rem; }
.sheet-radio:focus-visible { outline: none; box-shadow: var(--focus); }
.radio-marca { width: 22px; height: 22px; border: 2px solid var(--line-strong); border-radius: var(--r-full); flex-shrink: 0; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.sheet-radio[aria-checked="true"] .radio-marca { border-color: var(--wine); box-shadow: inset 0 0 0 4px var(--bg-surface), inset 0 0 0 11px var(--wine); }
.radio-rotulo { flex: 1; }
.radio-nota { color: var(--text-faint); font-size: 0.8125rem; }
.sheet-vazio { padding: var(--s-3) var(--s-4); }
.sheet-rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-4); }
.sheet-rodape .btn-primario { flex: 1; min-height: 48px; background: var(--wine); border-radius: var(--r-md); color: #fff; font-size: 1rem; }
.sheet-rodape .btn-primario:hover { background: var(--wine-hover); }
.sheet-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4) var(--s-2); padding: var(--s-2) 0; }
.sheet-grade-item { display: grid; justify-items: center; gap: var(--s-2); font-size: 0.75rem; font-weight: 600; color: var(--text); }
.sheet-grade-icone { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--r-full); background: var(--wine-soft); color: var(--wine); transition: transform 120ms ease-out; }
.sheet-grade-item:active .sheet-grade-icone { transform: scale(0.94); }
.sheet-grade-icone .icon { width: 24px; height: 24px; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 768px) {
  .sheet-raiz { align-items: center; }
  .sheet-corpo { max-width: 420px; border-radius: var(--r-lg); animation-name: sheet-pop; }
  .sheet-raiz.saindo .sheet-corpo { animation-name: sheet-pop; }
  .sheet-alca { display: none; }
}
@keyframes sheet-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------- Conversa: cabeçalho, thread, bolhas ---------- */
.conversa-cabeca { border-bottom: 1px solid var(--line); }
.conversa-cabeca .voltar { margin-left: -6px; padding: 0; min-height: 0; width: 36px; height: 36px; color: var(--text); font-size: inherit; }
.conversa-cabeca .acoes { gap: 2px; }
@media (max-width: 767px) {
  .conversa-cabeca { min-height: 60px; padding: calc(var(--s-2) + env(safe-area-inset-top)) var(--s-3) var(--s-2); }
  .conversa-cabeca .avatar-cabeca { width: 38px; height: 38px; font-size: 0.8125rem; }
  .conversa-cabeca h2 { font-size: 1rem; font-weight: 600; }
  .conversa-cabeca .detalhe { font-size: 0.75rem; }
  .acao-desktop { display: none; }
  .conversa-cabeca .btn-icon-md { width: 40px; height: 40px; }
}
.thread { background: var(--chat-bg); gap: var(--s-1-5); }
.divisor-data { margin: var(--s-2) 0; }
.divisor-data span { background: color-mix(in srgb, var(--bg-surface) 80%, transparent); color: var(--text-muted); font-size: 0.75rem; font-weight: 600; box-shadow: var(--shadow-2xs); }
.msg-grupo { max-width: 80%; }
.bubble { padding: 8px 12px 6px; border: 0; border-radius: 18px; border-top-left-radius: 6px; background: var(--bg-surface); box-shadow: 0 1px 1px rgba(31, 36, 48, 0.06); }
.bubble .texto { font-size: 0.9375rem; line-height: 1.45; }
.bubble.enviada { border-radius: 18px; border-top-right-radius: 6px; background: var(--wa-bubble); color: var(--text); }
@media (max-width: 767px) {
  .bubble { padding: 8px 12px 6px; }
  .bubble .texto { font-size: 0.9375rem; line-height: 1.45; }
  .msg-hora-interna { margin-top: 2px; font-size: 0.6875rem; color: var(--text-muted); }
  .bubble.enviada .msg-hora-interna { color: var(--wa-ink); }
}
@media (min-width: 768px) {
  .msg-grupo { max-width: 68%; }
  .thread { padding: var(--s-6) var(--s-8); }
}
.faixa-janela.aberta { background: color-mix(in srgb, var(--wa-bubble) 55%, var(--bg-surface)); color: var(--wa-ink); }

/* ---------- Composer ---------- */
.composer-area { border-top: 0; background: var(--chat-bg); padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom)); }
/* padding-right 68px: o botão flutuante do copiloto (52px + 16px) não cobre o Enviar (SPEC §14.42). */
@media (min-width: 768px) { .composer-area { padding: var(--s-3) var(--s-6) var(--s-4); padding-right: 68px; } }
.composer form { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; gap: var(--s-2); }
.composer form:focus-within { box-shadow: none; border: 0; }
.composer-linha { display: flex; align-items: flex-end; gap: var(--s-2); }
.composer-mais { width: 40px; height: 40px; border-radius: var(--r-full); background: var(--bg-surface); color: var(--text); box-shadow: 0 1px 1px rgba(31, 36, 48, 0.06); flex-shrink: 0; }
.composer-mais.ativo { color: var(--wine); }
.composer-campo { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; border-radius: 22px; background: var(--bg-surface); box-shadow: 0 1px 1px rgba(31, 36, 48, 0.06); transition: box-shadow var(--t-fast); }
.composer-campo:focus-within { box-shadow: 0 0 0 2px rgba(31, 36, 48, 0.22); }
.composer textarea { min-height: 40px; max-height: 140px; padding: 9px 4px 9px 16px; font-size: 1rem; line-height: 1.4; }
.composer-acao-icone { margin: 6px 6px 6px 0; color: var(--text-muted); }
.composer-acao-icone.ativo { color: var(--wine); background: var(--wine-soft); }
.composer-nota { padding: 0 var(--s-1); color: var(--text-muted); font-size: 0.75rem; }
.btn-enviar { width: 44px; height: 44px; padding: 0; border-radius: var(--r-full); background: var(--wa-green); color: #fff; box-shadow: none; flex-shrink: 0; }
.btn-enviar:hover:not(:disabled) { background: var(--wa-green-hover); }
.btn-enviar:active:not(:disabled) { transform: scale(0.94); }
.btn-enviar > svg { width: 18px; height: 18px; }
.barra-ia-wrap, .barra-ia { margin-bottom: var(--s-2); }
.btn-ia-sugerir { background: var(--wine); }
.btn-ia-sugerir:hover:not(:disabled) { background: var(--wine-hover); }

/* ---------- Ficha em sheet (< 1024 px) ---------- */
.ficha-alca { display: none; }
.ficha-cabeca { align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.ficha-cabeca h2 { font-family: var(--font-sans); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.ficha-avatar { width: 52px; height: 52px; font-size: 1rem; flex-shrink: 0; }
.ficha-identidade { flex: 1; min-width: 0; display: grid; }
.ficha-acoes-rapidas { display: flex; gap: var(--s-4); padding: var(--s-1) 0 var(--s-3); }
.acao-rapida { display: grid; justify-items: center; gap: 6px; min-width: 56px; color: var(--text-muted); font-size: 0.75rem; font-weight: 600; text-decoration: none; }
.acao-rapida > span { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-full); background: var(--field); color: var(--text); transition: transform 120ms ease-out; }
.acao-rapida:active > span { transform: scale(0.94); }
.acao-rapida:first-child > span { background: var(--wa-bubble); color: var(--wa-ink); }
@media (max-width: 767px) {
  .painel-ficha:not([hidden]) { z-index: 70; max-height: 88dvh; padding: var(--s-2) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom)); border: 0; border-radius: 20px 20px 0 0; background: var(--bg-surface); box-shadow: var(--shadow-pop); animation: sheet-up 280ms cubic-bezier(0.32, 0.72, 0, 1) both; }
  .ficha-alca { display: block; width: 36px; height: 4px; margin: 0 auto var(--s-3); border-radius: var(--r-full); background: var(--line-strong); }
  .ficha-secao { border-top: 0; padding: var(--s-3) 0; }
}
.btn-primario { background: var(--wine); }
.btn-primario:hover:not(:disabled) { background: var(--wine-hover); }
@media (max-width: 767px) {
  .conversa-cabeca .detalhe { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-2); margin-top: 0; overflow: hidden; white-space: nowrap; }
  .conversa-cabeca .detalhe .separador-ponto { display: none; }
  .conversa-cabeca .detalhe .pilula-estado { padding: 0; background: none; }
  .conversa-cabeca .detalhe .estado, .conversa-cabeca .detalhe .canal { display: none; }
}
.tags-aplicadas { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.tags-aplicadas li { display: inline-flex; align-items: center; gap: 2px; padding: 4px 4px 4px 12px; border-radius: var(--r-full); background: var(--wine-soft); color: var(--wine); font-size: 0.8125rem; font-weight: 600; }
.tela-mobile .lista { display: flex; flex-direction: column; }
.tela-mobile .estado-central { background: var(--bg-surface); }
@media (min-width: 768px) {
  .conversa-cabeca .voltar { display: none; }
  .painel-acompanhamento { flex-basis: 176px; border-right: 0; background: var(--bg-app); }
  .acompanhamento-cabeca h2 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: normal; word-break: normal; }
  .acompanhamento-links button.ativo, .acompanhamento-links button:hover, .acompanhamento-tags-lista button.ativo, .acompanhamento-tags-lista button:hover { color: var(--wine); background: var(--wine-soft); }
}
/* Ficha: bottom sheet < 768 px · drawer à direita 768–1439 px · coluna ≥ 1440 px */
@media (min-width: 768px) and (max-width: 1439px) {
  .painel-ficha:not([hidden]) { position: fixed; z-index: 70; inset: 0 0 0 auto; width: min(380px, 92vw); max-height: none; border: 0; border-radius: 0; background: var(--bg-surface); box-shadow: var(--shadow-pop); animation: drawer-in 260ms cubic-bezier(0.32, 0.72, 0, 1) both; }
  .ficha-secao { border-top: 0; padding: var(--s-3) 0; }
}
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
.conversa-cabeca .identidade { min-width: 0; }
.conversa-cabeca h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversa-cabeca .detalhe { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-2); overflow: hidden; white-space: nowrap; }
.conversa-cabeca .linha-nome { min-width: 0; }
@media (min-width: 768px) { .conversa-cabeca { height: auto; min-height: 64px; } }
.conversa-cabeca .link-whatsapp { border: 0; background: none; color: var(--wa-green); }
.conversa-cabeca .link-whatsapp:hover:not(:disabled) { background: var(--wa-bubble); color: var(--wa-ink); }

/* ---------- Cor das tags e contadores (SPEC §14.25) ---------- */
.cor-vinho { --tag-bg: var(--tag-vinho-bg); --tag-fg: var(--tag-vinho-fg); --tag-dot: var(--tag-vinho-dot); }
.cor-verde { --tag-bg: var(--tag-verde-bg); --tag-fg: var(--tag-verde-fg); --tag-dot: var(--tag-verde-dot); }
.cor-azul { --tag-bg: var(--tag-azul-bg); --tag-fg: var(--tag-azul-fg); --tag-dot: var(--tag-azul-dot); }
.cor-lilas { --tag-bg: var(--tag-lilas-bg); --tag-fg: var(--tag-lilas-fg); --tag-dot: var(--tag-lilas-dot); }
.cor-amarelo { --tag-bg: var(--tag-amarelo-bg); --tag-fg: var(--tag-amarelo-fg); --tag-dot: var(--tag-amarelo-dot); }
.cor-laranja { --tag-bg: var(--tag-laranja-bg); --tag-fg: var(--tag-laranja-fg); --tag-dot: var(--tag-laranja-dot); }
.cor-rosa { --tag-bg: var(--tag-rosa-bg); --tag-fg: var(--tag-rosa-fg); --tag-dot: var(--tag-rosa-dot); }
.cor-cinza { --tag-bg: var(--tag-cinza-bg); --tag-fg: var(--tag-cinza-fg); --tag-dot: var(--tag-cinza-dot); }
.tag-ponto { display: inline-block; width: 10px; height: 10px; margin: 0 var(--s-1) 0 0; border-radius: var(--r-full); background: var(--tag-dot, var(--tag-cinza-dot)); opacity: 1; flex-shrink: 0; vertical-align: middle; }
.linha-lista .tag-ponto { width: 12px; height: 12px; margin: 0 var(--s-1); }
.tags-aplicadas li { background: var(--tag-bg, var(--tag-cinza-bg)); color: var(--tag-fg, var(--tag-cinza-fg)); }
.filtro-inbox.filtro-tag-ativo, .filtro-inbox.filtro-tag-ativo:hover { background: var(--tag-bg); color: var(--tag-fg); box-shadow: inset 0 0 0 1.5px var(--tag-dot); }
.radio-rotulo { display: inline-flex; align-items: center; gap: 2px; }
.acompanhamento-tags-lista button { align-items: center; }
.acompanhamento-tags-lista button .tag-ponto { margin-right: var(--s-2); }
.acompanhamento-tags-lista button { justify-content: flex-start; }
.acompanhamento-tags-lista button > span:last-child { margin-left: auto; }
.tag-linha-nome { display: inline-flex; align-items: center; gap: 2px; }

.seletor-cor { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-1) 0; }
.swatch { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-full); background: var(--tag-dot); color: #fff; box-shadow: inset 0 0 0 1px rgba(31, 36, 48, 0.12); transition: transform 120ms ease-out; }
.swatch::after { content: ""; position: absolute; inset: -6px; }
.swatch:active { transform: scale(0.92); }
.swatch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.swatch .swatch-check { display: none; }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--tag-dot); }
.swatch[aria-checked="true"] .swatch-check { display: inline-flex; }
.form-tag-nova, .form-tag-edicao { display: grid; gap: var(--s-2); }

.chip-contagem { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full); background: rgba(31, 36, 48, 0.08); color: inherit; font-size: 0.6875rem; font-weight: 700; line-height: 1; }
.filtro-inbox.ativo .chip-contagem { background: rgba(255, 255, 255, 0.22); }
.acompanhamento-links button .chip-contagem { margin-left: auto; }
@media (max-width: 767px) {
  .filtros-inbox { gap: 6px; }
  .filtro-inbox { padding: 0 var(--s-3); gap: 5px; }
}

/* Backdrop real da ficha sobreposta (< 1440 px): captura toque/clique e fecha */
.ficha-backdrop { position: fixed; inset: 0; z-index: 69; width: 100%; height: 100%; background: rgba(31, 36, 48, 0.34); cursor: default; animation: sheet-fade 200ms ease-out both; }
@media (min-width: 1440px) { .ficha-backdrop { display: none; } }

  .lembretes { padding: var(--s-4, 16px); max-width: 720px; margin: 0 auto; }
  .lembretes-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .lembrete-linha { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line, #e3e5ea); border-radius: 12px; background: var(--bg-surface, #fff); }
  .lembrete-linha.vencido { border-color: var(--danger, #b3261e); }
  .lembrete-texto { display: grid; gap: 2px; overflow-wrap: anywhere; }
  .lembrete-meta, .lembrete-linha .acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .lembrete-form { margin-block: 12px; }

@media (max-width: 767px) {
  .lembretes .reservas-cabeca { flex-wrap: wrap; align-items: center; margin-bottom: var(--s-4); }
  .lembretes .reservas-cabeca h1 { display: none; }
  .lembretes .abas-reservas { flex: 1 1 100%; overflow-x: auto; }
  .lembretes .abas-reservas a { white-space: nowrap; }
}

.copiloto-fab { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 52px; height: 52px; border-radius: var(--r-full); border: 0; background: var(--brand); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); cursor: pointer; touch-action: none; }
.copiloto-fab:focus-visible { outline: 3px solid var(--line-strong); outline-offset: 2px; }
.copiloto { display: grid; grid-template-rows: 1fr auto; gap: 8px; min-height: 50vh; max-height: 70vh; }
.copiloto-mensagens { overflow-y: auto; display: grid; gap: 8px; align-content: start; padding-bottom: 4px; }
.copiloto-bolha { max-width: 85%; padding: 8px 12px; border-radius: 14px; overflow-wrap: anywhere; background: var(--bg-surface); border: 1px solid var(--line); }
.copiloto-bolha.user { justify-self: end; background: var(--brand); color: #fff; border-color: transparent; }
.copiloto-cartao { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-surface); overflow-wrap: anywhere; }
.copiloto-cartao[data-status="descartada"], .copiloto-cartao[data-status="expirada"] { opacity: 0.6; }
.copiloto-candidatos { display: flex; flex-wrap: wrap; gap: 6px; }
.copiloto-candidatos .ativo { border-color: var(--brand); font-weight: 700; }
.copiloto-form { display: flex; gap: 8px; }
.copiloto-campo { flex: 1; min-width: 0; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; resize: none; max-height: 7.5em; font-family: inherit; line-height: 1.4; field-sizing: content; }
.copiloto-form { align-items: flex-end; }
.copiloto-atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.copiloto-atalho { border: 1px solid var(--line-strong); background: var(--bg-surface); color: var(--text); padding: 6px 12px; min-height: 36px; border-radius: var(--r-full); font: inherit; font-size: 0.8125rem; cursor: pointer; }
.copiloto-microfone.gravando { background: var(--brand); color: #fff; }

.seu-dia { margin: 0 var(--s-3) var(--s-2); border: 1px solid var(--line); border-radius: 12px; background: var(--bg-surface); overflow: hidden; }
.seu-dia-cabeca { font-size: 0.9375rem; display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 44px; padding: 0 var(--s-3); background: none; border: 0; font: inherit; color: var(--text); cursor: pointer; }
.seu-dia-lista { list-style: none; margin: 0; padding: 0 0 var(--s-1); }
.seu-dia-linha { display: block; width: 100%; min-height: 44px; padding: 8px var(--s-3); background: none; border: 0; border-top: 1px solid var(--line); text-align: left; font: inherit; font-size: 0.875rem; color: var(--text); cursor: pointer; }
.seu-dia-linha:hover { background: var(--bg-subtle); }
.seu-dia-vazio { margin: 0; padding: 0 var(--s-3) var(--s-3); }
.instalar-app { margin: 0 var(--s-3) var(--s-2); border: 1px solid var(--line); border-radius: 12px; background: var(--bg-surface); overflow: hidden; }
.instalar-app-linha { display: flex; align-items: center; }
.instalar-app-cabeca { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; padding: 8px var(--s-3); background: none; border: 0; font: inherit; font-size: 0.9375rem; color: var(--text); text-align: left; cursor: pointer; }
.instalar-app-cabeca .muted { font-size: 0.8125rem; }
.instalar-app-passos { margin: 0; padding: var(--s-2) var(--s-3) var(--s-3) calc(var(--s-3) + 1.25rem); border-top: 1px solid var(--line); font-size: 0.875rem; display: grid; gap: var(--s-2); }
.instalar-app-icone { display: inline-block; vertical-align: -3px; margin-left: 4px; }
@media (min-width: 900px), (max-height: 480px) { .instalar-app { display: none; } }
@media (max-width: 767px) { .copiloto-fab { bottom: 76px; } }

.copiloto-texto { white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 10px; border-left: 3px solid var(--line-strong); background: var(--bg-subtle); border-radius: 0 8px 8px 0; }

/* Inbox inteligente (SPEC §14.34): Finalizar com um toque no cabeçalho da conversa. */
.conversa-cabeca .btn-finalizar { min-height: 36px; padding: 0 var(--s-3); gap: 6px; white-space: nowrap; }
@media (max-width: 767px) {
  .conversa-cabeca .btn-finalizar { width: 40px; padding: 0; justify-content: center; }
  .conversa-cabeca .btn-finalizar .so-desktop { display: none; }
}

/* Mensagens automáticas (SPEC §14.35) */
.form-automaticas { display: flex; flex-direction: column; gap: var(--s-4); }
fieldset.cartao-automatica { margin: 0; min-inline-size: 0; }
fieldset.cartao-automatica > legend {
  float: left; width: 100%; margin-bottom: var(--s-2); padding: 0;
  font-size: var(--fs-kicker); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint);
}
fieldset.cartao-automatica > legend + * { clear: both; }
.cartao-automatica textarea { width: 100%; resize: vertical; }
.grade-horario { display: flex; flex-direction: column; gap: var(--s-2); }
.linha-horario {
  display: grid; grid-template-columns: 5.5rem 1fr 1fr auto; align-items: center; gap: var(--s-2);
}
.linha-horario input[type="time"] { min-width: 0; }
.linha-horario .fechado { display: flex; align-items: center; gap: var(--s-1); font-size: var(--fs-meta); }
.previa-automatica { white-space: pre-wrap; margin: 0; }
.previa-automatica.texto-suave { color: var(--text-muted); font-style: italic; }
.selo-automatica {
  display: inline-block; margin-bottom: var(--s-1); padding: 0 var(--s-2);
  border-radius: var(--r-full); background: var(--bg-subtle); color: var(--text-muted);
  font-size: var(--fs-meta); font-weight: 600;
}
@media (max-width: 420px) {
  .linha-horario { grid-template-columns: 1fr 1fr auto; }
  .linha-horario .dia { grid-column: 1 / -1; font-weight: 600; }
}
.cartao-automatica > .ajuda-bloco { margin: var(--s-1) 0 0; }

/* Fatos do hóspede na ficha (SPEC §14.39) */
.fatos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.fato { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.fato-texto { display: grid; gap: 1px; min-width: 0; }
.fato-rotulo { font-size: var(--fs-meta); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.fato-valor { overflow-wrap: anywhere; }
.fato-certeza { font-size: var(--fs-meta); }
.fato-acoes { display: flex; gap: 2px; flex-shrink: 0; }
.fatos-propostos { display: grid; gap: var(--s-2); padding: var(--s-2); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); }
.fato-acoes .btn-icon { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
/* ---------- Vitrine: cadastro (§14.36) ---------- */
.oculto { display: none; }
.link-vitrine { margin: 0 0 var(--s-2); word-break: break-all; font-family: var(--font-mono, monospace); font-size: var(--fs-meta); }
.capa-vitrine { width: 100%; max-height: 180px; object-fit: cover; border-radius: var(--r-md, 8px); }
.linha-secao-vitrine { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.linha-secao-vitrine input[type="text"] { flex: 1 1 10rem; min-width: 0; }
.linha-secao-vitrine input[type="number"] { flex: 0 0 4.5rem; min-width: 0; }
.linha-secao-vitrine .fechado { display: flex; align-items: center; gap: var(--s-1); font-size: var(--fs-meta); }
.grupo-itens-vitrine h4, .fotos-vitrine h4 { margin: var(--s-3) 0 var(--s-1); font-size: var(--fs-meta); color: var(--text-muted); }
.item-vitrine { border: 1px solid var(--line); border-radius: var(--r-md, 8px); margin-bottom: var(--s-2); background: var(--bg); }
.item-vitrine-cabeca { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: var(--s-2); background: none; border: 0; text-align: left; cursor: pointer; font: inherit; }
.item-vitrine-cabeca img, .item-vitrine-cabeca .sem-foto { width: 48px; height: 48px; flex: none; border-radius: 6px; object-fit: cover; background: var(--bg-subtle); }
.item-vitrine-cabeca .nome { flex: 1; font-weight: 600; }
.item-vitrine.aberto > .form-config, .item-vitrine.aberto > .fotos-vitrine { padding: 0 var(--s-2) var(--s-3); }
.grade-fotos { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s-2); }
.grade-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; }
.acoes-foto { display: flex; flex-wrap: wrap; gap: 0; }
.novo-item-vitrine > summary { cursor: pointer; font-weight: 600; margin: var(--s-3) 0 var(--s-2); }

/* ---------- Vitrine: "+" da conversa (§14.36) ---------- */
.sheet-vitrine { display: flex; flex-direction: column; gap: var(--s-3); max-height: 70vh; overflow-y: auto; }
.sheet-vitrine h4 { margin: 0 0 var(--s-1); font-size: var(--fs-meta); color: var(--text-muted); }
.vitrine-chips, .vitrine-abas { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip-botao { cursor: pointer; border: 1px solid var(--line); background: var(--bg); font: inherit; font-size: var(--fs-meta); padding: var(--s-1) var(--s-3); border-radius: var(--r-full); }
.chip-botao[aria-selected="true"] { background: var(--wine-soft); color: var(--wine); border-color: var(--wine); }
.vitrine-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.vitrine-lista label { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; }
.vitrine-lista img, .vitrine-lista .sem-foto { width: 48px; height: 48px; flex: none; border-radius: 6px; object-fit: cover; background: var(--bg-subtle); }
.vitrine-lista .nome { font-weight: 600; }
.sheet-vitrine textarea { width: 100%; resize: vertical; }
.campo-check-linha { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-1) 0; }

/* ---------- Inbox multicanal (SPEC §14.40) ---------- */
.abas-canal { display: flex; gap: var(--s-1); padding: var(--s-1) var(--s-4) 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.abas-canal::-webkit-scrollbar { display: none; }
.aba-canal { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s-3); border-bottom: 2px solid transparent; color: var(--text-muted); font-size: var(--fs-meta); font-weight: 700; }
.aba-canal:hover { color: var(--text); }
.aba-canal.ativa { color: var(--brand); border-bottom-color: var(--brand); }
.aba-canal:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--r-sm, 6px); }
.aba-canal-icone { display: inline-flex; }
.aba-canal .chip-contagem { margin-left: 2px; }
.selo-canal.selo-canal-airbnb { background: #fff; color: var(--marca-airbnb); }
.selo-canal.selo-canal-booking { background: var(--text); }
/* Instagram (§8.10): logo com a cor da marca — glifo branco sobre o gradiente oficial. */
.selo-canal.selo-canal-instagram,
.aba-canal[data-canal="instagram"] .aba-canal-icone {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  color: #fff;
}
.aba-canal[data-canal="instagram"] .aba-canal-icone { padding: 2px; border-radius: 5px; }
.avatar-foto { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.aba-canal-icone-whatsapp { color: var(--marca-whatsapp); }
.aba-canal-icone-airbnb { color: var(--marca-airbnb); }
.faixa-janela.neutra { color: var(--text-muted); background: var(--bg-subtle); }
.selo-aviso-canal { background: var(--bg-subtle); color: var(--text-muted); }
.avatar-canal-cabeca { position: relative; display: inline-flex; flex: 0 0 auto; }
@media (max-width: 767px) {
  .faixa-janela.neutra .faixa-nota { display: none; }
}

.copiloto-restaurar-fab { justify-self: start; font-size: 0.8125rem; color: var(--text-muted); background: none; border: 0; padding: 4px 0; text-decoration: underline; cursor: pointer; }

/* Story do Instagram (SPEC §14.45) */
.msg-story { display: flex; flex-direction: column; gap: var(--s-1); }
.msg-story-link { font-weight: 600; text-decoration: underline; color: inherit; }