/* ============================================================================
   J.A.R.V.I.S. · INTENT OS (v8) — a pele
   ----------------------------------------------------------------------------
   Regra do sistema: COMPLEXIDADE PARA A IA, SIMPLICIDADE PARA O HUMANO.
   O ecrã só mostra três coisas — intenção → progresso → resultado. Tudo o resto
   (apps, APIs, ficheiros, permissões) é trabalho da máquina e não se vê.

   Este ficheiro carrega DEPOIS de todos os outros e é ele que manda. Não usa
   !important a martelar: ganha por ordem e por especificidade honesta
   (`body.intent-os …`) nos poucos sítios onde a pele antiga insistia.

   PALETA (a do desenho aprovado):
     #08090D fundo · #11131A superfícies · branco quase puro · azul elétrico,
     violeta e ciano. Cor com SIGNIFICADO, nunca decorativa:
       azul = informação · violeta = IA · verde = concluído
       laranja = atenção · vermelho = perigo
   ========================================================================== */

:root {
  --os-bg: #08090D;
  --os-bg-2: #0B0D14;
  --os-surface: #11131A;
  --os-surface-2: #171A24;
  --os-surface-3: #1E2230;
  --os-line: rgba(255, 255, 255, 0.075);
  --os-line-hi: rgba(255, 255, 255, 0.14);
  --os-ink: #F2F4FA;
  --os-ink-2: #B7BCCC;
  --os-ink-3: #767D93;

  --i-violet: #8B5CF6;      /* IA */
  --i-violet-hi: #A78BFA;
  --i-blue: #4C8DFF;        /* informação */
  --i-cyan: #22D3EE;
  --i-green: #34D399;       /* concluído */
  --i-orange: #FB923C;      /* atenção */
  --i-red: #F43F5E;         /* perigo */

  --os-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  --os-rail: 96px;
  --os-side: 372px;
  --os-top: 54px;
  --r-card: 18px;
}

/* O fundo do Intent OS é escuro e CALMO: a luz existe, mas atrás de tudo, como
   uma aurora distante. Os blooms fortes do HUD antigo (que existiam para o
   vidro ter matéria para desfocar) aqui só faziam ruído. */
body.intent-os { background: var(--os-bg); color: var(--os-ink); }
body.intent-os::before {
  background:
    radial-gradient(46% 38% at 78% -4%, rgba(139, 92, 246, 0.30), transparent 70%),
    radial-gradient(40% 34% at 6% 4%, rgba(34, 211, 238, 0.14), transparent 70%),
    radial-gradient(44% 40% at 50% 108%, rgba(76, 141, 255, 0.16), transparent 72%),
    radial-gradient(70% 60% at 50% 50%, rgba(24, 20, 48, 0.55), transparent 80%);
  background-size: auto;
  filter: none;
  -webkit-mask: none;
  mask: none;
}
body.intent-os::after {
  background: radial-gradient(130% 100% at 50% 40%, transparent 58%, rgba(2, 3, 6, 0.7) 100%);
}

/* ===== Arranque: o mesmo orbe, o nome e uma linha de identidade ============ */
body.intent-os .boot { background: var(--os-bg); }
body.intent-os .boot-name { color: #EEE9FF; text-shadow: 0 0 10px rgba(167, 139, 250, 0.75), 0 0 40px rgba(139, 92, 246, 0.45); letter-spacing: 6px; }
.boot-tag {
  position: absolute; left: 0; right: 0; bottom: -6px;
  font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--os-ink-3);
}
body.intent-os .boot-log { color: rgba(167, 139, 250, 0.75); text-shadow: none; opacity: 0.7; font-size: 11px; }

/* ============================================================================
   ESTRUTURA
   ========================================================================== */
body.intent-os .app { position: fixed; inset: 0; display: block; }
.os {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: var(--os-rail) minmax(0, 1fr) 0px;
  transition: grid-template-columns 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  padding: calc(10px + var(--safe-top)) 10px calc(10px + var(--safe-bottom));
  gap: 10px;
  z-index: 2;
}
.os.side-open { grid-template-columns: var(--os-rail) minmax(0, 1fr) var(--os-side); }

/* ---------- Superfície canónica do OS ---------- */
.rail, .os-main, .os-side, body.intent-os .conv-rail {
  background: linear-gradient(180deg, rgba(23, 26, 36, 0.92), rgba(17, 19, 26, 0.94));
  border: 1px solid var(--os-line);
  border-radius: 20px;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: var(--os-shadow);
}

/* ============================================================================
   RAIL — navegação por camada do OS (não por «programa»)
   ========================================================================== */
.rail { display: flex; flex-direction: column; align-items: stretch; padding: 14px 8px; gap: 4px; overflow: hidden; }
.rail-brand { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 6px 0 16px; }
.brand-orb {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #0B0D14 40%, transparent 41%),
    conic-gradient(from 210deg, var(--i-violet), var(--i-blue), var(--i-cyan), var(--i-violet));
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.55);
}
.brand-name { font-size: 9.5px; letter-spacing: 2.2px; color: var(--os-ink-3); font-weight: 600; }
.rail-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.rail-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 4px 8px; border-radius: 14px;
  background: transparent; border: 1px solid transparent;
  color: var(--os-ink-3); cursor: pointer;
  font: inherit; font-size: 10px; letter-spacing: 0.2px;
  transition: color 0.16s, background 0.16s, border-color 0.16s;
}
.rail-item svg { width: 20px; height: 20px; }
.rail-item:hover { color: var(--os-ink-2); background: rgba(255, 255, 255, 0.035); }
.rail-item.is-on {
  color: #fff;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.22), rgba(139, 92, 246, 0.08));
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: inset 0 0 20px rgba(139, 92, 246, 0.12);
}
.rail-item.is-on svg { filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.8)); }
.rail-bottom { padding-top: 8px; border-top: 1px solid var(--os-line); }

/* ============================================================================
   TOPO
   ========================================================================== */
