/**
 * ╔══════════════════════════════════════════════════════╗
 * ║  CONCIERGE — Assistente Virtual de Alta Conversão    ║
 * ║  Arquivo: assistant.css (O Corpo)                    ║
 * ║  Versão: 1.0.0-fase1 · Projeto: Soul Core Ads        ║
 * ║  Autor: Samuel Soares · DevCode                      ║
 * ╠══════════════════════════════════════════════════════╣
 * ║  100% escopado sob .dc-bot- · tokens via --dc-bot-*  ║
 * ║  (injetados pelo motor a partir da config).          ║
 * ║  Sem seletores globais. Sem !important (exceto       ║
 * ║  reduced-motion, por robustez).                      ║
 * ╚══════════════════════════════════════════════════════╝
 */

/* ---------- Tokens (fallback = marca Soul Core; motor sobrescreve) ---------- */
.dc-bot-container{
  --dc-bot-primary:#D4AF37; --dc-bot-primary-hover:#E7C765; --dc-bot-gold-deep:#A8822A;
  --dc-bot-surface:#16161A; --dc-bot-surface-alt:#1E1E24;
  --dc-bot-text:#F5F5F5; --dc-bot-text-mid:#C4C4C8; --dc-bot-text-muted:#8A8A90;
  --dc-bot-on-gold:#0A0A0A; --dc-bot-line:rgba(201,205,214,.12); --dc-bot-line-gold:rgba(212,175,55,.28);
  --dc-bot-font-heading:'Sora',system-ui,sans-serif; --dc-bot-font-body:'Inter',system-ui,sans-serif;
  --dc-bot-z:210; --dc-bot-z-panel:900; --dc-bot-vvh:100dvh;
}

/* ---------- Reset interno (não herda do site, não vaza) ---------- */
.dc-bot-container, .dc-bot-container *{ box-sizing:border-box; margin:0; padding:0; }
.dc-bot-container{
  font-family:var(--dc-bot-font-body); font-size:15px; line-height:1.5;
  color:var(--dc-bot-text); -webkit-font-smoothing:antialiased;
}

/* ---------- FAB (entrada única — zero notification fatigue) ---------- */
.dc-bot-fab{
  position:fixed; z-index:var(--dc-bot-z);
  right:clamp(1rem,3vw,1.5rem);
  bottom:calc(env(safe-area-inset-bottom, 0px) + clamp(1rem,3vw,1.5rem));
  width:60px; height:60px; border-radius:50%; cursor:pointer;
  border:1px solid var(--dc-bot-line-gold);
  background:var(--dc-bot-surface); padding:0; overflow:hidden;
  box-shadow:0 10px 30px rgba(212,175,55,.35);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
  animation:dc-bot-fab-in .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes dc-bot-fab-in{ from{ opacity:0; transform:scale(.6) translateY(10px);} to{ opacity:1; transform:none;} }
.dc-bot-fab img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.dc-bot-fab:active{ transform:scale(.94); }
.dc-bot-fab:focus-visible{ outline:2px solid var(--dc-bot-primary-hover); outline-offset:3px; }
.dc-bot-fab[hidden]{ display:none; }

/* ---------- Backdrop ---------- */
.dc-bot-backdrop{
  position:fixed; inset:0; z-index:calc(var(--dc-bot-z-panel) - 1);
  background:rgba(5,5,7,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease-in, visibility 0s linear .2s;   /* saída rápida */
}
.dc-bot-container.dc-bot-open .dc-bot-backdrop{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .3s ease;
}

/* ---------- Painel (glassmorphism + spring) ---------- */
.dc-bot-panel{
  position:fixed; z-index:var(--dc-bot-z-panel);
  right:clamp(1rem,3vw,1.5rem);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 88px);
  width:min(380px, calc(100vw - 2rem));
  height:min(600px, calc(var(--dc-bot-vvh) - 120px));
  display:flex; flex-direction:column; overflow:hidden;
  contain:content;                             /* isola repaint/reflow */
  background:rgba(22,22,26,.85);               /* glass sobre página escura → AA folgado */
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
          backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid var(--dc-bot-line-gold); border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0; transform:translateY(18px) scale(.96); transform-origin:bottom right;
  visibility:hidden; pointer-events:none;
  transition:opacity .2s ease-in, transform .2s ease-in, visibility 0s linear .2s;  /* fechar: 200ms */
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .dc-bot-panel{ background:var(--dc-bot-surface); }   /* degradação graciosa */
}
.dc-bot-container.dc-bot-open .dc-bot-panel{
  opacity:1; transform:none; visibility:visible; pointer-events:auto;
  transition:opacity .32s ease, transform .32s cubic-bezier(.34,1.56,.64,1);        /* abrir: spring */
}

/* ---------- Header ---------- */
.dc-bot-head{
  display:flex; align-items:center; gap:.7rem; padding:14px;
  border-bottom:1px solid var(--dc-bot-line);
  background:linear-gradient(180deg, rgba(212,175,55,.08), transparent);
}
.dc-bot-avatar{ width:40px; height:40px; border-radius:50%; overflow:hidden; flex-shrink:0; border:1px solid var(--dc-bot-line-gold); }
.dc-bot-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.dc-bot-id{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.dc-bot-name{ font-family:var(--dc-bot-font-heading); font-weight:700; font-size:.98rem; }
.dc-bot-status{ display:inline-flex; align-items:center; gap:.4rem; font-size:.75rem; color:var(--dc-bot-text-muted); }
.dc-bot-status::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--dc-bot-primary); }
.dc-bot-close{
  margin-left:auto; width:36px; height:36px; border-radius:50%; cursor:pointer;
  border:1px solid var(--dc-bot-line); background:var(--dc-bot-surface-alt);
  color:var(--dc-bot-text-mid); font-size:1.1rem; display:grid; place-items:center;
  transition:color .2s ease, border-color .2s ease;
}
.dc-bot-close:focus-visible{ outline:2px solid var(--dc-bot-primary-hover); outline-offset:2px; }

