/* =====================================================================
   Estilos das páginas públicas (landing + chat de agendamento).
   Reaproveita tokens/fontes/botões e as classes .maia-bubble/.maia-buttons/
   .maia-cat-group já definidas em /admin/css/theme.css (mesmo padrão
   visual do chat "MAIA" do dashboard admin) — aqui só o necessário pro
   layout de página cheia (mobile-first), que o dashboard não precisa
   porque vive dentro de um .main com sidebar.
   ===================================================================== */

html, body { height: 100%; }
body { min-height: 100vh; }

/* =====================================================================
   Landing pública por tenant — direção de design: "clínica de confiança",
   não "editorial de boutique impressa" (a direção anterior usava régua
   dupla de jornal, numeração de sumário Nº 01, cardápio pontilhado e
   drop cap — motivo de sumiço explícito, ver histórico). Tipografia
   passa a ser só sans (Plus Jakarta Sans) nas páginas públicas — a
   Fraunces/serifado fica reservado à wordmark de quem já a usa como
   logo, não à UI. Elemento de assinatura visual é um ANEL parcial (arco
   aberto) em cor de marca — remete a espelho/holofote de ateliê de
   estética sem virar "blob" de gradiente genérico — reaproveitado em 3
   lugares (atrás do logo, como marcador de seção, como acento do card
   de procedimento) pra formar um sistema, não um enfeite único. Cor de
   tenant (--color-primary) continua a única variável visual entre um
   tenant e outro; espaçamento/raio/sombra seguem fixos de produto.
   ===================================================================== */

.landing-shell {
  /* Neutro de base só aqui, mais frio que o --bg de produto (creme
     quente, pensado pro dashboard) — evita a combinação "fundo creme +
     serifada" que é exatamente o clichê que essa direção substitui.
     Sobrescreve --bg localmente (custom property, escopo só desta
     árvore) em vez de mexer no token global — dashboard não muda. */
  --bg: #fafaf8;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 820px 520px at 18% -8%, rgba(var(--color-primary-rgb), 0.07), transparent 60%),
    radial-gradient(ellipse 620px 420px at 100% 10%, rgba(var(--color-primary-rgb), 0.045), transparent 55%),
    var(--bg);
}
.landing-container {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 64px 24px 40px;
}

/* ---------- badge de nicho (substitui o masthead de jornal) ---------- */
.landing-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.1);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 32px;
}

/* ---------- hero ---------- */
.landing-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 56px;
}
.landing-visual {
  position: relative;
  width: 128px;
  height: 128px;
  flex-shrink: 0;
}
/* min-width:0 no item de texto do grid — por padrão um item de grid não
   encolhe abaixo do "min-content" do que tem dentro, e um <button> não
   quebra linha pra caber (mede a largura do rótulo inteiro), então sem
   isso o CTA "Chamar no WhatsApp" força a coluna (e a página) mais larga
   que a tela em mobile. */
.landing-hero > div { min-width: 0; }
/* Anel parcial (arco ~250°, não um círculo fechado) em cor de marca —
   o elemento de assinatura da página, atrás do logo/monograma. Feito
   com conic-gradient + mask radial pra virar um traço fino, não uma
   mancha sólida — lê como halo/holofote de ateliê, não como "blob" de
   fundo gradiente genérico. */
.landing-visual::before {
  content: '';
  position: absolute;
  inset: -16px;
  z-index: 0;
  border-radius: 50%;
  background: conic-gradient(from -55deg, var(--color-primary) 0deg, var(--color-primary) 250deg, transparent 250deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  opacity: 0.5;
}
.landing-visual img,
.landing-monogram {
  position: relative;
  z-index: 1;
  width: 128px;
  height: 128px;
  border-radius: var(--radius);
  object-fit: cover;
  box-shadow: var(--shadow-m);
}
.landing-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--font);
  font-weight: 700;
  font-size: 46px;
  color: var(--color-primary);
}

