/**
 * CONCIERGE · Assistente Virtual · assistant.css (Corpo) · v1.0.0
 * Autor: Samuel Soares · DevCode
 *
 * ESCOPO ABSOLUTO: toda classe começa com .dc-bot. O CSS não vaza para o site
 * e o site não vaza para o widget. Nenhuma tag nua é estilizada aqui.
 *
 * CORES: herdadas dos tokens do ATELIER via var(), com fallback literal. Isso
 * O site tem um tema só (escuro) desde 15/08; os fallbacks literais existem
 * para o widget sobreviver se o styles.css não carregar.
 * MOVIMENTO: herda os easings do SOAP via var(), com fallback.
 */

.dc-bot {
  --dc-primary:     var(--color-primary, #F4600E);
  --dc-primary-ink: var(--color-primary-ink, #0D0B09);
  --dc-surface:     var(--color-surface, #0D0B09);
  --dc-alt:         var(--color-surface-alt, #161411);
  --dc-raised:      var(--color-surface-raised, #1E1B18);
  --dc-text:        var(--color-text, #FBFAF8);
  --dc-muted:       var(--color-text-muted, #A5A19D);
  --dc-border:      var(--color-border, #26262A);
  --dc-strong:      var(--color-border-strong, #71685E);  /* fallback sincronizado com o token corrigido */
  --dc-r:           var(--radius-md, 14px);
  --dc-r-lg:        var(--radius-lg, 20px);
  --dc-r-full:      var(--radius-full, 999px);
  --dc-ease:        var(--soap-e-enter, cubic-bezier(0.16, 1, 0.3, 1));
  --dc-ease-in:     var(--ease-in, cubic-bezier(0.4, 0, 1, 1));
  --dc-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --dc-font:        var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);

  /* TIPO E ESPAÇO · mesmo contrato das cores: consome a escala do site, com
     fallback literal para o widget sobreviver sem o styles.css.
     Antes eram doze tamanhos de fonte e treze espaçamentos em `rem` solto,
     nenhum deles na escala do projeto. O painel não é um produto à parte:
     texto de 0,72rem aqui e de 0,8125rem na página é a mesma informação em
     dois tamanhos diferentes, e o olho lê isso como descuido. */
  --dc-t-xs:   var(--text-xs,   0.8125rem);
  --dc-t-sm:   var(--text-sm,   0.9375rem);
  --dc-t-base: var(--text-base, 1rem);
  --dc-t-lg:   var(--text-lg,   1.375rem);

  --dc-s1: var(--space-1, 0.25rem);
  --dc-s2: var(--space-2, 0.5rem);
  --dc-s3: var(--space-3, 0.75rem);
  --dc-s4: var(--space-4, 1rem);

  /* Três durações, as mesmas do site. As animações nomeadas (dc-fab-in,
     dc-msg-in, dc-wave) continuam com duração própria: são coreografia de
     entrada, não resposta a toque. */
  --dc-fast: var(--duration-fast, 150ms);
  --dc-base: var(--duration-base, 250ms);
  --dc-slow: var(--duration-slow, 400ms);

  /* A ponta da bolha. Fica fora da escala de raio de propósito: não é a forma
     de um controle, é o rabinho que aponta para quem falou, e ele só funciona
     bem quando é bem menor que o raio dos outros três cantos. */
  --dc-r-tail: 5px;

  position: fixed;
  right: clamp(1rem, 4vw, 1.75rem);
  bottom: calc(clamp(1rem, 4vw, 1.75rem) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-chatbot, 2000);   /* escala fechada em styles.css. Era o
                                        literal 99999 aqui e o token lá, que
                                        é o jeito de os dois divergirem */
  font-family: var(--dc-font);
  /* ⚠️ `style` sozinho, NUNCA `layout`. Era `contain: layout style` e isso
     quebrava o assistente inteiro no celular.

     Pela especificação de CSS Containment, `contain: layout` faz o elemento
     virar BLOCO DE CONTENÇÃO para descendentes `position: absolute` E
     `position: fixed`. O .dc-bot é só a caixa do botão flutuante, 58×58px.

     Abaixo de 640px o .dc-bot-panel é `position: fixed; inset: 0;
     width: 100%`, esperando se medir pela janela. Com `layout` no pai, o
     `100%` virava 100% de 58px:

       largura da janela   painel ANTES   painel DEPOIS
                   320px          58px           320px
                   375px          58px           375px
                   528px          58px           528px

     Ou seja: uma tira de 58px de largura por 467px de altura, ancorada em
     cima do próprio botão. Era isso que aparecia no canto como um retângulo
     escuro estreito com o avatar laranja no topo, e por isso parecia que o
     assistente "não abria".

     No desktop nada muda: lá o painel é `position: absolute`, e o .dc-bot
     continua sendo o bloco de contenção dele por ser `position: fixed`, que
     já é suficiente sem containment nenhum.

     `layout` também não comprava nada aqui: o .dc-bot é fixed, já está fora
     do fluxo, e o layout interno dele não tem como afetar a página. */
  contain: style;
}

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

/* ============================ FAB ============================ */
.dc-bot-fab {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;         /* alvo de toque muito acima de 44px */
  padding: 0;
  border: 0;
  border-radius: var(--dc-r-full);
  background: var(--dc-primary);
  color: var(--dc-primary-ink);      /* 6.11:1 sobre o laranja */
  box-shadow: var(--shadow-md);
  cursor: pointer;
  /* Entrada única e suave no load. Sem pulse eterno: notification fatigue. */
  animation: dc-fab-in var(--dc-slow) var(--dc-bounce) both;
  transition: transform var(--dc-base) var(--dc-ease),
              background-color var(--dc-base) var(--dc-ease);
}
@media (hover: hover) and (pointer: fine) {
  .dc-bot-fab:hover { background: var(--color-primary-hover, #FF7526); transform: scale(1.06); }
}
.dc-bot-fab:active { transform: scale(0.96); }
.dc-bot-fab svg    { width: 25px; height: 25px; fill: none; stroke: currentColor;
                     stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dc-bot-fab .dc-bot-x { display: none; }
.dc-bot.is-open .dc-bot-fab .dc-bot-chat { display: none; }
.dc-bot.is-open .dc-bot-fab .dc-bot-x    { display: block; }

@keyframes dc-fab-in { from { opacity: 0; transform: scale(0.4) translateY(14px); } }

/* ============================ PAINEL ============================ */
.dc-bot-panel {
  position: absolute;
  right: 0; bottom: 72px;
  display: flex;
  flex-direction: column;
  /* estouro-ok: o painel é position:fixed, então se mede pela viewport e não
     pelo .container. O calc(100vw - 2rem) já garante 1rem de folga de cada
     lado em qualquer tela. */
  width: min(384px, calc(100vw - 2rem));
  height: min(560px, calc(100dvh - 8rem));
  overflow: hidden;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-r-lg);
  background: var(--dc-surface);
  box-shadow: var(--shadow-lg);   /* a camada mais alta da página usa o topo
                                     da escala de elevação, não um literal */
  /* Fechado por padrão. Sem JS o painel nem existe no DOM. */
  opacity: 0;
  transform: scale(0.94) translateY(14px);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity var(--dc-fast) var(--dc-ease-in),
              transform var(--dc-fast) var(--dc-ease-in);   /* saída rápida */
}
.dc-bot.is-open .dc-bot-panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity var(--dc-base) var(--dc-bounce),
              transform var(--dc-base) var(--dc-bounce);
}

/* Glassmorphism só onde há suporte. Degrada para superfície sólida. */
@supports (backdrop-filter: blur(20px)) {
  .dc-bot-panel {
    background: color-mix(in srgb, var(--dc-surface) 88%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
  }
}

/* ---------------------------- Cabeçalho ---------------------------- */
.dc-bot-head {
  display: flex; align-items: center; gap: var(--dc-s3);
  padding: var(--dc-s3) var(--dc-s4);
  border-bottom: 1px solid var(--dc-border);
  background: var(--dc-alt);
}
.dc-bot-avatar {
  display: grid; place-items: center; flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: var(--dc-r-full);
  background: var(--dc-primary);
  color: var(--dc-primary-ink);
  font-weight: 800; font-size: var(--dc-t-sm); letter-spacing: -0.05em;
}
.dc-bot-id { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.dc-bot-id b { font-size: var(--dc-t-sm); color: var(--dc-text); }
.dc-bot-id span { font-size: var(--dc-t-xs); color: var(--dc-muted); }
.dc-bot-dot {
  display: inline-block; width: 6px; height: 6px; margin-right: var(--dc-s1);
  border-radius: var(--dc-r-full); background: var(--color-success, #35C46B);
}
.dc-bot-close {
  display: grid; place-items: center; flex-shrink: 0;
  /* 44px: era 34 e ficava abaixo do alvo confortável. O X continua do
     mesmo tamanho; o que cresceu é a área clicável. */
  width: 44px; height: 44px;
  border: 0; border-radius: var(--dc-r-full);
  background: transparent; color: var(--dc-muted);
  cursor: pointer; font-size: var(--dc-t-lg); line-height: 1;
  transition: background-color var(--dc-fast), color var(--dc-fast);
}
@media (hover: hover) and (pointer: fine) {
  .dc-bot-close:hover { background: var(--dc-raised); color: var(--dc-text); }
}

/* ---------------------------- Log ---------------------------- */
.dc-bot-log {
  flex: 1;
  /* O respiro ENTRE bolhas é maior que o respiro DENTRO delas (12 contra 8),
     senão duas falas coladas leem como uma fala só de dois parágrafos. */
  display: flex; flex-direction: column; gap: var(--dc-s3);
  padding: var(--dc-s4);
  /* 3px a mais na direita: é o deslocamento do anel de foco dos chips, que
     sem isto ficava recortado pelo overflow deste contêiner. */
  padding-right: calc(var(--dc-s4) + 3px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.dc-bot-log::-webkit-scrollbar { width: 6px; }
.dc-bot-log::-webkit-scrollbar-thumb { background: var(--dc-strong); border-radius: var(--dc-r-full); }

.dc-bot-msg {
  max-width: 86%;
  padding: var(--dc-s2) var(--dc-s3);
  border-radius: var(--dc-r);
  font-size: var(--dc-t-sm);
  line-height: 1.55;
  white-space: pre-wrap;      /* preserva as quebras da copy do config */
  overflow-wrap: anywhere;
  animation: dc-msg-in var(--dc-base) var(--dc-ease) both;
}
.dc-bot-msg--bot {
  align-self: flex-start;
  background: var(--dc-alt);
  border: 1px solid var(--dc-border);
  color: var(--dc-text);
  border-bottom-left-radius: var(--dc-r-tail);
}
.dc-bot-msg--user {
  align-self: flex-end;
  background: var(--dc-primary);
  color: var(--dc-primary-ink);
  border-bottom-right-radius: var(--dc-r-tail);
  font-weight: 600;
}
.dc-bot-msg strong { font-weight: 700; }
.dc-bot-msg--bot strong { color: var(--dc-primary); }

@keyframes dc-msg-in { from { opacity: 0; transform: translateY(9px); } }

/* Selo de prova, usado no trustSignal das intenções comerciais */
.dc-bot-trust {
  align-self: flex-start;
  max-width: 86%;
  padding: var(--dc-s2) var(--dc-s3);
  border-left: 2px solid var(--dc-primary);
  font-size: var(--dc-t-xs);
  color: var(--dc-muted);
  animation: dc-msg-in var(--dc-base) var(--dc-ease) both;
}

/* Três pontos em onda. Não é pulse simples. */
.dc-bot-typing { display: flex; gap: var(--dc-s1); align-self: flex-start;
                  padding: var(--dc-s3) var(--dc-s4); }
.dc-bot-typing i {
  width: 6px; height: 6px; border-radius: var(--dc-r-full);
  background: var(--dc-muted);
  animation: dc-wave 1.25s ease-in-out infinite;
}
.dc-bot-typing i:nth-child(2) { animation-delay: 0.16s; }
.dc-bot-typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes dc-wave {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.45; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* ---------------------------- Ações ---------------------------- */
.dc-bot-actions {
  display: flex; flex-wrap: wrap; gap: var(--dc-s2);
  padding: 0 var(--dc-s4) var(--dc-s2);
}
.dc-bot-chip {
  display: inline-flex; align-items: center; gap: var(--dc-s1);
  min-height: 44px;
  padding: var(--dc-s2) var(--dc-s3);
  border: 1px solid var(--dc-strong);
  border-radius: var(--dc-r-full);
  background: transparent;
  color: var(--dc-text);
  font: inherit; font-size: var(--dc-t-xs); font-weight: 600;
  cursor: pointer;
  animation: dc-msg-in var(--dc-base) var(--dc-ease) both;
  transition: border-color var(--dc-fast), color var(--dc-fast),
              background-color var(--dc-fast);
}
@media (hover: hover) and (pointer: fine) {
  .dc-bot-chip:hover { border-color: var(--dc-primary); color: var(--dc-primary); }
}

/* CTA de handoff: o único botão cheio dentro do painel */
.dc-bot-chip--go {
  border-color: var(--dc-primary);
  background: var(--dc-primary);
  color: var(--dc-primary-ink);
  min-height: 44px;
  padding: var(--dc-s2) var(--dc-s4);
  font-size: var(--dc-t-sm);
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .dc-bot-chip--go:hover { background: var(--color-primary-hover, #FF7526); color: var(--dc-primary-ink); }
}

/* ---------------------------- Entrada ---------------------------- */
.dc-bot-form {
  display: flex; gap: var(--dc-s2);
  padding: var(--dc-s3) var(--dc-s4);
  border-top: 1px solid var(--dc-border);
  background: var(--dc-alt);
}
.dc-bot-input {
  flex: 1; min-width: 0;
  min-height: 44px;
  padding: var(--dc-s2) var(--dc-s3);
  border: 1px solid var(--dc-strong);
  border-radius: var(--dc-r-full);
  background: var(--dc-surface);
  color: var(--dc-text);
  font: inherit;
  /* --text-base é clamp(1rem, ...), então o piso É 16px e o iOS nunca dá o
     zoom automático. O literal aqui garantia a regra e sonegava a escala. */
  font-size: var(--dc-t-base);
  transition: border-color var(--dc-fast);
}
.dc-bot-input::placeholder { color: var(--dc-muted); }
.dc-bot-input:focus { border-color: var(--dc-primary); }

.dc-bot-send {
  display: grid; place-items: center; flex-shrink: 0;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--dc-r-full);
  background: var(--dc-primary); color: var(--dc-primary-ink);
  cursor: pointer;
  transition: background-color var(--dc-fast), opacity var(--dc-fast);
}
.dc-bot-send:disabled { opacity: 0.45; cursor: not-allowed; }
.dc-bot-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
                   stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------- Crédito ---------------------------- */
.dc-bot-credit {
  padding: 0 var(--dc-s4) var(--dc-s3);
  background: var(--dc-alt);
  font-size: var(--dc-t-xs);
  text-align: center;
  color: var(--dc-muted);
}
/* O crédito é o único link do painel fora do fluxo da conversa, e tinha
   11px de altura de alvo. Mesma régua do rodapé: 24px de piso, 44 no dedo. */
.dc-bot-credit a { display: inline-flex; align-items: center; min-height: 24px;
  padding-inline: var(--dc-s1);
  color: inherit; text-decoration: none; }
@media (pointer: coarse) {
  .dc-bot-credit a { min-height: 44px; }
}
@media (hover: hover) and (pointer: fine) {
  .dc-bot-credit a:hover { color: var(--dc-primary); text-decoration: underline; }
}

/* ---------------------------- Foco ---------------------------- */
/* Mesmo anel do site: 3px com 3px de deslocamento. Estava em 2/2 aqui, o que
   dava dois anéis de foco diferentes na mesma página conforme a pessoa
   estivesse dentro ou fora do painel. `outline` não entra no fluxo, então o
   anel maior não empurra nada; o que ele podia fazer era ser recortado pelo
   `overflow-y: auto` do log, e por isso o log ganhou um respiro de 3px na
   direita, do tamanho exato do deslocamento. */
.dc-bot :focus-visible {
  outline: 3px solid var(--dc-primary);
  outline-offset: 3px;
}

/* ============================ MOBILE ============================
   Escala única do projeto: 480 / 640 / 900 / 1200 / 1600 (ver styles.css §1).
   Antes este arquivo quebrava em 560px, valor que não existia em nenhuma
   outra camada: entre 560 e 639 o painel já era tela cheia enquanto o resto
   do site ainda estava em layout de celular pequeno.
   ================================================================ */
@media (max-width: 639px) {
  .dc-bot { right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }

  .dc-bot-panel {
    position: fixed;
    inset: 0;
    /* 100% e não 100vw: em navegador com barra de rolagem visível, 100vw
       inclui a barra e gera rolagem horizontal. */
    width: 100%;
    /* --dc-vh é escrito pelo JS a partir da visualViewport, para o teclado
       virtual não empurrar nem cortar o campo de entrada. */
    height: var(--dc-vh, 100dvh);
    border: 0;
    border-radius: 0;
    transform-origin: bottom center;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .dc-bot-msg { max-width: 92%; }
}

/* Em telas muito largas o painel pode crescer um pouco sem virar um paredão. */
@media (min-width: 1600px) {
  .dc-bot-panel { width: min(420px, calc(100vw - 2rem)); height: min(620px, calc(100dvh - 8rem)); }
}

/* ============================ MOVIMENTO REDUZIDO ============================ */
@media (prefers-reduced-motion: reduce) {
  .dc-bot-fab, .dc-bot-panel, .dc-bot-msg, .dc-bot-chip, .dc-bot-trust {
    animation: none !important;
    /* EXCEÇÃO DOCUMENTADA: 1ms é o idioma de desligar transição sem usar
       `transition: none`, que mataria também a mudança de estado. */
    transition: opacity 1ms linear !important;
    transform: none !important;
  }
  .dc-bot-typing i { animation: none; opacity: 0.6; }
}