/* ===== Moriah AI Site Assistant — visual do core ==============================
   Presença, conversa, balão-convite e menu de seleção.

   TEMATIZAÇÃO: tudo o que é cor e fonte sai de variáveis `--asst-*`, e cada uma
   cai na variável do tema do site antes de cair no padrão da Moriah. Ou seja: o
   site que já declara `--blue`/`--ink` herda sozinho; o que quiser controle fino
   redefine `--asst-*` no seu CSS, sem tocar neste arquivo — que é do core e é
   sobrescrito a cada atualização.

   O brilho do orb usa TRIPLETO RGB (`--asst-glow`) em vez de cor pronta porque
   ele entra em `rgba()` dentro de keyframes: é o jeito de deixar tematizável sem
   depender de suporte a color-mix. */

:root{
  --asst-accent:      var(--blue, #0035A4);
  --asst-accent-2:    var(--cyan, #009FC7);
  --asst-glow:        0,159,199;
  --asst-ink:         var(--ink, #0e1116);
  --asst-ink-dim:     var(--ink-dim, #6b7280);
  --asst-ink-soft:    var(--ink-soft, #4b5563);
  --asst-papel:       #fff;
  --asst-fonte-fala:  var(--disp, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
  --asst-fonte-mono:  var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}

/* presença que chega (não-fixa, sem caixa) */
.asst-layer{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:0;transition:opacity .7s ease}
.asst-layer.open{opacity:1}
.asst-layer.open .asst-backdrop{pointer-events:auto}
.asst-layer.receded{opacity:0}
.asst-backdrop{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;
  background:
    radial-gradient(110vw 82vh at 90% -12%, rgba(var(--asst-glow),.16), rgba(0,53,164,.07) 32%, transparent 62%),
    rgba(255,255,255,.965);
  -webkit-backdrop-filter:blur(8px) saturate(1.05);backdrop-filter:blur(8px) saturate(1.05)}
.asst-layer.open .asst-backdrop{opacity:1}
.asst-stage{position:absolute;top:0;bottom:0;right:5vw;width:min(640px,54vw);
  display:flex;flex-direction:column;justify-content:center;pointer-events:none;
  transform:translateX(34px);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.asst-layer.open .asst-stage{transform:none}
@media(max-width:860px){.asst-stage{left:6vw;right:6vw;width:auto}}

/* a conversa: a fala mais recente em foco, as anteriores recuando */
.asst-layer .turns{display:flex;flex-direction:column;gap:.4em;margin-bottom:.7em}
.asst-layer .turn{font-weight:400;letter-spacing:-.022em;line-height:1.08;transition:all .7s cubic-bezier(.2,.7,.25,1);transform-origin:left top}
.asst-layer .turn.asst{color:var(--asst-ink);font-family:var(--asst-fonte-fala)}
.asst-layer .turn.me{font-family:var(--asst-fonte-mono);font-weight:400;letter-spacing:0;color:var(--asst-accent-2);line-height:1.3}
.asst-layer .turn.me::before{content:"você — ";color:var(--asst-ink-dim)}
.asst-layer .turn.focal.asst{font-size:clamp(24px,2.9vw,42px)}
.asst-layer .turn.focal.me{font-size:clamp(14px,1.5vw,19px)}
.asst-layer .turn.recent{font-size:clamp(16px,1.8vw,22px);opacity:.4}
.asst-layer .turn.gone{display:none}
.asst-layer .tcaret{display:inline-block;width:.5ch;height:1em;transform:translateY(.12em);background:var(--asst-accent);margin-left:2px;animation:asstBlink 1s steps(1) infinite}
@keyframes asstBlink{50%{opacity:0}}

/* campo de escrita: cursor piscando, sem caixa */
.asst-prompt{display:flex;align-items:flex-start;gap:6px;pointer-events:auto;max-width:880px;width:100%;margin-left:auto;opacity:0;transition:opacity .5s}
.asst-prompt.show{opacity:1}
.asst-prompt .pcaret{font-weight:300;font-size:clamp(20px,2.4vw,32px);color:var(--asst-accent);line-height:1.2;animation:asstBlink 1s steps(1) infinite}
.asst-prompt .pcaret.hide{display:none}
#asstSay{flex:1;background:transparent;border:none;outline:none;resize:none;color:var(--asst-accent);font-family:var(--asst-fonte-fala);font-weight:300;
  font-size:clamp(20px,2.4vw,32px);line-height:1.2;letter-spacing:-.02em;max-height:26vh;caret-color:var(--asst-accent)}
#asstSay::placeholder{color:var(--asst-ink-dim)}
.asst-chips{display:flex;flex-wrap:wrap;gap:9px;width:100%;max-width:880px;margin-left:auto;margin-bottom:1.1em;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s;pointer-events:none}
.asst-chips.show{opacity:1;transform:none;pointer-events:auto}
.asst-chips button{font-family:var(--asst-fonte-mono);font-size:12px;letter-spacing:.01em;color:var(--asst-accent);background:rgba(0,53,164,.05);border:1px solid rgba(0,53,164,.2);border-radius:999px;padding:9px 14px;cursor:pointer;transition:.18s;line-height:1}
.asst-chips button:hover{background:var(--asst-accent);color:#fff;border-color:var(--asst-accent)}

/* a presença: bolinha no canto (repouso) ⇄ traço de luz sobre a conversa (aberta) */
.asst-orb{position:fixed;z-index:55;right:5vw;top:16vh;width:32px;height:32px;border-radius:50%;
  background:linear-gradient(120deg,var(--asst-accent-2),var(--asst-accent));pointer-events:auto;cursor:pointer;
  transition:width .45s ease,height .45s ease,border-radius .45s ease,transform 1.1s cubic-bezier(.2,.7,.2,1),filter .9s ease;
  animation:asstRipple 2.6s ease-in-out infinite}
.asst-orb::before{content:"";position:absolute;inset:-56px;border-radius:inherit}
.asst-orb:hover{filter:brightness(1.25)}
.asst-orb:not(.is-open):hover{transform:scale(1.3)}
.asst-orb:focus-visible{outline:2px solid var(--asst-accent);outline-offset:4px}
.asst-orb.is-open{width:64px;height:18px;border-radius:999px;animation:asstDrawin 2.8s ease-in-out infinite}
.asst-orb.is-open:hover{transform:scaleY(1.25)}
@keyframes asstDrawin{0%,100%{box-shadow:0 0 36px 11px rgba(var(--asst-glow),.22)}50%{box-shadow:0 0 13px 1px rgba(var(--asst-glow),.75)}}
@keyframes asstRipple{
  0%{box-shadow:0 0 0 0 rgba(var(--asst-glow),.55),0 0 26px 7px rgba(var(--asst-glow),.45)}
  70%{box-shadow:0 0 0 22px rgba(var(--asst-glow),0),0 0 38px 11px rgba(var(--asst-glow),.55)}
  100%{box-shadow:0 0 0 0 rgba(var(--asst-glow),0),0 0 26px 7px rgba(var(--asst-glow),.45)}}

/* balão-convite ao lado do orb — chama, não invade */
.asst-invite{position:fixed;z-index:54;right:calc(5vw + 82px);top:calc(16vh - 8px);max-width:248px;
  background:var(--asst-papel);color:var(--asst-ink);border:1px solid rgba(14,17,22,.1);border-radius:16px;
  padding:13px 16px;box-shadow:0 16px 44px -16px rgba(10,13,18,.32);cursor:pointer;
  font-family:var(--asst-fonte-mono);font-size:13px;line-height:1.45;letter-spacing:.01em;
  opacity:0;transform:translateX(10px) scale(.96);transform-origin:bottom right;pointer-events:none;
  transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.asst-invite.show{opacity:1;transform:none;pointer-events:auto}
.asst-invite:hover{border-color:var(--asst-accent-2)}
.asst-tail{position:absolute;right:-21px;top:15px;width:23px;height:15px;overflow:visible;filter:drop-shadow(1px 2px 1px rgba(10,13,18,.05))}
.asst-tail path{fill:var(--asst-papel);stroke:rgba(14,17,22,.1);stroke-width:1;stroke-linejoin:round;stroke-linecap:round;transition:stroke .2s}
.asst-invite:hover .asst-tail path{stroke:var(--asst-accent-2)}
.asst-invite .asst-invite-txt::after{content:"▍";color:var(--asst-accent-2);margin-left:1px;animation:asstCl .9s steps(1) infinite}
.asst-invite.done .asst-invite-txt::after{display:none}
@keyframes asstCl{50%{opacity:0}}
/* Celular: o balão desce para DEBAIXO da esfera, e o rabinho aponta para cima.
   Ele era `display:none` abaixo de 540px desde a v0.10.0 — o protótipo de onde o
   assistente veio era de tela larga, e ao lado da esfera não sobra largura: com
   `right:calc(5vw + 82px)` numa tela de 390 restam ~288px, o texto encosta na
   borda esquerda e cobre o conteúdo. Debaixo, a faixa é livre e o convite
   continua sendo convite. Esconder era o atalho, não a decisão — o motor já
   escolhia a mensagem certa da seção e ninguém via. */
@media(max-width:540px){
  .asst-invite{top:calc(16vh + 48px);right:5vw;max-width:min(74vw,260px);transform-origin:top right}
  .asst-invite .asst-tail{right:16px;top:-12px;transform:rotate(-90deg)}
}

/* menu de contexto na seleção de texto */
.sel-menu{position:fixed;z-index:80;display:none;flex-direction:column;min-width:210px;
  background:var(--asst-papel);border:1px solid rgba(14,17,22,.1);border-radius:12px;padding:5px;
  box-shadow:0 18px 50px -16px rgba(10,13,18,.32);
  opacity:0;transform:translateY(4px) scale(.98);transform-origin:top left;transition:opacity .14s ease,transform .14s ease}
.sel-menu.show{display:flex;opacity:1;transform:none}
.sel-menu.fade{opacity:0;transform:translateY(-2px);transition:opacity 1.5s ease,transform 1.5s ease;pointer-events:none}
.sel-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  font-family:var(--asst-fonte-mono);font-size:12.5px;letter-spacing:.01em;color:var(--asst-ink);
  background:none;border:none;border-radius:8px;padding:9px 11px;transition:background .15s,color .15s}
.sel-menu button svg{width:16px;height:16px;flex:none;color:var(--asst-ink-dim);transition:color .15s}
.sel-menu button:hover{background:rgba(0,53,164,.06);color:var(--asst-accent)}
.sel-menu button:hover svg{color:var(--asst-accent)}
.sel-menu button[data-act="copy"]{color:var(--asst-ink-soft)}
.sel-menu .sm-sep{height:1px;background:rgba(14,17,22,.08);margin:4px 6px}
@keyframes asstSmBlink{0%,100%{background:transparent;color:var(--asst-accent)}16%,50%,84%{background:var(--asst-accent);color:#fff}33%,67%{background:transparent;color:var(--asst-accent)}}
@keyframes asstSmBlinkSvg{0%,100%{color:var(--asst-accent)}16%,50%,84%{color:#fff}33%,67%{color:var(--asst-accent)}}
.sel-menu button.copied{animation:asstSmBlink .42s steps(1,end) 1}
.sel-menu button.copied svg{animation:asstSmBlinkSvg .42s steps(1,end) 1}

/* Quem pediu menos movimento recebe menos movimento — o core não negocia isto
   com o tema. O balão e a conversa continuam funcionando; só param de pulsar. */
@media (prefers-reduced-motion: reduce){
  .asst-orb,.asst-orb.is-open{animation:none}
  .asst-layer .tcaret,.asst-prompt .pcaret,.asst-invite .asst-invite-txt::after{animation:none}
  .asst-layer,.asst-stage,.asst-invite,.sel-menu,.asst-layer .turn{transition-duration:.01ms}
}