.landing-hero h1 {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--text);
  opacity: 0;
  animation: landing-rise 0.6s ease 0.08s forwards;
}
.landing-tagline {
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 0 24px;
  opacity: 0;
  animation: landing-rise 0.6s ease 0.16s forwards;
}
.landing-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  opacity: 0;
  animation: landing-rise 0.6s ease 0.24s forwards;
}
.landing-cta-row .btn-primary {
  padding: 13px 26px;
  font-size: 14.5px;
  box-shadow: 0 4px 18px rgba(var(--color-primary-rgb), 0.3);
}
.landing-cta-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  text-decoration: none;
  transition: border-color 0.13s ease, transform 0.13s ease;
}
.landing-cta-whatsapp:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-1px); }
.landing-cta-whatsapp svg { width: 17px; height: 17px; flex-shrink: 0; }

@keyframes landing-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- seções (procedimentos / localização) ---------- */
.landing-section { margin-bottom: 32px; }
.landing-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
  margin: 0 0 16px;
}
/* mesmo anel-arco do hero, em miniatura — marcador de seção no lugar da
   numeração "Nº 01" de sumário de revista */
.landing-section-title::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2.5px solid var(--color-primary);
  border-bottom-color: transparent;
  border-left-color: transparent;
  transform: rotate(-20deg);
}

/* Procedimentos como card de superfície (mesma linguagem de .card do
   dashboard: fundo, borda, raio, sombra) em vez de cardápio impresso
   com leader pontilhado — lê como produto/serviço de clínica, não como
   menu de restaurante boutique. */
.landing-proc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.landing-menu-list { list-style: none; margin: 0; padding: 0; }
.landing-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.landing-menu-item:last-child { border-bottom: none; }
/* min-width:0 é o que permite um item flex:1 encolher/quebrar linha
   abaixo do tamanho do próprio texto (nome de procedimento longo) — sem
   isso o flex item nunca fica menor que seu conteúdo e estoura a
   largura do card (e da página) em telas estreitas. */
.landing-menu-item .nome { flex: 1; min-width: 0; overflow-wrap: break-word; font-size: 14.5px; font-weight: 600; color: var(--text); }
.landing-menu-item .duracao {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--surface-2);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.landing-menu-item .preco { font-size: 14.5px; font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.landing-menu-mais { margin-top: 14px; font-size: 12.5px; color: var(--text-2); }

/* Localização + horário como dois cards lado a lado (mesma linguagem do
   .landing-proc-card acima) no lugar da faixa de colofão com régua de
   jornal — empilha no mobile via media query abaixo. */
.landing-info-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.landing-info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}
.landing-info-card .titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 10px;
}
.landing-info-card .titulo svg { width: 15px; height: 15px; color: var(--color-primary); flex-shrink: 0; }
.landing-info-card .conteudo { font-size: 13.5px; color: var(--text); line-height: 1.7; }

.landing-footer {
  text-align: center;
  margin-top: 8px;
  padding: 20px 0 32px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
}
/* link discreto — mesma cor apagada do rodapé por padrão (não vira um
   link "chamativo" na cor de marca), só sublinha no hover pra indicar
   que é clicável */
.landing-footer a { color: inherit; text-decoration: none; }
.landing-footer a:hover { text-decoration: underline; }

.landing-error {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  color: var(--text-2);
  background: var(--bg);
}

@media (max-width: 640px) {
  .landing-container { padding: 40px 20px 28px; }
  .landing-hero { grid-template-columns: 1fr; text-align: center; gap: 20px; }
  .landing-visual { margin: 0 auto; }
  .landing-tagline { max-width: none; }
  .landing-cta-row { justify-content: center; }
  .landing-section-title { justify-content: center; }
  .landing-info-band { grid-template-columns: 1fr; }
}

/* =====================================================================
   Ficha de anamnese pública (/anamnese/:token) — reaproveita
   .landing-shell/.landing-container/.landing-hero (mesma moldura das
   outras páginas públicas) só com um container mais estreito, de
   formulário, em vez da vitrine larga da landing.
   ===================================================================== */
.anamnese-container { max-width: 600px; }
.anamnese-hero { margin-bottom: 32px; }
.anamnese-hero .landing-visual { width: 56px; height: 56px; }
.anamnese-hero .landing-visual img,
.anamnese-hero .landing-monogram { width: 56px; height: 56px; border-radius: var(--radius-s); font-size: 20px; }
.anamnese-hero .landing-visual::before { inset: -8px; }
.anamnese-hero h1 { font-size: 22px; }
.anamnese-hero .landing-tagline { margin: 0; font-size: 14px; }