.os-main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; position: relative; }
.os-top {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  height: var(--os-top); padding: 0 16px; flex: none;
  border-bottom: 1px solid var(--os-line);
}
.top-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top-view { font-size: 10.5px; letter-spacing: 2.4px; color: var(--os-ink-3); font-weight: 700; }
body.intent-os .status {
  font-size: 10px; letter-spacing: 1.4px; color: var(--os-ink-3);
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--os-line);
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw;
  position: static; transform: none;
}
body.intent-os .status.active { color: var(--i-violet-hi); border-color: rgba(139, 92, 246, 0.45); background: rgba(139, 92, 246, 0.12); }
.top-mid { display: flex; align-items: baseline; gap: 9px; }
body.intent-os .clock { font-size: 15px; font-weight: 600; letter-spacing: 0.4px; color: var(--os-ink); font-family: var(--font-ui); }
body.intent-os .dateline { font-size: 11px; color: var(--os-ink-3); text-transform: none; letter-spacing: 0; }
.top-right { display: flex; align-items: center; gap: 8px; }
.weather { font-size: 11.5px; color: var(--os-ink-2); white-space: nowrap; }
body.intent-os .sys-tray { display: flex; gap: 7px; align-items: center; opacity: 0.75; font-size: 11px; position: static; }
body.intent-os .battery { font-size: 11px; color: var(--os-ink-3); }
.icon-btn {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--os-line);
  color: var(--os-ink-2); cursor: pointer; font-size: 13px;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* Selo do modo de autonomia — sempre à vista: o senhor tem de saber, de relance,
   até onde é que ele vai sozinho neste momento. */
.autonomy-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--os-line);
  color: var(--os-ink-2); font: inherit; font-size: 11px;
}
.autonomy-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; color: var(--i-green); }
.autonomy-chip[data-level="assistido"] .dot { color: var(--i-blue); }
.autonomy-chip[data-level="total"] .dot { color: var(--i-orange); }
.autonomy-chip:hover { border-color: var(--os-line-hi); color: #fff; }

/* ============================================================================
   CORPO / VISTAS
   ========================================================================== */
.os-body { flex: 1; min-height: 0; position: relative; }
.view { position: absolute; inset: 0; overflow: auto; padding: 18px 22px 8px; display: none; }
.view.is-on { display: block; }
.view::-webkit-scrollbar { width: 8px; }
.view::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 8px; }
.view-h { margin-bottom: 16px; }
.view-h h2 { font-size: 19px; font-weight: 650; letter-spacing: -0.2px; }
.view-h p { font-size: 12.5px; color: var(--os-ink-3); margin-top: 3px; }

/* ---------------------------------------------------------------- 01 · HOME */
.view-home { display: none; }
.view-home.is-on { display: flex; flex-direction: column; align-items: center; }
/* Os dois `margin-top:auto` (aqui e no «Hoje») dividem o espaço livre em partes
   iguais: a pergunta e o orbe ficam centrados no que sobra, e o «Hoje» assenta
   no fundo. Sem isto, a Home ficava com o orbe colado ao topo e um buraco. */
.home-ask { text-align: center; margin-top: auto; padding-top: 8px; }
.home-ask h1 {
  font-size: clamp(24px, 3.4vw, 38px); font-weight: 600; letter-spacing: -0.8px;
  background: linear-gradient(100deg, #FFFFFF 20%, #C9BBFF 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home-sub { font-size: 13px; color: var(--os-ink-3); margin-top: 6px; }

/* O AI CORE. Não é um boneco: é energia. Cinco estados, lidos de relance —
   parado, à escuta, a pensar, a executar, a pedir autorização. */
.core-wrap {
  position: relative; margin: clamp(14px, 3.5vh, 34px) 0 clamp(10px, 3vh, 26px);
  display: grid; place-items: center;
  width: clamp(150px, 20vh, 210px); height: clamp(150px, 20vh, 210px);
}
.core-halo {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.22) 0%, transparent 62%);
  animation: coreBreath 5.5s ease-in-out infinite;
}
@keyframes coreBreath { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.09); opacity: 1; } }
body.intent-os .core-wrap .reactor {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 50% 50%, rgba(10, 11, 18, 0.9) 46%, transparent 70%);
  border: none; box-shadow: none; transform: none; inset: auto; margin: 0;
}
/* O anel de luz — a assinatura visual do sistema. */
body.intent-os .core-wrap .reactor::after {
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  border: 2px solid transparent;
  background: conic-gradient(from 200deg, var(--i-violet), var(--i-blue), var(--i-cyan), var(--i-violet)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 14px rgba(139, 92, 246, 0.7));
  animation: coreSpin 14s linear infinite;
}
@keyframes coreSpin { to { transform: rotate(360deg); } }
body.intent-os .core-wrap .reactor.listening::after { animation-duration: 5s; filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.85)); }
body.intent-os .core-wrap .reactor.thinking::after { animation-duration: 2.2s; filter: drop-shadow(0 0 22px rgba(236, 72, 153, 0.8)); }
body.intent-os .core-wrap .reactor.speaking::after { animation-duration: 8s; filter: drop-shadow(0 0 20px rgba(167, 139, 250, 0.9)); }
body.intent-os .core-wrap .reactor.sentinel::after { animation-duration: 22s; opacity: 0.55; }
body.intent-os .reactor-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Restos do HUD «Mark VII»: o anel segmentado e as miras de instrumento que o
   reator trazia de origem. No Intent OS a moldura é o anel de luz e mais nada. */
body.intent-os .reactor-ring { display: none; }
body.intent-os .core-wrap .reactor::before { display: none; }
body.intent-os .hint {
  position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%);
  font-size: 11px; color: var(--os-ink-3); white-space: nowrap;
  background: none; border: none; padding: 0; letter-spacing: 0;
  text-transform: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  opacity: 1;
}

/* «Hoje» — só o que é relevante AGORA. Nunca tudo ao mesmo tempo. */
.today { width: 100%; max-width: 1080px; margin-top: auto; padding-bottom: 8px; }
.today-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.today-h > span { font-size: 12px; letter-spacing: 1.6px; color: var(--os-ink-3); font-weight: 600; text-transform: uppercase; }
.link-btn { background: none; border: none; color: var(--i-violet-hi); font: inherit; font-size: 11.5px; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.today-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(168px, 1fr);
  gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none;
}
.today-row::-webkit-scrollbar { display: none; }
.t-card {
  text-align: left; cursor: pointer; position: relative; overflow: hidden;
  padding: 12px 13px; min-height: 104px; border-radius: var(--r-card);
  background: linear-gradient(165deg, var(--os-surface-2), var(--os-surface));
  border: 1px solid var(--os-line); color: inherit; font: inherit;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s;
}
.t-card:hover { transform: translateY(-2px); border-color: var(--os-line-hi); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4); }
.t-card .t-ico { font-size: 15px; opacity: 0.9; }
.t-card b { font-size: 12.5px; font-weight: 600; }
.t-card span { font-size: 11px; color: var(--os-ink-3); line-height: 1.35; }
.t-card .t-foot { margin-top: auto; font-size: 10.5px; color: var(--os-ink-3); }
.t-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--i-blue); opacity: 0.85;
}
.t-card[data-tone="ia"]::before { background: var(--i-violet); }
.t-card[data-tone="ok"]::before { background: var(--i-green); }
.t-card[data-tone="warn"]::before { background: var(--i-orange); }
.t-bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 6px; }
.t-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--i-violet), var(--i-blue)); }

