/* ==========================================================================
   Tomada · Agent Dock — vidro líquido + animações (CSS puro, sem framework)
   Fonte da verdade do design. Fontes: Outfit 400-700 e JetBrains Mono 500.
   Requer os <filter> SVG de assets/reference/filters.html na mesma página.
   ========================================================================== */
:root{
  --bg:#F5F3EF; --bg2:#FAF8F5; --ink:#1F1B16; --ink2:#3A342D; --mut:#6B645C;
  --or:#F26A21;        /* laranja vivo: brilho, dots, bordas ativas */
  --or-btn:#D9500B;    /* laranja de botão (texto branco passa em contraste) */
  --or-deep:#B23C00; --amber:#FFB347; --pink:#FF6B8B;
  --line:rgba(31,27,22,.07);
  --spring:cubic-bezier(.34,1.56,.64,1);       /* bounce padrão */
  --spring-hard:cubic-bezier(.34,1.9,.64,1);   /* bounce forte (mascote 3D) */
}
.agent-ui{position:relative;overflow:hidden;font-family:'Outfit',sans-serif;color:var(--ink)}
.agent-ui *{box-sizing:border-box}
.mut{color:var(--mut)}

/* ---------- Vidro líquido ---------- */
.glass{position:relative;border:0;color:var(--ink);font-family:'Outfit',sans-serif;
  background:linear-gradient(158deg,rgba(255,255,255,.6),rgba(255,255,255,.32) 50%,rgba(255,255,255,.48));
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  backdrop-filter:blur(14px) saturate(180%);                                   /* fallback Safari/Firefox */
  backdrop-filter:blur(5px) url(#lgPill) saturate(185%) brightness(1.05);      /* Chromium: com distorção */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.4),
    inset 3px 3px 6px rgba(255,176,120,.28),inset -3px -3px 6px rgba(120,190,255,.22),
    inset 0 0 22px rgba(255,255,255,.4),0 22px 48px rgba(90,50,20,.2),0 2px 8px rgba(90,50,20,.1)}
.glass.big{backdrop-filter:blur(5px) url(#lgBig) saturate(185%) brightness(1.05)}
.glass.comp{backdrop-filter:blur(5px) url(#lgComp) saturate(185%) brightness(1.05)}
.glass.strong,.dock.open{background:linear-gradient(158deg,rgba(255,255,255,.8),rgba(255,255,255,.62))}
.dock.open{backdrop-filter:blur(5px) url(#lgBig) saturate(185%) brightness(1.05)}
.glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:4;
  background:conic-gradient(from 200deg,rgba(255,255,255,.95),rgba(255,255,255,.12) 22%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.12) 78%,rgba(255,255,255,.95));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(90% 120% at 12% 0%,rgba(255,255,255,.3),rgba(255,255,255,0) 55%)}

/* ---------- Dock: tamanhos e bounce de expansão ---------- */
.dock-wrap{position:absolute;z-index:5;left:0;right:0;bottom:84px;display:flex;justify-content:center;align-items:flex-end}
.dock{position:relative;width:520px;height:64px;border-radius:32px;
  transition:width .75s var(--spring),height .75s var(--spring),border-radius .6s var(--spring),transform .15s ease}
.dock.open{width:640px;height:340px;border-radius:28px}
.dock:not(.open):active{transform:scale(.97)}      /* aperta como botão físico */
.clip{position:absolute;inset:0;overflow:hidden;border-radius:inherit}

/* Avatar (mascote flat) desliza da pílula para o cabeçalho */
.av{position:absolute;z-index:2;left:17px;top:10px;width:44px;height:44px;object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 4px 8px rgba(242,106,33,.35));animation:bob 3.2s ease-in-out infinite;
  transition:left .7s var(--spring),top .7s var(--spring),width .7s var(--spring),height .7s var(--spring)}
.dock.open .av{left:16px;top:14px;width:36px;height:36px}
/* Mascote 3D espiando por cima do painel */
.m3{position:absolute;z-index:3;top:-100px;right:96px;width:120px;height:120px;object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 10px 14px rgba(90,50,20,.25));opacity:0;transform:translateY(46px) scale(.55);
  transition:opacity .25s ease,transform .4s ease}
.dock.open .m3{opacity:1;transform:none;transition:opacity .3s ease .22s,transform .8s var(--spring-hard) .22s}

/* Linha parada (pílula) */
.idle{position:absolute;left:0;top:0;right:0;height:62px;display:flex;align-items:center;gap:14px;padding:0 9px 0 75px;
  transition:opacity .2s ease,visibility 0s 0s}
.dock.open .idle,[data-mode=editing] .idle,[data-mode=done] .idle{opacity:0;visibility:hidden;transition:opacity .15s ease,visibility 0s .15s}
.ob{flex:1;height:62px;text-align:left;border:0;background:none;padding:0;cursor:pointer;font:400 15px 'Outfit',sans-serif;color:var(--mut)}
.kbd{font:500 12px 'JetBrains Mono',monospace;color:var(--mut);border:1px solid rgba(31,27,22,.16);border-radius:8px;padding:4px 8px}

/* Linha "trabalhando" (pílula durante a edição) */
.work{position:absolute;left:0;top:0;right:0;height:62px;display:flex;align-items:center;gap:12px;padding:0 9px 0 75px;
  font-size:15px;font-weight:500;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility 0s .15s}
[data-mode=editing] .dock:not(.open) .work,[data-mode=done] .dock:not(.open) .work{opacity:1;visibility:visible;transition:opacity .3s ease .25s,visibility 0s .25s}
.w-ed{display:inline-flex;align-items:center;gap:10px;flex:1}
.w-dn{display:none;align-items:center;gap:8px;flex:1;color:var(--or-deep)}
[data-mode=done] .w-ed{display:none}[data-mode=done] .w-dn{display:inline-flex}[data-mode=done] .stopbtn{visibility:hidden}
.dot{width:5px;height:5px;border-radius:50%;background:var(--or);animation:blink 1.2s ease-in-out infinite}
.dot:nth-child(2){animation-delay:.18s}.dot:nth-child(3){animation-delay:.36s}

/* Painel expandido: conteúdo entra em cascata com bounce */
.panel{position:absolute;left:0;top:0;width:640px;padding:16px;display:flex;flex-direction:column;gap:16px;visibility:hidden;transition:visibility 0s .4s}
.dock.open .panel{visibility:visible;transition:visibility 0s 0s}
.it{opacity:0;transform:translateY(14px);transition:opacity .2s ease,transform .25s ease}
.dock.open .it{opacity:1;transform:none;transition:opacity .35s ease,transform .7s var(--spring)}
.dock.open .it:nth-child(1){transition-delay:.12s}.dock.open .it:nth-child(2){transition-delay:.2s}
.dock.open .it:nth-child(3){transition-delay:.27s}.dock.open .it:nth-child(4){transition-delay:.34s}
.dock.open .it:nth-child(5){transition-delay:.41s}
.p-head{display:flex;align-items:center;gap:12px;padding-left:48px;height:44px}
.p-user{align-self:flex-end;max-width:420px;background:rgba(31,27,22,.06);border-radius:18px 18px 6px 18px;padding:12px 16px;font-size:14px;line-height:1.5}
.p-reply{max-width:520px;font-size:14px;line-height:1.6;color:var(--ink2)}
.p-actions{display:flex;gap:10px;flex-wrap:wrap}
.p-input{display:flex;align-items:center;gap:12px;height:56px;border-radius:999px;background:rgba(31,27,22,.04);border:1px solid rgba(31,27,22,.08);padding:0 6px 0 20px}

/* Botões e chips */
.ib{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:rgba(31,27,22,.06);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none}
.ib.main{background:var(--or-btn);color:#fff}
.chip{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;cursor:pointer;text-decoration:none;
  border:1px solid rgba(31,27,22,.12);background:#fff;color:var(--ink);font:600 13px 'Outfit',sans-serif}
.chip.main{background:var(--or-btn);border-color:var(--or-btn);color:#fff}

/* Estado "falando": cabeçalho com barras de áudio */
.st-s{display:none;align-items:center;color:var(--or-deep);font-weight:500}
[data-mode=speaking] .st-s{display:inline-flex}[data-mode=speaking] .st-r{display:none}
.eq{display:inline-flex;align-items:center;gap:3px;height:16px;margin-left:8px}
.eq i{display:block;width:3px;height:5px;border-radius:2px;background:var(--or);animation:eq .8s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.12s}.eq i:nth-child(3){animation-delay:.24s}.eq i:nth-child(4){animation-delay:.36s}

/* ---------- Mascote por estado ---------- */
[data-mode=speaking] .av{animation:talk .5s ease-in-out infinite}
[data-mode=editing] .av{animation:work .55s ease-in-out infinite}
.spk{position:absolute;left:39px;top:32px;width:0;height:0;z-index:3;opacity:0;pointer-events:none;transition:opacity .3s ease}
[data-mode=editing] .dock:not(.open) .spk{opacity:1}
.spk .ring{position:absolute;left:0;top:0;width:0;height:0;animation:spin 1.8s linear infinite}
.spk svg{position:absolute}

/* ---------- Fundo ambiente quando o agente fala ---------- */
.amb{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;overflow:hidden;transition:opacity .7s ease}
[data-mode=speaking] .amb{opacity:1}
.edge{position:absolute;inset:0;padding:5px;overflow:hidden;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.edge.soft{padding:14px;filter:blur(22px);opacity:.75}
.spin{position:absolute;left:50%;top:50%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;
  background:conic-gradient(#FF8A2B,#FFD08A,#FF6B8B,#FFB347,#FF8A2B);animation:spin 4.5s linear infinite}
.orb{position:absolute;border-radius:50%;filter:blur(30px)}
.o1{left:20%;bottom:-100px;width:460px;height:300px;background:radial-gradient(closest-side,rgba(255,106,40,.5),rgba(255,106,40,0));animation:d1 5s ease-in-out infinite alternate}
.o2{left:48%;bottom:-120px;width:420px;height:280px;background:radial-gradient(closest-side,rgba(255,190,90,.55),rgba(255,190,90,0));animation:d2 6s ease-in-out infinite alternate}
.o3{left:34%;bottom:-50px;width:380px;height:260px;background:radial-gradient(closest-side,rgba(255,110,140,.4),rgba(255,110,140,0));animation:d3 4.2s ease-in-out infinite alternate}

/* ---------- Destaque na nota enquanto o agente edita ---------- */
.hl{position:absolute;z-index:1;pointer-events:none;border-radius:10px;border-left:3px solid var(--or);opacity:0;transition:opacity .4s ease;
  left:var(--hl-x,0);top:var(--hl-y,0);width:var(--hl-w,0);height:var(--hl-h,0);
  background:linear-gradient(90deg,rgba(242,106,33,.05),rgba(242,106,33,.26),rgba(242,106,33,.05)) 0 0/200% 100%}
[data-mode=editing] .hl{opacity:1;animation:sweep 1.2s linear infinite}
[data-mode=done] .hl{opacity:0;transition:opacity 1.8s ease}
.tag{position:absolute;z-index:1;pointer-events:none;display:flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 8px;border-radius:999px;
  left:var(--tag-x,0);top:var(--tag-y,0);background:rgba(255,255,255,.92);border:1px solid rgba(31,27,22,.08);box-shadow:0 8px 20px rgba(90,50,20,.16);
  font:600 12px 'Outfit',sans-serif;opacity:0;transform:translateY(8px) scale(.9);transition:opacity .25s ease,transform .6s var(--spring)}
[data-mode=editing] .tag,[data-mode=done] .tag{opacity:1;transform:none}
.tag-dn{display:none}[data-mode=done] .tag-dn{display:inline}[data-mode=done] .tag-ed{display:none}

/* ---------- Keyframes ---------- */
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-4deg)}}
@keyframes talk{0%,100%{transform:scale(1)}50%{transform:scale(1.08,.94)}}
@keyframes work{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-4px) rotate(7deg) scale(1.08)}}
@keyframes blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes eq{0%,100%{height:5px}50%{height:15px}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sweep{to{background-position:-200% 0}}
@keyframes d1{to{transform:translate(120px,-50px) scale(1.2)}}
@keyframes d2{to{transform:translate(-140px,-70px) scale(.9)}}
@keyframes d3{to{transform:translate(60px,-90px) scale(1.25)}}

@media (prefers-reduced-motion:reduce){
  .dock,.av,.m3,.it,.idle,.work,.amb,.spin,.orb,.eq i,.dot,.hl,.tag,.spk .ring{transition-duration:.01s !important;transition-delay:0s !important;animation:none !important}}