.anamnese-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 14px;
}
.anamnese-checkbox-row input[type='checkbox'] { width: 18px; height: 18px; accent-color: var(--color-primary); flex-shrink: 0; }

.anamnese-signature-wrap {
  border: 2px dashed var(--border-2);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  overflow: hidden;
}
.anamnese-signature-wrap canvas {
  display: block;
  width: 100%;
  height: 160px;
  touch-action: none; /* deixa o gesto de assinar riscar o canvas sem rolar a página no toque */
}

.anamnese-signature-actions { display: flex; gap: 10px; margin-top: 14px; }
.anamnese-signature-actions .btn-primary { flex: 1; }

.anamnese-erro { color: var(--danger); font-size: 13.5px; margin-top: 10px; }

.anamnese-success { text-align: center; padding: 48px 24px; }
/* cor de sucesso explícita: o ícone (.icon usa currentColor) herdaria o
   texto padrão escuro sem isso — o ✅ emoji que ele substituiu já vinha
   verde por natureza, então precisa ficar explícito aqui. */
.anamnese-success-check { font-size: 56px; margin-bottom: 12px; color: var(--success); }
.anamnese-success h2 { font-family: var(--font); font-size: 22px; color: var(--success); margin-bottom: 8px; }
.anamnese-success p { color: var(--text-2); font-size: 15px; }

@media (max-width: 640px) {
  .anamnese-hero { text-align: center; }
  .anamnese-hero .landing-visual { margin: 0 auto 12px; }
}

/* =====================================================================
   Chat de agendamento (página cheia)
   ---------------------------------------------------------------------
   Estrutura única pra mobile e desktop — só a apresentação muda por media
   query, nunca o HTML: .chat-sidebar carrega a marca (logo/nome) e o link
   "Voltar ao site" (os dois já existiam antes; não são elementos novos,
   só mudaram de casa/apresentação):
     - Mobile (≤860px): a conversa é o motivo de alguém abrir esta página
       (chegou por link/QR code já querendo agendar), então ela ocupa
       100% do .chat-shell. .chat-sidebar vira um drawer off-canvas
       (fora da tela por padrão, ver oculto via transform) atrás de um
       botão de menu FLUTUANTE — nem uma barra de topo dedicada existe,
       pra não tirar nenhum pixel de altura da conversa.
     - Desktop (≥861px, mesmo corte do resto do app — ver theme.css): o
       problema aqui é o oposto (sobra espaço), então .chat-sidebar vira
       uma coluna fixa à esquerda, sempre visível, e o cartão do chat
       cresce de 560px pra 900px de largura — mais altura de conversa
       visível de uma vez (menos margem vertical) sem esticar a bolha de
       texto (ela continua limitada a 78% da coluna de mensagens, que
       preserva a MESMA largura de leitura de antes).
   ===================================================================== */
.chat-shell {
  position: relative; /* ancora o botão de menu e o drawer no mobile */
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* evita a barra de endereço do celular cortando o rodapé */
  background: var(--bg);
}