/* ------------------------------------------------------------- CONVERSA */
.view-conversa { display: none; padding: 12px 0 0; }
.view-conversa.is-on { display: flex; flex-direction: column; }
.conv-head { display: flex; gap: 7px; padding: 0 22px 10px; flex: none; }
.chip-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--os-line);
  color: var(--os-ink-2); font: inherit; font-size: 11.5px;
}
.chip-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.chip-btn.ghost { margin-left: auto; }
body.intent-os .chat {
  position: static; flex: 1; min-height: 0; overflow-y: auto;
  padding: 4px 22px 10px; display: flex; flex-direction: column; gap: 12px;
  -webkit-mask: none; mask: none;
}
body.intent-os .chat::after { content: ""; display: block; flex: none; height: var(--chat-pad, 0px); }
body.intent-os .msg {
  max-width: min(720px, 92%); padding: 11px 14px; border-radius: 16px;
  border: 1px solid var(--os-line); font-size: 14px; line-height: 1.5;
  background: var(--os-surface-2); color: var(--os-ink);
  clip-path: none; box-shadow: none; margin: 0;
}
body.intent-os .msg::before, body.intent-os .msg::after { display: none; }
body.intent-os .msg.user {
  align-self: flex-end;
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.22), rgba(76, 141, 255, 0.14));
  border-color: rgba(139, 92, 246, 0.35);
}
body.intent-os .msg.jarvis { align-self: flex-start; }
body.intent-os .msg .who {
  display: block; font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--os-ink-3); margin-bottom: 5px; border: none; padding: 0; background: none;
}
body.intent-os .msg.trace {
  align-self: flex-start; max-width: min(720px, 92%);
  background: rgba(255, 255, 255, 0.025); border-color: rgba(255, 255, 255, 0.05);
  color: var(--os-ink-3); font-size: 11.5px; font-family: var(--font-mono); padding: 7px 11px;
}
body.intent-os .copy-btn { color: var(--os-ink-3); background: none; border: none; }

/* ------------------------------------------------------------- 06 · FLOW */
.flow-canvas {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: minmax(120px, 150px) 34px minmax(140px, 170px) 40px minmax(200px, 1fr) 34px minmax(120px, 150px);
  padding: 18px 4px; margin-bottom: 18px;
}
.flow-node {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 13px; border-radius: 14px;
  background: var(--os-surface-2); border: 1px solid var(--os-line);
  position: relative;
}
.flow-node b { font-size: 12.5px; font-weight: 600; }
.flow-node span { font-size: 10.5px; color: var(--os-ink-3); }
/* O pedido do senhor pode ser uma frase inteira: corta-se em três linhas com
   reticências em vez de o deixar sair pela caixa fora. */
.node-you span {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}
.flow-steps { display: flex; flex-direction: column; gap: 8px; }
.flow-node.step { display: grid; grid-template-columns: 22px 1fr 18px; grid-template-rows: auto auto; column-gap: 9px; align-items: center; padding: 9px 12px; }
.flow-node.step .s-ico { grid-row: 1 / 3; font-style: normal; font-size: 14px; color: var(--os-ink-3); text-align: center; }
.flow-node.step b { grid-column: 2; }
.flow-node.step span { grid-column: 2; }
.flow-node.step .s-state {
  grid-column: 3; grid-row: 1 / 3; width: 15px; height: 15px; border-radius: 50%;
  border: 1.6px solid var(--os-line-hi); font-style: normal;
}
.flow-node.step.doing { border-color: rgba(139, 92, 246, 0.5); box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.18), 0 0 24px rgba(139, 92, 246, 0.15); }
.flow-node.step.doing .s-state { border-color: var(--i-violet); border-top-color: transparent; animation: coreSpin 0.9s linear infinite; }
.flow-node.step.doing .s-ico { color: var(--i-violet-hi); }
.flow-node.step.done .s-state { border-color: var(--i-green); background: var(--i-green); box-shadow: 0 0 10px rgba(52, 211, 153, 0.6); }
.flow-node.step.done .s-state::after { content: "✓"; display: grid; place-items: center; height: 100%; font-size: 9px; color: #04150F; font-weight: 900; }
.flow-node.step.skip { opacity: 0.42; }
.flow-core { display: grid; place-items: center; gap: 8px; }
.flow-core-orb {
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background:
    radial-gradient(circle, rgba(139, 92, 246, 0.30) 0%, rgba(76, 141, 255, 0.14) 45%, transparent 68%),
    radial-gradient(circle, rgba(11, 13, 20, 0.9) 40%, transparent 70%);
  box-shadow: 0 0 34px rgba(139, 92, 246, 0.25);
  position: relative;
}
.flow-core-orb::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid transparent;
  background: conic-gradient(from 0deg, var(--i-violet), var(--i-blue), var(--i-cyan), var(--i-violet)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.6));
  animation: coreSpin 12s linear infinite;
}
.os.is-busy .flow-core-orb::after { animation-duration: 2.4s; }
.flow-core-lbl { text-align: center; }
.flow-core-lbl b { display: block; font-size: 12.5px; }
.flow-core-lbl span { font-size: 10.5px; color: var(--os-ink-3); }
.flow-link { height: 1px; background: linear-gradient(90deg, transparent, var(--os-line-hi), transparent); position: relative; }
.flow-link::after { content: "▸"; position: absolute; right: -2px; top: -8px; color: var(--os-ink-3); font-size: 11px; }
.flow-fan {
  align-self: stretch; border-left: 1px solid var(--os-line-hi);
  margin: 12px 0 12px 16px; border-radius: 2px;
}
.node-done { border-color: rgba(52, 211, 153, 0.35); background: linear-gradient(160deg, rgba(52, 211, 153, 0.14), var(--os-surface-2)); }
.node-done.is-off { opacity: 0.35; border-color: var(--os-line); background: var(--os-surface-2); }
.flow-log-h { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--os-ink-3); margin-bottom: 8px; }
.flow-log { display: flex; flex-direction: column; gap: 5px; padding-bottom: 20px; }
.flow-log div {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--os-ink-2);
  padding: 7px 11px; border-radius: 10px; background: rgba(255, 255, 255, 0.025);
  border-left: 2px solid var(--i-blue);
}
.flow-log div.err { border-left-color: var(--i-red); color: #FFC2CE; }
.flow-log .vazio { border: none; background: none; color: var(--os-ink-3); font-family: var(--font-ui); }

/* -------------------------------------------------------- 04 · CONTEXTOS */
.ctx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; padding-bottom: 24px; }
.ctx-card {
  text-align: left; cursor: pointer; padding: 14px; border-radius: var(--r-card);
  background: linear-gradient(165deg, var(--os-surface-2), var(--os-surface));
  border: 1px solid var(--os-line); color: inherit; font: inherit;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.16s, border-color 0.16s;
}
.ctx-card:hover { transform: translateY(-2px); border-color: var(--os-line-hi); }
.ctx-ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 16px; }
.ctx-card b { font-size: 13.5px; }
.ctx-card .ctx-n { font-size: 10.5px; color: var(--os-ink-3); }
.ctx-list { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.ctx-list i { font-style: normal; font-size: 11.5px; color: var(--os-ink-2); display: flex; gap: 6px; align-items: center; }
.ctx-list i::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.5; flex: none; }
.ctx-detail { padding: 4px 0 24px; }
.ctx-detail .voltar { margin-bottom: 12px; }
.ctx-item {
  padding: 11px 13px; border-radius: 13px; background: var(--os-surface-2);
  border: 1px solid var(--os-line); margin-bottom: 7px; font-size: 12.5px; line-height: 1.45;
}
.ctx-item small { display: block; color: var(--os-ink-3); font-size: 10.5px; margin-top: 3px; }

