/* Jarvis · Chatfor (v2, escuro). Referências do Gabriel (26/10): tela só de assistente, esfera de luz verde no centro,
   fala no meio e uma pílula de voz embaixo. O verde da esfera é o único destaque. */
@font-face{font-family:'Plus Jakarta Sans';font-weight:500;font-display:swap;src:url(/fonts/PlusJakartaSans-Medium.ttf) format('truetype')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:600;font-display:swap;src:url(/fonts/PlusJakartaSans-SemiBold.ttf) format('truetype')}
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url(/fonts/Inter-Regular.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url(/fonts/Inter-Medium.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url(/fonts/Inter-SemiBold.woff2) format('woff2')}

:root{
  color-scheme:dark;
  --bg:#040605; --bg-2:#0b0f0c; --surface:#121713; --surface-2:#19201a;
  --ink:#eef3ee; --ink-2:#a8b2aa; --ink-3:#77827a; --apagado:#455047;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);
  --lime:#9ff06a; --menta:#4fd17f; --danger:#f07a64;
  --ease:cubic-bezier(.16,1,.3,1);
  --display:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%;color:var(--ink);font:400 15px/1.5 var(--body);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow:hidden;
  background:radial-gradient(110% 70% at 50% 36%,#0b170e 0,var(--bg) 64%) var(--bg)}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:999px}
.ic{width:20px;height:20px;display:block;flex:none}

.app{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:calc(env(safe-area-inset-top) + 8px) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
.topo{display:flex;align-items:center;justify-content:space-between;height:52px}
.estado{font:500 13px/1 var(--body);color:var(--ink-3);letter-spacing:.01em}
.app[data-estado=ouvindo] .estado{color:var(--lime)}
.topo-acoes{display:flex;gap:4px}
.ic-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);transition:background-color .2s var(--ease),transform .2s var(--ease),color .2s var(--ease)}
.ic-btn:hover{background:var(--line);color:var(--ink)}
.ic-btn:active{transform:scale(.94)}
.ic-btn.suave{background:var(--surface-2);color:var(--ink);width:40px;height:40px}
.ic-btn.cheio{background:var(--ink);color:var(--bg);width:40px;height:40px}

/* ── palco: esfera + fala ── */
.palco{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,5vh,56px);padding:8px 0 16px}
.orbe-btn{flex:none;width:clamp(200px,min(46vmin,44vh),440px);aspect-ratio:1;border-radius:50%;display:block;transition:transform .5s var(--ease)}
.orbe-btn:active{transform:scale(.97)}
.orbe{width:100%;height:100%;display:block;opacity:0;transition:opacity .8s var(--ease)}
.orbe.pronto{opacity:1}
.orbe.sem-webgl{opacity:1;border-radius:50%;background:radial-gradient(circle at 40% 36%,#effff0 0,#a6f06a 22%,#2fb862 52%,#063a1f 64%,transparent 72%)}
.dialogo{width:100%;max-width:640px;min-height:0;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;overflow-y:auto;scrollbar-width:none}
.dialogo::-webkit-scrollbar{display:none}
.voce{font:500 15px/1.45 var(--body);color:var(--ink-3);max-width:46ch;overflow-wrap:anywhere}
.fala{font:500 clamp(22px,3.1vw,32px)/1.32 var(--display);letter-spacing:-.018em;color:var(--ink);max-width:24ch;text-wrap:balance;overflow-wrap:anywhere}
.fala .p{color:var(--apagado);transition:color .18s linear}
.fala .p.dita{color:var(--ink)}

.progresso{display:flex;align-items:center;gap:10px;max-width:100%;padding:8px 8px 8px 14px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line);font:500 13px/1.2 var(--body);color:var(--ink-2)}
.progresso-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(52vw,380px)}
.giro{flex:none;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line-2);border-top-color:var(--lime);animation:gira .8s linear infinite}
.link{color:var(--ink);font:600 12.5px/1 var(--body);padding:7px 12px;border-radius:999px;background:var(--surface-2)}
.cartoes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cartao{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line);color:var(--ink);font:500 13px/1.2 var(--body);text-decoration:none;max-width:100%}
.cartao .ic{width:16px;height:16px;color:var(--lime)}
.cartao span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cartao.confirmar{background:var(--lime);color:#040605;box-shadow:none}
.cartao.confirmar .ic{color:#040605}

/* ── base: pílula de voz e campo de texto ── */
.base{display:flex;justify-content:center;padding:6px 0 calc(env(safe-area-inset-bottom) + 18px)}
.pilula,.campo{width:min(520px,100%);height:64px;border-radius:999px;display:flex;align-items:center;gap:10px;padding:0 12px;
  background:linear-gradient(180deg,#141b15,#0d120e);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px var(--line),0 18px 40px -20px rgba(0,0,0,.9)}
.onda{flex:1;min-width:0;height:36px;display:block}
.campo{padding-left:22px}
.campo input{flex:1;min-width:0;border:0;background:none;outline:none;font:400 16px/1 var(--body);color:var(--ink)}
.campo input::placeholder{color:var(--ink-3)}
#mic[data-modo=ouvindo]{background:var(--lime);color:#040605}

/* ── folhas (detalhes, painel do Claude, ajustes) ── */
.folha{margin:auto auto 0;width:100%;max-width:640px;max-height:86dvh;border:0;border-radius:28px 28px 0 0;background:var(--bg-2);color:var(--ink);padding:0;box-shadow:0 0 0 1px var(--line),0 -20px 60px -20px #000}
.folha::backdrop{background:rgba(0,0,0,.55)}
.folha[open]{animation:sobe .36s var(--ease) both}
.folha-corpo{padding:8px 20px calc(env(safe-area-inset-bottom) + 24px);overflow-y:auto;max-height:86dvh;overscroll-behavior:contain}
.folha-topo{display:flex;align-items:center;justify-content:space-between;height:56px;position:sticky;top:-8px;background:var(--bg-2);z-index:1}
.folha-topo h2{font:600 18px/1.2 var(--display);letter-spacing:-.015em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.painel-conteudo{color:var(--ink-2);font:400 14.5px/1.6 var(--body);overflow-wrap:anywhere}
.painel-conteudo>*+*{margin-top:10px}
.painel-conteudo strong{color:var(--ink);font-weight:600}
.painel-conteudo ul,.painel-conteudo ol{padding-left:18px}
.painel-conteudo a{color:var(--lime)}
.painel-conteudo code{font:500 12.5px/1.4 ui-monospace,Menlo,monospace;background:var(--surface);padding:2px 6px;border-radius:6px}
.painel-conteudo pre{background:var(--surface);border-radius:14px;padding:12px 14px;overflow-x:auto;font:500 12.5px/1.5 ui-monospace,Menlo,monospace;color:var(--ink);white-space:pre-wrap}
.tabela{overflow-x:auto;border-radius:14px;box-shadow:0 0 0 1px var(--line)}
.painel-conteudo table{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
.painel-conteudo th,.painel-conteudo td{padding:8px 12px;text-align:left;white-space:nowrap}
.painel-conteudo th{color:var(--ink);font-weight:600;background:var(--surface)}
.painel-conteudo tr+tr td{border-top:1px solid var(--line)}
.site{width:100%;height:62dvh;border:0;border-radius:16px;background:#fff}
.passo{display:grid;grid-template-columns:20px auto 1fr auto;gap:10px;align-items:center;min-height:34px;font-size:13.5px}
.passo .st{display:grid;place-items:center;color:var(--ink-3)}
.passo .st .ic{width:16px;height:16px}
.passo[data-st=ok] .st{color:var(--lime)}
.passo[data-st=erro] .st{color:var(--danger)}
.passo .grupo-p{font:600 12px/1 var(--body);color:var(--ink-2);padding:5px 8px;border-radius:999px;background:var(--surface);white-space:nowrap}
.passo .txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.passo time{font:500 12px/1 var(--body);color:var(--ink-3);font-variant-numeric:tabular-nums}

.grupo{border:0;padding:16px 0;box-shadow:inset 0 1px 0 var(--line);min-width:0}
.grupo legend{float:left;width:100%}
.grupo legend+*{clear:both}
.grupo legend,.rotulo{display:block;font:600 14px/1.3 var(--body);color:var(--ink);margin-bottom:10px}
.linha-switch{display:flex;align-items:center;justify-content:space-between;gap:16px}
.linha-switch .rotulo{margin-bottom:2px}
.ajuda{font:400 13px/1.5 var(--body);color:var(--ink-3)}
.segmento{display:flex;padding:3px;border-radius:999px;background:var(--surface);margin-bottom:8px}
.segmento label{flex:1;position:relative}
.segmento input{position:absolute;opacity:0;inset:0;cursor:pointer}
.segmento span{display:block;text-align:center;padding:10px 6px;border-radius:999px;font:500 13.5px/1.1 var(--body);color:var(--ink-3)}
.segmento input:checked+span{background:var(--surface-2);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--line-2)}
.segmento input:focus-visible+span{outline:2px solid var(--lime);outline-offset:1px}
input[role=switch]{appearance:none;width:50px;height:30px;border-radius:999px;background:var(--surface-2);position:relative;flex:none;cursor:pointer;transition:background-color .2s var(--ease)}
input[role=switch]::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--ink-3);transition:transform .24s var(--ease),background-color .24s var(--ease)}
input[role=switch]:checked{background:#22402a}
input[role=switch]:checked::after{transform:translateX(20px);background:var(--lime)}
.pilula-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;background:var(--surface-2);color:var(--ink);font:600 14px/1 var(--body);white-space:nowrap;box-shadow:0 0 0 1px var(--line);transition:transform .2s var(--ease)}
.pilula-btn:active{transform:scale(.97)}
.pilula-btn.cheio{background:var(--lime);color:#040605;box-shadow:none}
.botoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.roteiro{margin:10px 0;padding:12px 14px;border-radius:16px;background:var(--surface);font:500 15px/1.5 var(--display);color:var(--ink)}
.passos-instalar{padding-left:20px;color:var(--ink-2);font-size:13.5px;display:grid;gap:6px;margin:4px 0 12px}
.passos-instalar strong{color:var(--ink)}
.codigo{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-radius:16px;background:var(--surface);margin-bottom:12px}
.codigo code{flex:1;min-width:0;font:500 12px/1.45 ui-monospace,Menlo,monospace;color:var(--lime);overflow-wrap:anywhere}
.lista-lembretes{list-style:none;display:grid;gap:4px}
.lista-lembretes li:not(.ajuda){display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2)}
.lista-lembretes li span{flex:1}
.lista-lembretes strong{color:var(--ink);font-weight:600;margin-right:4px}
.sair{margin-top:8px;padding:12px 0;color:var(--danger);font:600 14px/1 var(--body)}

.login{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);padding:24px 16px}
.login-corpo{width:100%;max-width:340px;display:grid;gap:10px}
.login-corpo h1{font:600 30px/1.1 var(--display);letter-spacing:-.03em;margin-bottom:12px}
.login-corpo label{font:600 13px/1 var(--body);color:var(--ink-2)}
.login-corpo input{height:52px;border-radius:16px;border:0;background:var(--surface);box-shadow:0 0 0 1px var(--line-2);padding:0 16px;font-size:16px}
.login-corpo input:focus{outline:none;box-shadow:0 0 0 1.5px var(--lime)}
.login-corpo .pilula-btn{height:52px;margin-top:6px}
.erro{min-height:18px;color:var(--danger);font:500 13px/1.3 var(--body)}
.aviso{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 96px);transform:translateX(-50%);max-width:calc(100% - 32px);padding:10px 16px;border-radius:999px;background:var(--surface-2);color:var(--ink);font:500 13.5px/1.3 var(--body);box-shadow:0 0 0 1px var(--line-2);animation:entra .3s var(--ease) both;z-index:5}

/* tablet/celular deitado: esfera à esquerda, fala à direita */
@media (orientation:landscape) and (min-width:700px){
  .palco{flex-direction:row;gap:clamp(24px,6vw,96px);padding:0 clamp(0px,4vw,64px)}
  .orbe-btn{width:clamp(200px,min(40vw,62vh),480px)}
  .dialogo{align-items:flex-start;text-align:left;max-width:560px;max-height:100%}
  .fala{max-width:22ch}
  .cartoes{justify-content:flex-start}
  .folha{margin:auto;border-radius:28px;max-width:720px}
}
@keyframes entra{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes sobe{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}