.chat-main {
  flex: 1;
  min-height: 0; /* permite .chat-messages rolar dentro de um flex item */
  display: flex;
  flex-direction: column;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 58px 14px 8px; /* padding-top reserva espaço pro botão de menu flutuante */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-buttons {
  flex-shrink: 0;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 46vh;
  overflow-y: auto;
}
/* Rodapé "Powered by NUX Tech" do chat (mesmo .landing-footer da landing/
   anamnese) — padding reduzido aqui: .chat-shell é altura travada
   (100vh/100dvh), o padding largo original (20px 0 32px) sobra demais
   numa tela já disputada por mensagens+botões. flex-shrink:0 garante que
   nunca encolhe pra caber, igual .chat-buttons acima. */
.chat-footer {
  flex-shrink: 0;
  padding: 8px 0 calc(10px + env(safe-area-inset-bottom));
  background: var(--surface);
}

/* botões de opção do chat em coluna cheia (mobile: alvo de toque grande) —
   ainda usado pela lista de procedimentos (iniciarAgendar) e por outras
   telas que fazem sentido em coluna; o MENU PRINCIPAL não usa mais isso,
   ver .chat-menu-chips abaixo. */
.chat-option-btn {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
}

/* Lista de procedimentos (iniciarAgendar) — altura própria travada +
   rolagem interna, pra uma lista longa (hoje 11 itens, tende a crescer)
   nunca empurrar a última mensagem da MAIA ("Qual procedimento você quer
   agendar?") pra fora da tela. clamp() mantém a proporção pedida
   (~40-50% da conversa) sem depender só de vh: nunca menor que 200px
   (ficaria curto demais pra rolar com conforto num celular baixo) nem
   maior que 340px (numa tela alta isso já é mais que suficiente pra ver
   3-4 itens de uma vez, o resto é só rolar). Cada item mantém o mesmo
   visual de sempre (nome + duração + preço, card com borda) — só o
   contêiner que envolve a lista é novo. */
.chat-procedimentos-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: clamp(200px, 45vh, 340px);
  overflow-y: auto;
  padding-right: 2px; /* barra de rolagem não cola no texto do botão */
}

/* Menu principal: fileira horizontal de chips com rolagem lateral, no
   lugar do painel de 7 botões empilhados (que dominava a tela mais que a
   própria conversa — motivo desta troca). Mesma solução serve mobile e
   desktop: overflow-x:auto funciona em touch e com scroll/trackpad, sem
   precisar de dois sistemas de layout diferentes. */
.chat-menu-chips {
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px; /* respiro pra scrollbar não colar no texto */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.chat-menu-chips::-webkit-scrollbar { height: 5px; }
.chat-menu-chips::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; }
.chat-chip {
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border);
  cursor: pointer;
}
.chat-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
/* "Agendar horário" continua a ação principal — maior e destacada na
   cor do tenant, igual btn-primary já era antes desta troca. */
.chat-chip-primary {
  padding: 12px 20px;
  font-size: 13.5px;
  font-weight: 700;
  background: var(--color-primary);
  color: #fff;
  border-color: transparent;
}
.chat-chip-primary:hover { background: var(--color-primary-dark); color: #fff; }
.chat-form-row { display: flex; flex-direction: column; gap: 10px; }
.chat-form-row .field { margin-bottom: 0; }
/* Texto de apoio abaixo do label "E-mail (opcional)" (pedirDadosCliente,
   chat-agendar.js) — reforça o valor de preencher (recebe a confirmação
   por e-mail) sem tornar o campo obrigatório; cor de marca pra destacar
   como "recomendado" sem parecer um erro/aviso de validação. */
.chat-field-hint {
  margin: -2px 0 6px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-primary);
}

/* Botão de copiar código (Código: AG-XXXXXXXX) — ícone inline, tanto na
   mensagem de sucesso do pedido quanto nos cards de "Meus agendamentos"
   (ver botaoCopiarCodigo/wireCopiarCodigo em chat-agendar.js). Ícone vira
   um check por ~1.5s como feedback de que copiou, sem precisar de
   toast/alert. */
.btn-copiar-codigo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  vertical-align: middle;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-copiar-codigo svg { width: 14px; height: 14px; }
.btn-copiar-codigo:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-copiar-codigo.copiado { border-color: var(--success); color: var(--success); }
.btn-copiar-codigo:disabled { cursor: default; }

/* Ações do card de agendamento (Remarcar/Cancelar/Confirmar presença/
   Falar com a Dra., ver listarAgendamentos em chat-agendar.js) — .acoes
   sozinho (fora de .kanban-card, que já tem seu próprio gap em
   theme.css) não tinha NENHUM espaçamento entre os botões; ficavam
   colados um no outro. gap:10px + wrap pra não estourar a largura do
   card em telas estreitas. min-height:44px nos .btn-sm daqui garante
   alvo de toque adequado (o .btn-sm "cru" de theme.css mede só ~23px no
   desktop, e 36px no mobile — abaixo do mínimo de 44px pedido pra estas
   ações, que são as principais do card). Escopado a .chat-messages pra
   não alterar o .btn-sm usado nas outras telas do admin/dashboard. */
