/* =====================================================================
   Direção visual B (Ateliê) — lado PÚBLICO: landing + chat. 2026-09-25.
   Aprovado a partir de /root/nuxtech/auditorias/2026-09-25-publico/.

   ISOLAMENTO: carregado SÓ por public/index.html (landing) e
   public/agendar/index.html (chat), e toda regra começa com `body.pb` —
   classe que só essas duas páginas têm. Anamnese, dashboard, 404/500 não
   carregam este arquivo nem têm a classe: continuam idênticos.
   Vem DEPOIS de theme.css e public.css e sobrepõe o necessário.

   COR DO TENANT: nunca usada crua em texto/botão. public/js/marca.js lê
   a --color-primary que config.js injeta e publica variações que passam
   no WCAG AA pra qualquer cor (ver cabeçalho de marca.js):
     --pb-brand       decoração (fundos lavados, faixas)
     --pb-brand-ink   marca como TEXTO/ÍCONE (≥4,5:1 no cartão e no fundo)
     --pb-fill / --pb-on-fill / --pb-fill-border   botão principal e balão da cliente
     --pb-line        contorno/anel de foco (≥3:1)
     --pb-wash        lavado de seleção
   ===================================================================== */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/fraunces-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; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/fraunces-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/hanken-grotesk-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; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/hanken-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* padrões da marca (marca.js sobrescreve no style do <html>, que tem prioridade) */