/* ---------------------------------------------------------- MEMÓRIA */
.mem-tools { display: flex; gap: 8px; margin-bottom: 12px; }
.mem-search {
  flex: 1; padding: 9px 13px; border-radius: 12px; font: inherit; font-size: 12.5px;
  background: var(--os-surface-2); border: 1px solid var(--os-line); color: var(--os-ink);
}
.mem-search:focus { outline: none; border-color: rgba(139, 92, 246, 0.5); }
.mem-list { display: flex; flex-direction: column; gap: 7px; padding-bottom: 24px; }
.mem-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px; border-radius: 13px; background: var(--os-surface-2);
  border: 1px solid var(--os-line); font-size: 12.5px; line-height: 1.45;
}
.mem-item time { flex: none; font-size: 10.5px; color: var(--os-ink-3); padding-top: 2px; min-width: 62px; }
.mem-vazio { color: var(--os-ink-3); font-size: 12.5px; padding: 20px 0; }

/* ============================================================================
   BARRA DE INTENÇÃO — a única entrada do sistema
   ========================================================================== */
body.intent-os .hud-bottom.intent-dock {
  position: static; flex: none; transform: none; inset: auto;
  display: flex; align-items: flex-end; gap: 10px;
  padding: 10px 16px 12px; margin: 0;
  background: none; border: none; border-top: 1px solid var(--os-line);
  border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  width: auto; max-width: none;
}
/* A barra herdava do dock antigo `width:100%` + `flex-wrap:wrap` (era uma peça
   `fixed` de lado a lado). Como item flexível isso impedia-a de encolher, e num
   ecrã de 390px o botão de enviar saía pela borda fora. Aqui desfaz-se os dois:
   base zero, sem largura própria, sem wrap. */
body.intent-os .text-bar {
  position: static; flex: 1 1 0%; min-width: 0; width: auto;
  transform: none; inset: auto;
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px;
  padding: 0; margin: 0 auto; max-width: 760px;
  background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.text-bar-row {
  min-width: 0;
  display: flex; align-items: flex-end; gap: 6px;
  padding: 6px 6px 6px 10px; border-radius: 18px;
  background: var(--os-surface-2); border: 1px solid var(--os-line);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.text-bar-row:focus-within {
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12), 0 0 30px rgba(139, 92, 246, 0.14);
}
body.intent-os #textInput {
  flex: 1 1 0%; min-width: 0; width: auto; resize: none; border: none; outline: none; background: none;
  color: var(--os-ink); font: inherit; font-size: 14px; line-height: 1.45;
  padding: 8px 2px; max-height: 40vh; min-height: 0; border-radius: 0;
  box-shadow: none;
}
body.intent-os #textInput::placeholder { color: var(--os-ink-3); }
.bar-icon {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 12px; border: 1px solid transparent; background: transparent;
  color: var(--os-ink-3); cursor: pointer;
}
.bar-icon:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
body.intent-os .mic-btn {
  position: static; width: 34px; height: 34px; border-radius: 12px;
  background: transparent; border: 1px solid transparent; box-shadow: none; transform: none;
  color: var(--os-ink-3);
}
body.intent-os .mic-btn::before, body.intent-os .mic-btn::after { display: none; }
body.intent-os .mic-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
body.intent-os .mic-btn.rec, body.intent-os .mic-btn.listening {
  color: #fff; background: linear-gradient(160deg, var(--i-cyan), var(--i-blue));
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.5);
}
.bar-icon.send { background: linear-gradient(160deg, var(--i-violet), #6D5BE0); color: #fff; }
.bar-icon.send:hover { filter: brightness(1.12); background: linear-gradient(160deg, var(--i-violet), #6D5BE0); }
.dock-side { display: flex; gap: 6px; flex: none; padding-bottom: 4px; }
/* O TAMANHO E O NOME SAEM DAQUI (17 ago 2026). Isto punha 32×32 px e escondia a
   etiqueta — seis símbolos iguais, sem nome, encostados uns aos outros. Era a
   queixa dele: "tudo super compactado e sem respirar nem bonito". O desenho da
   casa para estes botões é o do v4.css (ícone com o NOME por baixo) e é esse que
   fica; o ritmo — alvo, espaço e letra — vem do respirar.css. Aqui só a cor. */
body.intent-os .dock-side .round-btn {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--os-line);
  color: var(--os-ink-3); box-shadow: none;
}
body.intent-os .dock-side .round-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.09); transform: none; }
body.intent-os .dock-side .round-btn.on { color: var(--i-cyan); border-color: rgba(34, 211, 238, 0.45); background: rgba(34, 211, 238, 0.12); }
/* A etiqueta VOLTA: era ela que dizia qual dos seis botoes e o quê. */
body.intent-os .dock-apps { display: flex; gap: 6px; flex: none; padding-bottom: 4px; }
body.intent-os .dock-apps:empty { display: none; }
body.intent-os .attach-tray { position: static; margin: 0 auto; max-width: 760px; width: 100%; }
/* Botões que o Jarvis OS injeta direto na barra-mãe (energia, atualização) —
   continuam a aparecer, agora com a roupa da casa. */
body.intent-os .intent-dock > .round-btn {
  align-self: center; border-radius: 14px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--os-line);
  color: var(--os-ink-3); box-shadow: none;
}
body.intent-os .intent-dock > .round-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.09); transform: none; }
/* O teclado no ecrã (Surface) escondia a barra inteira — no Intent OS isso era
   tirar-lhe a única forma de escrever enquanto escreve. */