.chat-messages .acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chat-messages .acoes .btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
}
.chat-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}
.chat-slot-grid button { padding: 10px 6px; }
.chat-day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

/* ---------- botão de menu (mobile) — flutua sobre a conversa, não come
   altura de layout nenhuma. Some por completo no desktop (sidebar já
   fica sempre visível lá, ver media query abaixo). ---------- */
.chat-menu-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.chat-menu-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.chat-menu-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
/* Rótulo do botão de menu — sem ele, o ícone sozinho não deixava claro
   que era clicável (era a única affordance visível na tela inicial da
   conversa depois que "Agendar horário" saiu do corpo do chat). */
.chat-menu-btn-label {
  font-size: 12.5px;
  font-weight: 600;
}

/* ---------- sidebar (marca + "Voltar ao site") ---------- */
.chat-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px 20px;
  background: var(--surface-2);
}
.chat-sidebar-close {
  align-self: flex-end;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 16px;
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.chat-sidebar-close:hover { background: var(--surface-3); color: var(--text); }
.chat-sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 8px 0 4px;
}
.chat-sidebar-brand img,
.chat-sidebar-monogram {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-s);
  object-fit: cover;
  border: 1px solid var(--border);
  /* Placa branca atrás do logo — muitos logos (ex: o da Tainara) têm
     fundo transparente, e sem isso eles ficam sem contraste em cima do
     painel lateral colorido (var(--color-primary) no desktop, ver
     media query abaixo). O monograma de fallback já tinha isso; agora o
     <img> do logo real também tem. */
  background: var(--surface);
}
.chat-sidebar-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  font-family: var(--font);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-primary);
}
.chat-sidebar-brand .nome {
  font-family: var(--font);
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
  line-height: 1.3;
}
/* Link "Voltar ao site" — não existia navegação de volta nenhuma no chat
   público antes disso; sem ele, quem entrasse aqui direto (ex: link
   compartilhado) ficava sem saída a não ser apertar "voltar" do
   navegador. */
.chat-sidebar-voltar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 9px 10px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.chat-sidebar-voltar:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Menu lateral (as 6 opções que antes eram chips na conversa — ver
   comentário em chat-agendar.js#menuPrincipal) — ocupa o vão que já
   existia entre a marca e "Voltar ao site" (esse vão vem de
   .chat-sidebar-voltar ter margin-top:auto). Agrupado com o botão
   "Agendar horário" em destaque (mesma ação da conversa, ver
   sidebarMenuHandlers em chat-agendar.js — clique aqui chama a mesma
   função, não é lógica duplicada). */
.chat-sidebar-menu-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-sidebar-menu-featured {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-s);
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.chat-sidebar-menu-featured:hover { background: var(--color-primary-dark); }
.chat-sidebar-menu-featured:active { background: var(--color-primary-dark); }
.chat-sidebar-menu-featured:focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 2px; }
.chat-sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.chat-sidebar-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  text-align: left;
  background: rgba(0, 0, 0, 0.035);
  border: none;
  border-radius: var(--radius-xs);
  padding: 9px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.chat-sidebar-menu-item:hover { background: var(--surface-3); color: var(--text); }
.chat-sidebar-menu-item:active { background: var(--border-2); color: var(--text); }
.chat-sidebar-menu-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* ---------- mobile (≤860px): sidebar = drawer off-canvas ---------- */
@media (max-width: 860px) {
  .chat-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(80vw, 300px);
    z-index: 21;
    box-shadow: var(--shadow-m);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    overflow-y: auto;
  }
  .chat-shell.chat-menu-open .chat-sidebar { transform: translateX(0); }
  .chat-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 20;
  }
  .chat-shell.chat-menu-open .chat-menu-backdrop { display: block; }
}

