/* Site dos Bots: todas as páginas (início, roadmap, ajuda, privacidade, termos, fonte e a volta do Frame.io).
   Na linha das referências que o Pedro escolheu (Grok Bot, MausBot, OpenBot, agentes.chat, dots): fundo escuro e
   sóbrio, título centralizado com o rosto do mascote, o app de verdade montado na página e cartões com pedaços do app.
   Uma família só: Inter, servida pelo próprio site. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


:root {
  --bg: #0a0a0b;
  --surface: #141416;      /* cartões */
  --surface-2: #1c1c1f;    /* dentro dos cartões, botões secundários */
  --surface-3: #26262a;
  --ink: #f5f5f7;
  --muted: #a1a1aa;
  --soft: #8b8b94;
  --blue: #38bdf8;         /* o mascote do ícone */
  --go: #4ade80;
  --wait: #fbbf24;
  --link: #8fd6fb;

  --font: "Inter", -apple-system, system-ui, sans-serif;
  --app: -apple-system, system-ui, "Inter", sans-serif;   /* os pedaços do app usam a letra do app */

  --margin: clamp(1rem, 3vw, 2rem);
  --max: 1200px;
  --section: clamp(5rem, 10vw, 9rem);
  --radius: 28px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
/* Fundo com vida, sem tirar a atenção do conteúdo: luzes nas cores dos mascotes espalhadas pela página (a mais forte
   no topo), manchas de pontos que somem nas bordas e um grão leve em tudo. As posições em % acompanham a altura
   de cada página. Fica atrás de tudo e não recebe clique. */
body { position: relative; background-color: var(--bg); background-repeat: no-repeat; background-image:
  radial-gradient(64rem 40rem at 50% -12rem, rgb(56 189 248 / 0.26), transparent 70%),
  radial-gradient(32rem 26rem at 14% 0, rgb(244 114 182 / 0.13), transparent 70%),
  radial-gradient(32rem 26rem at 86% 2rem, rgb(74 222 128 / 0.11), transparent 70%),
  radial-gradient(44rem 34rem at 92% 22%, rgb(56 189 248 / 0.10), transparent 70%),
  radial-gradient(40rem 32rem at 4% 38%, rgb(251 191 36 / 0.07), transparent 70%),
  radial-gradient(44rem 34rem at 96% 56%, rgb(244 114 182 / 0.08), transparent 70%),
  radial-gradient(40rem 32rem at 6% 74%, rgb(74 222 128 / 0.07), transparent 70%),
  radial-gradient(60rem 36rem at 50% 102%, rgb(56 189 248 / 0.12), transparent 70%); }
body::before, body::after { content: ""; pointer-events: none; z-index: -1; }
body::before { position: absolute; inset: 0;
  background: radial-gradient(circle, rgb(255 255 255 / 0.09) 1px, transparent 1.6px) 50% 0 / 26px 26px;
  --spots: radial-gradient(70rem 50rem at 50% 0, #000 20%, transparent 70%),
    radial-gradient(34rem 28rem at 8% 34%, rgb(0 0 0 / 0.6), transparent 70%),
    radial-gradient(34rem 28rem at 94% 60%, rgb(0 0 0 / 0.6), transparent 70%),
    radial-gradient(50rem 30rem at 50% 100%, rgb(0 0 0 / 0.7), transparent 70%);
  -webkit-mask-image: var(--spots); mask-image: var(--spots); }
body::after { content: ""; pointer-events: none; z-index: -1; }
body::before { position: absolute; inset: 0 0 auto; height: min(62rem, 120svh);
  background: radial-gradient(circle, rgb(255 255 255 / 0.09) 1px, transparent 1.6px) 50% 0 / 26px 26px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 0, #000 20%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 0, #000 20%, transparent 100%); }
body::after { position: fixed; inset: 0; opacity: 0.07; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target, [id] { scroll-margin-top: 5rem; }
/* Os links do menu deslizam até a seção em vez de pular; quem pede menos movimento continua pulando. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
::selection { background: var(--blue); color: #0a0a0b; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
[hidden] { display: none !important; }   /* nenhum display de botão ou cartão vence o hidden */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
.wrap { width: min(var(--max), 100% - 2 * var(--margin)); margin-inline: auto; }
.center { text-align: center; }
.title { font-size: clamp(2rem, 1.2rem + 2.8vw, 3.25rem); line-height: 1.08; letter-spacing: -0.035em; }
.sub { margin-top: 1rem; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); color: var(--muted); max-width: 40rem; }
.center .sub { margin-inline: auto; }
.section { padding-block: var(--section) 0; }
/* O espaço de cima da seção não conta: o link para no conteúdo, logo abaixo da barra. */
.section[id] { scroll-margin-top: calc(5rem - var(--section)); }

/* ---------- botões: branco o principal, cinza o segundo ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 3rem; padding: 0 1.4rem; border-radius: 999px; background: var(--ink); color: #0a0a0b; font-weight: 500; font-size: 1rem; text-decoration: none; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.button:active { transform: scale(0.96); }
.button svg { width: 1.05em; height: 1.05em; }
.button--quiet { background: var(--surface-2); color: var(--ink); }
.button--small { min-height: 2.25rem; padding: 0 1rem; font-size: 0.9375rem; }
.button--big { min-height: 3.25rem; padding: 0 1.6rem; font-size: 1.0625rem; }
/* Baixar: o clique vira uma barrinha que enche e termina verde com ✓ (o download segue normal). */
.button { position: relative; }
.button.is-loading, .button.is-done { pointer-events: none; }
.dl__bar { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; background: rgb(10 10 11 / 0.12); transform-origin: left; }
.button > span:not(.peek):not(.dl__bar) { position: relative; }
@media (prefers-reduced-motion: no-preference) { .dl__bar { animation: fillbar 1.1s var(--ease-out) both; } }
@keyframes fillbar { from { transform: scaleX(0); } }
.button.is-done { background: var(--go); color: #062a12; }
.dl__check { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; background: #062a12; color: var(--go); font-size: 0.8em; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .button.is-done .dl__check { animation: pop 420ms cubic-bezier(0.3, 1.6, 0.5, 1); } }
/* Um mascotinho mora atrás dos botões principais e espia pela borda de cima no hover (e comemora no clique). */
.peek { position: absolute; bottom: 100%; left: 50%; width: 2.6rem; height: 3.4rem; margin-left: -1.3rem; overflow: hidden; pointer-events: none; }
.peek > span { position: absolute; left: 0; bottom: 0; transform: translateY(100%); transition: transform 420ms cubic-bezier(0.3, 1.5, 0.5, 1); }
.peek svg { width: 2.6rem; height: 2.6rem; }
[data-peek]:hover .peek > span, [data-peek]:focus-visible .peek > span, [data-peek].is-loading .peek > span, [data-peek].is-done .peek > span { transform: translateY(34%); }
/* Setas que andam e o ícone da Apple que dá um pulinho no hover. */
.arrow { display: inline-block; transition: transform var(--t-ui) var(--ease-out); }
.button > svg { transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) {
  .button:hover .arrow { transform: translateX(4px); }
  .button:hover .arrow--down { transform: translateY(3px); }
  .button:hover > svg { transform: translateY(-2px) rotate(-6deg); }
}
/* O magnético mexe na propriedade translate (o clique continua usando transform); volta suave quando o mouse sai. */
[data-magnet] { transition: translate 260ms var(--ease-out), transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: #ffffff; }
  .button--quiet:hover { background: var(--surface-3); }
}

/* ---------- barra ---------- */
/* No topo a barra é transparente (a luz passa); ao rolar ganha um vidro escuro para o texto não brigar com o conteúdo. */
.bar { position: sticky; top: 0; z-index: 20; transition: background-color var(--t-ui) ease, box-shadow var(--t-ui) ease; }
.bar.is-stuck { background: rgb(10 10 11 / 0.72); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 rgb(255 255 255 / 0.06); }
.bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.bar__name { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1.125rem; letter-spacing: -0.02em; text-decoration: none; }
.bar__name svg { width: 1.75rem; height: 1.75rem; }
/* The links in one pill (easyui's pill navigation): each one a pill of its own on hover, the page you're on lit. */
.bar__links { display: flex; align-items: center; gap: 0.125rem; font-size: 0.9375rem; padding: 0.3rem; border-radius: 999px; background: rgb(28 28 31 / 0.72); border: 1px solid var(--surface-3); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.bar__links a:not(.button) { text-decoration: none; color: var(--muted); padding: 0.45rem 0.85rem; border-radius: 999px; transition: color var(--t-hover) ease, background-color var(--t-hover) ease; }
.bar__links a:not(.button):hover, .bar__links a[aria-current] { color: var(--ink); background: var(--surface-3); }
.bar__links .button { margin-left: 0.25rem; }
@media (max-width: 760px) { .bar__links .wide { display: none; } }

/* ---------- mascotes (desenhados aqui, como no app) ---------- */
.mascot { overflow: visible; }
.mascot .pupil { transition: transform 120ms linear; }
.mascot .lid { transform-box: fill-box; transform-origin: center; transform: scaleY(0); }
@media (prefers-reduced-motion: no-preference) { .mascot.is-blinking .lid { animation: blink 180ms ease; } }
@keyframes blink { 50% { transform: scaleY(1); } }
/* Mascotes vivos: amassam quando tocados, pulam quando recebem um pedido e balançam enquanto trabalham (na demo do app,
   o Bot que está "Comparando voos…" balança o tempo todo). O pulo e o amassado mexem no desenho inteiro; o balanço,
   só no corpo, para os dois poderem acontecer juntos. Quem pede menos movimento vê os mascotes parados. */
.mascot { cursor: pointer; transform-origin: 50% 92%; }
.mascot__body { transform-box: view-box; transform-origin: 50% 92%; }
/* As mãos ficam escondidas embaixo; quando o Bot fica com vergonha (senha), sobem e tapam os olhos. */
.mascot .hands { transform: translateY(46px); opacity: 0; transition: transform 380ms cubic-bezier(0.3, 1.4, 0.5, 1), opacity 200ms ease; }
.mascot.is-shy .hands { transform: none; opacity: 1; }
.mascot.is-shy .lid { transform: scaleY(1); }
@media (prefers-reduced-motion: no-preference) {
  .mascot.is-squished { animation: squish 560ms cubic-bezier(0.3, 0.7, 0.4, 1); }
  .mascot.is-hopping { animation: hop 680ms cubic-bezier(0.3, 0.7, 0.4, 1); }
  .app__bot.is-working .mascot__body, .app__head.is-working .mascot__body, .app__bot:has(small[data-tone="go"]) .mascot__body { animation: sway 1.3s ease-in-out infinite; }
}
@keyframes squish { 0% { transform: none; } 22% { transform: scale(1.24, 0.72); } 50% { transform: scale(0.9, 1.12); } 72% { transform: scale(1.05, 0.96); } 100% { transform: none; } }
@keyframes hop { 0% { transform: none; } 14% { transform: scale(1.14, 0.84); } 42% { transform: translateY(-36%) scale(0.92, 1.1); } 66% { transform: scale(1.12, 0.88); } 84% { transform: scale(0.97, 1.03); } 100% { transform: none; } }
@keyframes sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg) translateY(-3%); } }

/* ---------- entrada das partes de cada seção ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(20px); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .rv.is-in { opacity: 1; transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- iPhone desenhado em CSS em volta das telas reais ---------- */
.phone { position: relative; width: var(--w, 280px); aspect-ratio: 1206 / 2622; padding: calc(var(--w, 280px) * 0.035); border-radius: calc(var(--w, 280px) * 0.17); background: #000; border: max(3px, calc(var(--w, 280px) * 0.014)) solid #3a3a3e; flex: none; }
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--w, 280px) * 0.135); overflow: hidden; background: #161616; }
.phone__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ================= início ================= */

/* Topo: "Conheça os Bots", com o rosto do mascote no meio do título. */
.hero { padding-block: clamp(4rem, 9vh, 7rem) 0; text-align: center; }
.hero h1 { font-size: clamp(2.75rem, 1rem + 5.6vw, 5.75rem); line-height: 1; letter-spacing: -0.045em; }
.face { display: inline-block; width: 0.92em; height: 0.92em; vertical-align: -0.1em; margin-inline: 0.04em; }
.face svg { width: 100%; height: 100%; }
.hero > p:first-of-type { margin: 1.5rem auto 0; max-width: 36rem; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); color: var(--muted); }
.hero__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.hero__note { margin-top: 1rem; font-size: 0.875rem; color: var(--soft); }