body.intent-os.com-osk .hud-bottom.intent-dock { display: flex; }

/* ------------------------------------------------------- 08 · FICHEIROS */
.fich-atalhos { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }

/* --------------------------------------------- 07 · INTERFACE ADAPTÁVEL
   A barra que só existe enquanto a tarefa existe. */
.modo-bar {
  display: flex; align-items: center; gap: 10px; flex: none;
  margin: 0 16px 2px; padding: 8px 12px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.16), rgba(76, 141, 255, 0.08));
  border: 1px solid rgba(139, 92, 246, 0.32);
  animation: cardIn 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.modo-nome { font-size: 12px; font-weight: 600; letter-spacing: 0.2px; }
.modo-tools { display: flex; gap: 6px; flex: 1; }
.modo-tools .chip-btn { min-width: 34px; justify-content: center; font-size: 13px; }

/* ------------------------------------------------ 12 · GESTOS & ATALHOS */
.atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.atalho {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--os-surface-2); border: 1px solid var(--os-line);
}
.atalho kbd {
  flex: none; font-family: var(--font-mono); font-size: 10.5px; padding: 4px 8px;
  border-radius: 7px; background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--os-line-hi); color: var(--os-ink);
}
.atalho span { font-size: 11.5px; color: var(--os-ink-3); line-height: 1.35; }

/* ============================================================================
   03 + 05 · EXECUÇÃO EM TEMPO REAL / INTENT CARDS
   ========================================================================== */
.os-side { display: flex; flex-direction: column; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.os.side-open .os-side { opacity: 1; pointer-events: auto; }
.side-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px; border-bottom: 1px solid var(--os-line); flex: none;
}
.side-head b { font-size: 12.5px; display: block; }
.side-head span { font-size: 10.5px; color: var(--os-ink-3); }
.card-stack { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 11px; }
.side-foot { padding: 0 12px 10px; }

.icard {
  border-radius: var(--r-card); overflow: hidden; flex: none;
  background: linear-gradient(170deg, var(--os-surface-2), var(--os-surface));
  border: 1px solid var(--os-line);
  animation: cardIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cardIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.icard.is-live { border-color: rgba(139, 92, 246, 0.4); box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.12), 0 0 30px rgba(139, 92, 246, 0.12); }
.icard.is-done { border-color: rgba(52, 211, 153, 0.3); }
.icard.is-err { border-color: rgba(244, 63, 94, 0.35); }
.icard-h { display: flex; align-items: flex-start; gap: 9px; padding: 12px 13px 9px; }
.icard-h .ico { font-size: 14px; line-height: 1.3; }
.icard-h b { font-size: 12.5px; font-weight: 600; line-height: 1.35; flex: 1; }
.icard-h .x { background: none; border: none; color: var(--os-ink-3); cursor: pointer; font-size: 13px; padding: 0 2px; }
.icard-steps { padding: 0 13px 10px; display: flex; flex-direction: column; gap: 7px; }
.istep { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--os-ink-3); }
.istep i {
  flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 1.6px solid var(--os-line-hi); font-style: normal;
}
.istep.doing { color: var(--os-ink); }
.istep.doing i { border-color: var(--i-violet); border-top-color: transparent; animation: coreSpin 0.9s linear infinite; }
.istep.done { color: var(--os-ink-2); }
.istep.done i { border-color: var(--i-green); background: var(--i-green); }
.istep.done i::after { content: "✓"; display: grid; place-items: center; height: 100%; font-size: 9px; color: #04150F; font-weight: 900; }
.istep.err { color: #FFC2CE; }
.istep.err i { border-color: var(--i-red); background: var(--i-red); }
.icard-body { padding: 0 13px 12px; font-size: 12px; line-height: 1.5; color: var(--os-ink-2); }
.icard-body .linha { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--os-line); }
.icard-body .linha b { color: var(--os-ink); font-weight: 600; }
.icard-foot {
  display: flex; align-items: center; gap: 8px; padding: 10px 13px;
  border-top: 1px solid var(--os-line); background: rgba(255, 255, 255, 0.02);
}
.icard-foot p { flex: 1; font-size: 11px; color: var(--os-ink-3); line-height: 1.35; }
.btn-auth {
  padding: 7px 15px; border-radius: 11px; border: none; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 600; color: #fff;
  background: linear-gradient(160deg, var(--i-violet), #6D5BE0);
  box-shadow: 0 6px 18px rgba(109, 91, 224, 0.35);
}
.btn-auth:hover { filter: brightness(1.1); }
.btn-deny {
  padding: 7px 13px; border-radius: 11px; cursor: pointer; font: inherit; font-size: 12px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--os-line); color: var(--os-ink-2);
}
.btn-deny:hover { color: #fff; border-color: var(--os-line-hi); }
/* 🔥 Crítico — sai para o mundo ou não se desfaz. A moldura diz-o antes de se ler. */
.icard.is-crit, .auth-pop.is-crit {
  border-color: rgba(244, 63, 94, 0.5);
  box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.14), 0 0 34px rgba(244, 63, 94, 0.16);
}
.icard.is-crit .btn-auth, .auth-pop.is-crit .btn-auth {
  background: linear-gradient(160deg, #F43F5E, #C0294A);
  box-shadow: 0 6px 18px rgba(244, 63, 94, 0.35);
}
.icard-body .linha b { min-width: 78px; flex: none; }

/* Task Capsules na Home */
.caps-dica { font-size: 11px; color: var(--os-ink-3); letter-spacing: 0; text-transform: none; font-weight: 400; }
.capsulas .t-card { padding-bottom: 30px; }
/* Uma tarefa sozinha não se estica pelo ecrã todo: fica com largura de cartão. */
#capsulasRow { grid-auto-columns: minmax(240px, 330px); justify-content: start; }
.caps-acoes { position: absolute; right: 8px; bottom: 7px; display: flex; gap: 4px; }
.caps-acoes button {
  width: 22px; height: 22px; border-radius: 7px; cursor: pointer; font-size: 11px; line-height: 1;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--os-line); color: var(--os-ink-3);
}
.caps-acoes button:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }

.side-vazio { padding: 30px 16px; text-align: center; color: var(--os-ink-3); font-size: 12px; line-height: 1.6; }
.side-vazio .o { font-size: 22px; display: block; margin-bottom: 8px; opacity: 0.5; }

/* Aviso de autorização quando o painel está fechado (nunca se perde um pedido) */
.auth-pop {
  position: fixed; right: 16px; bottom: calc(96px + var(--safe-bottom)); z-index: 120;
  width: min(340px, calc(100vw - 32px)); border-radius: var(--r-card);
  background: linear-gradient(170deg, var(--os-surface-2), var(--os-surface));
  border: 1px solid rgba(251, 146, 60, 0.45);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(251, 146, 60, 0.15);
  animation: cardIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================================
   GAVETA DAS CONVERSAS
   ========================================================================== */
body.intent-os .conv-rail {
  position: fixed; top: calc(10px + var(--safe-top)); bottom: calc(10px + var(--safe-bottom));
  left: 10px; width: 300px; z-index: 60; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  transform: translateX(calc(-100% - 20px)); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
/* `aberta` é o nome que o motor já usava para a gaveta — mantém-se, para o
   botão «Conversas» continuar a funcionar sem lhe tocar. */
body.intent-os .conv-rail.aberta { transform: none; }
body.intent-os .rail-top { display: flex; align-items: center; gap: 10px; padding: 2px 2px 8px; border-bottom: 1px solid var(--os-line); }
body.intent-os .rail-top b { font-size: 12.5px; }
body.intent-os .rail-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
body.intent-os .rail-foot { border-top: 1px solid var(--os-line); padding-top: 8px; font-size: 10.5px; color: var(--os-ink-3); }

/* ============================================================================
   02 · COMMAND ANYWHERE
   ========================================================================== */
.palette {
  position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; padding-top: 18vh;
  background: rgba(4, 5, 9, 0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: fadeIn 0.16s ease;
}
@keyframes fadeIn { from { opacity: 0; } }
.palette-box {
  display: flex; align-items: center; gap: 12px;
  width: min(720px, calc(100vw - 32px)); padding: 14px 14px 14px 18px;
  border-radius: 22px; background: linear-gradient(150deg, rgba(30, 34, 48, 0.96), rgba(17, 19, 26, 0.97));
  border: 1px solid rgba(139, 92, 246, 0.42);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 60px rgba(139, 92, 246, 0.18);
  animation: popIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes popIn { from { opacity: 0; transform: translateY(-12px) scale(0.98); } }
.palette-orb {
  flex: none; width: 40px; height: 40px; border-radius: 50%; position: relative;
  background: radial-gradient(circle, rgba(11, 13, 20, 0.95) 46%, transparent 68%);
}
.palette-orb::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent;
  background: conic-gradient(from 0deg, var(--i-violet), var(--i-blue), var(--i-cyan), var(--i-violet)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.7)); animation: coreSpin 8s linear infinite;
}
#paletteInput {
  flex: 1; min-width: 0; resize: none; border: none; outline: none; background: none;
  color: var(--os-ink); font: inherit; font-size: 15px; line-height: 1.45; max-height: 30vh;
}
#paletteInput::placeholder { color: var(--os-ink-3); }
.palette-wave { display: flex; align-items: center; gap: 2px; height: 22px; flex: none; opacity: 0.5; }
.palette-wave i { width: 2px; border-radius: 2px; background: var(--i-violet-hi); height: 20%; }
.palette.is-live .palette-wave { opacity: 1; }
.palette.is-live .palette-wave i { animation: wave 1.1s ease-in-out infinite; }
.palette-wave i:nth-child(3n) { animation-delay: 0.18s; }
.palette-wave i:nth-child(3n+1) { animation-delay: 0.36s; }
@keyframes wave { 0%, 100% { height: 18%; } 50% { height: 92%; } }
.palette-btn {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--os-line); color: var(--os-ink-2); cursor: pointer;
}
.palette-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.palette-btn.send { background: linear-gradient(160deg, var(--i-violet), #6D5BE0); border-color: transparent; color: #fff; }
.palette-hints {
  width: min(720px, calc(100vw - 32px)); margin-top: 12px;
  display: flex; flex-wrap: wrap; gap: 7px;
}
.palette-hints button {
  padding: 6px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 11.5px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--os-line); color: var(--os-ink-2);
}
.palette-hints button:hover { color: #fff; border-color: rgba(139, 92, 246, 0.5); background: rgba(139, 92, 246, 0.12); }

/* ============================================================================
   10 · ECRÃ DE BLOQUEIO
   ========================================================================== */
.lock {
  position: fixed; inset: 0; z-index: 160;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(139, 92, 246, 0.22), transparent 70%),
    radial-gradient(50% 40% at 20% 100%, rgba(76, 141, 255, 0.16), transparent 70%),
    #06070B;
  animation: fadeIn 0.3s ease;
}
.lock-inner { width: min(460px, calc(100vw - 40px)); text-align: center; padding: 20px; }
.lock-clock { font-size: clamp(56px, 11vw, 88px); font-weight: 200; letter-spacing: -3px; line-height: 1; }
.lock-date { font-size: 13px; color: var(--os-ink-3); margin-top: 6px; }
.lock-greet { font-size: 20px; font-weight: 550; margin-top: 34px; }
.lock-sub { font-size: 12.5px; color: var(--os-ink-3); margin-top: 6px; }
.lock-list { display: flex; flex-direction: column; gap: 7px; margin-top: 22px; text-align: left; }
.lock-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 13px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--os-line); font-size: 12.5px;
}
.lock-row .ico { font-size: 14px; }
.lock-row .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lock-row time { font-size: 10.5px; color: var(--os-ink-3); flex: none; }
.lock-enter {
  margin-top: 26px; padding: 11px 30px; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; color: #fff; border: 1px solid rgba(139, 92, 246, 0.5);
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.32), rgba(76, 141, 255, 0.2));
}
.lock-enter:hover { filter: brightness(1.15); }
.lock-acoes { display: flex; gap: 10px; justify-content: center; }
.lock-pin { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.lock-pin input {
  width: 150px; text-align: center; letter-spacing: 8px; font: inherit; font-size: 18px;
  padding: 10px 14px; border-radius: 999px; color: var(--os-ink);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--os-line-hi);
}
.lock-pin input:focus { outline: none; border-color: rgba(139, 92, 246, 0.6); }
.lock-pin .lock-enter { margin-top: 0; padding: 10px 20px; }
.lock-erro { min-height: 18px; margin-top: 12px; font-size: 12px; color: #FFC2CE; }
.lock-alt { display: block; margin: 2px auto 0; }

/* ============================================================================
   11 · DEFINIÇÕES
   ========================================================================== */
body.intent-os .settings { z-index: 140; background: rgba(4, 5, 9, 0.66); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.intent-os .settings-sheet {
  width: min(960px, calc(100vw - 28px)); max-height: min(86vh, 760px);
  margin: auto; border-radius: 22px; padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(170deg, rgba(23, 26, 36, 0.98), rgba(17, 19, 26, 0.99));
  border: 1px solid var(--os-line-hi); box-shadow: var(--os-shadow);
}
body.intent-os .settings-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--os-line); flex: none;
}
body.intent-os .settings-head h2 { font-size: 16px; font-weight: 600; }
.settings-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); flex: 1; min-height: 0; }
.settings-menu { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-right: 1px solid var(--os-line); overflow-y: auto; }
.settings-menu button {
  text-align: left; padding: 9px 12px; border-radius: 11px; cursor: pointer; font: inherit;
  font-size: 12.5px; background: none; border: 1px solid transparent; color: var(--os-ink-3);
}
.settings-menu button:hover { color: var(--os-ink); background: rgba(255, 255, 255, 0.04); }
.settings-menu button.is-on {
  color: #fff; background: rgba(139, 92, 246, 0.16); border-color: rgba(139, 92, 246, 0.35);
}
.settings-panes { overflow-y: auto; padding: 18px 22px 26px; }
.pane { display: none; }
.pane.is-on { display: block; animation: fadeIn 0.18s ease; }
body.intent-os .pane h3 {
  font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--os-ink-3);
  margin: 22px 0 12px; font-weight: 700;
}
body.intent-os .pane h3:first-child { margin-top: 0; }
body.intent-os .settings label {
  display: block; margin-bottom: 13px; font-size: 12.5px; color: var(--os-ink-2);
}
body.intent-os .settings label input[type="text"],
body.intent-os .settings label input[type="password"],
body.intent-os .settings label select {
  display: block; width: 100%; margin-top: 6px; padding: 9px 12px; border-radius: 11px;
  background: var(--os-surface-2); border: 1px solid var(--os-line); color: var(--os-ink);
  font: inherit; font-size: 12.5px;
}
body.intent-os .settings label input:focus, body.intent-os .settings label select:focus {
  outline: none; border-color: rgba(139, 92, 246, 0.55);
}
body.intent-os .settings .toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 13px; border-radius: 12px; background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--os-line); line-height: 1.4;
}
body.intent-os .settings input[type="range"] { width: 100%; margin-top: 8px; accent-color: var(--i-violet); }
body.intent-os .settings input[type="checkbox"] { flex: none; width: 18px; height: 18px; accent-color: var(--i-violet); }
body.intent-os .settings .note { font-size: 11.5px; color: var(--os-ink-3); line-height: 1.55; margin-bottom: 14px; }
/* Diagnósticos vindos do aparelho trazem quebras de linha — sem isto saíam num
   bloco só («tenho uma mensagem enorme»). A primeira linha é o veredicto. */