:root { --pb-brand: #6c4fb3; --pb-brand-rgb: 108, 79, 179; --pb-brand-ink: #6c4fb3; --pb-fill: #6c4fb3; --pb-on-fill: #ffffff; --pb-fill-border: #6c4fb3; --pb-line: #6c4fb3; --pb-wash: #f0ecf7; }

body.pb {
  --bg: #f6f3ee; --surface: #fffdfa; --surface-2: #f1ece4; --surface-3: #e8e1d6; --border: #e6dfd4; --border-2: #d6ccbe; --border-strong: #968a7b;
  --text: #1f1a15; --ink: #1f1a15; --text-2: #5d554c; --text-3: #6b6258;
  --danger: #9e3a33; --danger-bg: #f7e7e4; --ok: #2f6243; --ok-bg: #e7f0e9; --warn: #7f4a0c; --warn-bg: #fbeedc;
  --pb-fs-xs: 13px; --pb-fs-sm: 14px; --pb-fs-base: 16px; --pb-fs-md: 17px; --pb-fs-lg: 20px; --pb-fs-2xl: 30px;
  --pb-r: 16px; --pb-r-s: 12px; --pb-r-xs: 8px;
  --pb-shadow: 0 1px 2px rgba(60, 40, 20, 0.06), 0 3px 12px rgba(60, 40, 20, 0.05);
  --font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pb-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: var(--pb-fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
body.pb .icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.pb :focus-visible, body.pb button:focus-visible { outline: 3px solid var(--pb-line); outline-offset: 2px; }
body.pb .landing-error { color: var(--text-2); font-size: var(--pb-fs-base); }

/* ---------- botões: principal cheio · secundário contornado · terciário texto ---------- */
body.pb .btn-primary, body.pb .btn-secondary, body.pb .landing-cta-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px; border-radius: var(--pb-r-s);
  font: 700 var(--pb-fs-base)/1.2 var(--font); text-decoration: none; letter-spacing: 0;
  border: 1.5px solid transparent;
}
body.pb .btn-primary { background: var(--pb-fill); color: var(--pb-on-fill); border-color: var(--pb-fill-border); box-shadow: 0 2px 10px rgba(var(--pb-brand-rgb), 0.28); }
body.pb .btn-primary:hover { filter: brightness(0.95); background: var(--pb-fill); }
body.pb .btn-secondary, body.pb .landing-cta-whatsapp { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
body.pb .btn-secondary:hover, body.pb .landing-cta-whatsapp:hover { background: var(--surface-2); color: var(--ink); border-color: var(--border-strong); }
/* destrutivo (Cancelar agendamento em "Consultar meus"): texto vermelho contornado, sem bloco cheio */
body.pb .btn-danger { background: var(--surface); color: var(--danger); border: 1.5px solid #e2b9b3; }
body.pb .btn-danger:hover { background: var(--danger-bg); }
body.pb .btn-sm { min-height: 44px; padding: 8px 14px; font-size: var(--pb-fs-sm); }
body.pb button:disabled, body.pb button:disabled:hover { opacity: 0.55; filter: none; cursor: not-allowed; }
body.pb .btn-primary:disabled { background: var(--pb-fill); color: var(--pb-on-fill); border-color: var(--pb-fill-border); }
body.pb .btn-secondary:disabled { background: var(--surface-2); color: var(--text-3); border-color: var(--border-2); }

/* ---------- campos ---------- */
body.pb label { font-size: var(--pb-fs-sm); color: var(--text-2); text-transform: none; letter-spacing: 0; font-weight: 600; margin-bottom: 6px; }
body.pb input, body.pb select, body.pb textarea { font: var(--pb-fs-base) var(--font); min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--border-strong); border-radius: var(--pb-r-s); background: var(--surface); color: var(--ink); }
body.pb input[type='radio'], body.pb input[type='checkbox'] { min-height: 0; width: 20px; height: 20px; accent-color: var(--pb-brand-ink); padding: 0; }
body.pb input:focus, body.pb select:focus, body.pb textarea:focus { border-color: var(--pb-line); box-shadow: 0 0 0 3px rgba(var(--pb-brand-rgb), 0.18); outline: none; }
body.pb .field { margin-bottom: 14px; }
body.pb .field-help, body.pb .chat-field-hint { font-size: var(--pb-fs-xs); color: var(--text-2); }
body.pb .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--pb-r); box-shadow: var(--pb-shadow); }
body.pb .badge { border-radius: 6px; font-size: 12px; padding: 2px 8px; }
body.pb .notice { border-radius: var(--pb-r-s); font-size: var(--pb-fs-sm); background: var(--warn-bg); color: var(--warn); border-color: #ecd3ae; }
body.pb .loading-line { color: var(--text-2); font-size: var(--pb-fs-sm); display: flex; align-items: center; gap: 8px; min-height: 48px; }
body.pb .spinner { border-color: rgba(var(--pb-brand-rgb), 0.25); border-top-color: var(--pb-brand-ink); }

/* ================================== LANDING ================================== */
body.pb .landing-shell {
  --bg: #f6f3ee; --surface: #fffdfa;
  background: radial-gradient(120% 340px at 50% -90px, rgba(var(--pb-brand-rgb), 0.16), transparent 70%), var(--bg);
  min-height: 100vh;
}
body.pb .landing-container { max-width: 1040px; margin: 0 auto; padding: 28px 20px 36px; }
body.pb .landing-badge { display: inline-flex; align-items: center; gap: 7px; font: 700 var(--pb-fs-xs) var(--font); letter-spacing: 0; text-transform: none; color: var(--pb-brand-ink); background: var(--surface); border: 1px solid var(--border); padding: 4px 10px; border-radius: var(--pb-r-xs); }
body.pb .landing-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--pb-brand); }
body.pb .landing-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; margin: 22px 0 30px; }
body.pb .landing-visual { position: relative; width: 112px; height: 112px; border-radius: 28px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 28px rgba(var(--pb-brand-rgb), 0.18), 0 1px 3px rgba(0,0,0,0.06); display: grid; place-items: center; overflow: hidden; }
body.pb .landing-visual::before, body.pb .landing-visual::after { display: none; } /* sai o anel-arco (lia como "carregando") */
body.pb .landing-visual img { width: 100%; height: 100%; object-fit: contain; padding: 10px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
body.pb .landing-monogram { width: auto; height: auto; background: none; border: 0; box-shadow: none; font: 500 52px/1 var(--pb-display); color: var(--pb-brand-ink); }
body.pb .landing-hero h1 { font: 500 var(--pb-fs-2xl)/1.12 var(--pb-display); letter-spacing: -0.4px; margin: 0 0 10px; color: var(--ink); }
body.pb .landing-tagline { font-size: var(--pb-fs-md); color: var(--text-2); margin: 0 auto 22px; max-width: 34ch; line-height: 1.5; }
body.pb .landing-cta-row { display: flex; flex-direction: column; gap: 10px; width: 100%; align-items: stretch; justify-content: center; }
body.pb .landing-cta-row .btn-primary { min-height: 54px; font-size: var(--pb-fs-md); }
body.pb .landing-cta-whatsapp svg { width: 20px; height: 20px; color: #1d7a45; }

body.pb .landing-section { margin-top: 30px; }
/* marcador da seção: ícone de lista (clipboard do conjunto do projeto), não o arco-spinner */
body.pb .landing-section-title { display: flex; align-items: center; gap: 10px; font: 500 var(--pb-fs-lg)/1.2 var(--pb-display); letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0 0 12px; }
body.pb .landing-section-title::before {
  content: ''; width: 22px; height: 22px; flex-shrink: 0; border: 0; border-radius: 0; transform: none; animation: none;
  background: var(--pb-brand-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.pb .landing-proc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--pb-r); box-shadow: var(--pb-shadow); overflow: hidden; padding: 0; }
body.pb .landing-proc-card::before, body.pb .landing-proc-card::after { display: none; }
body.pb .landing-menu-list { list-style: none; margin: 0; padding: 0; }
/* item: [foto?] nome/duração · preço. Foto só existe no markup quando a lista inteira tem (algumTemFoto, landing.js) */
body.pb .landing-menu-item { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'nome preco' 'dur preco'; column-gap: 12px; row-gap: 2px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); border-top: 0; background: none; }
body.pb .landing-menu-item:has(.landing-menu-foto) { grid-template-columns: 56px 1fr auto; grid-template-areas: 'foto nome preco' 'foto dur preco'; }
body.pb .landing-menu-item:last-child { border-bottom: 0; }
body.pb .landing-menu-item::before, body.pb .landing-menu-item::after { display: none; }
body.pb .landing-menu-foto { grid-area: foto; width: 56px; height: 56px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); background: var(--surface-2); }
body.pb .landing-menu-foto-placeholder { display: grid; place-items: center; color: var(--text-3); }
body.pb .landing-menu-foto-placeholder svg { width: 22px; height: 22px; }
body.pb .landing-menu-item .nome { grid-area: nome; font: 600 var(--pb-fs-base)/1.3 var(--font); color: var(--ink); }
body.pb .landing-menu-item .duracao { grid-area: dur; justify-self: start; display: inline-flex; align-items: center; gap: 5px; font-size: var(--pb-fs-sm); color: var(--text-2); background: none; padding: 0; border: 0; border-radius: 0; }
body.pb .landing-menu-item .duracao::before { content: ''; width: 15px; height: 15px; background: var(--text-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat; }
body.pb .landing-menu-item .preco { grid-area: preco; font: 600 var(--pb-fs-md) var(--pb-display); color: var(--pb-brand-ink); white-space: nowrap; }
body.pb .landing-menu-mais { font-size: var(--pb-fs-sm); color: var(--text-2); margin-top: 10px; text-align: left; }
body.pb .landing-info-band { display: grid; gap: 12px; grid-template-columns: 1fr; }
body.pb .landing-info-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--pb-r); box-shadow: var(--pb-shadow); padding: 16px; }
body.pb .landing-info-card .titulo { display: flex; align-items: center; gap: 8px; font: 700 var(--pb-fs-sm) var(--font); color: var(--text-2); text-transform: none; letter-spacing: 0; margin-bottom: 6px; }
body.pb .landing-info-card .titulo svg { width: 18px; height: 18px; color: var(--pb-brand-ink); flex-shrink: 0; }
body.pb .landing-info-card .conteudo { font-size: var(--pb-fs-base); line-height: 1.55; color: var(--ink); }
body.pb .landing-footer { text-align: center; font-size: var(--pb-fs-xs); color: var(--text-3); margin-top: 34px; }
body.pb .landing-footer a { color: var(--text-3); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
body.pb .landing-footer a:hover { text-decoration: underline; }

@media (min-width: 861px) {
  body.pb .landing-container { padding: 44px 48px 56px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  body.pb .landing-container > .landing-badge { grid-column: 1 / -1; justify-self: start; }
  body.pb .landing-container > .landing-hero { grid-column: 1 / -1; }
  body.pb .landing-container > .landing-footer { grid-column: 1 / -1; }
  body.pb .landing-container > .landing-section { margin-top: 0; }
  /* sem lista de procedimentos (ex: tenant ainda sem catálogo): localização e horário lado a lado, largura toda */
  body.pb .landing-container:not(:has(.landing-proc-card)) > .landing-section { grid-column: 1 / -1; }
  body.pb .landing-container:not(:has(.landing-proc-card)) .landing-info-band { grid-template-columns: 1fr 1fr; }
  body.pb .landing-hero { flex-direction: row; text-align: left; align-items: center; gap: 36px; margin: 30px 0 44px; }
  body.pb .landing-visual { width: 168px; height: 168px; border-radius: 36px; flex-shrink: 0; }
  body.pb .landing-monogram { font-size: 72px; }
  body.pb .landing-hero h1 { font-size: 44px; }
  body.pb .landing-tagline { margin: 0 0 24px; font-size: 19px; }
  body.pb .landing-cta-row { flex-direction: row; width: auto; justify-content: flex-start; }
  body.pb .landing-cta-row .btn-primary { min-width: 220px; }
}

/* ==================================== CHAT ==================================== */
body.pb:has(.chat-shell) { background: radial-gradient(120% 300px at 50% -80px, rgba(var(--pb-brand-rgb), 0.12), transparent 70%), var(--bg); }
body.pb .chat-shell { background: var(--bg); }
body.pb .chat-main { background: var(--bg); position: relative; }
/* cabeçalho do celular: logo + nome (o botão "Menu" de sempre é posicionado aqui dentro) */
body.pb .chat-topo { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 124px 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
/* 44px = altura útil do cabeçalho de 64px. Com logo: sem moldura, proporção da imagem (logo largo vai até 88px). Sem logo: quadrado do monograma. */
body.pb .chat-topo-logo { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
body.pb .chat-topo-logo:has(img) { width: auto; max-width: 88px; border: 0; border-radius: 0; background: none; overflow: visible; }
body.pb .chat-topo-logo img { display: block; height: 44px; width: auto; max-width: 88px; object-fit: contain; padding: 0; }
body.pb .chat-topo-monograma { font: 500 22px/1 var(--pb-display); color: var(--pb-brand-ink); }
body.pb .chat-topo-nome { font: 600 var(--pb-fs-sm)/1.25 var(--font); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
body.pb .chat-menu-btn {
  position: absolute; top: 10px; right: 12px; left: auto; z-index: 5;
  display: inline-flex; align-items: center; gap: 7px; height: 44px; min-height: 44px; padding: 0 14px;
  border-radius: var(--pb-r-s); border: 1.5px solid var(--pb-fill-border); background: var(--pb-fill); color: var(--pb-on-fill);
  font: 700 var(--pb-fs-sm) var(--font); box-shadow: 0 2px 10px rgba(var(--pb-brand-rgb), 0.25);
}
body.pb .chat-menu-btn:hover { background: var(--pb-fill); color: var(--pb-on-fill); border-color: var(--pb-fill-border); filter: brightness(0.95); }
body.pb .chat-menu-btn svg { width: 20px; height: 20px; }
body.pb .chat-menu-btn-label { font: inherit; color: inherit; }

body.pb .chat-messages { padding: 16px 14px 10px; gap: 10px; }
/* white-space: o theme.css usa pre-line (pensado pro chat interno do dashboard, texto com \n);
   aqui as mensagens do bot são HTML com <br/> — pre-line transformava a indentação do template
   em linhas vazias. O balão da cliente (textContent) mantém pre-line. */
body.pb .maia-bubble { max-width: 86%; padding: 12px 15px; border-radius: 18px; font-size: var(--pb-fs-base); line-height: 1.5; }
body.pb .maia-bubble.bot { white-space: normal; }
body.pb .maia-bubble.bot { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(60, 40, 20, 0.04); }
body.pb .maia-bubble.user { background: var(--pb-fill); color: var(--pb-on-fill); border: 1.5px solid var(--pb-fill-border); border-bottom-right-radius: 6px; font-weight: 600; }
body.pb .maia-bubble.typing span { background: var(--text-3); }
body.pb .maia-bubble strong { font-weight: 700; }
body.pb .maia-bubble .meta { color: var(--ink); font-size: var(--pb-fs-base); }

/* resumo → recibo */
body.pb .chat-recibo { margin-top: 2px; padding-top: 10px; border-top: 1px dashed var(--border-strong); display: grid; gap: 6px; line-height: 1.45; }
body.pb .chat-recibo .chat-resumo-item-linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
body.pb .chat-recibo .chat-resumo-item-linha > span:last-child { white-space: nowrap; font-weight: 600; }
body.pb .chat-recibo-quando { display: flex; align-items: center; gap: 7px; font-weight: 600; margin-top: 2px; }
body.pb .chat-recibo-quando::before { content: ''; width: 18px; height: 18px; flex-shrink: 0; background: var(--pb-brand-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat; }
body.pb .chat-recibo-total { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; font: 600 var(--pb-fs-lg)/1.25 var(--pb-display); }
body.pb .chat-recibo-total strong { font-weight: 600; }
body.pb .chat-recibo-nota { font-size: var(--pb-fs-sm); color: var(--text-2); }
body.pb .chat-resumo-item-nome-com-foto { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* selo de status (ícone no lugar de ⏳ 🎉 ✅ 🙏) */
body.pb .chat-status { display: inline-flex; align-items: center; gap: 9px; font-size: var(--pb-fs-md); vertical-align: middle; margin-bottom: 4px; }
body.pb .chat-status-icone { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; flex-shrink: 0; }
body.pb .chat-status-icone .icon { width: 19px; height: 19px; }
body.pb .chat-status-icone.aguardando { background: var(--warn-bg); color: var(--warn); }
body.pb .chat-status-icone.ok { background: var(--ok-bg); color: var(--ok); }
body.pb .btn-copiar-codigo { width: 44px; height: 44px; min-height: 44px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); vertical-align: middle; display: inline-grid; place-items: center; padding: 0; }
body.pb .btn-copiar-codigo svg { width: 18px; height: 18px; }
body.pb .btn-copiar-codigo.copiado { border-color: var(--ok); color: var(--ok); }

/* área de opções */
body.pb .chat-buttons { padding: 10px 14px 8px; gap: 8px; background: linear-gradient(to top, var(--bg) 85%, rgba(246, 243, 238, 0)); border-top: 0; }
body.pb .chat-option-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 16px; border-radius: var(--pb-r-s); text-align: left; justify-content: flex-start; font: 600 var(--pb-fs-base)/1.25 var(--font); }
body.pb .chat-option-btn.btn-secondary { border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--ink); }
body.pb .chat-option-btn.btn-primary { justify-content: center; font-weight: 700; min-height: 52px; }
body.pb .chat-option-btn .icon { width: 20px; height: 20px; }
body.pb .chat-op-rotulo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.pb .chat-op-nome { font-weight: 600; color: var(--ink); }
body.pb .chat-op-meta { font-weight: 500; font-size: var(--pb-fs-sm); color: var(--text-2); }
body.pb .chat-op-valor { font: 600 var(--pb-fs-base) var(--pb-display); color: var(--pb-brand-ink); white-space: nowrap; }
body.pb .chat-op-add { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--pb-fill); color: var(--pb-on-fill); border: 1.5px solid var(--pb-fill-border); font: 700 22px/1 var(--font); flex-shrink: 0; }
body.pb button:disabled .chat-op-add { display: none; }
body.pb .chat-procedimentos-lista { gap: 8px; }
/* a lista tem altura máxima com rolagem (public.css): itens não podem encolher abaixo do conteúdo */
body.pb .chat-procedimentos-lista > * { flex-shrink: 0; }
body.pb .chat-produto-btn-com-foto { gap: 12px; }
body.pb .chat-produto-foto { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border); object-fit: cover; background: var(--surface-2); flex-shrink: 0; }
body.pb .chat-produto-foto-placeholder { color: var(--text-3); }
/* "Voltar" / "Cancelar" (#btn-voltar-etapa): terciário, texto — continua o mesmo botão */
body.pb #btn-voltar-etapa { align-self: center; background: none; border: 0; box-shadow: none; color: var(--text-2); font-weight: 600; min-height: 48px; padding: 8px 18px; }
body.pb #btn-voltar-etapa:hover { color: var(--ink); text-decoration: underline; }
body.pb #btn-voltar-etapa .icon { width: 18px; height: 18px; }

/* carrinho (loja) */
body.pb .chat-carrinho-linha { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 8px 8px 14px; background: var(--pb-wash); border: 1.5px solid var(--pb-brand-ink); border-radius: var(--pb-r-s); } /* borda sobre lavado: brand-ink (≥4,5:1), --pb-line não passa 3:1 aqui */
body.pb .chat-carrinho-linha-nome { flex: 1; min-width: 0; font-size: var(--pb-fs-base); display: flex; align-items: center; gap: 10px; }
body.pb .chat-carrinho-linha-nome .chat-op-meta { color: var(--pb-brand-ink); font-weight: 700; }
body.pb .chat-qtd-stepper { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; }
body.pb .chat-qtd-btn { width: 44px; height: 44px; border: 0; background: none; color: var(--ink); font: 700 20px/1 var(--font); border-radius: 10px; }
body.pb .chat-qtd-btn:hover { background: var(--surface-2); }
body.pb .chat-qtd-valor { min-width: 22px; font-size: var(--pb-fs-base); }
body.pb .chat-qtd-remover { width: 44px; height: 44px; border-radius: 10px; color: var(--text-2); background: none; display: grid; place-items: center; }
body.pb .chat-qtd-remover:hover { color: var(--danger); background: var(--danger-bg); }
body.pb .chat-qtd-remover svg { width: 19px; height: 19px; }
body.pb .chat-carrinho-resumo-mini { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; font-size: var(--pb-fs-sm); padding: 2px 4px; background: none; border: 0; color: var(--ink); }
body.pb .chat-carrinho-resumo-mini button { min-height: 44px; background: none; border: 0; color: var(--pb-brand-ink); font: 700 var(--pb-fs-sm) var(--font); text-decoration: underline; text-underline-offset: 3px; padding: 0 4px; }

/* catálogo ("Produtos" no menu) — foto só quando a lista inteira tem (algumTemFoto) */
body.pb .chat-produto-catalogo-lista { gap: 0; }
body.pb .chat-produto-catalogo-item { gap: 12px; padding: 10px 0; }
body.pb .chat-produto-catalogo-item + .chat-produto-catalogo-item { border-top: 1px solid var(--border); }
body.pb .chat-produto-catalogo-item-com-foto .chat-produto-foto, body.pb .chat-produto-catalogo-item-com-foto .chat-produto-foto-placeholder { width: 56px; height: 56px; }
body.pb .chat-produto-catalogo-nome { font: 600 var(--pb-fs-base)/1.3 var(--font); }
body.pb .chat-produto-catalogo-desc { font-size: var(--pb-fs-sm); color: var(--text-2); }
body.pb .chat-produto-catalogo-valor { font: 600 var(--pb-fs-base) var(--pb-display); color: var(--pb-brand-ink); }

/* dias e horários */
body.pb .chat-mes-titulo { font: 600 var(--pb-fs-sm) var(--font); color: var(--text-2); margin: 2px 2px 6px; }
body.pb .chat-day-grid, body.pb .chat-slot-grid { gap: 8px; }
body.pb .chat-day-grid button, body.pb .chat-slot-grid button { min-height: 48px; font: 600 var(--pb-fs-sm) var(--font); border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--ink); border-radius: var(--pb-r-s); padding: 8px 6px; }
body.pb .chat-day-grid button:hover, body.pb .chat-slot-grid button:hover { border-color: var(--pb-brand-ink); background: var(--pb-wash); color: var(--ink); }

/* formulários do chat (dados, consulta, forma de pagamento) */
body.pb .chat-form-row { gap: 12px; }
body.pb .chat-forma-pagamento-opcoes { gap: 8px; }
body.pb .chat-forma-pagamento-opcoes label { min-height: 48px; padding: 0 14px; border: 1.5px solid var(--border-strong); border-radius: var(--pb-r-s); background: var(--surface); color: var(--ink); font-size: var(--pb-fs-base); font-weight: 600; gap: 10px; margin: 0; }
body.pb .chat-forma-pagamento-opcoes label:has(input:checked) { border-color: var(--pb-brand-ink); background: var(--pb-wash); }

/* "Consultar meus agendamentos": cartões e ações */
body.pb .chat-messages .card { padding: 14px !important; }
body.pb .chat-messages .acoes { gap: 8px; }

body.pb .chat-footer { font-size: 12px; color: var(--text-3); padding: 2px 0 8px; background: transparent; border: 0; }
body.pb .chat-footer a { color: var(--text-3); display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
body.pb .chat-footer { padding: 0 0 4px; }

/* menu lateral / gaveta */
body.pb .chat-sidebar { background: var(--surface); color: var(--ink); border-right: 1px solid var(--border); }
body.pb .chat-sidebar-close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 10px; color: var(--text-2); display: grid; place-items: center; }
body.pb .chat-sidebar-close:hover { background: var(--surface-2); color: var(--ink); }
body.pb .chat-sidebar-close .icon { width: 22px; height: 22px; }
body.pb .chat-sidebar-brand { gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
/* logo do tenant: até 112px de altura, proporção da própria imagem (largo vai até 200px), sem moldura/sombra/placa — o menu lateral já é claro */
body.pb .chat-sidebar-brand img { display: block; height: 112px; width: auto; max-width: 200px; object-fit: contain; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
/* sem logo: o monograma É o desenho, então mantém o quadrado */
body.pb .chat-sidebar-monogram { width: 88px; height: 88px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 4px 14px rgba(var(--pb-brand-rgb), 0.14); color: var(--pb-brand-ink); font: 500 40px/1 var(--pb-display); }
body.pb .chat-sidebar-brand .nome { font: 500 var(--pb-fs-md)/1.25 var(--pb-display); color: var(--ink); }
body.pb .chat-sidebar-menu-featured { min-height: 52px; border-radius: var(--pb-r-s); background: var(--pb-fill); color: var(--pb-on-fill); border: 1.5px solid var(--pb-fill-border); font: 700 var(--pb-fs-base) var(--font); box-shadow: 0 2px 10px rgba(var(--pb-brand-rgb), 0.25); }
body.pb .chat-sidebar-menu-featured:hover, body.pb .chat-sidebar-menu-featured:active { background: var(--pb-fill); color: var(--pb-on-fill); filter: brightness(0.95); }
body.pb .chat-sidebar-menu-featured .icon { width: 20px; height: 20px; }
body.pb .chat-sidebar-menu { gap: 2px; }
body.pb .chat-sidebar-menu-item { min-height: 52px; border-radius: var(--pb-r-s); background: none; color: var(--ink); font: 600 var(--pb-fs-base) var(--font); gap: 12px; padding: 0 12px; }
body.pb .chat-sidebar-menu-item .icon { width: 20px; height: 20px; color: var(--pb-brand-ink); }
body.pb .chat-sidebar-menu-item:hover, body.pb .chat-sidebar-menu-item:active { background: var(--surface-2); color: var(--ink); }
body.pb .chat-sidebar-voltar { min-height: 48px; border-radius: var(--pb-r-s); border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--ink); font: 600 var(--pb-fs-sm) var(--font); }
body.pb .chat-sidebar-voltar:hover { background: var(--surface-2); color: var(--ink); border-color: var(--border-strong); }
body.pb .chat-sidebar-voltar .icon { width: 18px; height: 18px; }

@media (max-width: 860px) {
  body.pb .chat-menu-backdrop { background: rgba(31, 26, 21, 0.4); }
  body.pb .chat-sidebar { width: min(86vw, 340px); }
  body.pb .chat-messages { padding-top: 16px; } /* o botão não flutua mais sobre a conversa: está no cabeçalho */
}
@media (min-width: 861px) {
  /* desktop: o menu lateral é permanente e CLARO (antes: pintado inteiro com a cor do tenant, texto branco) */
  body.pb .chat-topo { display: none; }
  /* menu lateral fixo a partir daqui (mesmo corte do public.css): "Menu" e X não têm o que abrir/fechar.
     Precisa repetir aqui porque o display das regras body.pb acima vence o display:none do public.css. */
  body.pb .chat-menu-btn, body.pb .chat-sidebar-close { display: none; }
  body.pb .chat-shell { border: 1px solid var(--border); box-shadow: 0 12px 40px rgba(60, 40, 20, 0.12); border-radius: var(--pb-r); }
  body.pb .chat-sidebar { width: 280px; background: var(--surface); border-right: 1px solid var(--border); justify-content: flex-start; padding-top: 28px; }
  body.pb .chat-sidebar-brand .nome { color: var(--ink); }
  body.pb .chat-sidebar-brand img, body.pb .chat-sidebar-monogram { border-color: var(--border); }
  body.pb .chat-sidebar-menu-featured { background: var(--pb-fill); color: var(--pb-on-fill); }
  body.pb .chat-sidebar-menu-featured:hover, body.pb .chat-sidebar-menu-featured:active { background: var(--pb-fill); }
  body.pb .chat-sidebar-menu-featured:focus-visible { outline: 3px solid var(--pb-line); }
  body.pb .chat-sidebar-menu-item { background: none; color: var(--ink); }
  body.pb .chat-sidebar-menu-item:hover, body.pb .chat-sidebar-menu-item:active { background: var(--surface-2); color: var(--ink); }
  body.pb .chat-sidebar-menu-item:focus-visible { outline: 3px solid var(--pb-line); }
  body.pb .chat-sidebar-voltar { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
  body.pb .chat-sidebar-voltar:hover { background: var(--surface-2); color: var(--ink); border-color: var(--border-strong); }
  body.pb .chat-messages { padding-top: 24px; }
}