/* O app montado na página: a lista de Bots e a conversa (com a letra e as cores do próprio app). */
.app { margin-top: clamp(3rem, 6vw, 4.5rem); border-radius: 22px; background: #161616; overflow: hidden; font-family: var(--app); font-size: clamp(14px, 0.45rem + 0.45vw, 16px); line-height: 1.4; color: #ececec; display: grid; grid-template-columns: minmax(260px, 21em) 1fr; min-height: min(46em, 82svh); text-align: left; }
.app__side { background: #101010; padding: 1em 0.8em; display: flex; flex-direction: column; gap: 0.2em; }
.app__top { display: flex; align-items: center; gap: 0.5em; padding: 0.3em 0.6em 1.1em; }
.app__top i { width: 0.85em; height: 0.85em; border-radius: 50%; background: #ff5f57; }
.app__top i:nth-child(2) { background: #febc2e; }
.app__top i:nth-child(3) { background: #28c840; }
.app__search { margin: 0 0.3em 0.8em; padding: 0.55em 0.8em; border-radius: 0.6em; background: #1d1d1d; color: #8a8a8a; }
.app__bot { display: flex; align-items: center; gap: 0.75em; width: 100%; padding: 0.65em; border-radius: 0.75em; text-align: left; transition: background-color var(--t-hover) ease; }
.app__bot svg { width: 2.9em; height: 2.9em; }
.app__bot span:first-child { flex: none; }
.app__bot b { display: block; font-weight: 600; }
.app__bot small { display: block; font-size: 0.9em; color: #a3a3a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 15em; }
.app__bot small[data-tone="go"] { color: var(--go); }
.app__bot small[data-tone="wait"] { color: var(--wait); }
.app__bot small[data-tone="hey"] { color: var(--link); }
.app__bot[aria-selected="true"] { background: #232323; }
@media (hover: hover) and (pointer: fine) { .app__bot:not([aria-selected="true"]):hover { background: #1a1a1a; } }
.app__main { position: relative; display: flex; flex-direction: column; min-width: 0; }
.app__head { display: flex; align-items: center; justify-content: center; gap: 0.6em; padding: 1em; font-weight: 600; font-size: 1.05em; }
.app__head svg { width: 1.7em; height: 1.7em; }
.app__head small { font-weight: 400; color: #a3a3a3; }
.app__chat { flex: 1; padding: 0.6em clamp(1em, 4vw, 3.5em) 1.2em; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.85em; }
.app__chat > * { animation: rise 420ms var(--ease-out) both; }
.msg-me { align-self: flex-end; max-width: 75%; padding: 0.7em 1.05em; border-radius: 1.3em; background: #3558c0; color: #fff; }
.msg-bot { align-self: flex-start; max-width: 80%; padding: 0.7em 1.05em; border-radius: 1.3em; background: #262626; }
.msg-card { align-self: flex-start; width: min(100%, 32em); padding: 1.05em; border-radius: 1em; background: #222; }
.msg-card strong { display: block; font-size: 1.04em; }
.msg-card p { color: #a3a3a3; margin-top: 0.15em; }
.msg-card__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; margin-top: 0.9em; }
.msg-card__buttons button { min-height: 2.8em; border-radius: 0.65em; font-weight: 600; transition: transform var(--t-press) var(--ease-out); }
.msg-card__buttons button:active { transform: scale(0.97); }
.msg-card__buttons .yes { background: var(--wait); color: #1a1405; }
.msg-card__buttons .no { background: #333; color: #fff; }
.msg-note { align-self: flex-start; color: var(--go); font-size: 0.95em; }

/* Bots cochilando na lista: olhos fechados, cor apagada e uns "z" subindo. */
.app__bot > span:first-child { position: relative; }
.app__bot[data-sleep] .mascot .lid { transform: scaleY(1); }
.app__bot[data-sleep] .mascot { filter: saturate(0.45) brightness(0.8); }
.app__bot .mascot { transition: filter 400ms ease; }
.app__bot[data-sleep] > span:first-child::before, .app__bot[data-sleep] > span:first-child::after { content: "z"; position: absolute; right: -0.3em; top: -0.35em; font-size: 0.95em; font-weight: 700; color: #b4b4bd; pointer-events: none; }
.app__bot[data-sleep] > span:first-child::after { right: -0.75em; top: -0.95em; font-size: 0.7em; }
@media (prefers-reduced-motion: no-preference) {
  .app__bot[data-sleep] > span:first-child::before, .app__bot[data-sleep] > span:first-child::after { animation: zzz 2.4s ease-in-out infinite; }
  .app__bot[data-sleep] > span:first-child::after { animation-delay: -1.2s; }
  .app__bot.is-curious .mascot__body { animation: curious 700ms var(--ease-out) both; }
}
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(4px, -8px); } }
@keyframes curious { to { transform: rotate(-12deg) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .app__bot.is-curious .mascot__body { transform: rotate(-12deg); } }
.msg-note[data-tone="no"] { color: #a3a3a3; }
.app__composer { margin: 0 clamp(1em, 4vw, 3.5em) 1.3em; display: flex; align-items: center; gap: 0.6em; padding: 0.45em 0.45em 0.45em 1.2em; border-radius: 999px; background: #222; }
.app__composer input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #ececec; font-size: 1em; }
.app__composer input::placeholder { color: #8a8a8a; }
.app__composer button { width: 2.4em; height: 2.4em; border-radius: 50%; background: #3558c0; color: #fff; font-size: 1em; transition: transform var(--t-press) var(--ease-out); }
.app__composer button:active { transform: scale(0.9); }
.app-caption { margin-top: 1rem; text-align: center; font-size: 0.875rem; color: var(--soft); }
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; min-height: 0; font-size: 15px; }
  .app__side { flex-direction: row; overflow-x: auto; gap: 4px; padding: 10px; scrollbar-width: none; }
  .app__top, .app__search { display: none; }
  .app__bot { flex-direction: column; width: 88px; flex: none; gap: 4px; text-align: center; padding: 8px 4px; }
  .app__bot > span:last-child { width: 100%; }
  .app__bot small { display: none; }
  .app__bot b { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app__chat { min-height: 340px; }
}

/* Cartão grande: falar com Bots como se fala com a equipe, e os mascotes à direita. */
.team { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 2rem; border-radius: var(--radius); background: var(--surface); padding: clamp(2rem, 5vw, 4rem); overflow: hidden; min-height: 26rem; }
.team p { margin-top: 1rem; color: var(--muted); font-size: 1.125rem; max-width: 30rem; }
/* Three Bots' cards in a stack that fans out when you point at the section (easyui's stacked cards). */
.deck { position: relative; min-height: 22rem; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; }
.deck__card { grid-area: 1 / 1; width: min(22rem, 100%); box-sizing: border-box; display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.25rem; border-radius: 1.5rem; background: var(--surface-2); border: 1px solid var(--surface-3); box-shadow: 0 18px 40px rgb(0 0 0 / 0.35); transition: transform var(--t-reveal) var(--ease-out), background-color var(--t-ui) ease; }
.deck__card > span { width: 3rem; flex: none; }
.deck__card svg { width: 100%; height: auto; }
.deck__card b { display: block; font-weight: 600; letter-spacing: -0.01em; }
.deck__card > div { min-width: 0; }
.deck__card small { display: block; color: var(--muted); font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck__card small[data-tone="go"] { color: var(--go); }
.deck__card small[data-tone="wait"] { color: var(--wait); }
/* At rest a stack, each card behind showing its Bot's name; pointed at, they line up like the app's list. */
.deck__card:nth-child(1) { transform: translateY(-2.9rem) scale(0.9); background: var(--surface); }
.deck__card:nth-child(2) { transform: translateY(-1.45rem) scale(0.95); }
.deck__card:nth-child(3) { transform: translateY(0); z-index: 2; background: var(--surface-3); }
.team:hover .deck__card:nth-child(1), .team:focus-within .deck__card:nth-child(1) { transform: translateY(-5.6rem); }
.team:hover .deck__card:nth-child(2), .team:focus-within .deck__card:nth-child(2) { transform: translateY(0); }
.team:hover .deck__card:nth-child(3), .team:focus-within .deck__card:nth-child(3) { transform: translateY(5.6rem); }
@media (prefers-reduced-motion: reduce) { .deck__card { transition: none; } }
/* No pointer to hover with (a phone): the list, open. */
@media (hover: none) {
  .deck .deck__card:nth-child(1) { transform: translateY(-5.6rem); }
  .deck .deck__card:nth-child(2) { transform: translateY(0); }
  .deck .deck__card:nth-child(3) { transform: translateY(5.6rem); }
}
.cast { position: relative; height: 100%; min-height: 18rem; }
.cast span { position: absolute; }
.cast svg { width: 100%; height: auto; }
.cast span:nth-child(1) { width: 42%; left: 30%; top: 18%; z-index: 2; }
.cast span:nth-child(2) { width: 26%; left: 8%; top: 4%; }
.cast span:nth-child(3) { width: 24%; right: 4%; top: 0; }
.cast span:nth-child(4) { width: 22%; left: 6%; bottom: 0; }
.cast span:nth-child(5) { width: 22%; right: 8%; bottom: 2%; }
@media (max-width: 860px) { .team { grid-template-columns: 1fr; } .cast { min-height: 16rem; } }

/* Recursos: cartões escuros, cada um com um pedaço do app. */
.features { margin-top: 0.75rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.feature { border-radius: var(--radius); background: var(--surface); padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem) 0; overflow: hidden; display: flex; flex-direction: column; }
.feature h3 { font-size: 1.375rem; letter-spacing: -0.02em; }
.feature > p { margin-top: 0.5rem; color: var(--muted); max-width: 32rem; }
.feature__shot { margin-top: 2rem; flex: 1; display: flex; justify-content: center; align-items: flex-start; min-height: 16rem; max-height: 22rem; overflow: hidden; }
.feature__shot .phone { --w: min(15rem, 58vw); }
.feature__shot--end { align-items: flex-end; }
/* "Ligue para um Bot": cartão largo, texto à esquerda e a ligação à direita, com a onda que mexe quando o Bot fala. */
.feature--wide h3 + p { margin-top: 0.5rem; color: var(--muted); max-width: 32rem; }
.feature--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.call { display: grid; justify-items: center; gap: 1rem; padding: 1.5rem; border-radius: 22px; background: var(--surface-2); font-family: var(--app); color: #ececec; text-align: center; }
.call__who { display: flex; align-items: center; gap: 10px; text-align: left; }
.call__who svg { width: 44px; height: 44px; }
.call__who b { display: block; font-size: 15px; }
.call__time { display: block; font-size: 13px; color: var(--go); font-variant-numeric: tabular-nums; }
.wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 56px; width: 100%; }
.wave i { width: 4px; height: 100%; border-radius: 4px; background: var(--wait); transform: scaleY(calc(0.12 + 0.5 * var(--h, 0.4))); opacity: 0.85; transition: background-color var(--t-ui) ease; }
.call[data-who="me"] .wave i { background: #7aa2ff; }
.wave i:nth-child(3n) { --h: 0.9; } .wave i:nth-child(3n+1) { --h: 0.5; } .wave i:nth-child(4n) { --h: 0.25; } .wave i:nth-child(5n) { --h: 0.7; }
@media (prefers-reduced-motion: no-preference) {
  .call.is-live .wave i { animation: talk calc(700ms + var(--i) * 23ms) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -97ms); }
  .call.is-live[data-who="bot"] .call__who .mascot__body { animation: sway 1.3s ease-in-out infinite; }
}
@keyframes talk { from { transform: scaleY(0.12); } to { transform: scaleY(calc(0.25 + 0.75 * var(--h, 0.5))); } }
.call__line { min-height: 3em; max-width: 26rem; font-size: 15px; line-height: 1.45; }
.call__line b { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 2px; }
.call__btns { display: flex; gap: 1.25rem; }
.call__btns span { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #2c2c30; color: #fff; }
.call__btns .end { background: #e5484d; }
.call__btns svg { width: 22px; height: 22px; }
@media (max-width: 760px) { .feature--wide { grid-template-columns: 1fr; } }
/* "Seus apps": os nomes dos apps numa esfera que gira devagar; os de trás ficam menores e apagados. */
.feature__shot--globe { align-items: center; max-height: none; padding-bottom: clamp(1.5rem, 3vw, 2.25rem); overflow: visible; }
.globe { position: relative; width: min(100%, 24rem); aspect-ratio: 1; isolation: isolate; }   /* isolate: a ordem de frente/trás fica dentro do globo, sem passar por cima da barra */
.globe > span { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); font-family: var(--app); font-size: 13px; font-weight: 500; color: #ececec; white-space: nowrap; will-change: transform, opacity; }
.globe > span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.feature__ui { margin-top: 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); flex: 1; display: grid; align-content: center; gap: 8px; font-family: var(--app); font-size: 14px; color: #ececec; }
.ui-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.ui-row svg { width: 30px; height: 30px; }
.ui-row > span:first-child { flex: none; }
.ui-row b { font-weight: 600; }
.ui-row small { display: block; color: #a3a3a3; font-size: 12.5px; }
.ui-row em { margin-left: auto; font-style: normal; font-size: 12.5px; color: #a3a3a3; white-space: nowrap; }
.ui-row em[data-tone="go"] { color: var(--go); }
@media (max-width: 860px) { .features { grid-template-columns: 1fr; } }

/* Uma função para cada Bot: as funções como fichas, a descrição troca. */
.jobs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.chips { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips button { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 1rem 0 0.5rem; border-radius: 999px; background: var(--surface-2); font-size: 0.9375rem; color: var(--muted); transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.chips button svg { width: 26px; height: 26px; }
.chips [aria-selected="true"] { background: var(--ink); color: #0a0a0b; }
@media (hover: hover) and (pointer: fine) { .chips button:not([aria-selected="true"]):hover { background: var(--surface-3); color: var(--ink); } }
.job { border-radius: var(--radius); background: var(--surface); padding: clamp(1.5rem, 3vw, 2.25rem); min-height: 20rem; }
.job h3 { font-size: 1.375rem; letter-spacing: -0.02em; }
.job > p { margin-top: 0.5rem; color: var(--muted); }
.job ul { margin-top: 1.5rem; padding: 0; list-style: none; display: grid; gap: 8px; font-family: var(--app); font-size: 14px; }
.job li { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); display: flex; justify-content: space-between; gap: 1rem; }
.job li span { color: #a3a3a3; white-space: nowrap; }
.job > * { animation: rise 380ms var(--ease-out) both; }
/* O Bot trabalhando passo a passo: cada linha entra girando, vira ✓ (ou fica amarela quando pede você). */
.job__head { display: flex; align-items: center; gap: 0.6rem; }
.job__head svg { width: 2.25rem; height: 2.25rem; }
.job__head > span:first-child { flex: none; }
.job__state { margin-left: auto; font-family: var(--app); font-size: 13px; color: var(--muted); white-space: nowrap; }
.job__state[data-tone="go"] { color: var(--go); }
.job__state[data-tone="wait"] { color: var(--wait); }
.job li { justify-content: flex-start; align-items: center; transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out), background-color var(--t-ui) ease; }
.js .job li:not(.is-in) { opacity: 0; transform: translateY(8px); }   /* sem JavaScript, a lista aparece pronta */
.job li span { margin-left: auto; }
.job li i { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgb(255 255 255 / 0.15); border-top-color: var(--go); display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .job li.is-in:not(.is-done) i { animation: spin 0.9s linear infinite; } }
.job li.is-done i { border: 0; background: rgb(74 222 128 / 0.16); color: var(--go); }
.job li.is-done i::before { content: "✓"; }
.job li.is-done[data-step="ask"] { background: rgb(251 191 36 / 0.1); }
.job li.is-done[data-step="ask"] i { background: rgb(251 191 36 / 0.18); color: var(--wait); }
.job li.is-done[data-step="ask"] i::before { content: "?"; }
@media (max-width: 860px) { .jobs { grid-template-columns: 1fr; } }

/* No iPhone: três telas lado a lado. */
.phones { margin-top: 3rem; display: flex; justify-content: center; align-items: flex-end; gap: clamp(1rem, 3vw, 2.5rem); }
.phones .phone { --w: min(17rem, 28vw); }
.phones .phone:nth-child(2) { --w: min(19rem, 31vw); }
@media (max-width: 640px) { .phones .phone:nth-child(1), .phones .phone:nth-child(3) { display: none; } .phones .phone:nth-child(2) { --w: 70vw; } }

/* Cérebros: o que você já usa. */
/* Cérebros: o ícone de cada programa (o mesmo que o app mostra), com o nome embaixo, como numa pasta de apps.
   No hover o ícone sobe um pouco, como no Dock. */
.brains { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 3vw, 2.25rem); }
.brains li { display: grid; justify-items: center; gap: 0.6rem; width: 5.5rem; font-size: 0.875rem; font-weight: 500; color: var(--muted); text-align: center; }
.brains img { width: 4rem; height: 4rem; border-radius: 22%; box-shadow: 0 6px 18px rgb(0 0 0 / 0.35), inset 0 0 0 1px rgb(255 255 255 / 0.06); transition: transform 320ms cubic-bezier(0.3, 1.5, 0.5, 1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .brains li:hover img { transform: translateY(-6px) scale(1.08); } }
.brains li:hover { color: var(--ink); }
.brains img.on-white { background: #fff; padding: 4px; }   /* o ícone do Ollama é redondo: ganha o quadrado branco como os outros */

/* Instalar: dois cartões. */
.install { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.install__card { border-radius: var(--radius); background: var(--surface); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 1rem; }
.install__card h3 { font-size: 1.375rem; letter-spacing: -0.02em; }
.install__card ol { padding-left: 1.2rem; color: var(--muted); display: grid; gap: 0.5rem; }
.install__card ol li::marker { color: var(--soft); }
.install__card .button { align-self: flex-start; margin-top: auto; }
.install__card a:not(.button) { color: var(--link); }
.google { margin-top: 1.5rem; text-align: center; color: var(--muted); font-size: 0.9375rem; }
.google a { color: var(--link); }
@media (max-width: 760px) { .install { grid-template-columns: 1fr; } }

/* Perguntas. */
/* Perguntas na mesma largura do resto do site; o contorno de foco segue o cartão arredondado. */
.faq__list { margin-top: 2.5rem; display: grid; gap: 0.5rem; }
.faq details { border-radius: 20px; background: var(--surface); padding: 0 1.5rem; overflow: hidden; }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 4rem; cursor: pointer; font-weight: 500; font-size: 1.0625rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: none; }
.faq details:has(summary:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.faq summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--muted); transition: transform var(--t-ui) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 1.5rem; color: var(--muted); max-width: 60rem; }
.faq details a { color: var(--link); }

/* Chamada final. */
.cta { padding-block: var(--section); text-align: center; }
.cta .face { width: 4.5rem; height: 4.5rem; margin: 0 auto 1.5rem; display: block; }

/* ---------- rodapé ---------- */
.foot { padding: 3.5rem 0 2.5rem; color: var(--muted); font-size: 0.9375rem; }
.foot__grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 2rem; }
.foot__brand p { margin-top: 0.75rem; max-width: 22rem; }
.foot nav { display: grid; gap: 0.5rem; align-content: start; }
.foot nav b { color: var(--ink); font-weight: 500; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot__end { margin-top: 3rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--soft); font-size: 0.875rem; }
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }

/* ================= páginas de texto (ajuda, privacidade, termos, fonte, frameio) ================= */
/* Páginas de texto: usam a mesma largura do resto do site. */
.doc { width: min(var(--max), 100% - 2 * var(--margin)); margin: 0 auto; padding: clamp(3rem, 8vh, 5rem) 0 var(--section); }
.doc h1 { font-size: clamp(2.25rem, 1.4rem + 2.8vw, 3.5rem); line-height: 1.05; letter-spacing: -0.04em; }
.doc h1 + .lead, .doc h1 + .small { margin-top: 1rem; }
.doc .lead { font-size: 1.25rem; color: var(--muted); }
.doc .small { color: var(--soft); font-size: 0.9375rem; }
.doc h2 { margin-top: 3rem; font-size: 1.5rem; letter-spacing: -0.02em; }
.doc h2 + p, .doc h2 + ul, .doc h2 + ol { margin-top: 0.75rem; }
.doc p, .doc ul, .doc ol { margin-top: 1.1rem; color: #d4d4d8; }
.doc .lead + p, .doc .small + p { margin-top: 2rem; }
.doc ul, .doc ol { padding-left: 1.3rem; }
.doc li + li { margin-top: 0.6rem; }
.doc li::marker { color: var(--soft); }
.doc strong, .doc em { color: var(--ink); }
.doc strong { font-weight: 600; }
.doc a:not(.button) { color: var(--link); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
/* Fonte do iPhone: o link num bloco, o botão de copiar e os quatro atalhos das lojas. */
.doc .card { margin-top: 2.5rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius); background: var(--surface); display: grid; gap: 0.75rem; }
.doc .card + h2 { margin-top: 3.5rem; }
.src { display: block; margin: 0; padding: 0.9rem 1.1rem; border-radius: 14px; background: var(--surface-2); font: 0.9375rem/1.45 ui-monospace, Menlo, monospace; color: var(--ink); word-break: break-all; } /* taste-skill-ignore: é o link da fonte, código de verdade */
/* Na largura toda, o link e o botão de copiar ficam lado a lado, com as lojas embaixo. */
.doc .card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.doc .card .stores { grid-column: 1 / -1; }
/* Comparar: a tabela rola de lado no celular (a primeira coluna fica parada) e a coluna do Bots
   se destaca de leve, sem esconder as outras. */
.vs { margin-top: 2.5rem; overflow-x: auto; border-radius: var(--radius); background: var(--surface); }
.vs:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.vs table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
.vs th, .vs td { padding: 0.95rem 1.1rem; text-align: left; vertical-align: top; color: #d4d4d8; }
.vs thead th { color: var(--ink); font-size: 1rem; font-weight: 600; padding-top: 1.3rem; }
.vs tbody th { color: var(--ink); font-weight: 600; width: 15%; position: sticky; left: 0; background: var(--surface); }
.vs tbody tr + tr > * { border-top: 1px solid var(--surface-3); }
.vs td { width: 28%; }
.vs .vs__us { background: var(--surface-2); color: var(--ink); }
.vs__hint { display: none; }
@media (max-width: 800px) { .doc .vs__hint { display: block; margin-top: 2rem; } .vs__hint + .vs { margin-top: 0.75rem; } }
.vs thead .vs__us { color: var(--blue); }
.doc .card h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.doc .card p { margin-top: 0.35rem; color: var(--muted); }
/* Copiar link da fonte: o botão vira verde com um ✓ que salta, e o link pisca. */
#copy { transition: background-color var(--t-ui) ease, color var(--t-ui) ease, transform var(--t-press) var(--ease-out); }
#copy.is-copied { background: var(--go); color: #062a12; }
.copy-check { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-right: 0.45em; border-radius: 50%; background: #062a12; color: var(--go); font-size: 0.8em; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  #copy.is-copied { animation: copied 420ms var(--ease-out); }
  #copy.is-copied .copy-check { animation: pop 420ms cubic-bezier(0.3, 1.6, 0.5, 1); }
  .src.is-flash { animation: flash 900ms ease-out; }
}
@keyframes copied { 30% { transform: scale(0.96); } }
@keyframes pop { from { transform: scale(0); } }
@keyframes flash { from { background: rgb(74 222 128 / 0.22); color: #fff; } }
@media (max-width: 700px) { .doc .card { grid-template-columns: 1fr; } .doc .card .button--big { width: 100%; } }
.stores { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.stores .button { width: 100%; white-space: normal; text-align: center; }
@media (max-width: 420px) { .stores { grid-template-columns: 1fr; } }
/* Central de ajuda: os tópicos ficam fixos ao lado do texto. */
.help { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.help__toc { position: sticky; top: 6rem; font-size: 0.9375rem; }
.help__toc b { display: block; margin-bottom: 0.75rem; font-weight: 500; color: var(--soft); font-size: 0.8125rem; }
.doc .help__toc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.15rem; }
.doc .help__toc li + li { margin-top: 0; }
.doc .help__toc a { display: block; padding: 0.35rem 0; color: var(--muted); text-decoration: none; transition: color var(--t-hover) ease; }
.doc .help__toc a:hover { color: var(--ink); }
.help__body > section:first-child h2 { margin-top: 0; }
/* Each topic opens and closes (easyui's smooth accordion); the list on the left opens the one you pick. */
.help__body details { border-bottom: 1px solid var(--surface-3); }
.help__body summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; border-radius: 0.5rem; }
.help__body summary::-webkit-details-marker { display: none; }
.help__body summary h2 { margin: 0; }
.help__body summary::after { content: "+"; flex: none; font-size: 1.5rem; line-height: 1; color: var(--muted); transition: transform var(--t-ui) var(--ease-out), color var(--t-hover) ease; }
.help__body summary:hover::after { color: var(--ink); }
.help__body details[open] > summary::after { transform: rotate(45deg); }
.help__body details > :last-child { margin-bottom: 1.5rem; }
@supports (interpolate-size: allow-keywords) {
  .help__body { interpolate-size: allow-keywords; }
  .help__body details::details-content { height: 0; overflow: clip; transition: height var(--t-ui) var(--ease-out), content-visibility var(--t-ui) allow-discrete; }
  .help__body details[open]::details-content { height: auto; }
  @media (prefers-reduced-motion: reduce) { .help__body details::details-content { transition: none; } }
}
@media (max-width: 760px) { .help { grid-template-columns: 1fr; } .help__toc { position: static; } }
/* Volta do login do Frame.io: só a mensagem e o botão que abre o app. */
.doc--handoff { min-height: calc(100svh - 4.25rem); display: grid; align-content: center; justify-items: center; text-align: center; }
.doc--handoff p { margin-inline: auto; }
.doc--handoff #open { margin-top: 0.5rem; }

/* ================= roadmap (o funcionamento do roadmap da Lobbix) ================= */
.rm-top { padding-block: clamp(3rem, 8vh, 5rem) 2.5rem; }
.rm-top h1 { font-size: clamp(2.75rem, 1.4rem + 4vw, 4.5rem); line-height: 1.05; letter-spacing: -0.045em; }
.rm-top h1 .face { width: 0.85em; height: 0.85em; }
.rm-top__note { margin-top: 1rem; max-width: 36rem; font-size: 1.1875rem; color: var(--muted); }
.rm-top__count { margin-top: 1.25rem; color: var(--soft); font-size: 0.9375rem; }
.rm-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rm-tabs button { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 0.5rem 0 1.1rem; border-radius: 999px; background: var(--surface); font-weight: 500; font-size: 0.9375rem; color: var(--muted); transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.rm-tabs button:active { transform: scale(0.97); }
.rm-tabs b { min-width: 1.75rem; height: 1.75rem; padding: 0 0.45rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--surface-3); font-weight: 500; font-size: 0.8125rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.rm-tabs [aria-selected="true"] { background: var(--ink); color: #0a0a0b; }
.rm-tabs [aria-selected="true"] b { background: #0a0a0b; color: var(--ink); }
.rm-tabs button:disabled { opacity: 0.45; cursor: default; }
@media (hover: hover) and (pointer: fine) { .rm-tabs button:not(:disabled):not([aria-selected="true"]):hover { background: var(--surface-2); color: var(--ink); } }
.rm-about { margin-top: 1.25rem; color: var(--muted); }
.dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: none; background: var(--c, var(--ink)); }
[data-s="dev"] { --c: var(--blue); }
[data-s="late"] { --c: #f87171; }
[data-s="soon"] { --c: var(--go); }
[data-s="next"] { --c: var(--wait); }
[data-s="paused"] { --c: #71717a; }
[data-s="live"] { --c: var(--ink); }
.rm-grid { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; align-items: start; }
.rm-card { display: flex; flex-direction: column; gap: 0.6rem; min-height: 14.5rem; padding: 1.5rem; border-radius: 22px; background: var(--surface); cursor: pointer; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.rm-card:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .rm-card:hover { background: var(--surface-2); } }
.rm-card[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .js .rm-card.is-new { animation: rise 480ms var(--ease-out) both; animation-delay: calc(var(--k, 0) * 40ms); } }
.rm-card h3 { font-size: 1.1875rem; line-height: 1.25; letter-spacing: -0.015em; }
.rm-card p { color: var(--muted); font-size: 1.0625rem; line-height: 1.5; flex: 1; }
.rm-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; padding-top: 0.5rem; font-size: 0.875rem; }
.rm-card__stage { font-weight: 500; }
.rm-card__stage .dot { margin-right: 0.45rem; vertical-align: 0.05em; }
.rm-card__cat { font-weight: 400; color: var(--soft); }
.rm-card__more { font-weight: 500; color: var(--ink); white-space: nowrap; }
.rm-more { margin-top: 2rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.rm-more p { color: var(--soft); font-size: 0.9375rem; }
.rm-more[hidden] { display: none; }
@media (max-width: 1000px) { .rm-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .rm-grid { grid-template-columns: 1fr; } .rm-card { min-height: 0; } }
/* Ver detalhes: a janela flutua de verdade, então é o único lugar com sombra. */
.rm-dialog { width: min(38rem, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); padding: 0; border: 0; border-radius: 24px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); } /* taste-skill-ignore: a janela flutua */
.rm-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.rm-dialog__body { padding: 1.75rem 1.75rem 2rem; }
.rm-dialog__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.9375rem; }
.rm-dialog__stage { display: flex; align-items: center; gap: 0.45rem; font-weight: 500; }
.rm-dialog__stage .dot { margin: 0; }
.rm-dialog__close { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); transition: background-color var(--t-hover) ease; }
.rm-dialog__close:hover { background: var(--surface-3); }
.rm-dialog h2 { margin-top: 1rem; font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.03em; }
.rm-dialog dl { margin-top: 1.25rem; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.5rem; font-size: 0.9375rem; }
.rm-dialog dt { color: var(--soft); }
.rm-dialog dd { font-weight: 500; }
.rm-dialog__text { margin-top: 1.25rem; color: #d4d4d8; }
.rm-dialog h3 { margin-top: 1.5rem; font-size: 1rem; }
.rm-dialog ul { margin-top: 0.6rem; padding-left: 1.2rem; color: #d4d4d8; }
.rm-dialog li + li { margin-top: 0.35rem; }
@media (prefers-reduced-motion: no-preference) { .rm-dialog[open] { animation: rise 300ms var(--ease-out); } }
.rm-legend { margin-top: var(--section); border-radius: var(--radius); background: var(--surface); padding: clamp(1.5rem, 4vw, 3rem); display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; }
.rm-legend h2 { font-size: 1.75rem; letter-spacing: -0.03em; }
.rm-legend dl { display: grid; grid-template-columns: 14rem 1fr; gap: 0.9rem 1.5rem; }
.rm-legend dt { display: flex; align-items: center; gap: 0.55rem; font-weight: 500; }
.rm-legend dd { color: var(--muted); }
.rm-legend > p { grid-column: 2; color: var(--soft); font-size: 0.9375rem; }
@media (max-width: 860px) {
  .rm-legend { display: block; }
  .rm-legend dl { grid-template-columns: 1fr; gap: 0.2rem; margin-top: 1.5rem; }
  .rm-legend dd { margin-bottom: 0.8rem; }
  .rm-legend > p { margin-top: 1rem; }
}

/* ================= telas do app montadas em HTML (exemplos genéricos, nada de Bots de ninguém) ================= */
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0.7em 0.85em 0.9em; background: #161616; color: #ececec; font-family: var(--app); font-size: calc(var(--w, 280px) * 0.046); line-height: 1.3; text-align: left; }
.scr::before { content: ""; position: absolute; top: 0.5em; left: 50%; width: 32%; height: 1.55em; margin-left: -16%; border-radius: 1em; background: #000; }
.scr--wall { background: #1d2741; }
.scr__status { display: flex; justify-content: space-between; align-items: center; padding: 0.05em 0.7em 0.9em; font-weight: 600; font-size: 0.85em; }
.scr__bar { display: flex; align-items: center; gap: 0.45em; }
/* Barra de status de verdade: sinal, Wi-Fi e bateria. */
.scr__icons { display: inline-flex; align-items: center; gap: 0.3em; }
.scr__icons svg { height: 0.72em; width: auto; fill: currentColor; }
.scr__batt { position: relative; width: 1.7em; height: 0.8em; border-radius: 0.26em; border: 0.08em solid rgb(236 236 236 / 0.5); padding: 0.1em; display: inline-block; }
.scr__batt i { display: block; height: 100%; width: 78%; border-radius: 0.14em; background: #ececec; }
.scr__home { position: absolute; left: 50%; bottom: 0.35em; width: 36%; height: 0.22em; margin-left: -18%; border-radius: 1em; background: rgb(255 255 255 / 0.55); }
.scr { padding-bottom: 1.2em; }
/* Pedaços de conversa a mais: arquivo pronto, progresso e passos que o Bot já fez. */
.b-file { align-self: flex-start; display: flex; align-items: center; gap: 0.55em; padding: 0.5em 0.8em 0.5em 0.5em; border-radius: 0.9em; background: #262626; font-size: 0.78em; }
.b-file__icon { width: 2.3em; height: 2.6em; border-radius: 0.4em; background: #e5484d; color: #fff; display: grid; place-items: end center; padding-bottom: 0.35em; font-size: 0.62em; font-weight: 700; letter-spacing: 0.04em; }
.b-file small, .b-work small { display: block; color: #a3a3a3; font-size: 0.85em; }
.b-work > span:last-child { flex: 1; }
.b-work i, .note i { display: block; margin-top: 0.35em; height: 0.3em; border-radius: 1em; background: linear-gradient(90deg, #4ade80 var(--p), rgb(255 255 255 / 0.12) var(--p)); }
.b-step { display: flex; align-items: center; gap: 0.45em; font-size: 0.7em; color: #a3a3a3; }
.b-step::before { content: "✓"; display: grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; background: rgb(74 222 128 / 0.16); color: #4ade80; font-size: 0.85em; font-weight: 700; }
/* Tela bloqueada: papel de parede nas cores dos mascotes, a Dynamic Island com o Bot que trabalha, widgets e avisos. */
.scr--lock { background: radial-gradient(120% 60% at 20% 0, #2a4a8a 0%, transparent 60%), radial-gradient(90% 50% at 100% 45%, #6b2f63 0%, transparent 60%), radial-gradient(100% 60% at 0 100%, #1f5a46 0%, transparent 60%), #10131f; }
.scr--lock::before { display: none; }
.island { position: absolute; top: 0.5em; left: 50%; width: 46%; height: 1.55em; margin-left: -23%; border-radius: 1em; background: #000; display: flex; align-items: center; justify-content: space-between; padding: 0 0.3em; }
.island svg { width: 1.15em; height: 1.15em; }
.island i { width: 0.95em; height: 0.95em; border-radius: 50%; border: 0.16em solid rgb(74 222 128 / 0.25); border-top-color: #4ade80; }
@media (prefers-reduced-motion: no-preference) { .island i { animation: spin 1.1s linear infinite; } }
@keyframes spin { to { transform: rotate(1turn); } }
.lock__date { margin-top: 0.6em; text-align: center; font-size: 0.8em; font-weight: 600; color: rgb(255 255 255 / 0.85); }
.lock__time { text-align: center; font-size: 3.6em; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: rgb(255 255 255 / 0.95); }
.lock__widgets { margin-top: 0.8em; display: grid; grid-template-columns: 1fr 1fr; gap: 0.45em; }
.lock__widgets > span { padding: 0.6em 0.7em; border-radius: 1em; background: rgb(255 255 255 / 0.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 0.62em; line-height: 1.25; color: rgb(255 255 255 / 0.7); display: flex; flex-direction: column; justify-content: flex-end; }
.lock__widgets b { display: block; font-size: 1.15em; color: #fff; }
.lock__widgets .y b { color: #fbbf24; }
.lock__faces { display: flex; margin-bottom: 0.3em; }
.lock__faces svg { width: 1.9em; height: 1.9em; }
.lock__faces > span + span { margin-left: -0.4em; }
.lock__stack { margin-top: auto; display: grid; gap: 0.4em; }
.note { position: relative; z-index: 1; display: flex; gap: 0.55em; align-items: flex-start; padding: 0.65em 0.7em; border-radius: 1.1em; background: rgb(30 30 34 / 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 0.72em; }
.note > span:first-child { flex: none; }
.note > span:last-child { flex: 1; min-width: 0; }
.note svg { width: 2.4em; height: 2.4em; }
.note b { display: flex; justify-content: space-between; }
.note em { font-style: normal; font-weight: 400; color: #a3a3a3; font-size: 0.9em; }
.note small { display: block; color: #cfcfcf; }
.note__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4em; margin-top: 0.55em; }
.note__btns span { padding: 0.45em; border-radius: 2em; text-align: center; font-weight: 600; background: rgb(255 255 255 / 0.14); }
.note__btns span + span { background: #fff; color: #111; }
.note--under { z-index: 0; height: 1.2em; margin: -1.1em 0.7em 0; padding: 0; border-radius: 0 0 1em 1em; background: rgb(30 30 34 / 0.45); }
.lock__foot { display: flex; justify-content: space-between; padding: 0.8em 0.6em 0.4em; }
.lock__foot span { width: 2.4em; height: 2.4em; border-radius: 50%; background: rgb(255 255 255 / 0.14); display: grid; place-items: center; }
.lock__foot svg { width: 1.1em; height: 1.1em; color: #fff; }

.scr__round { width: 2.1em; height: 2.1em; border-radius: 50%; background: #262626; display: grid; place-items: center; flex: none; color: #ececec; font-size: 0.95em; }
.scr__pill { flex: 1; display: flex; align-items: center; gap: 0.45em; padding: 0.3em 0.6em; border-radius: 2em; background: #262626; min-width: 0; }
.scr__pill svg { width: 1.7em; height: 1.7em; }
.scr__pill > span:first-child { flex: none; }
.scr__pill b { display: block; font-size: 0.82em; }
.scr__pill small { display: block; font-size: 0.66em; color: #4ade80; }
.scr__pill small[data-tone="wait"] { color: #fbbf24; }
.scr__body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5em; padding-block: 0.7em; min-height: 0; overflow: hidden; }
.b-day { align-self: center; font-size: 0.66em; color: #8a8a8a; }
.b-me { align-self: flex-end; max-width: 80%; padding: 0.5em 0.75em; border-radius: 1.1em; background: #3558c0; color: #fff; font-size: 0.8em; }
.b-bot { align-self: flex-start; max-width: 84%; padding: 0.5em 0.75em; border-radius: 1.1em; background: #262626; font-size: 0.8em; }
.b-work { display: flex; align-items: center; gap: 0.4em; font-size: 0.74em; color: #cfcfcf; }
.b-work svg { width: 1.5em; height: 1.5em; }
.b-card { padding: 0.75em; border-radius: 0.9em; background: #232323; font-size: 0.78em; }
.b-card b { display: block; }
.b-card p { color: #a3a3a3; margin-top: 0.15em; }
.b-card__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4em; margin-top: 0.65em; }
.b-card__btns span { padding: 0.5em; border-radius: 0.55em; text-align: center; font-weight: 600; background: #343434; }
.b-card__btns .y { background: #f2b705; color: #1a1405; }
/* Login de exemplo dentro do celular: campos de verdade e o Bot no canto, que tapa os olhos na senha. */
.b-login { position: relative; display: grid; gap: 0.4em; }
.b-login p { margin-top: 0; }
.b-login b { padding-right: 3.6em; }
.b-login__bot { position: absolute; top: -1.6em; right: 0.4em; }
.b-login__bot svg { width: 3.6em; height: 3.6em; }
.b-login__field { width: 100%; padding: 0.5em 0.7em; border: 0; border-radius: 0.55em; background: #303034; color: #fff; font: inherit; font-size: 0.95em; outline: none; }
.b-login__field::placeholder { color: #8a8a8a; }
.b-login__field:focus { box-shadow: 0 0 0 1.5px #7a7ae6; }
.b-login .b-card__one { width: 100%; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.b-card__one { margin-top: 0.65em; padding: 0.55em; border-radius: 0.55em; background: #5b5bd6; color: #fff; text-align: center; font-weight: 600; }
.scr__composer { display: flex; align-items: center; gap: 0.45em; }
.scr__composer span:last-child { flex: 1; padding: 0.55em 0.8em; border-radius: 2em; background: #262626; color: #a3a3a3; font-size: 0.75em; }
/* perfil de um Bot e de uma equipe */
.scr__nav { display: flex; align-items: center; justify-content: space-between; }
.scr__nav b { font-size: 0.85em; }
.scr__nav em { font-style: normal; font-size: 0.75em; padding: 0.45em 0.8em; border-radius: 2em; background: #262626; }
.scr__who { margin-top: 1em; display: grid; justify-items: center; text-align: center; }
.scr__who .avatar { width: 4.6em; height: 4.6em; }
.scr__who .avatar svg { width: 100%; height: 100%; }
.scr__who .avatars { display: flex; }
.scr__who .avatars span { width: 3.2em; height: 3.2em; }
.scr__who .avatars span + span { margin-left: -1.1em; }
.scr__who b { margin-top: 0.4em; font-size: 1.15em; }
.scr__who small { font-size: 0.7em; color: #a3a3a3; }
.scr__who small.go { color: #4ade80; }
.scr__acts { margin-top: 0.9em; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; }
.scr__acts span { padding: 0.65em 0.2em; border-radius: 0.7em; background: #232323; color: #7aa2ff; font-size: 0.68em; text-align: center; }
.scr__acts span::before { content: ""; display: block; width: 1.3em; height: 1.3em; margin: 0 auto 0.3em; border-radius: 0.35em; background: #7aa2ff; opacity: 0.85; }
.scr__seg { margin-top: 0.7em; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0.2em; border-radius: 2em; background: #232323; font-size: 0.64em; text-align: center; }
.scr__seg span { padding: 0.35em 0; border-radius: 2em; color: #cfcfcf; }
.scr__seg span:first-child { background: #3a3a3a; color: #fff; }
.scr__label { margin-top: 0.9em; font-size: 0.72em; color: #a3a3a3; }
.scr__list { margin-top: 0.35em; border-radius: 0.9em; background: #232323; overflow: hidden; }
.scr__list div { display: flex; align-items: center; gap: 0.5em; padding: 0.6em 0.7em; font-size: 0.75em; }
.scr__list div + div { background: #262626; }
.scr__list svg { width: 1.9em; height: 1.9em; }
.scr__list div > span:first-child { flex: none; }
.scr__list small { display: block; color: #a3a3a3; font-size: 0.88em; }
.scr__list i { margin-left: auto; font-style: normal; color: #a3a3a3; }
.scr__list .lead { padding: 0.05em 0.4em; border-radius: 0.3em; background: #2b3a66; color: #9db7ff; font-size: 0.8em; margin-left: 0.3em; }
/* tela de início com os widgets */
.wd { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; margin-top: 0.6em; }
.wd > div { border-radius: 1.1em; background: #2a3554; padding: 0.7em; font-size: 0.72em; min-height: 6.4em; display: flex; flex-direction: column; justify-content: flex-end; }
.wd > div svg { width: 2.2em; height: 2.2em; }
.wd .wide { grid-column: span 2; min-height: 0; }
.wd .num { font-size: 2.6em; font-weight: 700; line-height: 1; }
.wd small { color: #b9c3dd; }
.wd .y { background: #4a3d1c; }
.wd__row { display: flex; justify-content: space-between; margin-top: 0.4em; text-align: center; }
.wd__row span { display: grid; justify-items: center; font-size: 0.85em; }
.wd__row svg { width: 2.2em; height: 2.2em; }
.wd__head { display: flex; justify-content: space-between; font-weight: 600; }
.wd__head small { color: #4ade80; font-weight: 500; }
.wd__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4em; margin-top: 0.6em; }
.wd__btns span { padding: 0.45em; border-radius: 2em; text-align: center; background: #3c4767; font-weight: 600; }
.wd__btns span + span { background: #fff; color: #111; }

/* Roadmap: o botão de sugerir e o formulário (vai para a função roadmap-idea). */
.rm-top__actions { margin-top: 1.75rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.rm-top__actions .rm-top__count { margin: 0; }
.rm-idea__note { margin-top: 0.75rem; color: var(--muted); }
.rm-idea { margin-top: 1.5rem; display: grid; gap: 0.5rem; }
.rm-idea label { font-weight: 500; font-size: 0.9375rem; margin-top: 0.5rem; }
.rm-idea label span { font-weight: 400; color: var(--soft); }
.rm-idea textarea, .rm-idea input { width: 100%; padding: 0.8rem 1rem; border-radius: 14px; border: 0; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 1rem; resize: vertical; }
.rm-idea textarea:focus, .rm-idea input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.rm-idea textarea::placeholder, .rm-idea input::placeholder { color: var(--soft); }
.rm-idea__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rm-idea__end { margin-top: 1rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.rm-idea__status { color: var(--muted); font-size: 0.9375rem; }
.rm-idea__status[data-tone="ok"] { color: var(--go); }
.rm-idea__status[data-tone="erro"] { color: #fca5a5; }
.rm-idea button[disabled] { opacity: 0.6; }

/* ================= painel de admin (admin.html) ================= */
.adm { min-height: 100svh; }
.adm .bar__name small { font-weight: 500; color: var(--muted); margin-left: 0.15rem; }
/* Entrar no painel, como a entrada do app (BotMac/Sources/SignInScreen.swift): título grande em cima, o mascote
   espiando por cima do cartão, caixinhas para o código e o PIN, e o botão azul do app. */
.auth { width: min(26rem, 100%); align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: max(2.5rem, env(safe-area-inset-top)) 0 max(1rem, env(safe-area-inset-bottom)); }
.auth__head h1 { font-size: 2rem; letter-spacing: -0.035em; line-height: 1.1; }
.auth__head p { margin-top: 0.45rem; color: var(--muted); font-size: 0.9375rem; }
.auth__stage { position: relative; padding-top: 5.5rem; }
.auth__bot { position: absolute; left: 50%; top: 0; width: 8.5rem; height: 8.5rem; margin-left: -4.25rem; }
.auth__bot svg { width: 100%; height: 100%; }
.auth__bot.is-shy .mascot .hands { transform: none; opacity: 1; }
.auth__bot.is-shy .mascot .lid { transform: scaleY(1); }
.auth__card { position: relative; z-index: 1; padding: 1rem; border-radius: 28px; background: #1c1c1f; box-shadow: 0 -1px 0 rgb(255 255 255 / 0.06); }
.adm-login .auth__card form { margin: 0; display: grid; gap: 0.75rem; }
.auth__card input[type="email"] { height: 3.1rem; padding: 0 1.15rem; border-radius: 999px; background: #2a2a2d; font-size: 1rem; }
.auth__go { height: 3.1rem; border-radius: 999px; background: #7aa2ff; color: #0a0a0b; font: inherit; font-weight: 600; font-size: 1rem; transition: transform var(--t-press, 120ms) ease, filter var(--t-hover) ease; }
.auth__go:hover { filter: brightness(1.06); }
.auth__go:active { transform: scale(0.98); }
.auth__who { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.15rem 0.4rem; font-weight: 600; font-size: 0.9375rem; overflow-wrap: anywhere; }
.auth__links { display: flex; justify-content: space-between; gap: 1rem; padding: 0 0.4rem; }
.auth__links:has(> :only-child:not([hidden])) { justify-content: center; }
.auth__card .adm-link { font-size: 0.875rem; color: #7aa2ff; }
.auth__status:empty { display: none; }
.auth__status { margin: 0.75rem 0.4rem 0; font-size: 0.875rem; }
.auth__face { display: flex; align-items: center; justify-content: center; gap: 0.55rem; height: 3.1rem; border-radius: 999px; background: #2a2a2d; color: var(--ink); font: inherit; font-weight: 600; font-size: 1rem; transition: background-color var(--t-hover) ease; }
.auth__face:hover { background: #333337; }
.auth__face svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: #7aa2ff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth__offer { display: grid; gap: 0.75rem; }
.auth__offer .auth__links { justify-content: center; }
.pin-dlg__form { margin-top: 1.25rem; display: grid; gap: 0.5rem; }
.pin-dlg__step { font-weight: 600; text-align: center; }
.adm-pin-dlg .adm-status:not(:empty) { margin-top: 0.75rem; text-align: center; }
/* As caixinhas: o campo de verdade fica invisível por cima delas, então toque, teclado e colar funcionam. */
.digits { position: relative; padding: 0.35rem 0 0.25rem; }
.digits input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; caret-color: transparent; font-size: 16px; z-index: 1; }
.digits__row { display: flex; justify-content: center; gap: 0.4rem; }
.digits__gap { flex: none; width: 0.5rem; }
.digits__slot { flex: 1 1 0; min-width: 0; max-width: 2.6rem; height: 3rem; border-radius: 12px; background: #2a2a2d; display: grid; place-items: center; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--t-hover) ease, background-color var(--t-hover) ease; }
.digits--pin .digits__slot { max-width: 3rem; height: 3.25rem; }
.digits--pin .digits__slot.is-filled::after { content: ""; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--ink); }
.digits__slot.is-current { box-shadow: inset 0 0 0 2px #7aa2ff; }
.digits__slot.is-current::before { content: ""; width: 2px; height: 46%; background: #7aa2ff; animation: caret 1s steps(1) infinite; }
.digits.is-checking .digits__slot { background: color-mix(in srgb, var(--go) 22%, #2a2a2d); }
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .digits__slot.is-filled { animation: hopin 240ms cubic-bezier(0.3, 1.5, 0.5, 1); }
  .digits.is-wrong .digits__row { animation: shake 320ms ease; }
  .digits.is-checking .digits__slot { animation: wave 1.1s ease-in-out infinite; }
  .digits.is-checking .digits__slot:nth-child(2n) { animation-delay: 90ms; }
  .digits.is-checking .digits__slot:nth-child(3n) { animation-delay: 180ms; }
}
@keyframes hopin { from { transform: translateY(6px) scale(0.6); opacity: 0; } }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
@keyframes wave { 0%, 60%, 100% { transform: none; } 20% { transform: translateY(-6px); } }
@media (min-width: 701px) { .auth { justify-content: center; gap: 2.5rem; } }

.adm-login { min-height: 100svh; display: grid; place-items: center; padding: 2rem var(--margin); }
.adm-login__card { width: min(26rem, 100%); padding: 2rem; border-radius: var(--radius); background: var(--surface); }
.adm-login__card .bar__name { margin-bottom: 1.5rem; }
.adm-login__card h1 { font-size: 1.75rem; letter-spacing: -0.03em; }
.adm-login__card > p { margin-top: 0.5rem; color: var(--muted); }
.adm-login__card > .button { margin-top: 1.25rem; }
.adm-login form { margin-top: 1.5rem; display: grid; gap: 0.6rem; }
.adm-login label, .adm-fields label { display: grid; gap: 0.35rem; font-weight: 500; font-size: 0.9375rem; }
.adm-fields label small { font-weight: 400; color: var(--soft); }
.adm-login input, .adm-fields input:not([type="checkbox"]), .adm-fields textarea, .adm-fields select, .adm-search, .inbox select { width: 100%; padding: 0.7rem 0.95rem; border-radius: 12px; border: 0; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 0.9375rem; color-scheme: dark; }
.adm-fields textarea { resize: vertical; }
.adm-login input:focus, .adm-fields :is(input, textarea, select):focus, .adm-search:focus, .inbox select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.adm-link { justify-self: start; color: var(--link); font-size: 0.9375rem; }
.adm-help { color: var(--soft); font-size: 0.875rem; }
.adm-status { min-height: 1.4em; color: var(--muted); font-size: 0.9375rem; }
.adm-status[data-tone="ok"] { color: var(--go); }
.adm-status[data-tone="erro"] { color: #fca5a5; }
.adm-empty { padding: 1rem 0.5rem; color: var(--soft); font-size: 0.9375rem; text-align: center; list-style: none; }

/* O esqueleto: menu lateral fixo e a página ao lado. */
.adm-shell { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100svh; }
.adm-side { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; gap: 1.5rem; padding: 1.25rem 0.9rem; background: #0e0e10; }
.adm-side > .bar__name { padding: 0 0.5rem; }
.adm-nav { display: grid; gap: 0.15rem; }
.adm-nav a { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.75rem; border-radius: 12px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: 0.9375rem; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.adm-nav svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; flex: none; }
.adm-nav a:hover { background: var(--surface); color: var(--ink); }
.adm-nav a[aria-current] { background: var(--surface-2); color: var(--ink); }
.adm-nav b { margin-left: auto; min-width: 1.4rem; height: 1.4rem; padding: 0 0.4rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--blue); color: #0a0a0b; font-size: 0.75rem; }
.adm-side__end { margin-top: auto; display: grid; gap: 0.6rem; padding: 0 0.5rem; font-size: 0.875rem; color: var(--muted); }
.adm-side__end a { text-decoration: none; }
.adm-side__end a:hover { color: var(--ink); }
.adm-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soft); }
.adm-side__end .button { justify-self: start; }
.adm-side__buttons { display: flex; align-items: center; gap: 0.4rem; }
.adm-refresh { display: inline-flex; align-items: center; gap: 0.4rem; height: 2.1rem; padding: 0 0.8rem; border-radius: 999px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 0.875rem; font-weight: 500; transition: background-color var(--t-hover) ease; }
.adm-refresh:hover { background: var(--surface-3); }
.adm-refresh svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.adm-refresh.is-busy svg { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.adm-main { min-width: 0; padding: 2rem clamp(1rem, 3vw, 2.5rem) 4rem; position: relative; }
.adm-toast { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 30; max-width: 26rem; padding: 0; }
.adm-toast:not(:empty) { padding: 0.75rem 1rem; border-radius: 14px; background: var(--surface-3); }
.adm-page__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.adm-page__head h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); letter-spacing: -0.04em; line-height: 1; }
.adm-page__head p { margin-top: 0.5rem; color: var(--muted); max-width: 44rem; }
.adm-search { width: min(20rem, 100%); }
.adm-head__tools { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.adm .button::before { content: none; }
@media (max-width: 900px) {
  /* Uma coluna: o topo fica do tamanho dele e a página leva o resto (senão, em página curta, a grade estica o topo). */
  .adm-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .adm-side, .adm-nav { min-width: 0; }
  .adm-side { position: static; height: auto; padding: 1rem var(--margin); gap: 0.75rem; }
  .adm-nav { display: flex; overflow-x: auto; gap: 0.25rem; scrollbar-width: none; }
  .adm-nav a { white-space: nowrap; }
  .adm-side__end { display: flex; align-items: center; flex-wrap: wrap; margin-top: 0; }
}

.adm-nav__short { display: none; }
/* No celular (e instalado na tela de início) o painel vira app: abas fixas embaixo, topo curto, números dois a dois. */
@media (max-width: 700px) {
  .adm-side { position: sticky; top: 0; z-index: 20; flex-direction: row; align-items: center; justify-content: space-between; padding: calc(0.6rem + env(safe-area-inset-top)) var(--margin) 0.6rem; background: #0e0e10; }   /* sem backdrop-filter: ele prenderia as abas fixas dentro do topo */
  .adm-side__end { margin: 0; padding: 0; gap: 0.5rem; }
  .adm-side__end a, .adm-who { display: none; }
  .adm-refresh { width: 2.1rem; padding: 0; justify-content: center; }
  /* Topo do celular numa linha só: a marca sem o "Admin", e os links do PIN e do Face ID menores. */
  .adm-side > .bar__name small { display: none; }
  .adm-side__end { flex-wrap: nowrap; min-width: 0; }
  .adm-side__end .adm-link { font-size: 0.8125rem; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .adm-side__buttons { flex: none; }
  .adm-refresh span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .adm-nav { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; overflow: visible;
    padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, #0e0e10 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid #1f1f23; }
  .adm-nav a { position: relative; flex-direction: column; gap: 0.2rem; padding: 0.4rem 0.1rem; border-radius: 10px; font-size: 0.6875rem; white-space: nowrap; min-height: 3rem; justify-content: center; }
  .adm-nav a[aria-current] { background: none; color: var(--blue); }
  .adm-nav svg { width: 1.35rem; height: 1.35rem; }
  .adm-nav__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .adm-nav__short { display: block; }
  .adm-nav b { position: absolute; top: 0.1rem; left: calc(50% + 0.35rem); margin: 0; min-width: 1.1rem; height: 1.1rem; font-size: 0.6875rem; padding: 0 0.3rem; }
  .adm-main { padding: 1.25rem var(--margin) calc(5.5rem + env(safe-area-inset-bottom)); }
  .adm-toast { left: var(--margin); right: var(--margin); bottom: calc(5rem + env(safe-area-inset-bottom)); max-width: none; }
  .adm-page__head { margin-bottom: 1rem; gap: 0.9rem; }
  .adm-page__head p { font-size: 0.9375rem; }
  .adm-search { width: 100%; }
  .adm .kpis { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .kpi { padding: 0.9rem 1rem; border-radius: 16px; }
  .kpi span { font-size: 0.8125rem; }
  .kpi b { font-size: 1.5rem; }
  .kpi small { font-size: 0.75rem; }
  .chart, .adm-todo, .adm-card-box { padding: 1rem; border-radius: 16px; }
  /* Pessoas: cada linha vira um cartão (nome em cima; situação, último uso, tarefas e custo embaixo). */
  #people thead { display: none; }
  #people, #people tbody { display: block; }
  #people tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; padding: 0.8rem 0.9rem; border-bottom: 1px solid #1f1f23; }
  #people tbody tr:nth-child(odd) { background: none; }
  #people td { padding: 0; white-space: normal; }
  #people td:first-child { flex: 1 0 100%; }
  #people td:nth-child(4), #people td:nth-child(5), #people td:nth-child(6) { display: none; }
  #people td:nth-child(3), #people td.num { font-size: 0.8125rem; color: var(--muted); }
  #people td:nth-child(7)::after { content: " tarefas em 7 dias"; }
  #people td:nth-child(8)::after { content: " em API"; }
  #people td.act { margin-left: auto; }
  #people td.act:empty { display: none; }
  /* Roadmap: uma coluna por vez, deslizando. */
  .adm-cols { grid-template-columns: repeat(4, 86%); scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--margin)); padding-right: var(--margin); }
  .adm-col { scroll-snap-align: start; min-height: 50svh; }
  .person-head { gap: 0.9rem; }
  .person-head .adm-head__tools { margin-left: 0; }
  .avatar--big { width: 3.75rem; height: 3.75rem; font-size: 1.4rem; }
  .facts { grid-template-columns: 1fr; gap: 0.1rem; }
  .facts dd { margin-bottom: 0.55rem; }
}

/* Visão geral: os números, o gráfico e o que espera você. */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.kpi { border-radius: 20px; background: var(--surface); padding: 1.25rem 1.35rem; display: grid; gap: 0.3rem; }
.kpi span { color: var(--muted); font-size: 0.9375rem; }
.kpi b { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.4rem); letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--soft); font-size: 0.875rem; }
@media (max-width: 1000px) { .kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .kpis { grid-template-columns: 1fr; } }
.chart { position: relative; margin-top: 0.75rem; border-radius: 20px; background: var(--surface); padding: 1.25rem 1.35rem 1rem; }
.chart figcaption { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.chart figcaption span { color: var(--soft); font-size: 0.875rem; }
.chart__plot { margin-top: 0.75rem; }
.chart__plot svg { width: 100%; height: auto; overflow: visible; }
.chart__grid { stroke: #2a2a2e; stroke-width: 1; }
.chart__axis { fill: var(--soft); font-size: 12px; font-family: var(--font); }
.chart__mark { fill: #0284c7; transition: fill var(--t-hover) ease; }
.chart__hit { fill: transparent; }
.chart__bar:hover .chart__mark { fill: var(--blue); }
.chart__tip { position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); padding: 0.45rem 0.7rem; border-radius: 10px; background: var(--surface-3); font-size: 0.875rem; white-space: nowrap; display: grid; }
.chart__tip span { color: var(--muted); font-size: 0.8125rem; }
.chart__table { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted); }
.chart__table summary { cursor: pointer; }
.chart__table table { margin-top: 0.5rem; border-collapse: collapse; }
.chart__table td, .chart__table th { padding: 0.2rem 1.25rem 0.2rem 0; text-align: left; font-variant-numeric: tabular-nums; }
.adm-todo { margin-top: 0.75rem; border-radius: 20px; background: var(--surface); padding: 1.25rem 1.35rem; }
.adm-todo h2 { font-size: 1.0625rem; }
.adm-todo ul { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; list-style: none; }
.adm-todo a { display: inline-flex; gap: 0.4rem; padding: 0.6rem 0.95rem; border-radius: 999px; background: var(--surface-2); text-decoration: none; transition: background-color var(--t-hover) ease; }
.adm-todo a:hover { background: var(--surface-3); }
.adm-todo a b { color: var(--blue); }
.adm-todo .adm-empty { padding: 0.25rem 0; text-align: left; }

/* Pessoas e filtros. */
.adm-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.adm-chips button { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.4rem; padding: 0 0.9rem; border-radius: 999px; background: var(--surface); color: var(--muted); font-weight: 500; font-size: 0.9375rem; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.adm-chips button b { font-weight: 500; font-size: 0.8125rem; color: var(--soft); }
.adm-chips [aria-selected="true"] { background: var(--ink); color: #0a0a0b; }
.adm-chips [aria-selected="true"] b { color: #3f3f46; }
.adm-chips--quiet button { min-height: 2rem; background: none; }
.adm-chips--quiet [aria-selected="true"] { background: var(--surface-2); color: var(--ink); }
.adm-table-wrap { overflow-x: auto; border-radius: 20px; background: var(--surface); }
.adm-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.adm-table th { text-align: left; font-weight: 500; color: var(--soft); font-size: 0.8125rem; padding: 0.9rem 1rem 0.6rem; white-space: nowrap; }
.adm-table td { padding: 0.75rem 1rem; vertical-align: middle; white-space: nowrap; }
.adm-table tbody tr:nth-child(odd) { background: #18181b; }
.adm-table td small { display: block; color: var(--soft); font-size: 0.8125rem; }
.adm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-table .act { text-align: right; }
.adm-table .act .button + .button { margin-left: 0.35rem; }
.pill { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 500; background: var(--surface-3); color: var(--muted); }
.pill[data-st="approved"], .pill[data-st="on"], .pill[data-st="accepted"] { background: #12321f; color: #86efac; }
.pill[data-st="pending"], .pill[data-st="agendado"] { background: #3a2e0b; color: #fcd34d; }
.pill[data-st="denied"], .pill[data-st="declined"] { background: #3b1a1a; color: #fca5a5; }

/* A foto de cada pessoa (a do perfil no app) ou a inicial numa cor tirada do seed. */
.avatar { width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; background: var(--surface-3); color: #0a0a0b; font-weight: 600; font-size: 0.9375rem; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--big { width: 4.5rem; height: 4.5rem; font-size: 1.75rem; }
.who-cell { display: flex; align-items: center; gap: 0.75rem; }
#people tbody tr[data-user] { cursor: pointer; transition: background-color var(--t-hover) ease; }
#people tbody tr[data-user]:hover { background: var(--surface-2); }
#people tbody tr[data-user]:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* A página de uma pessoa. */
.adm-back { display: inline-block; margin-bottom: 1rem; color: var(--muted); text-decoration: none; font-size: 0.9375rem; }
.adm-back:hover { color: var(--ink); }
.person-head { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.person-head h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); letter-spacing: -0.04em; line-height: 1.05; }
.person-head p { margin-top: 0.35rem; color: var(--muted); display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.person-head .adm-head__tools { margin-left: auto; }
.person-grid { margin-top: 0.75rem; }
[data-page="pessoa"] > .adm-card-box { margin-top: 0.75rem; }
.person-grid { margin-bottom: 0; }
.adm-card-box h2 small { color: var(--soft); font-weight: 400; font-size: 0.875rem; margin-left: 0.4rem; }
.facts { margin-top: 0.85rem; display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: 0.55rem 1.25rem; font-size: 0.9375rem; }
.facts dt { color: var(--soft); }
.facts dd { min-width: 0; overflow-wrap: anywhere; }
.facts dd small { color: var(--soft); }
.adm-table-wrap--flat { margin-top: 0.75rem; background: none; border-radius: 12px; }
.person-list { margin-top: 0.75rem; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.person-list li { padding: 0.7rem 0.9rem; border-radius: 12px; background: var(--surface-2); font-size: 0.9375rem; }
.person-list li small { display: block; color: var(--soft); font-size: 0.8125rem; margin-top: 0.15rem; }
.person-list .adm-empty { background: none; padding: 0.25rem 0; text-align: left; }
.person-list code { font-size: 0.8125rem; color: var(--muted); overflow-wrap: anywhere; }

/* Notas: lista à esquerda, a nota aberta à direita; no celular, uma coisa de cada vez. */
.notes { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.notes__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.notes__item { width: 100%; display: grid; gap: 0.3rem; padding: 0.8rem 0.95rem; border-radius: 16px; background: var(--surface); text-align: left; color: var(--ink); font: inherit; transition: background-color var(--t-hover) ease; }
.notes__item:hover { background: var(--surface-2); }
.notes__item.is-open { background: var(--surface-2); box-shadow: inset 0 0 0 2px #7aa2ff; }
.notes__item.is-done b { color: var(--soft); text-decoration: line-through; }
.notes__item b { font-weight: 600; overflow-wrap: anywhere; }
.notes__line { display: flex; align-items: center; gap: 0.5rem; }
.notes__line small { color: var(--soft); font-size: 0.8125rem; }
.notes__when { margin-left: auto; }
.notes__peek { color: var(--muted); font-size: 0.875rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notes__empty { padding: 3rem 1rem; color: var(--soft); text-align: center; border-radius: 20px; background: var(--surface); }
.pill[data-tag="bug"] { background: #3b1a1a; color: #fca5a5; }
.pill[data-tag="tarefa"] { background: #172a4a; color: #a5c4ff; }
.pill[data-tag="ideia"] { background: #3a2e0b; color: #fcd34d; }
.note { border-radius: 20px; background: var(--surface); padding: 1.1rem 1.25rem 1rem; display: grid; gap: 0.75rem; }
.note__top { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.note__back { display: none; }
.note__tags { display: flex; gap: 0.3rem; }
.note__tags button { padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 0.875rem; font-weight: 500; }
.note__tags button[aria-checked="true"] { background: var(--ink); color: #0a0a0b; }
.note__saved { margin-left: auto; color: var(--soft); font-size: 0.8125rem; }
.note__title { width: 100%; resize: none; overflow: hidden; line-height: 1.25; border: 0; background: none; color: var(--ink); font: inherit; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; padding: 0.2rem 0; }
.note__title:focus { outline: none; }
.note__body { width: 100%; min-height: 7rem; resize: vertical; border: 0; border-radius: 12px; padding: 0.75rem 0.9rem; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 0.9375rem; line-height: 1.5; color-scheme: dark; }
.note__body:focus, .checklist input[type="text"]:focus { outline: 2px solid #7aa2ff; outline-offset: 1px; }
.note__end { display: flex; align-items: center; gap: 0.75rem; }
.checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; }
.checklist__item { display: flex; align-items: center; gap: 0.6rem; }
.checklist__item input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: #7aa2ff; flex: none; }
.checklist__item input[type="text"] { flex: 1; min-width: 0; border: 0; border-radius: 8px; padding: 0.35rem 0.5rem; background: none; color: var(--ink); font: inherit; font-size: 0.9375rem; }
.checklist__item.is-done input[type="text"] { color: var(--soft); text-decoration: line-through; }
.checklist__x { width: 1.8rem; height: 1.8rem; border-radius: 50%; color: var(--soft); font-size: 1.1rem; opacity: 0; transition: opacity var(--t-hover) ease, background-color var(--t-hover) ease; }
.checklist__item:hover .checklist__x, .checklist__x:focus-visible { opacity: 1; }
.checklist__x:hover { background: var(--surface-2); color: var(--ink); }
#note-add-item { justify-self: start; }
@media (max-width: 900px) {
  .notes { grid-template-columns: minmax(0, 1fr); }
  .notes__empty { display: none; }
  .notes.is-editing .notes__list { display: none; }
  .note__back { display: inline-block; }
  /* Com uma nota aberta no celular, a nota ocupa a tela: sem busca nem filtros em cima. */
  .adm-page[data-page="notas"]:has(.notes.is-editing) :is(.adm-page__head, .adm-chips) { display: none; }
  .note__title { font-size: 1.3rem; }
  .checklist__x { opacity: 1; }
  .adm-page[data-page="notas"] .adm-head__tools { width: 100%; }
  .adm-page[data-page="notas"] .adm-search { flex: 1; width: auto; }
}

/* Menu de contexto: no computador, um menu no ponto do clique; no toque, uma folha que sobe de baixo. */
.ctx { position: fixed; inset: 0; z-index: 60; }
.ctx__shade { position: absolute; inset: 0; }
.ctx__menu { position: absolute; min-width: 13rem; max-width: min(20rem, calc(100vw - 16px)); padding: 0.35rem; border-radius: 14px; background: #232327; box-shadow: 0 12px 40px rgb(0 0 0 / 0.55), inset 0 0 0 1px rgb(255 255 255 / 0.07); }
.ctx__title { padding: 0.45rem 0.7rem 0.35rem; color: var(--soft); font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx__items { display: grid; }
.ctx__items button { text-align: left; padding: 0.5rem 0.7rem; border-radius: 9px; color: var(--ink); font: inherit; font-size: 0.9375rem; }
.ctx__items button:hover, .ctx__items button:focus-visible { background: #7aa2ff; color: #0a0a0b; outline: none; }
.ctx__items button.is-danger { color: #fca5a5; }
.ctx__items button.is-danger:hover, .ctx__items button.is-danger:focus-visible { background: #ef4444; color: #fff; }
.ctx__cancel { display: none; }
.ctx.is-sheet .ctx__shade { background: rgb(0 0 0 / 0.45); }
.ctx.is-sheet .ctx__menu { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); max-width: none; padding: 0.4rem; border-radius: 18px; }
.ctx.is-sheet .ctx__title { text-align: center; padding: 0.6rem 0.8rem 0.5rem; }
.ctx.is-sheet .ctx__items button { text-align: center; padding: 0.85rem; font-size: 1.0625rem; border-top: 1px solid rgb(255 255 255 / 0.06); border-radius: 0; }
.ctx.is-sheet .ctx__items button:focus-visible { background: rgb(255 255 255 / 0.06); color: var(--ink); }
.ctx.is-sheet .ctx__cancel { display: block; width: 100%; margin-top: 0.4rem; padding: 0.85rem; border-radius: 14px; background: #2e2e33; color: #7aa2ff; font: inherit; font-weight: 600; font-size: 1.0625rem; }
@media (prefers-reduced-motion: no-preference) {
  .ctx:not(.is-sheet) .ctx__menu { animation: ctx-pop 120ms ease-out; }
  .ctx.is-sheet .ctx__menu { animation: ctx-up 220ms cubic-bezier(0.2, 0.9, 0.3, 1); }
}
@keyframes ctx-pop { from { opacity: 0; transform: scale(0.96); } }
@keyframes ctx-up { from { transform: translateY(100%); } }
/* O item que abriu o menu fica marcado; no toque, segurar não seleciona texto nem abre a lupa do iPhone. */
.is-ctx { box-shadow: inset 0 0 0 2px #7aa2ff !important; border-radius: 12px; }
@media (pointer: coarse) {
  #people tbody tr, .adm-card, .inbox__item, .notes__item, .notice { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* O quadro do roadmap. */
.adm-cols { display: grid; grid-template-columns: repeat(4, minmax(15rem, 1fr)); gap: 0.75rem; overflow-x: auto; padding-bottom: 1rem; align-items: start; }
.adm-col { border-radius: 22px; background: var(--surface); padding: 0.75rem; min-height: 60svh; transition: background-color var(--t-hover) ease; }
.adm-col.is-over { background: var(--surface-2); }
.adm-col header { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.4rem 0.75rem; }
.adm-col h2 { font-size: 0.9375rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
.adm-col header b { min-width: 1.6rem; height: 1.6rem; padding: 0 0.4rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--surface-3); font-size: 0.8125rem; font-weight: 500; }
.adm-plus { margin-left: auto; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 1.1rem; line-height: 1; }
.adm-plus:hover { background: var(--surface-3); color: var(--ink); }
.adm-list { display: grid; gap: 0.5rem; }
.adm-card { padding: 0.9rem 1rem; border-radius: 16px; background: var(--surface-2); cursor: grab; transition: background-color var(--t-hover) ease, opacity var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.adm-card:hover { background: var(--surface-3); }
.adm-card:active { transform: scale(0.99); }
.adm-card.is-dragging { opacity: 0.4; }
.adm-card h3 { font-size: 0.9875rem; line-height: 1.3; }
.adm-card p { margin-top: 0.3rem; font-size: 0.875rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.adm-card small { display: block; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--soft); }
.adm-card small em { font-style: normal; color: var(--wait); }

/* Ideias e feedback. */
.inbox { display: grid; gap: 0.5rem; padding: 0; list-style: none; }
.inbox__item { border-radius: 18px; background: var(--surface); padding: 1.1rem 1.25rem; display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1.5rem; align-items: start; }
.inbox__item p { white-space: pre-wrap; }
.inbox__item small { grid-column: 1; color: var(--soft); font-size: 0.8125rem; }
.inbox__item small a { color: var(--link); }
.inbox__shot { grid-column: 1; justify-self: start; display: block; margin-top: 0.4rem; }
.inbox__shot img { display: block; height: 180px; min-width: 83px; border-radius: 12px; border: 1px solid rgba(127, 127, 127, 0.25); background: var(--bg); }
.inbox__noshot { grid-column: 1; color: var(--soft); font-size: 0.8125rem; }
.inbox__acts { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.inbox select { width: auto; padding: 0.45rem 0.7rem; }
@media (max-width: 700px) { .inbox__item { grid-template-columns: 1fr; } .inbox__acts { grid-column: 1; grid-row: auto; justify-content: flex-start; } }
.adm-logs { width: min(60rem, calc(100vw - 2rem)); }
.adm-logs__text { margin-top: 1rem; max-height: 60svh; overflow: auto; padding: 1rem; border-radius: 14px; background: #050506; color: #d4d4d8; font: 0.8125rem/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-word; } /* taste-skill-ignore: registros de verdade */

/* Versões e avisos. */
.adm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
@media (max-width: 1000px) { .adm-two { grid-template-columns: 1fr; } }
.adm-card-box { border-radius: 20px; background: var(--surface); padding: 1.25rem 1.35rem; }
.adm-card-box h2 { font-size: 1.0625rem; }
.adm-card-box h3 { margin-top: 1.1rem; font-size: 0.9375rem; color: var(--muted); font-weight: 500; }
.adm-card-box .adm-fields { margin-top: 1rem; }
.vbar { display: grid; grid-template-columns: 4.5rem 1fr 11rem; align-items: center; gap: 0.75rem; margin-top: 0.6rem; font-size: 0.9375rem; }
.vbar__name { font-weight: 600; font-variant-numeric: tabular-nums; }
.vbar__track { height: 0.6rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.vbar__track i { display: block; height: 100%; border-radius: 999px; background: #0284c7; }
.vbar__n small { display: block; color: var(--soft); font-size: 0.8125rem; }
.notices { margin-top: 0.75rem; display: grid; gap: 0.5rem; padding: 0; list-style: none; }
.notice { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding: 0.9rem 1rem; border-radius: 16px; background: var(--surface-2); }
.notice b { margin-left: 0.5rem; }
.notice p { margin-top: 0.35rem; color: var(--muted); font-size: 0.9375rem; }
.notice small { display: block; margin-top: 0.35rem; color: var(--soft); font-size: 0.8125rem; }
.notice small a { color: var(--link); }

/* O editor de um cartão. */
.adm-edit { width: min(40rem, calc(100vw - 2rem)); }
.adm-fields { margin-top: 1.25rem; display: grid; gap: 0.9rem; }
.adm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.adm-check { display: inline-flex !important; grid-auto-flow: column; align-items: center; gap: 0.5rem; font-weight: 400 !important; color: var(--muted); font-size: 0.9375rem; }
.adm-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--blue); }
.adm-edit__end { margin-top: 1.5rem; display: flex; align-items: center; gap: 0.5rem; }
.adm-edit__space { flex: 1; }
.adm-danger { color: #fca5a5; font-weight: 500; padding: 0.5rem 0.25rem; font-size: 0.9375rem; }
.adm-danger:hover { color: #fecaca; }
@media (max-width: 640px) { .adm-row { grid-template-columns: 1fr; } }

/* ================= beUI: acabamentos de movimento ================= */
/* "Trabalhando…" com um brilho que passa pelo texto, como um carregando. Quem pede menos movimento vê o verde parado. */
.app__bot small[data-tone="go"], .job__state:not([data-tone]), .scr__pill small:not([data-tone]) {
  background: linear-gradient(90deg, var(--go) 0 38%, #dcffe8 50%, var(--go) 62% 100%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .app__bot small[data-tone="go"], .job__state:not([data-tone]), .scr__pill small:not([data-tone]) { animation: shimmer 2.4s linear infinite; }
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.job__state:not([data-tone]) { color: transparent; }

/* Abas e filtros: uma pílula clara desliza até o escolhido (com JavaScript; sem ele, o escolhido fica claro como antes). */
.has-glider { position: relative; isolation: isolate; }
.glider { position: absolute; left: 0; top: 0; z-index: -1; border-radius: 999px; background: var(--ink); pointer-events: none; transition: transform 420ms cubic-bezier(0.3, 1.25, 0.5, 1), width 420ms cubic-bezier(0.3, 1.25, 0.5, 1), height 420ms var(--ease-out); }
.has-glider [aria-selected="true"] { background: transparent; }
.has-glider.is-still .glider { transition: none; }

/* Dynamic Island: de tempos em tempos abre e mostra o Bot trabalhando, e depois volta a ser a pílula. */
.island { z-index: 2; transition: width 520ms cubic-bezier(0.3, 1.3, 0.5, 1), height 520ms cubic-bezier(0.3, 1.3, 0.5, 1), margin-left 520ms cubic-bezier(0.3, 1.3, 0.5, 1), border-radius 520ms ease, padding 520ms ease; }
.island svg { transition: width 520ms cubic-bezier(0.3, 1.3, 0.5, 1), height 520ms cubic-bezier(0.3, 1.3, 0.5, 1); }
.island__text { flex: 0 1 0; width: 0; min-width: 0; margin-left: 0; opacity: 0; filter: blur(4px); transition: opacity 200ms ease, filter 200ms ease; white-space: nowrap; overflow: hidden; }
.island__text b { display: block; font-size: 0.78em; color: #fff; }
.island__text small { display: block; font-size: 0.66em; color: var(--go); }
.island.is-open { width: 90%; margin-left: -45%; height: 3.4em; border-radius: 1.7em; padding: 0 0.7em; }
.island.is-open svg { width: 2.2em; height: 2.2em; }
.island.is-open .island__text { flex: 1; margin-left: 0.5em; opacity: 1; filter: none; transition-delay: 220ms; }
.island.is-open i { width: 1.4em; height: 1.4em; }

/* Avisos dos outros Bots na demo do Mac: chegam no canto, se empilham (o mais novo na frente) e somem sozinhos. */
.toasts { position: absolute; top: 3.4em; right: 1em; z-index: 5; width: min(19em, 60%); display: grid; }
.toast { grid-area: 1 / 1; display: flex; align-items: center; gap: 0.6em; width: 100%; padding: 0.65em 0.8em; border-radius: 0.9em; background: #26262a; box-shadow: 0 8px 24px rgb(0 0 0 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.06); text-align: left; font-size: 0.86em; color: #ececec; transform-origin: top center; transition: transform 420ms cubic-bezier(0.3, 1.25, 0.5, 1), opacity 300ms ease, filter 300ms ease; }
.toast svg { width: 2.1em; height: 2.1em; }
.toast > span:first-child { flex: none; }
.toast b { display: block; font-weight: 600; }
.toast small { display: block; color: #b4b4bd; font-size: 0.95em; }
.toast[data-i="0"] { z-index: 3; }
.toast[data-i="1"] { z-index: 2; transform: translateY(0.7em) scale(0.94); filter: brightness(0.7); }
.toast[data-i="2"] { z-index: 1; transform: translateY(1.3em) scale(0.88); filter: brightness(0.5); }
.toast[data-i="3"], .toast.is-gone { opacity: 0; filter: blur(4px); transform: translateY(1.6em) scale(0.84); pointer-events: none; }
.toast.is-new { opacity: 0; transform: translateY(-1.2em) scale(0.96); filter: blur(4px); }
@media (max-width: 760px) { .toasts { display: none; } }

/* Troca de texto com desfoque: o texto novo entra nítido saindo de um leve borrão (botões de baixar, situação do Bot,
   falas da ligação). Funciona porque cada troca cria elementos novos, e a animação roda ao aparecer. */
@media (prefers-reduced-motion: no-preference) {
  .button.is-loading > :not(.peek):not(.dl__bar), .button.is-done > :not(.peek), .button.is-back > :not(.peek), .job__state.is-swapped, .call__line { animation: blurin 340ms var(--ease-out) both; }
}
@keyframes blurin { from { opacity: 0; filter: blur(6px); transform: translateY(3px); } }