/* Atendente da loja no Grix (ADR-0016) — tela de chat em tela cheia.
   Base: o atendente virtual da Mediva (public/atendente/atendente.css de la),
   copiado para manter o mesmo desenho; a cor de acao e a da marca da loja
   (--cor-primaria, do SSR). As pecas so do Grix ficam no fim do arquivo. */
:root {
  --fundo: #0f172a;
  --cartao: #1e293b;
  --texto: #f1f5f9;
  --sub: #94a3b8;
  --borda: #334155;
  --acao: var(--cor-primaria, #0e7490);
  --acao-escuro: color-mix(in srgb, var(--acao) 80%, #000);
  --texto-sobre-acao: #ffffff;
  --ok: #01dca7;
  --erro: #ef4444;
  --erro-fundo: rgba(239, 68, 68, 0.15);
  --palco-a: #16233d;
  --palco-b: #0f172a;
  --raio: 16px;
  color-scheme: dark;
  /* Tokens de tema (ADR-0028): tudo o que um tema pode trocar fica aqui. Os temas
     de public/assets/atendente/temas/temas.css sobrescrevem estes valores. */
  --foco: #2563eb;
  --erro-texto: #fca5a5;
  --sobre-erro: #ffffff;
  --aviso: #e6a700;
  --aviso-fundo: rgba(230, 167, 0, .16);
  --demo-texto: #fde68a;
  --demo-fundo: #451a03;
  --demo-borda: #b45309;
  --fundo-foto: #ffffff;
  --veu: rgba(2, 6, 23, .55);
  --veu-forte: rgba(2, 6, 23, .92);
  --sombra-retrato: 0 10px 26px rgba(2, 6, 23, .3);
  --sombra-flutuante: 0 8px 24px rgba(2, 6, 23, .4);
  --sombra-1: 0 2px 6px rgb(0 0 0 / .1);
  --sombra-ativo: 0 2px 6px rgb(0 0 0 / .12);
  --sombra-hover: 0 2px 8px rgb(0 0 0 / .18);
  --avatar-fundo-a: #2b3d5a;
  --avatar-fundo-b: #0b1220;
  --avatar-led: #34f0cf;
  --fonte-corpo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fundo-imagem: none;
}
/* Sem tema escolhido (data-tema ausente), vale a preferência do aparelho. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema]) {
    --fundo: #e5ebf2;
    --cartao: #f8fafc;
    --texto: #1e293b;
    --sub: #55657d;
    --borda: #c5d0de;
    --acao: var(--cor-primaria, #0e7490);
    --acao-escuro: color-mix(in srgb, var(--acao) 80%, #000);
    --ok: #059669;
    --erro: #dc2626;
    --erro-fundo: rgba(220, 38, 38, 0.08);
    --palco-a: #dbe2ec;
    --palco-b: #e5ebf2;
    --erro-texto: #b91c1c;
    --demo-texto: #92400e;
    --demo-fundo: #fef3c7;
    --demo-borda: #f59e0b;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.45 var(--fonte-corpo);
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}
button, textarea, select, input { font: inherit; color: inherit; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "topo" "palco" "conversa" "entrada";
  padding-top: env(safe-area-inset-top, 0px);
}

/* ------------------------------------------------------------------ topo */
.topo {
  grid-area: topo;
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 12px;
  border-bottom: 1px solid var(--borda);
  background: var(--fundo);
  position: relative; z-index: 2;
}
.marca img { display: block; height: 24px; width: auto; }
.selo {
  font-size: 12px; color: var(--sub);
  border: 1px solid var(--borda); border-radius: 999px; padding: 2px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.acoes { margin-left: auto; display: flex; gap: 4px; }
.icone {
  width: 44px; height: 44px; border-radius: 12px; border: 0;
  background: transparent; display: grid; place-items: center; cursor: pointer;
}
.icone:hover { background: var(--cartao); }
.icone:disabled { opacity: .4; cursor: default; }
.icone:disabled:hover { background: transparent; }
.icone:focus-visible, .enviar:focus-visible, .sugestoes button:focus-visible, .grix-chip:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.icone svg { width: 24px; height: 24px; fill: currentColor; }

/* ----------------------------------------------------------------- painel */
/* Retrato redondo e pequeno: o chat ganha espaco e o recorte disfarca a
   resolucao modesta do modelo. Encolhe com o teclado aberto (dvh). */
.palco {
  grid-area: palco;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px 10px;
  background: radial-gradient(90% 120% at 50% 0%, var(--palco-a), var(--palco-b) 75%);
  border-bottom: 1px solid var(--borda);
}
.retrato {
  --tam: clamp(88px, 17dvh, 148px);
  --anel: color-mix(in srgb, var(--acao) 55%, transparent);
  position: relative; flex: none;
  width: var(--tam); height: var(--tam); border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--palco-a), var(--palco-b));
  box-shadow: 0 0 0 3px var(--fundo), 0 0 0 5px var(--anel), var(--sombra-retrato);
  transition: box-shadow .3s ease;
}
/* Andróide e robô sao brancos com luzes: fundo escuro de estudio nos dois
   temas, senao somem no tema claro e o brilho dos olhos/visor nao aparece. */
.app[data-avatar-tipo="androide"] .retrato,
.app[data-avatar-tipo="robo"] .retrato { background: radial-gradient(circle at 50% 30%, var(--avatar-fundo-a), var(--avatar-fundo-b) 78%); }
.app[data-estado="pensando"] .retrato { --anel: color-mix(in srgb, var(--acao) 85%, transparent); animation: anel-pensando 1.6s ease-in-out infinite; }
.app[data-estado="falando"] .retrato { --anel: color-mix(in srgb, var(--ok) 80%, transparent); animation: anel-falando 1.1s ease-in-out infinite; }
@keyframes anel-pensando { 50% { box-shadow: 0 0 0 3px var(--fundo), 0 0 0 7px var(--anel), var(--sombra-retrato); } }
@keyframes anel-falando { 50% { box-shadow: 0 0 0 3px var(--fundo), 0 0 0 8px var(--anel), 0 0 26px var(--anel); } }
.avatar { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.avatar canvas { display: block; }
.avatar-reserva {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; overflow: hidden;
  transition: opacity .4s ease;
}
.avatar-reserva svg { width: 70%; height: auto; margin-top: 12%; }
.avatar-reserva .rosto { fill: var(--sub); opacity: .35; }
.app[data-avatar="pronto"] .avatar-reserva { opacity: 0; pointer-events: none; }
.app[data-avatar="carregando"] .avatar-reserva svg { animation: pulso 1.6s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .55; } }
.app[data-avatar="falhou"] .avatar { display: none; }



/* Sem avatar: so' a linha de estado; o chat ganha o espaco todo. */
.app[data-avatar="desligado"] .retrato { display: none; }
.app[data-avatar="desligado"] .palco { padding: 8px 16px; }

.estado {
  margin: 0; padding: 3px 12px; border-radius: 999px;
  font-size: 13px; color: var(--sub); white-space: nowrap;
  max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
}
/* Linha de estado ("Preparando voz…", "Falando…" etc.) fora da tela: cada
   aparição deslocava os botões do painel. O avatar já sinaliza falando e
   pensando (boca + anel); o aria-live continua anunciando para leitores. */
.estado {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; pointer-events: none;
}
/* Enquanto o modelo não está pronto, o círculo cinza não ocupa o painel. */
.app[data-avatar="carregando"] .retrato,
.app[data-avatar="falhou"] .retrato { display: none; }
.app[data-avatar="carregando"]:not([data-estado="pensando"]):not([data-estado="falando"]) .estado::before,
.app[data-avatar="falhou"]:not([data-estado="pensando"]):not([data-estado="falando"]) .estado::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px; background: var(--sub);
}
.app[data-avatar="carregando"]:not([data-estado="pensando"]):not([data-estado="falando"]) .estado::before {
  animation: pulso 1.6s ease-in-out infinite;
}
.app[data-avatar="falhou"]:not([data-estado="pensando"]):not([data-estado="falando"]) .estado::before {
  background: var(--erro);
}
.app[data-estado="pensando"] .estado::before,
.app[data-estado="falando"] .estado::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px; background: var(--ok);
  animation: pulso .9s ease-in-out infinite;
}
.app[data-estado="pensando"] .estado::before { background: var(--acao); }

/* -------------------------------------------------------------- conversa */
.conversa {
  grid-area: conversa;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 10px 12px;
  scroll-behavior: smooth;
}
/* O flex fica no miolo, não no container que rola: senão o Chrome não deixa
   chegar ao fim da conversa. */
.conversa-miolo { min-height: 100%; display: flex; flex-direction: column; }
.conversa-espaco { flex: 1 0 auto; }
.mensagens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.mensagem {
  max-width: 90%; padding: 8px 12px; border-radius: var(--raio);
  line-height: 1.35;
  white-space: pre-wrap; overflow-wrap: anywhere;
  animation: entrar .22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes entrar { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.mensagem--assistente { align-self: flex-start; background: var(--cartao); border: 1px solid var(--borda); border-bottom-left-radius: 6px; }
.mensagem--usuario { align-self: flex-end; background: var(--acao); color: var(--texto-sobre-acao); border-bottom-right-radius: 6px; }
.confirmacao-acao { width: min(100%, 560px); max-width: 100%; white-space: normal; }
.confirmacao-acao h3 { margin: 0 0 8px; font-size: 1rem; }
.confirmacao-acao p { margin: 8px 0; }
.confirmacao-acao dl { margin: 12px 0; }
.confirmacao-acao dt { font-weight: 600; margin-top: 8px; }
.confirmacao-acao dd { margin: 2px 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.confirmacao-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.confirmacao-acoes button { min-height: 44px; padding: 8px 12px; cursor: pointer; }
.confirmacao-resultado { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; }
.mensagem--erro { align-self: flex-start; background: var(--erro-fundo); border: 1px solid var(--erro); }
.mensagem .fontes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mensagem .fontes a {
  font-size: 12px; color: var(--acao); text-decoration: none;
  border: 1px solid var(--borda); border-radius: 999px; padding: 2px 8px;
}
.mensagem--pensando { color: var(--sub); }
.digitando { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; }
.digitando i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .35; animation: digitando 1.2s ease-in-out infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes digitando { 40% { opacity: 1; transform: translateY(-3px); } }
.mensagem .fontes a.acao {
  color: var(--texto-sobre-acao); background: var(--acao); border-color: var(--acao); font-weight: 600;
}
.rodape-mensagem { display: flex; align-items: center; gap: 2px; margin-top: 6px; }
.mensagem .ouvir {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 4px 8px 4px 0; color: var(--sub); font-size: 12px; cursor: pointer;
}
.mensagem .avaliar {
  background: none; border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 5px 7px; opacity: .55; filter: grayscale(1);
}
.mensagem .avaliar:hover:not(:disabled), .mensagem .avaliar[aria-pressed="true"] { opacity: 1; filter: none; }
.mensagem .avaliar[aria-pressed="true"] { border-color: var(--borda); background: var(--fundo); }
.mensagem .avaliar:disabled { cursor: default; }
.aviso-incompleta { display: block; margin-top: 6px; color: var(--sub); font-size: 12px; }
.aviso-demora { display: block; margin-top: 4px; color: var(--sub); font-size: 12px; }

.sugestoes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
}
.sugestoes[hidden] { display: none; }
.sugestoes button {
  position: relative; isolation: isolate;
  border: 0; background: transparent; border-radius: 999px;
  padding: 6px 12px; font-size: 13px; cursor: pointer; min-height: 44px; text-align: left;
}
/* O contorno fica 6 px dentro do alvo de toque de 44 px: mesma distância do
   botão "Comparar", que ocupa pouco espaço e fica com respiro agradável. */
.sugestoes button::before {
  content: ""; position: absolute; inset: 6px 0; z-index: -1;
  border: 1px solid var(--borda); border-radius: inherit; background: transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
.sugestoes button:hover { background: transparent; }
.sugestoes button:hover::before { background: color-mix(in srgb, var(--acao) 12%, var(--cartao)); }

/* --------------------------------------------------------------- entrada */
.entrada {
  grid-area: entrada;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 0;
  background: var(--fundo);
  position: relative;
  overflow: visible;
}
.entrada-linha { display: flex; align-items: flex-end; gap: 8px; }
.entrada textarea {
  flex: 1; resize: none; max-height: 140px; min-height: 44px;
  padding: 9px 12px; border-radius: 16px; border: 1px solid var(--borda);
  background: var(--cartao); line-height: 1.35;
  font-size: 16px; /* 16px evita o zoom automatico do iOS no foco */
}
.entrada textarea:focus { outline: none; border-color: var(--acao); }
.enviar {
  flex: 0 0 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--acao); color: var(--texto-sobre-acao); display: grid; place-items: center;
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease;
}
.enviar svg {
  width: 22px; height: 22px; fill: currentColor;
  transform: translate(1px, -1px);
}
.enviar:disabled { opacity: .5; cursor: default; }
.enviar:not(:disabled):hover { background: var(--acao-escuro); box-shadow: var(--sombra-hover); }
.enviar:not(:disabled):active { transform: scale(0.94); }
.microfone {
  flex: 0 0 44px; height: 44px; border-radius: 50%; border: 1px solid var(--borda); cursor: pointer;
  background: var(--cartao); color: var(--texto); display: grid; place-items: center; padding: 0;
}
.microfone[hidden] { display: none; }
.microfone svg { width: 22px; height: 22px; fill: currentColor; }
.microfone[aria-pressed="true"] {
  background: var(--erro); border-color: var(--erro); color: var(--sobre-erro);
  animation: ouvindo 1.2s ease-in-out infinite;
}
@keyframes ouvindo { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--erro) 25%, transparent); } }
.microfone:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.consentimento p { margin: 0; font-size: 14px; }