#bioEstado { white-space: pre-line; }
#bioEstado::first-line { color: var(--os-ink); font-weight: 600; }
body.intent-os .ghost-btn {
  padding: 8px 14px; border-radius: 11px; cursor: pointer; font: inherit; font-size: 12.5px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--os-line); color: var(--os-ink-2);
  margin-bottom: 12px;
}
body.intent-os .ghost-btn:hover { color: #fff; border-color: var(--os-line-hi); }
body.intent-os .ghost-btn.danger { color: #FFB3C0; border-color: rgba(244, 63, 94, 0.35); }

/* Modo de autonomia — três degraus, com a cor a dizer o risco. */
.autonomy { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.auto-opt {
  display: grid; grid-template-columns: 20px 1fr; grid-template-rows: auto auto;
  column-gap: 11px; text-align: left; cursor: pointer; font: inherit;
  padding: 12px 14px; border-radius: 13px;
  background: var(--os-surface-2); border: 1px solid var(--os-line); color: inherit;
}
.auto-opt i {
  grid-row: 1 / 3; align-self: center; width: 16px; height: 16px; border-radius: 50%;
  border: 1.8px solid var(--os-line-hi);
}
.auto-opt b { font-size: 12.5px; }
.auto-opt span { font-size: 11px; color: var(--os-ink-3); line-height: 1.4; }
.auto-opt.is-on { border-color: rgba(139, 92, 246, 0.5); background: rgba(139, 92, 246, 0.1); }
.auto-opt.is-on i { border-color: var(--i-violet); box-shadow: inset 0 0 0 3.5px var(--os-surface), inset 0 0 0 20px var(--i-violet); }
.auto-opt[data-level="total"].is-on { border-color: rgba(251, 146, 60, 0.5); background: rgba(251, 146, 60, 0.1); }
.auto-opt[data-level="total"].is-on i { border-color: var(--i-orange); box-shadow: inset 0 0 0 3.5px var(--os-surface), inset 0 0 0 20px var(--i-orange); }

/* ============================================================================
   09 · APPS — o launcher com a roupa nova
   ========================================================================== */
body.intent-os .os-launcher { z-index: 130; background: rgba(4, 5, 9, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.intent-os .os-launcher-head { border-bottom: 1px solid var(--os-line); font-size: 11px; letter-spacing: 1.8px; color: var(--os-ink-3); }
body.intent-os .os-hint { color: var(--os-ink-3); font-size: 12px; }

/* Toast e botão de parar */
body.intent-os .toast {
  border-radius: 14px; background: rgba(23, 26, 36, 0.97); border: 1px solid var(--os-line-hi);
  color: var(--os-ink); font-size: 12.5px; box-shadow: var(--os-shadow); backdrop-filter: blur(14px);
}
body.intent-os .stop-btn {
  border-radius: 999px; background: rgba(23, 26, 36, 0.95); border: 1px solid rgba(244, 63, 94, 0.4);
  color: #FFC2CE; font-size: 12px; z-index: 100;
}

/* ============================================================================
   ADAPTAÇÃO AO ECRÃ — o mesmo OS, do telemóvel ao monitor grande.
   Regra: nada se esconde por ser pequeno; muda de FORMA.
   ========================================================================== */

/* Portátil estreito: a coluna da direita passa a folha por cima. */
@media (max-width: 1180px) {
  .os.side-open { grid-template-columns: var(--os-rail) minmax(0, 1fr) 0px; }
  .os-side {
    position: fixed; top: calc(10px + var(--safe-top)); bottom: calc(10px + var(--safe-bottom));
    right: 10px; width: min(360px, calc(100vw - 20px)); z-index: 70;
    transform: translateX(calc(100% + 20px)); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
  }
  .os.side-open .os-side { transform: none; }
}

/* Tablet/telemóvel: o rail deita-se numa fita por cima do conteúdo. */
@media (max-width: 900px) {
  .os {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    padding: calc(6px + var(--safe-top)) 6px calc(6px + var(--safe-bottom)); gap: 6px;
  }
  .os.side-open { grid-template-columns: minmax(0, 1fr); }
  .rail {
    flex-direction: row; align-items: center; gap: 4px; padding: 6px 8px;
    border-radius: 16px; overflow-x: auto; scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail-brand { display: none; }
  .rail-nav { flex-direction: row; gap: 4px; }
  .rail-item { flex-direction: row; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 11.5px; white-space: nowrap; }
  .rail-item svg { width: 16px; height: 16px; }
  .rail-bottom { border: none; padding: 0 0 0 4px; }
  .rail-bottom .rail-item span { display: none; }
  .os-main { border-radius: 16px; }
  /* O cabeçalho em ecrã estreito: uma linha só, e quem cede é o texto de estado
     (que já tem reticências), nunca a largura da página. Deixá-lo crescer
     empurrava o layout inteiro para fora do ecrã — e levava o botão de enviar
     com ele, que é a única coisa que nunca pode faltar. */
  .os-top { height: auto; padding: 9px 12px; flex-wrap: nowrap; gap: 8px; }
  .top-left { flex: 1 1 auto; min-width: 0; }
  body.intent-os .status { flex: 1 1 auto; min-width: 0; max-width: none; }
  .top-mid { flex: none; }
  .top-mid .dateline { display: none; }
  .top-right { flex: none; gap: 6px; }
  .top-view { display: none; }
  .weather { display: none; }
  .view { padding: 14px 14px 6px; }
  .conv-head { padding: 0 14px 8px; }
  body.intent-os .chat { padding: 4px 14px 8px; }
  body.intent-os .msg { max-width: 94%; }
  .flow-canvas { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 6px 0 12px; }
  .flow-link, .flow-fan { display: none; }
  .flow-core { grid-auto-flow: column; }
  .flow-core-orb { width: 70px; height: 70px; }
  body.intent-os .hud-bottom.intent-dock { padding: 8px 10px calc(8px + var(--safe-bottom)); gap: 7px; }
  .dock-side { display: none; }
  body.intent-os .conv-rail { width: min(300px, calc(100vw - 40px)); }
  .settings-body { grid-template-columns: minmax(0, 1fr); }
  .settings-menu {
    flex-direction: row; overflow-x: auto; border-right: none;
    border-bottom: 1px solid var(--os-line); padding: 9px 10px; scrollbar-width: none;
  }
  .settings-menu::-webkit-scrollbar { display: none; }
  .settings-menu button { white-space: nowrap; padding: 7px 12px; border-radius: 999px; }
  .settings-panes { padding: 16px 15px 24px; }
  body.intent-os .settings-sheet { max-height: 92vh; width: calc(100vw - 12px); }
}

/* Telemóvel: a Home encolhe o orbe e o «Hoje» vira lista de cartões largos. */
@media (max-width: 560px) {
  .home-ask h1 { font-size: 22px; }
  .home-sub { font-size: 12px; }
  .core-wrap { width: 128px; height: 128px; margin: 16px 0 20px; }
  .today-row { grid-auto-columns: minmax(150px, 78%); }
  .os-top { padding: 8px 10px; }
  /* Os selos do tabuleiro de sistema (MAC, APPS…) são um luxo de ecrã largo:
     no telemóvel a barra é para o estado, a hora e a autonomia. */
  body.intent-os .sys-tray { display: none; }
  .autonomy-chip span { display: none; }
  .autonomy-chip { padding: 6px; }
  .lock-clock { font-size: 62px; }
  .palette { padding-top: 12vh; }
  .palette-box { padding: 11px 11px 11px 14px; gap: 9px; }
  .palette-wave { display: none; }
  .ctx-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 9px; }
}

/* Ecrã muito baixo (Surface deitado, janela pequena): o orbe cede primeiro. */
@media (max-height: 620px) {
  .core-wrap { width: 110px; height: 110px; margin: 10px 0 16px; }
  .home-ask { margin-top: 6px; }
}

/* Quem pediu menos movimento não leva animação nenhuma a rodar. */
@media (prefers-reduced-motion: reduce) {
  .core-halo, .flow-core-orb::after, .palette-orb::after,
  body.intent-os .core-wrap .reactor::after { animation: none !important; }
  .icard, .palette-box, .pane.is-on { animation: none !important; }
}