/* ---------- desktop (≥861px, mesmo corte do resto do app) ---------- */
@media (min-width: 861px) {
  .chat-menu-btn,
  .chat-menu-backdrop,
  .chat-sidebar-close {
    display: none; /* sidebar já é permanente — nada pra abrir/fechar */
  }
  .chat-messages { padding-top: 20px; } /* sem botão flutuante pra reservar espaço aqui */

  /* Fundo com o mesmo véu de cor de marca da landing (gradientes radiais
     na cor do tenant, sem grão de papel) em vez de --bg liso — o cartão
     cresce e passa a "flutuar" sobre um fundo com identidade, não um
     vazio genérico. `:has()` escopa isso só à página do chat — a landing
     já pinta o próprio fundo por cima (.landing-shell), nunca duplica. */
  body:has(.chat-shell) {
    position: relative;
    background:
      radial-gradient(ellipse 820px 520px at 18% -8%, rgba(var(--color-primary-rgb), 0.07), transparent 60%),
      radial-gradient(ellipse 620px 420px at 100% 10%, rgba(var(--color-primary-rgb), 0.045), transparent 55%),
      var(--bg);
  }

  /* 560px → 900px e margem vertical menor (48px → 28px): mais conversa e
     mais botões de opção visíveis de uma vez, sem precisar rolar tanto —
     era exatamente o "espaço vazio" reportado. A coluna de mensagens
     (.chat-main) fica com no máximo ~560px de leitura confortável (ver
     max-width abaixo) — a largura extra vai inteira pra .chat-sidebar,
     nunca pra esticar bolha de texto virando uma linha só. */
  .chat-shell {
    flex-direction: row;
    max-width: 900px;
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);
    margin: 28px auto;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-m);
    border: 1px solid var(--border);
  }
  /* Painel lateral na cor do tenant — mesma --color-primary (setada em
     runtime por dashboard/js/config.js a partir de tenants.cor_primaria,
     ver applyBranding) já usada nos botões/topbar em todo o resto do
     site; NUNCA um roxo fixo aqui. Antes o painel usava --surface-2
     (neutro claro) e ficava sem presença nenhuma ao lado da conversa.
     Logo/nome/"voltar" abaixo trocam pra versão clara (branco/translúcido)
     pra manter contraste de leitura em cima de QUALQUER cor de tenant,
     não só a roxa da Tainara — testado também com cor de teste diferente
     (ver captura de tela da entrega). */
  .chat-sidebar {
    width: 260px;
    flex-shrink: 0;
    justify-content: center;
    background: var(--color-primary);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    /* rede de segurança pra janela baixa: marca + 6 itens de menu + voltar
       podem não caber inteiros numa tela muito curta — rola por dentro em
       vez de vazar/cortar, mesmo tratamento que o drawer mobile já tinha. */
    overflow-y: auto;
  }
  .chat-sidebar-brand .nome { color: #fff; }
  .chat-sidebar-brand img,
  .chat-sidebar-monogram { border-color: rgba(255, 255, 255, 0.35); }
  /* "Agendar horário" em destaque: no painel roxo, inverte pra fundo
     branco sólido + texto na cor do tenant — é o contrário do botão
     equivalente na conversa (fundo colorido), mas aqui precisa se
     destacar EM CIMA do roxo, não se misturar com ele. */
  .chat-sidebar-menu-featured { background: #fff; color: var(--color-primary); }
  .chat-sidebar-menu-featured:hover { background: rgba(255, 255, 255, 0.88); }
  .chat-sidebar-menu-featured:active { background: rgba(255, 255, 255, 0.78); }
  .chat-sidebar-menu-featured:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .chat-sidebar-menu-item { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); }
  .chat-sidebar-menu-item:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
  .chat-sidebar-menu-item:active { background: rgba(255, 255, 255, 0.3); color: #fff; }
  .chat-sidebar-menu-item:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
  .chat-sidebar-voltar {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border-color: transparent;
  }
  .chat-sidebar-voltar:hover { background: rgba(255, 255, 255, 0.28); border-color: transparent; color: #fff; }
  .chat-main { min-width: 0; }
  .chat-messages { max-width: 560px; width: 100%; margin: 0 auto; }
  .chat-buttons { max-width: 560px; width: 100%; margin: 0 auto; max-height: none; }
  .chat-footer { max-width: 560px; width: 100%; margin: 0 auto; }
}