/* =====================================================================================================
   PAUTA · visual comum (direção "Estúdio de IA", escolhida pelo Gabriel em 19/10/2026)
   Todas as páginas carregam este arquivo: o app (index), a conversa (nova.html) e os laboratórios (câmera, exibição...).
   Laboratório novo: <html class="dir-b pauta-lab" data-aba="criar">, <link rel="stylesheet" href="pauta.css">,
   <script src="pauta-topo.js"></script>; use .top (linha de contexto), .pill / .pill.on / .pill.pri, .chip / .chip.on, .insp (painel).
   Não defina cores próprias de botão: o ligado é branco com tinta escura, o resto é vidro.
   ===================================================================================================== */
@font-face{font-family:"Host Grotesk";src:url(HostGrotesk-latin.woff2) format("woff2");font-weight:300 800;font-display:swap}
html.dir-b{--vidro:rgba(16,18,16,.78);--vidro-forte:rgba(14,16,14,.9);--borda:rgba(255,255,255,.1);--claro:rgba(255,255,255,.08);--claro2:rgba(255,255,255,.14)}
html.pauta-lab{--bg:#0b1113;--panel:rgba(16,18,16,.78);--janela:rgba(255,255,255,.05);--card:rgba(255,255,255,.06);--text:#ecebe6;--muted:#9d9d96;--accent:#758638;--accent-bright:#9db34c;--accent-ink:#151a06;--active-bg:rgba(157,179,76,.16);--fill-1:rgba(255,255,255,.08);--fill-2:rgba(255,255,255,.14);--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px)}

/* ---------- a mesa (fundo) nas páginas que não carregam a pele do app ---------- */
html.pauta-lab body{background:#0b1113;color:var(--text);font-family:"Host Grotesk",-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased;position:relative;isolation:isolate;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
html.pauta-lab body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  linear-gradient(108deg,rgba(255,236,204,.11) 0%,rgba(255,236,204,.08) 18%,rgba(255,236,204,.03) 32%,rgba(0,0,0,0) 46%,rgba(0,4,8,.4) 100%),
  radial-gradient(ellipse 78% 62% at 36% 34%,rgba(0,0,0,0) 30%,rgba(0,2,6,.8) 100%),
  linear-gradient(rgba(5,9,5,.48),rgba(5,9,5,.48)),
  url(pele/tapete-largo.jpg) left top / 360vw auto no-repeat #1b2a14;filter:saturate(.92) contrast(1.05)}
html.pauta-lab body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.1;mix-blend-mode:overlay;background:url(pele/grao.png) 0 0/256px 256px repeat}
html.pauta-lab input, html.pauta-lab textarea{-webkit-user-select:text;user-select:text}

/* ---------- topo comum: logo com a luz da mesa, abas em pílula, atualizar ---------- */
html.dir-b .barra{position:sticky;top:var(--st,0px);z-index:21;height:56px;margin:0;padding:0 12px;border-radius:0;display:flex;align-items:center;gap:10px;background:linear-gradient(rgba(8,11,8,.7),rgba(8,11,8,0));box-shadow:none}
html.dir-b .barra .marca{font-size:19px;font-weight:800;letter-spacing:-.02em;border:0;padding:0;height:auto;margin:0;display:flex;align-items:center;gap:7px;cursor:pointer;color:var(--text);text-decoration:none;background:none}
html.dir-b .luz{width:7px;height:7px;border-radius:50%;background:#5d5f5a;display:inline-block;flex:none}
html.dir-b .luz.viva{background:var(--accent-bright,#9db34c);box-shadow:0 0 8px rgba(157,179,76,.7)}
html.dir-b .luz.trab{background:var(--accent-bright,#9db34c);animation:pt-luz 1s ease-in-out infinite alternate}
html.dir-b .luz.fora{background:#e0533d}
@keyframes pt-luz{from{opacity:.35}to{opacity:1}}
html.dir-b .barra .abas{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(10,12,10,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--borda);margin-left:auto}
html.dir-b .barra .abas button{border:0;background:transparent;color:var(--muted,#9d9d96);padding:6px 13px;font:600 13px/1.2 "Host Grotesk",system-ui,sans-serif;border-radius:999px;display:inline-flex;align-items:center;gap:5px;cursor:pointer;box-shadow:none}
html.dir-b .barra .abas button.on{background:var(--text,#ecebe6);color:#111}
html.dir-b .barra .abas .n{font-size:10px;font-weight:700;background:var(--accent-bright,#9db34c);color:var(--accent-ink,#151a06);border-radius:99px;padding:0 5px;line-height:15px}
html.dir-b .barra .sp{display:none}
html.dir-b .barra .acao{width:36px;height:36px;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(10,12,10,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--borda);margin:0;color:var(--text,#ecebe6);cursor:pointer;box-shadow:none}
html.dir-b .barra .acao svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html.dir-b .barra .acao.novo{background:var(--accent-bright,#9db34c);color:var(--accent-ink,#151a06)}

/* ---------- linha de contexto (abaixo do topo): voltar, título grande, ferramentas em pílula que rolam de lado ---------- */
html.dir-b .ctx-tit{font-size:24px;font-weight:700;letter-spacing:-.025em;line-height:1.1;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.dir-b .ctx-tit span{color:var(--muted,#9d9d96);font-weight:500;font-size:15px;letter-spacing:0;margin-left:8px}
html.dir-b .ferramentas{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;min-width:0}
html.dir-b .ferramentas::-webkit-scrollbar{display:none}

/* ---------- laboratórios: o .top deles vira a linha de contexto; botões e painéis de vidro ---------- */
/* a barra mora fora do <body> (filha do <html>); o body desce 56px e vira a "tela" dos position:fixed deles, então as medidas antigas (top:48px etc) continuam certas */
html.pauta-lab{font-family:"Host Grotesk",-apple-system,system-ui,sans-serif;background:#0b1113}
html.pauta-lab > .barra.pt{position:fixed;top:0;left:0;right:0;height:calc(56px + var(--st));padding-top:var(--st);z-index:50}
html.pauta-lab body{margin:calc(56px + var(--st)) 0 0;height:calc(100vh - 56px - var(--st));height:calc(100dvh - 56px - var(--st));transform:translateZ(0)}
html.pauta-lab body::before, html.pauta-lab body::after{top:calc(-56px - var(--st))}
html.pauta-lab body > .top{top:0;height:48px;padding-top:0;margin:0;padding-left:12px;padding-right:12px;display:flex;align-items:center;gap:6px;flex-wrap:nowrap;background:transparent;border:0;box-shadow:none}
html.pauta-lab body > .top .brand, html.pauta-lab body > .top .marca{font-size:24px;font-weight:700;letter-spacing:-.025em;color:var(--text);text-decoration:none;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.pauta-lab body > .top .brand a{display:none}
html.pauta-lab body > .top .brand > span, html.pauta-lab body > .top .marca > span{display:inline;color:var(--text);font-weight:700;margin:0}
html.pauta-lab body > .top .brand > span > span{color:var(--muted);font-weight:500;font-size:15px}
html.pauta-lab body > .top .brand > span::first-letter{text-transform:uppercase}
html.pauta-lab .pill, html.pauta-lab .chip, html.pauta-lab .rb, html.pauta-lab select.pill{background:var(--claro);border:1px solid rgba(255,255,255,.06);color:var(--text);border-radius:999px;box-shadow:none;font-family:inherit;font-weight:500}
html.pauta-lab .pill:hover, html.pauta-lab .chip:hover{background:var(--claro2)}
html.pauta-lab .pill.on, html.pauta-lab .chip.on, html.pauta-lab .rb.on, html.pauta-lab .pill.pri{background:var(--text);color:#111;border-color:transparent;font-weight:600}
html.pauta-lab .insp{background:var(--vidro);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--borda);border-radius:22px;box-shadow:0 14px 34px rgba(0,0,0,.45)}
html.pauta-lab .rail{background:rgba(10,12,10,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--borda);border-radius:999px}
html.pauta-lab .status{background:transparent}
html.pauta-lab .tela, html.pauta-lab .quadro{border-radius:18px}
html.pauta-lab body > .top .marca{flex:none}html.pauta-lab body > .top select{min-width:0;flex:1 1 0}