/* --------------------------------------------------------------- ajustes */
.ajustes {
  border: 1px solid var(--borda); border-radius: 18px; padding: 0;
  background: var(--cartao); color: var(--texto);
  width: min(500px, calc(100vw - 24px)); max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 32px); max-height: calc(100vh - 32px);
  overflow: hidden; box-sizing: border-box;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}
.ajustes:not([open]) {
  display: none !important;
}
.ajustes::backdrop { background: var(--veu); }
/* Quem rola é o conteúdo; o X fica fixo no canto do diálogo enquanto ele rola.
   O formulário do consentimento (filho direto) usa a mesma caixa; os formulários
   da conta ficam aninhados no conteúdo e mantêm o desenho de .form-campos. */
.ajustes > form, .ajustes-conteudo {
  max-height: calc(100dvh - 32px); max-height: calc(100vh - 32px);
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 14px;
  box-sizing: border-box;
}
.ajustes-cabecalho {
  display: flex; flex-direction: column; gap: 2px; padding-right: 48px;
}
.ajustes h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--texto); }
.ajustes-subtitulo { margin: 0; font-size: 13px; color: var(--sub); }

/* Padrão unificado de seções e cartões das Preferências */
.ajustes-secao, .ajustes fieldset {
  border: 1px solid var(--borda); border-radius: 14px;
  background: color-mix(in srgb, var(--cartao) 94%, var(--fundo));
  padding: 12px 14px 14px; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.ajustes legend, .ajustes-secao-topo h3 {
  padding: 0 4px; color: var(--sub); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; margin: 0;
}

/* Sua conta nas Preferências: mesmos campos e ações do cartão da conversa. */
.ajustes-conta {
  display: flex; flex-direction: column; gap: 12px;
}
.ajustes-conta[hidden] { display: none; }
.ajustes-conta .form-campos { margin-top: 0; }
.ajustes-conta .acoes-cartao { margin: 0; }
.ajustes-conta .foto-conta { margin: 0; }
.ajustes-conta-email-info {
  font-size: 13px; color: var(--sub); margin: 0 0 2px;
  padding: 4px 8px; border-radius: 8px;
  background: color-mix(in srgb, var(--texto) 6%, transparent);
  width: fit-content;
}
.ajustes-bloco {
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--cartao) 82%, var(--fundo));
  border: 1px solid color-mix(in srgb, var(--borda) 60%, transparent);
}
.ajustes-bloco--perfil { gap: 10px; }
.ajustes-bloco--local { gap: 8px; }
.ajustes-conta-acoes {
  margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--borda);
}

/* ACU-05: Minhas empresas — lista de destinos autorizados, sem grade nem dropdown */
.ajustes-bloco--empresas { gap: 8px; }
.lista-empresas { display: flex; flex-direction: column; gap: 8px; }
.empresa-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--fundo) 60%, var(--cartao));
  border: 1px solid color-mix(in srgb, var(--borda) 55%, transparent);
}
.empresa-item .linha-empresa { margin: 0; font-size: 13px; color: var(--sub); }
.empresa-item .acoes-cartao { margin: 2px 0 0; }
.linha-empresa { margin: 0; font-size: 13px; color: var(--sub); }
.status-empresas { margin: 0; font-size: 13px; color: var(--sub); }
.aviso-senha {
  margin: 4px 0 0; padding: 8px 10px; border-radius: 10px; font-size: 13px;
  background: color-mix(in srgb, var(--aviso, #b26a00) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--aviso, #b26a00) 35%, transparent);
}
.bloco-senha-administracao { display: flex; flex-direction: column; gap: 8px; }

/* Câmera e captura de foto da conta */
.foto-camera-painel {
  margin: 6px 0; display: flex; flex-direction: column; gap: 10px;
  padding: 10px; border-radius: 12px; background: #000;
}
.foto-camera-visor {
  position: relative; width: 100%; max-width: 220px; aspect-ratio: 1 / 1;
  margin: 0 auto; border-radius: 12px; overflow: hidden; background: #111;
}
.foto-camera-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scaleX(-1);
}
.foto-camera-mira {
  position: absolute; inset: 8px; border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .7);
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.foto-camera-acoes { justify-content: center; margin: 0; }

/* Fechar no canto superior direito, como no "dados do contato" do WhatsApp. */
.ajustes-fechar {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  width: 36px; height: 36px; border: 0; border-radius: 50%; padding: 0;
  background: color-mix(in srgb, var(--texto) 6%, transparent);
  color: var(--sub); display: grid; place-items: center; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ajustes-fechar:hover {
  background: color-mix(in srgb, var(--texto) 14%, transparent);
  color: var(--texto);
}
.ajustes-fechar:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.ajustes-fechar svg { width: 18px; height: 18px; display: block; }

/* Ligar/desligar a fala das respostas: caixa com descrição, sem depender do topo. */
.ajustes fieldset label.voz-ligar {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: nowrap;
  padding: 4px 0 2px; cursor: pointer;
}
.ajustes .voz-ligar input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--acao); flex: none; }
.ajustes .voz-ligar-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ajustes .voz-ligar-texto strong { font-size: 14px; font-weight: 600; }
.ajustes .voz-ligar-texto small { font-size: 12px; color: var(--sub); line-height: 1.35; }

/* Modo em que o atendente abre (texto ou voz): escolha persistente, em chips. */
.ajustes .modos-chips {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  padding: 2px 0 4px;
}
.ajustes fieldset label.modo-chip {
  position: relative;
  min-height: 38px; display: flex; align-items: center; justify-content: center;
  padding: 6px 8px; border: 1px solid var(--borda); border-radius: 999px;
  background: transparent; cursor: pointer; font-size: 13px; box-sizing: border-box;
  transition: border-color .15s ease, background-color .15s ease;
}
.ajustes fieldset label.modo-chip:hover { border-color: var(--acao); }
.ajustes fieldset label.modo-chip:has(input:checked) {
  border-color: var(--acao);
  background: color-mix(in srgb, var(--acao) 22%, var(--cartao));
  font-weight: 600;
}
.ajustes fieldset label.modo-chip:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
.ajustes fieldset label.modo-chip:has(input:disabled) { opacity: .45; cursor: default; }
.ajustes fieldset label.modo-chip:has(input:disabled):hover { border-color: var(--borda); }
.ajustes fieldset label { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; flex-wrap: wrap; }
.ajustes small { color: var(--sub); font-size: 12px; }
.ajustes .linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ajustes .nota { margin: 0; font-size: 12px; color: var(--sub); line-height: 1.4; }

.diagnostico summary {
  cursor: pointer; color: var(--sub); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; outline: none;
}
.diagnostico pre {
  margin: 6px 0 0; padding: 10px; border-radius: 10px; background: var(--fundo);
  border: 1px solid var(--borda);
  font-size: 11px; line-height: 1.4; white-space: pre-wrap; max-height: 30dvh; overflow: auto;
}
.ajustes .rodape { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
.ajustes .rodape button { border-radius: 12px; padding: 10px 18px; cursor: pointer; min-height: 44px; font-weight: 600; }
.ajustes .principal { border: 0; background: var(--acao); color: var(--texto-sobre-acao); }
.ajustes .secundario { border: 1px solid var(--borda); background: transparent; }
.ajustes .secundario:disabled { opacity: .55; cursor: default; }

/* ------------------------------------------------- markdown do assistente */
.mensagem .texto p { margin: 0 0 6px; }
.mensagem .texto p:last-child { margin-bottom: 0; }
.mensagem .texto ul, .mensagem .texto ol { margin: 6px 0; padding-left: 20px; }
.mensagem .texto li { margin: 2px 0; }
.mensagem .texto blockquote { margin: 6px 0; padding: 4px 0 4px 10px; border-left: 3px solid var(--borda); color: var(--sub); }
.mensagem .texto h3 { margin: 8px 0 4px; font-size: 15px; }
.mensagem .texto .md-botao {
  border: 1px solid var(--acao); background: transparent; color: var(--acao);
  border-radius: 999px; padding: 3px 10px; font-size: 14px; cursor: pointer;
}
.mensagem .texto .md-botao:hover { background: var(--acao); color: var(--texto-sobre-acao); }
.mensagem .texto .md-dominio { font-size: 12px; color: var(--sub); }
.mensagem .texto a { color: var(--acao); }

/* ---------------------------------- tela larga: mesma coluna, retrato maior */
@media (min-width: 900px) {
  .retrato { --tam: clamp(120px, 22dvh, 184px); }
  .conversa, .entrada { padding-left: max(14px, calc((100% - 760px) / 2)); padding-right: max(14px, calc((100% - 760px) / 2)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------- painel de conteudo (f2) */
.app {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-areas: "topo" "palco" "alca" "conversa" "entrada";
}
/* Controles do painel na linha "alca", numa linha so'. Antes eram itens auto do
   grid e caíam em linha implícita, abaixo do campo de texto, fora da área
   visível; empilhados, roubavam 70 px da conversa. */
.palco-controles {
  grid-area: alca;
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 6px; padding: 0 10px; min-height: 24px;
}
.alca {
  display: none;
  align-items: center; justify-content: center;
  width: 72px; height: 26px; border: 0; background: transparent; cursor: ns-resize; padding: 0;
  touch-action: none;
}
.alca span {
  display: block; width: 36px; height: 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--borda) 80%, var(--acao));
  transition: width .2s ease, background-color .2s ease, transform .2s ease;
}
.alca:hover span, .alca:focus-visible span {
  width: 44px;
  background: var(--acao);
  transform: scaleY(1.2);
}
.app[data-palco="1"] .alca { display: flex; }
.alca:focus-visible { outline: 2px solid var(--acao); outline-offset: -2px; }

/* Cabeçalho fixo do painel: área de propaganda/destaque à esquerda e robô 3D à direita. */
.palco-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 52px; min-height: 52px; max-height: 52px; width: 100%;
  padding: 2px 2px; box-sizing: border-box; flex: none;
}
.palco-anuncio-area {
  position: relative;
  flex: 1 1 auto; min-width: 0; height: 46px; border-radius: 12px;
  background: var(--cartao);
  border: 1px solid var(--borda-marca);
  display: flex; align-items: center;
  overflow: hidden; box-sizing: border-box;
}
.palco-anuncio-trilho {
  position: relative; width: 100%; height: 100%;
}
.palco-banner {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px; box-sizing: border-box;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden; border-radius: 11px;
}
.palco-banner--ativo {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 1;
}
.palco-banner--saindo {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .palco-banner {
    transform: none !important;
    transition: opacity 0.3s ease;
  }
}
.palco-banner-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 6px; border-radius: 6px;
  flex-shrink: 0; line-height: 1.1;
}
.palco-banner-icone {
  width: 12px; height: 12px; flex-shrink: 0;
}
.palco-banner-info {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  min-width: 0; flex: 1 1 auto; overflow: hidden;
}
.palco-banner-titulo {
  font-size: 12px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.palco-banner-sub {
  font-size: 10px; font-weight: 400; line-height: 1.2;
  opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Banner 1: Demonstração / Dados fictícios (Âmbar / Dourado) */
.palco-banner--demo {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(180, 83, 9, 0.06) 100%);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.32);
}
.palco-banner--demo .palco-banner-tag {
  background: #f59e0b; color: #1a1200;
}
.palco-banner--demo .palco-banner-titulo {
  color: #fbbf24;
}
.palco-banner--demo .palco-banner-sub {
  color: #fde68a;
}

/* Banner 2: Atendimento Inteligente por Voz (Índigo / Violeta) */
.palco-banner--voz {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18) 0%, rgba(168, 85, 247, 0.08) 100%);
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.32);
}
.palco-banner--voz .palco-banner-tag {
  background: #6366f1; color: #ffffff;
}
.palco-banner--voz .palco-banner-titulo {
  color: #c7d2fe;
}
.palco-banner--voz .palco-banner-sub {
  color: #e0e7ff;
}

/* Banner 3: Painel Visual Interativo (Ciano / Turquesa) */
.palco-banner--painel {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.18) 0%, rgba(16, 185, 129, 0.08) 100%);
  box-shadow: inset 0 0 0 1px rgba(6, 182, 212, 0.32);
}
.palco-banner--painel .palco-banner-tag {
  background: #0891b2; color: #ffffff;
}
.palco-banner--painel .palco-banner-titulo {
  color: #a5f3fc;
}
.palco-banner--painel .palco-banner-sub {
  color: #cffafe;
}

/* Banner 4: Venda Direta / Sem Intermediários (Verde / WhatsApp) */
.palco-banner--direto {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18) 0%, rgba(13, 148, 136, 0.08) 100%);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.32);
}
.palco-banner--direto .palco-banner-tag {
  background: #16a34a; color: #ffffff;
}
.palco-banner--direto .palco-banner-titulo {
  color: #86efac;
}
.palco-banner--direto .palco-banner-sub {
  color: #bbf7d0;
}
.palco-cabecalho .retrato {
  --tam: 46px; position: relative; top: auto; right: auto; z-index: 2; flex: none;
  box-shadow: 0 0 0 2px var(--fundo), 0 0 0 3px var(--anel);
}

.app[data-palco="1"] .palco {
  align-items: stretch; justify-content: flex-start; gap: 4px;
  min-height: 0; overflow: hidden; padding: 6px 8px;
}
.app[data-palco="1"] .palco-conteudo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.app[data-palco="1"] .estado {
  align-self: flex-start; font-size: 12px;
}