/* ---------- Mensagens ---------- */
.dc-bot-msgs{
  flex:1; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:14px; display:flex; flex-direction:column; gap:10px;
}
.dc-bot-msg{
  max-width:86%; padding:10px 13px; border-radius:14px;
  font-size:.9rem; line-height:1.5; word-wrap:break-word;
  animation:dc-bot-msg-in .34s cubic-bezier(.16,1,.3,1) both;   /* fade + slide-up */
}
@keyframes dc-bot-msg-in{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
.dc-bot-msg-bot{
  align-self:flex-start; background:var(--dc-bot-surface-alt);
  border:1px solid var(--dc-bot-line); border-bottom-left-radius:5px;
}
.dc-bot-msg-user{
  align-self:flex-end; color:var(--dc-bot-on-gold);
  background:linear-gradient(135deg, var(--dc-bot-primary-hover), var(--dc-bot-primary) 60%, var(--dc-bot-gold-deep));
  border-bottom-right-radius:5px;
}
.dc-bot-msg p + p{ margin-top:.5em; }
.dc-bot-trust{ display:block; margin-top:.5em; font-size:.82rem; color:var(--dc-bot-primary-hover); }
.dc-bot-msg strong{ font-weight:600; color:inherit; }
.dc-bot-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.dc-bot-action{
  font-family:var(--dc-bot-font-body); font-size:.8rem; padding:8px 12px; min-height:34px;
  border-radius:999px; cursor:pointer; border:1px solid var(--dc-bot-line-gold);
  background:rgba(212,175,55,.08); color:var(--dc-bot-primary);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.dc-bot-action:focus-visible{ outline:2px solid var(--dc-bot-primary-hover); outline-offset:2px; }
.dc-bot-action:active{ transform:scale(.97); }
.dc-bot-action-wa{
  background:linear-gradient(135deg,#25D366,#128C7E); color:#06251a;
  border-color:transparent; font-weight:600;
}

/* Indicador de digitação — wave (não pulse simples) */
.dc-bot-typing{
  align-self:flex-start; display:inline-flex; gap:4px; padding:12px 14px;
  background:var(--dc-bot-surface-alt); border:1px solid var(--dc-bot-line); border-radius:14px;
  animation:dc-bot-msg-in .3s ease both;
}
.dc-bot-typing span{
  width:6px; height:6px; border-radius:50%; background:var(--dc-bot-text-muted);
  animation:dc-bot-wave 1.1s infinite ease-in-out;
}
.dc-bot-typing span:nth-child(2){ animation-delay:.15s; }
.dc-bot-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes dc-bot-wave{
  0%,60%,100%{ transform:translateY(0) scale(1); opacity:.35; }
  30%{ transform:translateY(-5px) scale(1.15); opacity:1; }
}

/* ---------- Quick replies (cascata via animation-delay inline do JS) ---------- */
.dc-bot-quick{
  display:flex; gap:8px; padding:10px 14px; border-top:1px solid var(--dc-bot-line);
  overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.dc-bot-quick::-webkit-scrollbar{ display:none; }
.dc-bot-chip{
  flex:0 0 auto; font-family:var(--dc-bot-font-body); font-size:.82rem; white-space:nowrap;
  padding:9px 13px; min-height:38px; border-radius:999px; cursor:pointer;
  border:1px solid var(--dc-bot-line-gold); background:rgba(255,255,255,.02); color:var(--dc-bot-text);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), background .2s ease, color .2s ease;
  opacity:0;
}
.dc-bot-container.dc-bot-open .dc-bot-chip{ animation:dc-bot-chip-in .3s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes dc-bot-chip-in{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.dc-bot-chip:focus-visible{ outline:2px solid var(--dc-bot-primary-hover); outline-offset:2px; color:var(--dc-bot-primary); }
.dc-bot-chip:active{ transform:scale(.97); }

/* ---------- Input ---------- */
.dc-bot-bar{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--dc-bot-line); }
.dc-bot-input{
  flex:1; min-width:0; font-family:var(--dc-bot-font-body); font-size:.9rem;
  color:var(--dc-bot-text); background:var(--dc-bot-surface-alt);
  border:1px solid var(--dc-bot-line); border-radius:999px; padding:11px 15px;
}
.dc-bot-input::placeholder{ color:var(--dc-bot-text-muted); }
.dc-bot-input:focus{ outline:none; border-color:var(--dc-bot-line-gold); }
.dc-bot-send{
  width:44px; height:44px; flex-shrink:0; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--dc-bot-primary-hover), var(--dc-bot-primary) 55%, var(--dc-bot-gold-deep));
  color:var(--dc-bot-on-gold); font-size:1.05rem; display:grid; place-items:center;
  transition:transform .2s ease;
}
.dc-bot-send:focus-visible{ outline:2px solid var(--dc-bot-primary-hover); outline-offset:2px; }
.dc-bot-send:active{ transform:scale(.94); }

/* ---------- Crédito ---------- */
.dc-bot-credit{
  text-align:center; padding:2px 14px calc(env(safe-area-inset-bottom, 0px) + 8px);
  font-size:.66rem; letter-spacing:.02em;
}
.dc-bot-credit a{ color:var(--dc-bot-text-muted); text-decoration:none; }
.dc-bot-credit a:focus-visible{ color:var(--dc-bot-primary); outline:2px solid var(--dc-bot-primary-hover); outline-offset:2px; }

/* ---------- Mobile: sheet quase full-screen (teclado-safe via --dc-bot-vvh) ---------- */
@media (max-width:480px){
  .dc-bot-panel{
    right:0; left:0; bottom:0; width:auto; border-radius:18px 18px 0 0;
    height:calc(var(--dc-bot-vvh) - env(safe-area-inset-top, 0px) - 56px);
    transform-origin:bottom center;
  }
}

/* ---------- Hover só com mouse real (sem estado preso no touch) ---------- */
@media (hover:hover) and (pointer:fine){
  .dc-bot-fab:hover{ transform:translateY(-2px); box-shadow:0 14px 38px rgba(212,175,55,.5); }
  .dc-bot-chip:hover{ background:rgba(212,175,55,.1); color:var(--dc-bot-primary); }
  .dc-bot-action:hover{ background:rgba(212,175,55,.16); }
  .dc-bot-close:hover{ color:var(--dc-bot-primary); border-color:var(--dc-bot-line-gold); }
  .dc-bot-send:hover{ transform:translateY(-1px); }
  .dc-bot-credit a:hover{ color:var(--dc-bot-primary); }
}

/* ---------- Reduced motion (a11y inegociável) ---------- */
@media (prefers-reduced-motion:reduce){
  .dc-bot-container *, .dc-bot-fab, .dc-bot-panel, .dc-bot-backdrop{
    animation:none !important; transition-duration:.001ms !important;
  }
  .dc-bot-panel{ transform:none; }
  .dc-bot-chip{ opacity:1; }
}