/* Faixa técnica residual da busca no painel (conta fixa à esquerda migrou ao topo; só a área do meio rola quando aberta). */
.palco-barra {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  overflow-x: visible; position: relative;
}
.palco-barra[hidden] { display: none; }
/* Um só grupo, à direita do retrato: voltar, busca, layouts e divisão compacta.
   Sem posição própria: o formulário de busca aberto se ancora na barra inteira
   (a barra é o elemento posicionado), e não só neste grupo de botões. */
.palco-ferramentas {
  margin-left: auto; flex: 0 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 2px;
  padding: 0; border: 1px solid var(--borda); border-radius: 12px;
  background: color-mix(in srgb, var(--fundo) 72%, transparent);
  overflow-x: auto; scrollbar-width: none;
}
.palco-ferramentas::-webkit-scrollbar { display: none; }
/* Acesso visível à conta (plano de 21/10/2026, AC-01): slot fixo à esquerda da barra, com a altura
   reservada para não saltar ao entrar/sair. A reestruturação da rolagem vem no AC-02. */
.conta-acesso { flex: none; display: flex; align-items: center; min-height: 44px; }
.conta-acesso[hidden] { display: none; }
.conta-acesso-botao {
  display: flex; align-items: center; gap: 8px;
  min-width: 44px; min-height: 44px; margin: 0; padding: 0;
  border: 1px solid transparent; border-radius: 50%;
  background: transparent; color: var(--texto); font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.conta-acesso-botao:disabled { cursor: default; }
.conta-acesso-botao:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.conta-acesso-circulo {
  position: relative;
  width: 44px; height: 44px; min-width: 44px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--cartao); border: 1px solid var(--borda);
  font-size: 18px; font-weight: 650; line-height: 1;
}
.conta-acesso-circulo svg { width: 22px; height: 22px; display: block; }
.conta-acesso-circulo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.conta-acesso-circulo:has(.conta-acesso-foto:not([hidden])) .conta-acesso-inicial,
.conta-acesso-circulo:has(.conta-acesso-foto:not([hidden])) .conta-acesso-icone { display: none !important; }
.conta-acesso-rotulo { font-size: 14px; }
.conta-acesso-rotulo[hidden], .conta-acesso-nome[hidden],
.conta-acesso-inicial[hidden], .conta-acesso-icone[hidden], .conta-acesso-foto[hidden] { display: none; }
.conta-acesso-nome { display: none; font-size: 14px; color: var(--sub); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sem sessão: botão textual Entrar, sem círculo. */
.conta-acesso[data-estado="entrar"] .conta-acesso-circulo { display: none; }
.conta-acesso[data-estado="entrar"] .conta-acesso-botao {
  border-color: var(--borda); border-radius: 999px; padding: 0 16px; font-weight: 600;
}
.conta-acesso[data-estado="entrar"] .conta-acesso-botao:not(:disabled):hover { background: var(--cartao); }
.conta-acesso[data-estado="conta"] .conta-acesso-botao:not(:disabled):hover .conta-acesso-circulo {
  border-color: var(--acao);
}
/* Com sessão no computador, o primeiro nome aparece ao lado quando couber. */
@media (min-width: 1024px) {
  .conta-acesso[data-estado="conta"]:has(.conta-acesso-nome:not([hidden])) .conta-acesso-botao {
    border-radius: 999px; padding: 0 12px 0 0;
  }
  .conta-acesso[data-estado="conta"] .conta-acesso-nome:not([hidden]) { display: inline; }
}
/* A busca aberta ocupa a barra inteira do painel (não só o grupo de botões),
   para a caixa de texto ter largura de verdade; ao fechar, tudo volta. */
.palco-busca-form {
  display: flex; align-items: center; gap: 4px;
  position: absolute; inset: 0; z-index: 10;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 4px 6px 4px 12px; min-height: 44px;
}
.palco-busca-form[hidden] { display: none; }
.palco-busca-form:focus-within { border-color: var(--acao); }
.palco-busca-input {
  flex: 1; min-width: 0; height: 40px;
  border: 0; border-radius: 10px; background: transparent; color: var(--texto);
  font-size: 16px; outline: none; padding: 0 6px;
  appearance: none; -webkit-appearance: none;
}
.palco-busca-input::-webkit-search-decoration,
.palco-busca-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.palco-busca-input::placeholder { color: var(--sub); }
.palco-busca-botao {
  width: 36px; height: 36px; min-width: 36px; min-height: 36px;
  border: 0; border-radius: 10px; background: transparent; color: var(--sub);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.palco-busca-botao:hover { background: var(--cartao); color: var(--texto); }
.palco-busca-botao svg { width: 18px; height: 18px; display: block; }
.palco-acao {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  border: 0; border-radius: 10px; padding: 0;
  background: transparent; color: var(--texto);
  display: grid; place-items: center; cursor: pointer;
}
.layout-opcoes { display: flex; gap: 2px; padding: 0; }
/* Segurar um dos botões de divisão por 3 s trava a tela nela (ver ligarTravaPorPressao): a barrinha mostra o
   tempo, e o cadeado marca o botão travado. */
.layout-opcoes .palco-acao, .layout-compacto { position: relative; -webkit-touch-callout: none; user-select: none; }
.layout-opcoes .palco-acao[data-segurando]::after, .layout-compacto[data-segurando]::after {
  content: ""; position: absolute; left: 8px; bottom: 3px; height: 3px; width: 0; border-radius: 2px;
  background: var(--texto); animation: segurar-divisao 2.6s linear .4s forwards;
}
@keyframes segurar-divisao { to { width: calc(100% - 16px); } }
.layout-opcoes .palco-acao[data-travado="1"]:not([aria-pressed="true"]) { color: var(--acao); }
.layout-opcoes .palco-acao[data-travado="1"][aria-pressed="true"]::before { background: var(--texto-sobre-acao, var(--texto)); }
.layout-opcoes .palco-acao[data-travado="1"]::before, .layout-compacto[data-travado="1"]::before {
  content: ""; position: absolute; top: 5px; right: 5px; width: 11px; height: 11px;
  background: var(--acao);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h1.5A1.5 1.5 0 0 1 20 11.5v8a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 19.5v-8A1.5 1.5 0 0 1 5.5 10zm2 0h6V8a3 3 0 0 0-6 0z'/%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'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h1.5A1.5 1.5 0 0 1 20 11.5v8a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 19.5v-8A1.5 1.5 0 0 1 5.5 10zm2 0h6V8a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .layout-opcoes .palco-acao[data-segurando]::after, .layout-compacto[data-segurando]::after { animation-duration: 0s; animation-delay: 0s; width: calc(100% - 16px); }
}
/* Em largura insuficiente, um botão mostra e alterna a divisão atual. */
.layout-compacto { display: none; position: relative; }
.app[data-divisao-compacta="1"] .layout-opcoes { display: none; }
.app[data-divisao-compacta="1"] .layout-compacto { display: grid; }
.layout-compacto [data-icone-layout] { display: none; }
.app[data-altura="palco"] .layout-compacto [data-icone-layout="palco"],
.app[data-altura="dividido"] .layout-compacto [data-icone-layout="dividido"] { display: block; }
.ajustes .ajuste-trava {
  align-self: flex-start; min-height: 44px; padding: 8px 14px; border: 1px solid var(--borda);
  border-radius: 999px; background: var(--fundo); color: var(--texto); cursor: pointer;
}
.ajustes .ajuste-trava[aria-pressed="true"] { border-color: var(--acao); }
.ajustes .ajuste-trava:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.retomar-divisao {
  align-self: flex-start; flex: none; min-height: 44px; padding: 6px 14px;
  border: 1px solid var(--borda); border-radius: 999px; background: var(--cartao); color: var(--texto); cursor: pointer;
}
.retomar-divisao[hidden] { display: none; }
.retomar-divisao:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.palco-acao svg { width: 20px; height: 20px; display: block; }
.palco-acao:hover { background: var(--cartao); }
.palco-origem {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.palco-conteudo {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--fundo); padding: 8px 10px 10px;
  position: relative;
}
.palco-conteudo[hidden] { display: none; }
.palco-conteudo:focus { outline: none; }
.palco-conteudo:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.palco-aviso {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 4;
  border: 0; border-radius: 999px; padding: 10px 18px; min-height: 44px;
  background: var(--acao); color: var(--texto-sobre-acao); font-weight: 600;
  box-shadow: var(--sombra-flutuante); cursor: pointer;
}
.palco-aviso[hidden] { display: none; }
.palco-aviso:focus-visible { outline: 2px solid var(--texto-sobre-acao); outline-offset: 2px; }
/* Sem conteudo no painel: a pill de retorno entra no fluxo da faixa e fica
   sempre a vista (F6). Com conteudo, continua flutuando sobre a vista. */
.app:not([data-palco="1"]) .palco-aviso {
  position: static; transform: none;
  margin: 2px auto 0;
  box-shadow: none;
}
/* Sem conteudo nao ha alturas de painel para escolher: nao deixar controle morto. */
.app:not([data-palco="1"]) .layout-opcoes { display: none; }

/* As alturas e o teclado só dividem a tela em uma coluna; no computador,
   a preferência salva não deve criar linhas extras abaixo das duas colunas. */
@media (max-width: 1023px) {
  .app[data-palco="1"],
  .app[data-palco="1"][data-altura="dividido"] {
    grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  }
  .app[data-palco="1"][data-altura="palco"] {
    grid-template-rows: auto minmax(0, 1fr) auto minmax(88px, 18dvh) auto;
  }
  /* Teclado aberto: conversa ganha espaço. */
  .app[data-palco="1"][data-teclado="1"] { grid-template-rows: auto minmax(64px, 18dvh) auto minmax(0, 1fr) auto; }
  /* Abrir uma ação é temporário: não altera a divisão nem a trava salvas. */
  .app[data-palco="1"][data-acao-expandida="1"]:not([data-modo-voz="1"]) {
    grid-template-rows: auto minmax(0, 1fr) auto minmax(88px, 18dvh) auto;
  }
}

/* ------------------------------------------------------------- vistas */
.vista-titulo { margin: 0 0 6px; font-size: 17px; line-height: 1.3; }
.vista-titulo:focus { outline: none; }
.vista-sub { margin: 10px 0 4px; font-size: 14px; color: var(--sub); text-transform: uppercase; letter-spacing: .04em; }
.vista-resumo { margin: 0 0 4px; }
.vista-meta, .vista-dica { font-size: 13px; color: var(--sub); }
.vista-botoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vista-botao {
  display: inline-block; border-radius: 999px; padding: 10px 16px; min-height: 44px;
  border: 1px solid var(--borda); color: var(--texto); text-decoration: none; font-size: 14px;
}
.vista-botao.principal { background: var(--acao); border-color: var(--acao); color: var(--texto-sobre-acao); font-weight: 600; }
.vista-print, .vista-imagem, .vista-video-capa { margin: 0 0 10px; }
.vista-print img, .vista-imagem img, .vista-video-capa img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--borda); }
.vista-print figcaption, .vista-imagem figcaption { font-size: 13px; color: var(--sub); margin-top: 6px; }
.vista-ampliar {
  margin-top: 6px; border: 1px solid var(--borda); background: transparent; color: var(--texto);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; min-height: 36px;
}
.vista-passos { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.vista-passo.foco, .vista-faq.foco { outline: 2px solid var(--acao); outline-offset: 2px; border-radius: 8px; }
.vista-faq { border: 1px solid var(--borda); border-radius: 12px; margin: 0 0 8px; padding: 8px 12px; }
.vista-faq summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.vista-faq p { margin: 6px 0 4px; }
.vitrine-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.compatibilidade-resultados { display: flex; flex-direction: column; gap: 10px; }
.vitrine-cartao {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao);
  padding: 8px; cursor: pointer; color: var(--texto); min-height: 44px;
}
.vitrine-cartao img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; border-radius: 8px; }
.vitrine-titulo { font-weight: 600; font-size: 14px; }
.vitrine-meta { font-size: 12px; color: var(--sub); text-transform: capitalize; }
.galeria-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.galeria-mini { border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; padding: 0; cursor: zoom-in; background: var(--cartao); }
.galeria-mini img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.vista-midia video { display: block; width: 100%; max-height: 52dvh; min-height: 160px; object-fit: contain; border-radius: 12px; background: #000; }

/* Zoom: dialog dentro do painel com fundo escuro. */
.zoom-fundo {
  position: absolute; inset: 0; z-index: 10;
  background: var(--veu-forte);
  display: grid; place-items: center; overflow: hidden;
  border-radius: var(--raio);
}
.zoom-img { max-width: 100%; max-height: 100%; object-fit: contain; touch-action: none; }
.zoom-fechar {
  position: absolute; top: 10px; right: 10px; z-index: 11;
  border: 1px solid var(--borda); background: var(--cartao); color: var(--texto);
  border-radius: 999px; padding: 8px 14px; min-height: 44px; cursor: pointer;
}

/* ------------------------------------------------------ computador (f2) */
@media (min-width: 1024px) {
  .app[data-palco="1"] {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "topo topo" "palco conversa" "palco entrada";
  }
  .app[data-palco="1"] .alca { display: none; }
  /* Duas colunas: alca e opcoes de altura nao se aplicam. Fechar e voltar ficam. */
  .app[data-palco="1"] .palco-controles { display: none; }
  .app[data-palco="1"] .layout-opcoes { display: none; }
  .app[data-palco="1"] .layout-compacto { display: none; }
  .app[data-palco="1"] .palco-ferramentas:not(:has(#palco-voltar:not([hidden]), #painel-acoes:not([hidden]), #palco-proxima-etapa:not([hidden]), #palco-busca-abrir)) {
    display: none;
  }
  .app[data-palco="1"] .palco { border-bottom: 0; border-right: 1px solid var(--borda); }
  .app[data-palco="1"] .conversa { padding: 18px 18px 10px; }
  .vitrine-grade { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .lojas-mapa-container { height: 420px; }
}

/* Resultados de busca no painel do Grix: cabeçalho com alternância Lista/Mapa */
.lojas-cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
}
.lojas-cabecalho .vista-titulo { margin: 0; }
.lojas-alternancia {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--borda); border-radius: 999px;
  padding: 2px; background: var(--cartao);
}
.btn-alternancia {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; border-radius: 999px; padding: 5px 12px;
  background: transparent; color: var(--sub);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-alternancia:hover { color: var(--texto); }
.btn-alternancia.ativo {
  background: var(--acao); color: var(--texto-sobre-acao); font-weight: 600;
}
.btn-alternancia svg { display: block; flex-shrink: 0; }

/* Visualização de mapa de lojas */
.lojas-mapa-container {
  position: relative; width: 100%; height: 360px; min-height: 260px;
  border-radius: var(--raio); overflow: hidden; border: 1px solid var(--borda);
  background: #0b1220;
}
.lojas-mapa-canvas { width: 100%; height: 100%; }
.marcador-loja {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer; max-width: 168px;
}
.marcador-rotulo {
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: rgba(8, 20, 38, 0.9); color: #f4f8fc;
  border: 1px solid rgba(190, 215, 240, 0.45); border-radius: 999px;
  padding: 3px 8px; font-size: 11px; font-weight: 600; line-height: 1.25;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); pointer-events: none;
}
.marcador-pin { display: block; line-height: 0; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.55)); transition: transform 0.15s ease; }
.marcador-loja:hover .marcador-pin, .marcador-loja:focus-visible .marcador-pin { transform: scale(1.12); }
.marcador-loja.ativo .marcador-rotulo { background: var(--acao, #0e7490); border-color: rgba(255,255,255,0.65); }
.mapa-temas {
  position: absolute; top: 10px; left: 10px; z-index: 9;
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--borda); border-radius: 999px;
  padding: 2px; background: var(--cartao);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.btn-tema-mapa {
  border: 0; border-radius: 999px; padding: 5px 11px;
  background: transparent; color: var(--sub);
  font-size: 12px; font-weight: 500; cursor: pointer; min-height: 30px;
}
.btn-tema-mapa:hover { color: var(--texto); }
.btn-tema-mapa.ativo { background: var(--acao); color: var(--texto-sobre-acao); font-weight: 600; }
.mapa-card-flutuante {
  position: absolute; bottom: 10px; left: 10px; right: 10px; z-index: 10;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px;
  padding: 10px 12px; box-shadow: var(--sombra-flutuante);
  display: flex; flex-direction: column; gap: 6px;
}
.mapa-card-fechar {
  position: absolute; top: 6px; right: 6px;
  width: 28px; height: 28px; border: 0; border-radius: 999px;
  background: transparent; color: var(--sub); font-size: 14px;
  display: grid; place-items: center; cursor: pointer;
}
.mapa-card-fechar:hover { background: var(--fundo); color: var(--texto); }
.mapa-card-info { display: flex; flex-direction: column; gap: 2px; padding-right: 24px; }
.mapa-card-nome { font-size: 14px; font-weight: 600; color: var(--texto); }
.mapa-card-item { font-size: 13px; color: var(--sub); }
.mapa-card-precometa { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.mapa-card-preco { font-weight: 600; color: var(--ok); }
.mapa-card-distancia { color: var(--sub); }
.mapa-card-botao { width: 100%; margin-top: 4px; padding: 8px; }
.mapa-vazio {
  display: grid; place-items: center; height: 100%;
  color: var(--sub); font-size: 14px; text-align: center; padding: 20px;
}
.mapa-atribuicao {
  position: absolute; bottom: 6px; right: 8px; z-index: 5;
  font-size: 11px; background: rgba(11, 18, 32, 0.7); border-radius: 6px; padding: 1px 6px;
}
.mapa-atribuicao a { color: var(--sub); text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .mensagem { animation: none; }
  .conversa { scroll-behavior: auto; }
  .zoom-img { transition: none; }
}

/* Ficha da conta (fase 3) e calculadora do Plus+. */
.vista-ficha { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 4px; padding: 8px 10px;
  font-size: 13px; line-height: 1.3; border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao); }
.vista-ficha dt { color: var(--sub); }
.vista-ficha dd { margin: 0; font-weight: 600; }
.vista-calculo .calculo-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.calculo-rotulo { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.calculo-rotulo input { max-width: 140px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao); padding: 10px 12px; min-height: 44px; }
.calculo-periodo { display: flex; gap: 12px; border: 1px solid var(--borda); border-radius: 12px; padding: 8px 12px 10px; margin: 0; }
.calculo-periodo legend { font-size: 13px; color: var(--sub); padding: 0 4px; }
.calculo-opcao { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; }
.calculo-total { font-size: 28px; font-weight: 700; margin: 0; }

/* Capítulos do vídeo (fase 4): botões que levam ao ponto. */
.vista-capitulos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vista-capitulo { border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); border-radius: 999px; padding: 8px 12px; font-size: 13px; cursor: pointer; min-height: 40px; }

/* ------------------------------------------------- conversoes (fase 5) */
.foto-conta { display: flex; gap: 12px; align-items: center; margin: 12px 0; }
.foto-conta-moldura {
  width: 72px; height: 72px; min-width: 72px;
  border-radius: 50%; overflow: hidden;
  background: var(--cartao); border: 1px solid var(--borda);
  display: grid; place-items: center;
  font-size: 26px; font-weight: 650;
}
.foto-conta-moldura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-conta-coluna { min-width: 0; flex: 1; }
.foto-conta-texto { font-size: 14px; margin: 0 0 4px; }
.titulo-cartao { font-size: 15px; margin: 0 0 4px; }
.titulo-cartao:focus { outline: none; }
.titulo-cartao:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.form-campos { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
/* Conta do visitante no fio (ADR-0036): ações e entrada com Google em cartões de fio, sem página nova. */
.acoes-cartao { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.acoes-cartao button, .botao-google { border: 1px solid var(--borda); border-radius: 999px; background: transparent; color: var(--texto); padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; min-height: 40px; }
.botao-google { display: inline-flex; align-items: center; margin-top: 10px; text-decoration: none; }
.form-campos label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.form-campos label:has(input[type="checkbox"]) { flex-direction: row; align-items: center; gap: 8px; }
.form-campos button[type="submit"] { align-self: flex-start; border: 0; border-radius: 999px; background: var(--cor-primaria); color: var(--texto-sobre-acao); padding: 10px 18px; min-height: 40px; font: inherit; font-weight: 600; cursor: pointer; }
.form-campos button[type="submit"]:disabled { opacity: 0.6; cursor: default; }
.form-campo { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.form-rotulo { font-weight: 600; }
.form-campo input, .form-campo textarea, .form-campo select {
  border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao);
  color: var(--texto); padding: 10px 12px; font-size: 15px; min-height: 44px; width: 100%;
}
.form-campo textarea { min-height: 76px; resize: vertical; }
/* Sugestao do agente: acafro + desfazer (spec 5.4). */
.form-campo.sugerido input, .form-campo.sugerido textarea {
  background: var(--aviso-fundo); border-color: var(--aviso); border-left-width: 4px;
}
.form-desfazer {
  align-self: flex-start; border: 1px solid var(--borda); background: transparent;
  color: var(--texto); border-radius: 999px; padding: 6px 12px; font-size: 13px;
  cursor: pointer; min-height: 36px;
}
.form-campo.da-conta .form-rotulo { color: var(--sub); }
.form-consentimento { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 10px 0 4px; cursor: pointer; }
.form-consentimento input { width: 22px; height: 22px; margin-top: 1px; flex-shrink: 0; accent-color: var(--acao); }
.vista-erro {
  background: var(--erro-fundo); border: 1px solid var(--erro); border-radius: 10px;
  padding: 10px 12px; font-size: 14px; margin: 8px 0 0;
}
.vista-erro[hidden] { display: none; }
.vista-acompanhamento .protocolo {
  font-size: 28px; font-weight: 700; letter-spacing: .06em; margin: 8px 0;
  font-variant-numeric: tabular-nums;
}

/* Plano 2026-09-29 (F6): [hidden] sempre esconde, mesmo em botões (F6.15). */
[hidden] { display: none !important; }

/* Selo de demonstração (F6.8). */
.selo-demo {
  font-size: 12px; font-weight: 700; color: var(--demo-texto); background: var(--demo-fundo);
  border: 1px solid var(--demo-borda); border-radius: 999px; padding: 2px 10px;
}

/* Status visual do sistema no painel (F3.18). */
.palco-status { font-size: 13px; margin: 6px 12px; color: inherit; opacity: .85; }
.palco-status[data-estado="falhou"] { color: var(--erro-texto); font-weight: 600; }
.palco-retry { margin: 8px 12px; }

/* Prévia limitada à área útil, sem cortar (F6.2). */
.vista-midia figure.vista-imagem img,
.vista-detalhe figure img {
  max-width: 100%; max-height: 46vh; object-fit: contain; margin: 0 auto; display: block;
}
.vista-midia figure.vista-imagem figcaption { margin-top: 6px; font-size: 13px; opacity: .85; }

/* Alvos de toque ≥44px e área segura (F6.7). */
.vista-botao, .palco-retry, .calculo-retry, .retry, .novas-mensagens, .ver-conteudo,
.zoom-acao, .zoom-fechar {
  min-height: 44px; min-width: 44px;
}
.entrada { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }

/* Contador Unicode (F2.7). */
.campo-coluna { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.contador { font-size: 11px; text-align: right; opacity: .6; min-height: 14px; }
.contador[data-excesso="1"] { color: var(--erro-texto); opacity: 1; font-weight: 700; }

/* Parar resposta (F6.10): botão redondo com o quadrado de parar, no lugar do envio enquanto o turno roda. */
.parar-resposta {
  flex: 0 0 44px; height: 44px; border-radius: 50%; border: 1px solid var(--acao); cursor: pointer;
  background: var(--cartao); color: var(--acao); display: grid; place-items: center; padding: 0;
}
.parar-resposta[hidden] { display: none; }
.parar-resposta svg { width: 22px; height: 22px; fill: currentColor; }
.parar-resposta:hover { background: color-mix(in srgb, var(--acao) 12%, var(--cartao)); }
.parar-resposta:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
/* Novas mensagens / ver conteúdo (F6.11/F6.6). */
.novas-mensagens, .ver-conteudo {
  border: 1px solid currentColor; border-radius: 999px; background: transparent;
  padding: 8px 14px; font-size: 14px; cursor: pointer;
}
.novas-mensagens {
  position: sticky; bottom: 8px; margin: 0 auto; display: block;
  background: var(--fundo, #fff); z-index: 2;
}
.ver-conteudo { margin: 0; display: block; }

/* Conteúdo / Dividido / Conversa (F6.5): ícones na barra, o ativo fica marcado. */
.layout-opcoes button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--acao) 22%, var(--cartao));
  color: var(--acao);
}

/* Bolha do vendedor da loja (atendimento humano, HUM-01). */
.mensagem--operador { align-self: flex-start; background: var(--cartao); border: 1px solid var(--borda); border-left: 3px solid var(--acao); border-bottom-left-radius: 6px; }
.mensagem--operador::before {
  content: "Vendedor"; font-size: 11px; font-weight: 700; color: var(--acao);
  display: block; margin-bottom: 2px;
}

/* Retry por mensagem (F3.25). */
.retry {
  margin-top: 6px; border: 1px solid currentColor; border-radius: 8px;
  background: transparent; padding: 6px 12px; font-size: 13px; cursor: pointer;
}

/* Erros por campo (F4.4). */
.form-erro { font-size: 13px; color: var(--erro-texto); margin: 4px 0 0; min-height: 0; }
.form-erro:not(:empty) { min-height: 18px; }
[aria-invalid="true"] { border-color: var(--erro-texto) !important; outline-color: var(--erro-texto); }
.form-mais { margin-top: 8px; }
.form-mais summary { cursor: pointer; padding: 8px 0; min-height: 44px; }

/* Calculadora: estados e premissas (F4.11). */
.calculo-resultado[data-estado="desatualizado"],
.calculo-resultado[data-estado="falhou"] { opacity: .55; }
.calculo-premissas { font-size: 13px; opacity: .85; }
.calculo-resultado[data-estado="recalculando"] .calculo-total { opacity: .5; }

/* Acompanhamento: estado real (F4.9). */
.vista-status { font-weight: 600; }

/* Zoom: barra com ampliar/reduzir (F6.3). */
.zoom-barra { display: flex; gap: 8px; justify-content: center; padding: 8px; }
.zoom-acao {
  border: 1px solid currentColor; border-radius: 8px; background: rgba(0,0,0,.5);
  color: #fff; padding: 8px 14px; font-size: 14px; cursor: pointer;
}

/* Foco visível (F6.15). */
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Paisagem baixa: avatar compacto, entrada sempre visível (F6.7). */
@media (orientation: landscape) and (max-height: 500px) {
  .retrato { max-height: 120px; overflow: hidden; }
}

/* A página nunca rola na horizontal (F6.7): grade contida; `clip` não cria
   contexto de rolagem, então o `sticky` de Novas mensagens continua valendo. */
.app { overflow-x: clip; }
.app > * { min-width: 0; }

/* =====================================================================
   Peças só do Grix (ADR-0016). Mesmos tokens do bloco de cima.
   ===================================================================== */

/* Topo: a loja como contato do chat; o toque abre os dados da loja. */
.loja {
  flex: 1; min-width: 0; min-height: 44px;
  display: flex; align-items: center; gap: 10px;
  border: 0; background: transparent; color: inherit; text-align: left;
  padding: 2px 8px 2px 0; border-radius: 12px; cursor: pointer;
}
.loja:hover { background: var(--cartao); }
.loja:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.loja-sigla {
  flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; font-weight: 700; font-size: 16px;
  background: var(--acao); color: var(--texto-sobre-acao);
}
.loja-sigla img { display: block; width: 100%; height: 100%; object-fit: cover; }
.loja-textos { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.selo-verificada { display: inline-block; width: 16px; height: 16px; line-height: 16px; border-radius: 50%; background: var(--cor-primaria, #2563eb); color: var(--texto-sobre-acao); font-size: 11px; font-weight: 700; text-align: center; vertical-align: 1px; }
.folha-selo { margin: 2px 0 0; font-size: 13px; color: var(--cor-primaria, #2563eb); font-weight: 600; }
.loja-nome { font-weight: 650; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.loja-sub { font-size: 12px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cidade-busca {
  display: flex; align-items: center; gap: 4px; max-width: 100%; min-height: 24px;
  border: 0; border-radius: 5px; padding: 2px 0; background: transparent;
  text-align: left; cursor: pointer;
}
.cidade-busca svg { flex: none; width: 14px; height: 14px; }
.cidade-busca span { overflow: hidden; text-overflow: ellipsis; }
.cidade-busca:hover { color: var(--acao); }
.cidade-busca:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.cidade-busca:disabled { cursor: default; }
.loja-sub[data-aberta="1"]::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; vertical-align: 1px; background: var(--ok);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 30%, transparent);
}
.topo .acoes { margin-left: auto; flex: none; display: flex; align-items: center; }

/* Painel vazio, como na Mediva: a atendente fica sempre na bolha de 56 px no
   canto superior direito (bloco f2) e o quadro do painel aparece vazio; aqui
   ele traz a identidade da loja com acabamento suave até o agente mostrar algo. */
.palco-capa { display: none; }
.app[data-vazio="1"] .palco-conteudo { display: none; }
.app[data-vazio="1"] .palco-capa {
  order: 1; flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; padding: 12px 14px 14px;
  border: 1px solid color-mix(in srgb, var(--borda) 60%, transparent);
  border-radius: var(--raio);
  background: radial-gradient(ellipse 85% 65% at 50% 35%, var(--superficie-marca), var(--fundo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Aviso de falha do painel (pacote): não passa por baixo da bolha do avatar. */
.app[data-avatar="pronto"] .palco-status { padding-right: 64px; }
.capa-sigla { display: none; }
.capa-nome { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--texto); letter-spacing: -0.01em; }
.capa-sub { margin: 0; font-size: 13.5px; color: var(--sub); max-width: 46ch; opacity: .9; line-height: 1.35; }
.capa-desc {
  margin: 4px 0 0; font-size: 13px; color: color-mix(in srgb, var(--sub) 85%, var(--texto)); max-width: 52ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-height: 640px) { .capa-desc { display: none; } }
/* Mídia própria da loja na capa (foto aprovada + destaque do lojista). Não é anúncio de terceiros
   (PER-09/T-14): só a loja dona do perfil escolhe. A foto encolhe antes do texto. */
.capa-midia {
  display: block; width: min(100%, 560px); height: auto; aspect-ratio: 16 / 9; min-height: 0; max-height: 58%;
  flex: 0 1 auto; object-fit: cover; border-radius: 14px; margin-bottom: 6px;
  background: var(--fundo-foto); box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
.capa-destaque {
  margin: 4px 0 0; padding: 6px 12px; max-width: 52ch; font-size: 14px; font-weight: 600; line-height: 1.35;
  color: var(--texto); border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
/* Em uma coluna, com foto ou destaque, a descrição longa cede lugar (ela continua na folha "dados da loja"). */
@media (max-width: 1023px) {
  .palco-capa:has(.capa-midia) .capa-desc, .palco-capa:has(.capa-destaque) .capa-desc { display: none; }
}

/* Aviso fixo no topo do fio (AGL-07, PER-07) e avisos do sistema no meio. */
.nota-sistema {
  align-self: center; max-width: 96%; margin: 0 auto 6px; padding: 0 4px;
  border: 0; background: transparent;
  font-size: 12px; line-height: 1.35; text-align: center; color: var(--sub);
}
.nota-sistema:empty { display: none; }
.nota-sistema a { color: var(--acao); }
.nota-creditos { display: inline-block; white-space: nowrap; }
.nota-sistema button {
  border: 0; padding: 4px 0; background: transparent; color: var(--acao);
  font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.nota-sistema button:disabled { opacity: .55; cursor: default; }
.nota-sistema button:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.mensagem--sistema {
  align-self: center; max-width: 92%; padding: 5px 12px; border-radius: 10px;
  border: 1px dashed var(--borda); background: transparent;
  font-size: 12.5px; text-align: center; color: var(--sub);
}

/* Chips como na Mediva (quebram linha); o atalho sem IA ganha a cor da marca. */
.sugestoes button[data-acao] { color: var(--acao); font-weight: 600; }
.sugestoes button[data-acao]::before { border-color: var(--acao); }

/* Barra da reserva ou do pedido em montagem (PAL-01, ATD-03). */
.barra-conversao {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 14px; border-radius: 12px; font-size: 13px;
  border: 1px solid var(--borda); border-left: 4px solid var(--acao);
  background: color-mix(in srgb, var(--cartao) 75%, var(--fundo));
  box-shadow: var(--sombra-1);
}
.barra-conversao strong { font-size: 14px; color: var(--texto); font-weight: 650; }
.barra-conversao span { color: var(--sub); }
.barra-conversao[data-situacao="confirmada"] {
  border-left-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 8%, var(--cartao));
}
.barra-conversao:is([data-situacao="cancelada"], [data-situacao="expirada"], [data-situacao="invalidada"]) {
  border-left-color: var(--erro);
  background: color-mix(in srgb, var(--erro) 8%, var(--cartao));
}

/* Proposta para confirmar, no fio (AGL-06). */
.confirmacao-acao dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0 4px; }
.confirmacao-acao dt { margin: 0; font-weight: 500; font-size: 13px; color: var(--sub); }
.confirmacao-acao dd { margin: 0; }
.confirmacao-acao .form-campos { margin-top: 6px; }
.confirmacao-acao .form-consentimento { margin: 2px 0; }
.confirmacao-acoes .principal {
  border: 0; border-radius: 999px; background: var(--acao); color: var(--texto-sobre-acao); font-weight: 600; padding: 8px 18px;
}
.confirmacao-acoes .secundario { border: 1px solid var(--borda); border-radius: 999px; background: transparent; color: var(--texto); }
.confirmacao-acoes button:disabled { opacity: .55; cursor: default; }

/* ------------------------------------------------------- vistas do Grix */
.vista-grix { display: flex; flex-direction: column; gap: 5px; }
.vista-grix .vista-titulo { margin: 0; padding-right: 4px; }
.grix-vitrine-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.grix-vitrine-cabecalho .vista-titulo { min-width: 0; }
/* Sem título visível: só o Comparar, à direita. */
.grix-vitrine-cabecalho--sem-titulo { justify-content: flex-end; }
.vista-grix p { margin: 0; }
.grix-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.grix-chips::-webkit-scrollbar { display: none; }
/* Chips do painel: mesmo desenho do antigo "Comparar" — o contorno tem 32 px,
   dentro de um alvo de toque de 44 px, com 6 px de respiro acima e abaixo. */
.grix-chip {
  position: relative; isolation: isolate;
  flex: none; min-height: 44px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 0; background: transparent; color: var(--texto); font-size: 13px; white-space: nowrap;
}
.grix-chip::before {
  content: ""; position: absolute; inset: 6px 0; z-index: -1;
  border: 1px solid var(--borda); border-radius: inherit; background: transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
.grix-chip:hover::before { background: color-mix(in srgb, var(--acao) 12%, var(--cartao)); }
.grix-chip[aria-pressed="true"]::before { border-color: var(--acao); background: color-mix(in srgb, var(--acao) 22%, var(--cartao)); }
/* Chip com pedido voando (modo catálogo): o duplo clique ligava e desligava o filtro. */
.grix-chip:disabled { opacity: .55; cursor: default; }
.grix-chip--acao { color: var(--acao); font-weight: 600; }
.grix-chip--acao::before { border-color: var(--acao); }
/* Modo catálogo: barra curta que quebra de linha em vez de cortar, e gaveta de filtros agrupada. */
.grix-chips--catalogo { flex-wrap: wrap; overflow: visible; gap: 5px; }
.grix-chips--catalogo .grix-chip { padding: 6px 8px; }
.grix-chip--filtros::after { content: "\25BE"; margin-left: 4px; font-size: 11px; }
.grix-chip--filtros[aria-expanded="true"]::after { content: "\25B4"; }
.grix-chip--limpar { color: var(--sub); }
.grix-chip--limpar::before { border-style: dashed; }
.grix-facetas { display: flex; flex-direction: column; gap: 6px; }
/* Com Comparar e sem título, chips e Comparar dividem uma linha: a barra
   encolhe com rolagem contida e o Comparar fica fixo à direita. */
.grix-vitrine-barra { display: flex; align-items: center; gap: 8px; }
.grix-vitrine-barra > .grix-chips { flex: 1 1 auto; min-width: 0; }
.grix-vitrine-barra > .grix-chips--catalogo { flex-wrap: nowrap; overflow-x: auto; }
.grix-vitrine-barra > .grix-vitrine-cabecalho { flex: none; }
.grix-filtros {
  display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--borda);
  border-radius: 12px; background: color-mix(in srgb, var(--cartao) 80%, transparent);
  max-height: 38dvh; overflow-y: auto; overscroll-behavior: contain;
}
.grix-filtros[hidden] { display: none; }
.grix-filtros-nome { display: block; margin-bottom: 4px; font-size: 12px; color: var(--sub); }
.grix-filtros-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vista-grix .vitrine-cartao { font: inherit; width: 100%; }
.vista-grix .vitrine-cartao:hover { border-color: var(--acao); }
.vista-grix .vitrine-cartao:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.vista-grix .vitrine-cartao img { aspect-ratio: 4/3; object-fit: contain; background: var(--fundo-foto); }
.vitrine-sem-foto {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px;
  background: var(--palco-a); color: var(--sub); font-size: 18px; font-weight: 600;
}
/* CAT-17: foto da origem que deixou de carregar (ou nativa com falha) não fica quebrada no painel. */
.grix-foto-indisponivel {
  display: grid; place-items: center; width: 100%; aspect-ratio: 4/3; border-radius: 8px;
  padding: 12px; text-align: center;
  background: var(--palco-a); color: var(--sub); font-size: 14px;
  max-height: min(24dvh, 140px);
}
/* A foto que falhou vira um pixel oculto (vistas-grix.js); o display das regras acima não pode reexibi-la. */
.vista-grix img[hidden] { display: none !important; }
.vista-grix .vitrine-titulo {
  line-height: 1.3; overflow-wrap: anywhere;
}
.vitrine-complemento { font-size: 12px; line-height: 1.3; color: var(--sub); overflow-wrap: anywhere; }
.vitrine-preco { font-weight: 700; font-size: 15px; }
.vista-grix .vitrine-meta { text-transform: none; }

.grix-foto { margin: 0; }
.grix-foto img {
  display: block; width: 100%; height: auto; max-height: 38dvh; object-fit: contain;
  border-radius: 12px; border: 1px solid var(--borda); background: var(--fundo-foto);
}
.grix-foto figcaption { margin-top: 4px; font-size: 12px; color: var(--sub); }
/* MID-02: o player do vídeo segue a mesma medida da foto principal. */
.grix-video { margin: 8px 0 0; }
.grix-video video {
  display: block; width: 100%; max-height: 38dvh; min-height: 160px; object-fit: contain;
  border-radius: 12px; border: 1px solid var(--borda); background: #000;
}
.grix-video figcaption { margin-top: 4px; font-size: 12px; color: var(--sub); }
.grix-miniaturas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.grix-miniatura {
  flex: none; width: 56px; height: 56px; padding: 0; cursor: pointer; overflow: hidden;
  border: 2px solid var(--borda); border-radius: 10px; background: var(--fundo-foto);
}
.grix-miniatura[aria-pressed="true"] { border-color: var(--acao); }
.grix-miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
.grix-preco { font-size: 22px; font-weight: 700; line-height: 1.2; }
.grix-preco-troca { font-size: 14px; color: var(--ok); }
.grix-certeza { font-size: 13px; color: var(--sub); }

.grix-destaques { margin: 0; padding: 8px 12px 8px 28px; border: 1px solid var(--acao); border-radius: 12px; font-size: 14px; }
.comparar-colunas {
  display: grid; gap: 10px; overflow-x: auto; padding-bottom: 4px;
  grid-template-columns: repeat(var(--colunas, 2), minmax(150px, 1fr));
}
.comparar-coluna {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px; border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao);
}
.comparar-coluna[data-destaque] { border-color: var(--acao); box-shadow: 0 0 0 1px var(--acao); }
.comparar-coluna img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: contain; border-radius: 8px; background: var(--fundo-foto); }
.comparar-nome { margin: 0; font-size: 14px; line-height: 1.3; }
.comparar-coluna .grix-preco { font-size: 17px; }
.comparar-ficha { margin: 0; display: grid; gap: 0; font-size: 13px; }
.comparar-ficha dt { margin-top: 6px; font-size: 12px; color: var(--sub); }
.comparar-ficha dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.comparar-coluna .vista-botao { margin-top: auto; text-align: center; background: transparent; cursor: pointer; }
.grix-selo {
  align-self: flex-start; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; background: var(--acao); color: var(--texto-sobre-acao);
}

/* IA-05 (plano §6): cartão patrocinado no painel — estático, sem som nem movimento. Fica depois das lojas,
   separado por borda, com miniatura quadrada do anunciante à esquerda quando houver. */
.vista-grix-patrocinado {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 10px 12px;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao);
}
.palco-conteudo > .vista-grix-patrocinado:first-child { margin-top: 0; }
.patrocinado-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.patrocinado-anunciante { font-size: 13px; color: var(--sub); margin: 0; overflow-wrap: anywhere; }
.patrocinado-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
.patrocinado-corpo.com-imagem { grid-template-columns: 96px minmax(0, 1fr); }
.patrocinado-imagem {
  display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 10px; background: var(--fundo-foto);
}
.patrocinado-textos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.patrocinado-titulo { margin: 0; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.patrocinado-texto { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 380px) {
  .patrocinado-corpo.com-imagem { grid-template-columns: 72px minmax(0, 1fr); }
  .patrocinado-imagem { width: 72px; height: 72px; }
}
.patrocinado-porque { font-size: 14px; }
.patrocinado-porque summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; color: var(--sub); }

.grix-grade-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.grix-grade-opcoes--horas { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.grix-opcao {
  min-height: 48px; padding: 8px 10px; border-radius: 12px; cursor: pointer; overflow-wrap: anywhere;
  border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); font-size: 15px;
}
.grix-opcao:hover:not(:disabled) { border-color: var(--acao); }
.grix-opcao:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.grix-opcao:disabled { opacity: .45; cursor: default; text-decoration: line-through; }
.vista-grix .vista-botao { cursor: pointer; background: transparent; }
.vista-grix .vista-botao.principal { background: var(--acao); }

/* --------------------------------------- dados da loja (folha do topo) */
.folha-loja {
  padding: 0; border: 1px solid var(--borda); border-radius: 18px;
  background: var(--cartao); color: var(--texto);
  width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
}
.folha-loja::backdrop { background: var(--veu); }
@media (max-width: 640px) {
  .folha-loja { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 90dvh; border-radius: 18px 18px 0 0; border-bottom: 0; }
}
.folha-miolo { display: flex; flex-direction: column; gap: 16px; padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
.folha-cabeca { display: flex; align-items: center; gap: 12px; }
.folha-cabeca .loja-sigla { width: 56px; height: 56px; font-size: 22px; }
.folha-cabeca h2 { margin: 0; font-size: 20px; line-height: 1.25; }
.folha-cabeca p { margin: 2px 0 0; font-size: 13px; color: var(--sub); }
.folha-fechar {
  margin-left: auto; flex: none; width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  border: 0; background: transparent; color: var(--texto); font-size: 22px; line-height: 1;
}
.folha-fechar:hover { background: var(--fundo); }
.folha-desc { margin: 0; font-size: 14px; color: var(--sub); }
.folha-acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.folha-acao {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 64px; padding: 8px 6px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--fundo); color: var(--texto);
  text-decoration: none; font: inherit; font-size: 13px; text-align: center;
}
.folha-acao:hover { border-color: var(--acao); }
.folha-acao svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.folha-acao--wa svg { stroke: #25d366; }
.compartilhar-status { margin: -8px 0 0; min-height: 1em; font-size: 13px; color: var(--sub); text-align: center; }
/* SOC-01: aviso do seguir na folha, mesma linha do compartilhar. Botão ocupado escurece. */
.seguir-status { margin: -8px 0 0; min-height: 1em; font-size: 13px; color: var(--sub); text-align: center; }
.folha-acao[data-seguir-estado="sim"] { border-color: var(--acao); }
.folha-acao:disabled { opacity: .55; cursor: default; }
.vista-grix-detalhe .compartilhar-status { margin: 6px 0 0; text-align: left; }
.folha-secao h3, .folha-loja .horario h2, .folha-loja .galeria h2, .folha-loja .mapa h2 {
  margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--sub); text-transform: uppercase; letter-spacing: .05em;
}
.folha-secao p { margin: 0; font-size: 14px; }
.folha-loja .horario-situacao { margin: 0 0 6px; font-weight: 600; }
.folha-loja .horario-semana { border-collapse: collapse; font-size: 14px; }
.folha-loja .horario-semana th, .folha-loja .horario-semana td { padding: 2px 16px 2px 0; text-align: left; font-weight: normal; }
.folha-loja .grade-galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 641px) { .folha-loja .grade-galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.folha-loja .galeria figure { margin: 0; }
.folha-loja .galeria img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; background: var(--fundo-foto); }
.folha-loja .galeria figcaption { font-size: 11px; color: var(--sub); }
.folha-loja .mapa p { margin: 6px 0 0; font-size: 13px; color: var(--sub); }
.folha-loja .mapa a, .folha-rodape a { color: var(--acao); }
.folha-rodape { margin: 0; font-size: 12px; color: var(--sub); text-align: center; }

/* Sem JavaScript: o essencial continua (loja, WhatsApp, produtos). */
.sem-js {
  position: fixed; inset: auto 0 0 0; z-index: 50; max-height: 60dvh; overflow: auto;
  padding: 14px 16px; background: var(--cartao); border-top: 1px solid var(--borda); font-size: 14px;
}
.sem-js ul { margin: 6px 0 0; padding-left: 18px; }
.sem-js a { color: var(--acao); }

/* Atendente do Grix: a marca Grix no topo e as lojas encontradas no painel. */
.loja-sigla--grix, .capa-sigla--grix { background: transparent; box-shadow: none; }
.loja-sigla--grix img, .capa-sigla--grix img { object-fit: contain; }
div.loja { cursor: default; }
div.loja:hover { background: transparent; }
.lojas-grade { display: flex; flex-direction: column; gap: 7px; }
.loja-cartao {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; min-width: 0;
  padding: 8px 10px; border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao);
}
.loja-cartao-nome { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.loja-cartao-nome { grid-column: 1; grid-row: 1; }
.loja-cartao .vitrine-preco { grid-column: 2; grid-row: 1; text-align: right; }
.loja-cartao .vitrine-titulo { grid-column: 1; grid-row: 2; }
.loja-cartao .vitrine-meta { grid-column: 1; grid-row: 3; }
.loja-cartao .loja-cartao-local { grid-column: 1 / -1; grid-row: 4; color: var(--sub); font-size: 12px; overflow-wrap: anywhere; }
.loja-cartao .vista-botao {
  grid-column: 2; grid-row: 2 / 4; align-self: center;
  margin: 0; padding: 8px 10px; font-size: 13px; text-align: center;
}

/* Resposta em markdown: o HTML já traz as quebras (<p>, <br>); o pre-wrap da
   bolha somava as quebras de linha do markdown-it e deixava sobra embaixo. */
.mensagem[data-md] .texto, .mensagem--assistente .texto, .mensagem--operador .texto { white-space: normal; }


/* Revisão UI/UX: mesma tela, com acabamento próprio para cada agente.
   Os tons derivam da marca e das superfícies do tema claro/escuro. */
.app {
  --superficie-marca: color-mix(in srgb, var(--acao) 5%, var(--fundo));
  --borda-marca: color-mix(in srgb, var(--acao) 24%, var(--borda));
  background-color: var(--fundo);
  background-image: var(--fundo-imagem);
}
.app[data-atendimento] {
  --superficie-marca: color-mix(in srgb, var(--acao) 11%, var(--fundo));
}
.topo {
  background: var(--superficie-marca);
  border-bottom-color: var(--borda-marca);
  box-shadow: inset 0 2px 0 var(--acao);
}
.app[data-concierge] .topo {
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--acao) 45%, var(--borda));
}
.loja-sigla { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 3px var(--borda-marca); }
.loja-sigla--grix { box-shadow: none; }
.palco {
  background: radial-gradient(ellipse at 85% 0%, var(--superficie-marca), var(--fundo) 80%);
  border-bottom: 0;
}
.palco-conteudo, .app[data-vazio="1"] .palco-capa {
  border-color: color-mix(in srgb, var(--borda) 55%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--cartao) 35%, var(--fundo));
}
.palco-ferramentas { background: var(--superficie-marca); border-color: var(--borda-marca); }
.layout-opcoes button[aria-pressed="true"] {
  background: var(--acao);
  color: var(--texto-sobre-acao);
  box-shadow: var(--sombra-ativo);
}
.mensagem--assistente {
  background: color-mix(in srgb, var(--acao) 3%, var(--cartao));
  border-color: color-mix(in srgb, var(--borda) 65%, transparent);
}
.mensagem--usuario { box-shadow: var(--sombra-1); }
.entrada textarea { border-color: var(--borda-marca); }
.entrada textarea:focus-visible {
  outline: 2px solid var(--acao); outline-offset: 2px;
}
.sugestoes button::before { background: var(--superficie-marca); border-color: var(--borda-marca); }
.sugestoes button:hover::before, .grix-chip:hover::before { background: color-mix(in srgb, var(--acao) 12%, var(--cartao)); }
.icone, .palco-acao, .sugestoes button, .grix-chip, .enviar {
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.enviar:not(:disabled):hover { background: var(--acao-escuro); box-shadow: var(--sombra-hover); }
/* O contador vazio não deve reservar uma linha abaixo do campo. */
.contador:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .icone, .palco-acao, .sugestoes button, .grix-chip, .enviar { transition: none; }
}

/* No celular, a mídia acompanha a altura útil do painel para deixar nome e
   preço à vista. A ampliação continua disponível na própria vista. */
@media (max-width: 1023px) {
  .palco-conteudo { container-type: size; }
  .grix-foto img { max-height: min(32dvh, 48cqh); }
  .grix-video video { min-height: 96px; max-height: min(32dvh, 48cqh); }
}

/* ------------------------------------------------ modo catálogo (ADR-0029) */
/* Plano básico: sem fio de conversa, o painel ocupa toda a área abaixo do
   topo, em 100dvh. A página nunca rola; só o conteúdo do painel rola.
   Uma coluna só também no computador: sem conversa, as duas colunas do
   chat deixavam topo e painel em 7/12 da largura e o resto vazio. */
.app[data-modo="catalogo"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "topo" "palco";
}
.app[data-modo="catalogo"] .palco-controles,
.app[data-modo="catalogo"] .palco-cabecalho,
.app[data-modo="catalogo"] .retrato,
.app[data-modo="catalogo"] .estado,
.app[data-modo="catalogo"] #parar-fala,
.app[data-modo="catalogo"] #retomar-divisao,
.app[data-modo="catalogo"] #layout-opcoes {
  display: none;
}
.app[data-modo="catalogo"] .palco {
  justify-content: flex-start;
  overflow: hidden;
}
.app[data-modo="catalogo"] .palco-conteudo {
  align-self: stretch;
  width: 100%;
}
/* A busca fica aberta sem cobrir o voltar: entra no fluxo da barra, ao lado
   dele, em vez de flutuar sobre tudo como no atendente do Grix. */
.app[data-modo="catalogo"] .palco-barra {
  padding-right: 0;
}
.app[data-modo="catalogo"] .palco-ferramentas {
  margin-left: 0; border: 0; background: transparent; flex: 1; min-width: 0;
}
.app[data-modo="catalogo"] .palco-busca-form {
  position: static; flex: 1; min-width: 0; z-index: auto;
}
/* Estado vazio da busca no catálogo, com a ação de limpar. */
.grix-vazio {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 28px 16px; text-align: center; color: var(--sub);
}
/* Etapa 2: cartão de pergunta inativo — chips desligados com orientação no fio. */
.cartao-pergunta-harness .chip-pergunta:disabled { opacity: .55; cursor: default; }
.pergunta-inativa-dica { font-size: .85em; color: var(--sub); margin: 6px 0 0; }

/* ------------------------------------------------- modo de voz (ADR-0042) */
/* A conversa escrita se recolhe e o painel ocupa o espaço; a barra de voz
   entra no fluxo do layout como variante da entrada (nada flutua sobre
   preço, mapa, anúncio ou controles do painel). O fio continua o mesmo. */
#botao-modo-voz .para-texto { display: none; }
#botao-modo-voz[aria-pressed="true"] .para-voz { display: none; }
#botao-modo-voz[aria-pressed="true"] .para-texto { display: block; }
#botao-modo-voz[aria-pressed="true"] { background: var(--cartao); }
.barra-voz[hidden] { display: none; }
.entrada[hidden], .palco-controles[hidden] { display: none; }
.barra-voz {
  grid-area: barra-voz;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 0;
  background: var(--fundo);
  min-height: calc(64px + env(safe-area-inset-bottom, 0px));
}
.barra-voz-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-height: 92px;
}
.barra-voz-rascunho { margin: 0; font-size: 13px; color: var(--sub); }
.barra-voz-rascunho[hidden], .barra-voz-parcial[hidden], .barra-voz-legenda[hidden] { display: none; }
.barra-voz-estado {
  margin: 0; font-size: 14px; color: var(--sub); flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  order: 1;
}
/* A transcrição do que está sendo dito fica ao lado dos botões, sem passar para baixo. */
.barra-voz-parcial {
  margin: 0; font-size: 14px; color: var(--texto); order: 1; flex: 1 1 auto; min-width: 0;
  max-height: 88px; overflow-y: auto;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
/* A frase que o robô está dizendo: fica ao lado dos botões, sem passar para baixo nem deslocá-los. */
.barra-voz-legenda {
  margin: 0; font-size: 15px; line-height: 1.4; color: var(--texto); order: 1; flex: 1 1 auto; min-width: 0;
  max-height: 88px; overflow-y: auto;
}
.barra-voz-legenda span { opacity: .28; transition: opacity .12s linear; }
.barra-voz-legenda span.dita { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .barra-voz-legenda span { transition: none; } }
.barra-voz:has(.barra-voz-legenda:not([hidden])) .barra-voz-estado,
.barra-voz:has(.barra-voz-parcial:not([hidden])) .barra-voz-estado {
  display: none;
}
.voz-acao {
  flex: none; min-width: 44px; min-height: 44px;
  border: 1px solid var(--borda); background: transparent; color: var(--texto);
  border-radius: 999px; padding: 8px 14px; font-size: 14px; cursor: pointer;
}
.voz-acao:hover { background: var(--cartao); }
.voz-acao[hidden] { display: none; }
.voz-acao:focus-visible, .voz-falar:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.voz-falar {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--borda); cursor: pointer; padding: 0;
  background: var(--acao); border-color: var(--acao); color: var(--texto-sobre-acao);
  display: grid; place-items: center;
}
.voz-falar[hidden] { display: none; }
.voz-falar svg { width: 24px; height: 24px; fill: currentColor; }
.voz-falar:disabled { opacity: .5; cursor: default; }
/* Enquanto a resposta roda ou é falada, o botão grande vira "parar", com o mesmo desenho do modo de texto. */
.voz-falar .voz-icone-parar { display: none; }
.voz-falar[data-parar="1"] { background: var(--cartao); border-color: var(--acao); color: var(--acao); }
.voz-falar[data-parar="1"]:hover { background: color-mix(in srgb, var(--acao) 12%, var(--cartao)); }
.voz-falar[data-parar="1"] .voz-icone-mic { display: none; }
.voz-falar[data-parar="1"] .voz-icone-parar { display: block; }
.voz-falar[aria-pressed="true"] {
  background: var(--erro); border-color: var(--erro); color: var(--sobre-erro);
  animation: ouvindo 1.2s ease-in-out infinite;
}
/* Ação pendente na conversa recolhida: ponto no botão de texto, no topo. */
#botao-modo-voz { position: relative; }
#botao-modo-voz[data-pendente="1"]::after {
  content: ""; position: absolute; top: 4px; right: 4px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--acao); box-shadow: 0 0 0 2px var(--fundo);
}
/* Espera da resposta no modo de voz: os mesmos três pontos da bolha, na barra, ao lado do estado. */
.voz-pontos { flex: none; padding: 0; color: var(--sub); }
.voz-pontos[hidden] { display: none; }
/* Recolhido: só topo, painel expandido e barra de voz. */
.app[data-modo-voz="1"],
.app[data-palco="1"][data-modo-voz="1"] {
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "topo" "palco" "barra-voz";
}
/* Conversa revelada temporariamente: o mesmo fio, no layout dividido. */
.app[data-modo-voz="1"][data-conversa-aberta="1"],
.app[data-palco="1"][data-modo-voz="1"][data-conversa-aberta="1"] {
  grid-template-rows: auto minmax(0, 40dvh) minmax(0, 1fr) auto;
  grid-template-areas: "topo" "palco" "conversa" "barra-voz";
}
/* Modo de voz: controles de divisão de espaço entre chat e painel ficam ocultos */
.app[data-modo-voz="1"] #layout-opcoes,
.app[data-modo-voz="1"] #layout-compacto,
.app[data-modo-voz="1"] .layout-opcoes,
.app[data-modo-voz="1"] .layout-compacto,
.app[data-modo-voz="1"] .retomar-divisao,
.app[data-modo-voz="1"] .alca,
.app[data-modo-voz="1"] .palco-controles,
.layout-opcoes[hidden],
.layout-compacto[hidden] {
  display: none;
}
@media (min-width: 1024px) {
  .app[data-modo-voz="1"],
  .app[data-palco="1"][data-modo-voz="1"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "topo" "palco" "barra-voz";
  }
  .app[data-modo-voz="1"] .alca, .app[data-modo-voz="1"] .palco-controles,
  .app[data-modo-voz="1"] #layout-opcoes, .app[data-modo-voz="1"] #layout-compacto { display: none; }
  .app[data-modo-voz="1"][data-conversa-aberta="1"],
  .app[data-palco="1"][data-modo-voz="1"][data-conversa-aberta="1"] {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "topo topo" "palco conversa" "barra-voz barra-voz";
  }
}

/* ------------------------------------------- Meus interesses (cartão no fio)
   Interruptores e botões do cartão de interesses. As classes acao-primaria/secundaria/perigo ficam
   restritas a este cartão: o cartão patrocinado usa os mesmos nomes com outro desenho. */
.cartao-interesses { width: min(100%, 560px); max-width: 100%; white-space: normal; display: flex; flex-direction: column; gap: 14px; }
.cartao-interesses .titulo-cartao { font-size: 16px; font-weight: 700; margin: 0; }
.interesses-secao { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--borda); }
.interesses-secao-titulo { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sub); }
.interesses-secao--cuidado { border-top-color: color-mix(in srgb, var(--erro) 45%, var(--borda)); }
.interesses-aviso { margin: 0; font-size: 13px; color: var(--erro-texto); }
.interesses-aviso[hidden], .codigo-maioridade[hidden] { display: none; }

.interruptor-bloco { display: flex; flex-direction: column; gap: 4px; }
.interruptor-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.interruptor-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.interruptor-rotulo { font-size: 14px; font-weight: 600; }
.interruptor-descricao { font-size: 13px; color: var(--sub); }
.interruptor {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px 0 8px;
  border: 0; background: transparent; color: var(--sub); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.interruptor[aria-checked="true"] { color: var(--texto); }
.interruptor:disabled { cursor: progress; opacity: .7; }
.interruptor:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 999px; }
.interruptor-estado { min-width: 5.2ch; text-align: right; }
.interruptor-trilho {
  position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px;
  border: 2px solid var(--sub); background: transparent; transition: background-color .18s, border-color .18s;
}
.interruptor-bolinha {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--sub); transition: transform .18s, background-color .18s;
}
.interruptor[aria-checked="true"] .interruptor-trilho { background: var(--acao); border-color: var(--acao); }
.interruptor[aria-checked="true"] .interruptor-bolinha { transform: translateX(20px); background: var(--texto-sobre-acao); }
@media (prefers-reduced-motion: reduce) { .interruptor-trilho, .interruptor-bolinha { transition: none; } }

.cartao-interesses .acao-primaria, .cartao-interesses .acao-secundaria, .cartao-interesses .acao-perigo {
  border-radius: 999px; padding: 8px 14px; min-height: 44px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.cartao-interesses .acao-primaria { border: 1px solid var(--acao); background: var(--acao); color: var(--texto-sobre-acao); }
.cartao-interesses .acao-secundaria { border: 1px solid var(--borda); background: transparent; color: var(--texto); }
.cartao-interesses .acao-perigo { border: 1px solid var(--erro); background: transparent; color: var(--erro-texto); align-self: flex-start; }
.cartao-interesses .acao-perigo--cheio { background: var(--erro); color: var(--sobre-erro); }
.cartao-interesses button:focus-visible, .cartao-interesses input:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.cartao-interesses button:disabled { opacity: .6; cursor: default; }
.cartao-interesses button[hidden] { display: none; }
.cartao-interesses input[type="text"] {
  flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: 12px;
  border: 1px solid var(--borda); background: var(--fundo); color: var(--texto); font: inherit; font-size: 14px;
}
.interesses-adicionar { display: flex; flex-wrap: wrap; gap: 8px; }
.interesses-confirmar-apagar { display: flex; flex-direction: column; gap: 8px; }
.interesses-confirma { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.interesses-confirma input { width: 20px; height: 20px; accent-color: var(--erro); }

.proposta-interesse, .interesse-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo);
}
.proposta-interesse .interesse-texto, .interesse-item > .interesse-texto { flex: 1 1 100%; margin: 0; font-size: 14px; }
.interesse-cabeca { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; min-width: 0; }
.interesse-tipo { flex: none; padding: 1px 8px; border: 1px solid var(--borda); border-radius: 999px; font-size: 11px; color: var(--sub); text-transform: uppercase; letter-spacing: .03em; }
.interesse-chave { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.interesse-detalhe { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--sub); }
.interesse-item .acoes-cartao { flex: 1 1 100%; margin: 0; }

.codigo-maioridade { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px dashed var(--acao); border-radius: 12px; background: var(--fundo); }
.codigo-maioridade-rotulo { font-size: 12px; color: var(--sub); text-transform: uppercase; letter-spacing: .04em; }
.codigo-maioridade-valor { font-size: 28px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.codigo-maioridade-texto { font-size: 13px; color: var(--sub); }
.cartao-interesses input[type="text"]:disabled { opacity: .55; cursor: not-allowed; }
.interesses-secao > .acao-secundaria { align-self: flex-start; }

/* Ação sensível com login antigo (ADR-0036): aviso em destaque com o caminho para entrar de novo. */
.aviso-seguranca {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; white-space: normal;
  border: 1px solid var(--aviso); border-left-width: 4px; border-radius: 12px; background: var(--aviso-fundo);
}
.aviso-seguranca strong { font-size: 15px; }
.aviso-seguranca p { margin: 0; font-size: 14px; }
.aviso-seguranca-botao {
  align-self: flex-start; border: 0; border-radius: 999px; background: var(--acao); color: var(--texto-sobre-acao);
  padding: 10px 18px; min-height: 44px; font: inherit; font-weight: 600; cursor: pointer;
}
.aviso-seguranca-botao:disabled { opacity: .6; cursor: default; }
.aviso-seguranca-botao:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.status-erro { color: var(--erro-texto); font-weight: 600; }

/* Apresentações do atendimento no painel (ADR-0057): região de contexto no
   fluxo do painel (nunca flutuante sobre foto, preço, anúncio ou botões),
   faixa de sugestões dentro do painel, controle Ações na barra e cartões do
   apresentador comum. Cartão com mais de três linhas de explicação vira
   tarefa no espaço principal. */
.painel-contexto { padding: 8px 12px 0; }
.painel-contexto[hidden] { display: none; }
.sugestoes-painel { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
.sugestoes-painel[hidden] { display: none; }
.sugestoes-painel button {
  border: 1px solid var(--borda); border-radius: 999px; background: var(--fundo-suave);
  color: inherit; font: inherit; font-size: 14px; padding: 8px 14px; min-height: 44px;
  cursor: pointer; max-width: 100%;
}
.sugestoes-painel button:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.painel-acoes { position: relative; }
.painel-acoes[hidden] { display: none; }
.painel-acoes-contador {
  position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px;
  border-radius: 999px; background: var(--acao); color: var(--texto-sobre-acao);
  font-size: 11px; line-height: 18px; text-align: center; padding: 0 4px;
}
.painel-acoes-contador[hidden] { display: none; }
.painel-recuperacao { padding: 8px 12px; }
.painel-recuperacao[hidden] { display: none; }
.apr {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo-suave);
}
.apr--destacada { outline: 2px solid var(--acao); outline-offset: 2px; animation: destacar-acao 1.5s ease-out; }
@keyframes destacar-acao { 0%, 45% { box-shadow: 0 0 0 3px var(--acao); } 100% { box-shadow: 0 0 0 0 transparent; } }
.apr--aviso[data-apr-erro="1"] { border-color: var(--aviso); border-left-width: 4px; background: var(--aviso-fundo); }
.apr--erro { border-color: var(--erro, #b91c1c); border-left-width: 4px; }
.apr-titulo { margin: 0; font-size: 16px; }
.apr-titulo:focus { outline: none; }
.apr-titulo:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.apr-origem { margin: 0; font-size: 13px; color: var(--sub); }
.apr-resumo { margin: 0; font-size: 14px; white-space: normal; }
.apr-dica { margin: 0; font-size: 13px; color: var(--sub); }
.apr-acoes, .apr-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.apr-acao, .apr-opcao {
  border: 1px solid var(--borda); border-radius: 999px; background: var(--fundo);
  color: inherit; font: inherit; font-size: 14px; padding: 10px 16px; min-height: 44px;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
}
.apr-acao--link { background: var(--acao); border-color: var(--acao); color: var(--texto-sobre-acao); font-weight: 600; }
.apr-acao:disabled, .apr-opcao:disabled { opacity: .55; cursor: default; }
.apr-acao:focus-visible, .apr-opcao:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.apr-opcao[aria-current="true"] { border-color: var(--acao); font-weight: 600; }
.apr-linhas { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.apr-linhas dt { color: var(--sub); }
.apr-linhas dd { margin: 0; }
/* Tarefas de conta no painel (APN-06): os cartões usam os mesmos blocos de
   antes, agora dentro do .apr. */
.apr .titulo-cartao { margin: 0; font-size: 16px; }
.apr .form-campo { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.apr .form-campo input[type="text"],
.apr .form-campo input[type="email"],
.apr .form-campo input[type="tel"],
.apr .form-campo input[type="password"] {
  font: inherit; padding: 10px 12px; min-height: 44px; border: 1px solid var(--borda);
  border-radius: 10px; background: var(--fundo); color: inherit; max-width: 100%;
}
.apr .acoes-cartao { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.apr .acoes-cartao button {
  font: inherit; font-size: 14px; padding: 10px 16px; min-height: 44px;
  border: 1px solid var(--borda); border-radius: 999px; background: var(--fundo);
  color: inherit; cursor: pointer;
}
.apr .acoes-cartao button.principal { background: var(--acao); border-color: var(--acao); color: var(--texto-sobre-acao); font-weight: 600; }
.apr .acoes-cartao button:disabled { opacity: .55; cursor: default; }
.apr .acoes-cartao button:focus-visible, .apr input:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.apr .vista-erro { color: var(--erro-texto); font-size: 14px; }
/* Tarefas de confirmação/vínculo do fornecedor e da loja (APN-05/APN-07). */
.apr--confirmacao h3 { margin: 0; font-size: 16px; }
.apr--confirmacao dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.apr--confirmacao dt { color: var(--sub); }
.apr--confirmacao dd { margin: 0; }
.apr--confirmacao .nota { margin: 0; font-size: 14px; }
.apr--confirmacao .nota--aviso { color: var(--aviso-texto, var(--erro-texto)); }
.apr--confirmacao .nota--erro { color: var(--erro-texto); }
.apr--confirmacao .pagamento-situacao { font-size: 14px; color: var(--sub); }
/* Estado contextual de compra do fornecedor, junto à barra do painel. */
#loja-atual { padding: 6px 12px 0; }

/* ------------------------------------------------ cluster de ações na barra inferior (01/11/2026)
   Todos os controles de uso frequente integrados na barra inferior, ao alcance natural do polegar.
   Modo texto: grid de 2 colunas x 3 linhas (6 slots: c1, c2 / div, voz / mic, env).
   Modo voz: grid de 2 colunas x 2 linhas (4 slots: vc1, vc2 / vtxt, vfalar). */
.cluster-acoes {
  display: grid;
  grid-template-columns: repeat(2, 44px);
  grid-template-rows: repeat(3, 44px);
  grid-template-areas:
    "c2 c1"
    "div voz"
    "env mic";
  gap: 4px;
  flex-shrink: 0;
  align-self: flex-end;
}
.dock-polegar {
  margin-top: -96px;
  position: relative;
  z-index: 3;
}
.cluster-acoes .icone-acao {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 12px;
  background: var(--cartao); color: var(--texto); border: 1px solid var(--borda);
  display: grid; place-items: center; padding: 0; cursor: pointer; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.cluster-acoes .icone-acao svg { width: 22px; height: 22px; }
.cluster-acoes .icone-acao:hover { background: var(--cartao); filter: brightness(1.12); }
.cluster-acoes .icone-acao:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.cluster-acoes .enviar {
  grid-area: env;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%;
  border: 0; background: var(--acao); color: var(--texto-sobre-acao);
  display: grid; place-items: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease;
}
.cluster-acoes .enviar:disabled { opacity: .5; cursor: default; }
.cluster-acoes .enviar svg {
  width: 22px; height: 22px; fill: currentColor;
  transform: translate(1px, -1px);
}
.cluster-acoes .enviar:not(:disabled):hover {
  background: var(--acao-escuro, color-mix(in srgb, var(--acao) 85%, black));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--acao) 40%, transparent);
}
.cluster-acoes .enviar:not(:disabled):active {
  transform: scale(0.94);
}
.cluster-acoes .microfone { grid-area: mic; }
.cluster-acoes #botao-modo-voz { grid-area: voz; }
.cluster-acoes #layout-compacto { grid-area: div; }
.cluster-acoes #slot-contextual-1 { grid-area: c1; }
.cluster-acoes #slot-contextual-2 { grid-area: c2; }

.cluster-acoes .slot-contextual {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  display: grid; place-items: center; position: relative;
}
.cluster-acoes .slot-contextual .icone-acao { width: 44px; height: 44px; }
#parar-fala {
  color: var(--erro, #dc2626);
  background: color-mix(in srgb, var(--erro) 10%, var(--cartao));
  border-color: color-mix(in srgb, var(--erro) 35%, var(--borda));
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#parar-fala svg { width: 20px; height: 20px; fill: currentColor; }
#parar-fala:hover {
  background: color-mix(in srgb, var(--erro) 20%, var(--cartao));
  border-color: var(--erro, #dc2626);
}
#parar-fala:active { transform: scale(0.94); }
.app[data-estado="falando"] #painel-acoes { display: none !important; }
.app:not([data-estado="falando"]) #parar-fala { display: none !important; }
.cluster-acoes .layout-opcoes { display: none !important; }
.app:not([data-palco="1"]) .cluster-acoes .layout-compacto { display: none; }

/* Cluster de ações no modo de voz: 2 colunas x 2 linhas */
.cluster-acoes-voz {
  display: grid;
  grid-template-columns: repeat(2, 44px);
  grid-template-rows: repeat(2, 44px);
  grid-template-areas:
    "vc2 vc1"
    "vtxt vfalar";
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
  margin-top: 0;
  position: static;
  z-index: auto;
  align-self: center;
  order: 2;
}
.cluster-acoes-voz #slot-contextual-voz-1 { grid-area: vc1; }
.cluster-acoes-voz #slot-contextual-voz-2 { grid-area: vc2; }
.cluster-acoes-voz #voz-para-texto { grid-area: vtxt; }
.cluster-acoes-voz #voz-falar { grid-area: vfalar; }

.cluster-acoes-voz .slot-contextual {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  display: grid; place-items: center; position: relative;
}
.cluster-acoes-voz .slot-contextual .icone-acao { width: 44px; height: 44px; }
.cluster-acoes-voz .voz-falar {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%;
  border: 1px solid var(--acao); background: var(--acao); color: var(--texto-sobre-acao);
  display: grid; place-items: center; padding: 0; cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.cluster-acoes-voz .voz-falar:hover { filter: brightness(1.1); }
.cluster-acoes-voz .voz-falar:active { transform: scale(0.94); }
.cluster-acoes-voz .voz-falar[data-parar="1"],
.voz-falar[data-parar="1"] {
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--erro) 10%, var(--cartao)) !important;
  border-color: var(--erro, #dc2626) !important;
  color: var(--erro, #dc2626) !important;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--erro) 20%, transparent);
}
.cluster-acoes-voz .voz-falar[data-parar="1"]:hover,
.voz-falar[data-parar="1"]:hover {
  background: color-mix(in srgb, var(--erro) 22%, var(--cartao)) !important;
  filter: none;
}
.cluster-acoes-voz .voz-falar[data-parar="1"] .voz-icone-mic,
.voz-falar[data-parar="1"] .voz-icone-mic { display: none !important; }
.cluster-acoes-voz .voz-falar[data-parar="1"] .voz-icone-parar,
.voz-falar[data-parar="1"] .voz-icone-parar { display: block !important; }
.cluster-acoes-voz .voz-acao {
  border-radius: 12px; padding: 0; display: grid; place-items: center;
}

/* Modo Canhoto: espelha os clusters para o lado esquerdo */
.app[data-canhoto="1"] .entrada-linha { flex-direction: row-reverse; }
.app[data-canhoto="1"] .cluster-acoes {
  grid-template-areas:
    "c1 c2"
    "voz div"
    "mic env";
}
.app[data-canhoto="1"] .barra-voz-linha { flex-direction: row-reverse; }
.app[data-canhoto="1"] .cluster-acoes-voz {
  grid-template-areas:
    "vc1 vc2"
    "vfalar vtxt";
  margin-left: 0;
  margin-right: auto;
}

/* No modo de texto, a área da conversa se limita à mesma largura do box "Digite sua pergunta…" (100px para o cluster e gap). */
.conversa-miolo { padding-right: 100px; }
.app[data-canhoto="1"] .conversa-miolo { padding-right: 0; padding-left: 100px; }

/* ------------------------------------------- Tarefa de cadastro do lojista (CNL-05)
   Formulários da jornada no painel: passos, dados conferidos e próximos passos.
   Reusa .form-campos/.form-campo/.acoes-cartao/.nota do shell. */
.cartao-cadastro { display: flex; flex-direction: column; gap: 10px; }
.cartao-cadastro .cadastro-passos { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--sub); }
.cartao-cadastro .cadastro-passos [aria-current="step"] { color: var(--texto); font-weight: 700; }
.cartao-cadastro .cadastro-corpo { display: flex; flex-direction: column; gap: 10px; }
.cartao-cadastro .cadastro-corpo .form-campos { margin-top: 0; }
.cartao-cadastro .cadastro-dados { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.cartao-cadastro .cadastro-dados dt { color: var(--sub); }
.cartao-cadastro .cadastro-dados dd { margin: 0; }
.cartao-cadastro .cadastro-lista { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.cartao-cadastro .cadastro-horarios { min-width: 0; padding: 10px; border: 1px solid var(--borda); border-radius: 10px; }
.cartao-cadastro .cadastro-horarios .horario-linha { display: grid; grid-template-columns: minmax(88px, 1fr) minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px; align-items: center; }
.cartao-cadastro .cadastro-horarios .cadastro-horarios-dia,
.cartao-cadastro .cadastro-horarios .cadastro-horarios-confirmar { display: flex; flex-direction: row; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; }
.cartao-cadastro .cadastro-horarios input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; padding: 0; flex: 0 0 20px; accent-color: var(--acao); }
.cartao-cadastro .cadastro-horarios input[type="time"] { min-width: 0; padding: 8px 4px; }
.cartao-cadastro .cadastro-horarios input[type="time"]:disabled { opacity: .5; }

/* Minha conta: leitura rápida e edição por assunto, começando pelo celular. */
.apr.conta-organizada { gap: 8px; width: 100%; min-width: 0; max-width: 640px; margin-inline: auto; }
.conta-organizada p, .conta-organizada h3 { margin: 0; }
.conta-organizada .titulo-cartao { font-size: 20px; overflow-wrap: anywhere; }
.conta-organizada .conta-nota { color: var(--sub); font-size: 14px; line-height: 1.5; }
.conta-secao { border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo); min-width: 0; }
.conta-secao > .conta-item {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px;
  cursor: pointer; list-style: none;
}
.conta-secao > summary::-webkit-details-marker { display: none; }
.conta-item::after {
  content: ''; flex: 0 0 8px; width: 8px; height: 8px; margin: 0 3px 4px auto;
  border-right: 2px solid var(--sub); border-bottom: 2px solid var(--sub); transform: rotate(45deg);
}
.conta-secao[open] > summary::after { transform: rotate(225deg); margin-bottom: -4px; }
.conta-item:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 12px; }
.conta-secao-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.conta-secao-titulo { font-size: 15px; font-weight: 650; }
.conta-secao-resumo { color: var(--sub); font-size: 13px; line-height: 1.4; }
.conta-secao[open] { padding: 0 12px 12px; }
.conta-secao[open] > summary { margin-inline: -12px; border-bottom: 1px solid var(--borda); margin-bottom: 12px; }
.conta-organizada .form-campos { gap: 12px; }
.conta-organizada .form-campos > [role="status"]:empty,
.conta-organizada .foto-conta [role="status"]:empty,
.conta-organizada .conta-acao > [role="status"]:empty { display: none; }
.conta-organizada .form-campos input { font-size: 16px; min-width: 0; }
.conta-organizada .form-campos input[type="checkbox"] { width: 22px; min-height: 22px; height: 22px; flex-shrink: 0; }
.conta-organizada .form-campos label:has(input[type="checkbox"]) { min-height: 44px; }
.conta-organizada button { min-height: 44px; }
.conta-organizada button[hidden] { display: none; }
.conta-organizada .form-campos button[type="submit"] { min-height: 44px; width: 100%; border-radius: 10px; }
.conta-local-campos { display: flex; align-items: flex-start; gap: 10px; }
.conta-local-campos > .form-campo { flex: 1; min-width: 0; }
.conta-local-campos > .form-uf { flex: 0 0 96px; }
.conta-organizada .foto-conta { align-items: flex-start; margin: 0 0 16px; flex-wrap: wrap; }
.conta-organizada .foto-conta-coluna { flex: 1 1 150px; }
.conta-organizada .foto-conta .acoes-cartao { flex-direction: column; }
.conta-lista-acoes { display: flex; flex-direction: column; gap: 8px; }
.conta-lista-acoes button {
  width: 100%; text-align: left; font: inherit; font-size: 14px; line-height: 1.4;
  border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo); color: var(--texto);
  padding: 12px; cursor: pointer; overflow-wrap: anywhere;
}
.conta-organizada button:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.conta-organizada button:disabled { opacity: .6; cursor: default; }
.conta-lista-acoes { margin-top: 12px; }
.conta-acao > [role="status"]:not(:empty) { margin-top: 8px; font-size: 14px; }
.conta-secao--cuidado .form-campos button[type="submit"] { background: var(--erro); color: var(--texto-sobre-acao); }
.conta-organizada .conta-saida { margin-top: 0; }
@media (min-width: 600px) {
  .conta-organizada .foto-conta .acoes-cartao { flex-direction: row; }
  .conta-organizada .form-campos button[type="submit"] { width: auto; }
}

/* Interesses e buscas se expandem na própria conta, como as demais seções. */
.conta-conteudo { width: 100%; min-width: 0; }
.conta-conteudo .interesses-secao:first-child { border-top: 0; padding-top: 0; }
.conta-conteudo .interruptor-linha { flex-wrap: wrap; }
.conta-conteudo .interesses-adicionar input { min-width: 0; max-width: 100%; }
.conta-conteudo input[type="text"] { font-size: 16px; }

/* Avisos de buscas: um só rótulo, estado e ação alinhados em qualquer largura. */
.buscas-avisos-linha { display: flex; align-items: center; gap: 12px; }
.buscas-avisos-linha > span { flex: 1; min-width: 0; }
.buscas-avisos-linha > button { flex: none; }
.buscas-avisos-linha + .interesse-detalhe { margin-top: 8px; }