/* Agentic OS · tema HUD sobre a interface do Habblaud.
   Só troca variáveis e acabamento (vidro azul-marinho, ciano, brilhos e fontes do design system);
   a estrutura e o comportamento são os do Habblaud. Carregado depois do CSS do Habblaud. */

html, body { background: oklch(12% .03 255) !important; }

html .ui-root {
  --ui-bg: oklch(17% .045 252 / .78);
  --ui-bg-solid: oklch(18% .05 252 / .97);
  --ui-bg-soft: oklch(80% .13 205 / .045);
  --ui-bg-hover: oklch(80% .13 205 / .09);
  --ui-line: oklch(75% .12 215 / .17);
  --ui-line-strong: oklch(75% .12 215 / .32);
  --ui-text: oklch(95% .015 230);
  --ui-muted: oklch(72% .04 240);
  --ui-faint: oklch(64% .04 245);
  --ui-accent: oklch(80% .13 205);
  --ui-accent-soft: oklch(80% .13 205 / .14);

  --st-working: oklch(80% .17 155);
  --st-waiting: oklch(78% .16 60);
  --st-shell: oklch(80% .13 205);
  --st-idle: oklch(68% .04 240);
  --st-done: oklch(68% .17 255);
  --st-offline: oklch(52% .03 250);

  --lv-ok: oklch(80% .17 155);
  --lv-warn: oklch(78% .16 60);
  --lv-crit: oklch(64% .2 25);

  --font-px: "Space Grotesk", ui-sans-serif, sans-serif;
  --font-ui: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 12px;
  --radius-sm: 8px;
}

/* Vidro do HUD: borda ciano fina, luz interna em cima e sombra elétrica. */
.ui-root .ui-panel {
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow:
    inset 0 1px oklch(80% .13 205 / .1),
    0 20px 60px -30px oklch(65% .19 255 / .55),
    0 10px 28px oklch(8% .03 255 / .45);
}

.ui-root .ui-topbar {
  background: linear-gradient(180deg, oklch(16% .045 252 / .92), oklch(15% .04 255 / .8));
  border-bottom: 1px solid oklch(75% .12 215 / .2);
  box-shadow: 0 1px 0 oklch(80% .13 205 / .06), 0 12px 36px -18px oklch(65% .19 255 / .6);
}
.ui-root .ui-topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, oklch(80% .13 205 / .55) 30%, oklch(65% .19 255 / .55) 70%, transparent);
}

/* Marca: AGENTIC OS com o rastreio largo da marca e o módulo abaixo (some abaixo de 1040px, como o logotipo do Habblaud). */
.ui-root .aos-brand { line-height: 1; white-space: nowrap; }
.ui-root .aos-brand > span { display: block; }
.ui-root .aos-module { margin-top: 3px; }
.ui-root .aos-wordmark {
  font: 600 14px/1 "Space Grotesk", sans-serif; letter-spacing: .32em; color: oklch(95% .015 230);
  text-shadow: 0 0 18px oklch(65% .19 255 / .6);
}
.ui-root .aos-module {
  font: 500 9.5px/1.2 "JetBrains Mono", monospace; letter-spacing: .28em; color: oklch(80% .13 205);
}
.ui-root .ui-brand__mark img { filter: drop-shadow(0 0 6px oklch(80% .13 205 / .55)); }

/* Títulos que no Habblaud usam a fonte pixelada: rótulos HUD em caixa alta. */
.ui-root .ui-side__title h2,
.ui-root .ui-feed__title h2,
.ui-root .ui-sec__title,
.ui-root .ui-drawer__kind,
.ui-root .ui-empty__title {
  text-transform: uppercase; letter-spacing: .2em; font-weight: 600; font-size: 11px;
  color: oklch(80% .13 205);
}
.ui-root .ui-alert__title { letter-spacing: .04em; font-weight: 600; }

/* Botão principal: ciano com brilho. */
.ui-root .ui-btn--primary {
  background: oklch(80% .13 205); color: oklch(14% .04 255); border-color: transparent;
  box-shadow: 0 0 18px oklch(80% .13 205 / .35); font-family: "Space Grotesk", sans-serif; letter-spacing: .04em;
}
.ui-root .ui-btn--primary:hover { background: oklch(85% .12 205); box-shadow: 0 0 26px oklch(80% .13 205 / .5); }

/* Foco visível no padrão do design system. */
.ui-root :focus-visible { outline: 2px solid oklch(80% .13 205); outline-offset: 2px; }

/* Barras de rolagem discretas. */
.ui-root * { scrollbar-width: thin; scrollbar-color: oklch(75% .12 215 / .28) transparent; }

/* O terminal flutuante com o mesmo vidro. */
.ui-root .ui-term { border-color: oklch(75% .12 215 / .24); }

/* Vinheta suave nas bordas do escritório, como nas outras telas do Agentic OS. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 85% 80% at 50% 45%, transparent 62%, oklch(10% .03 255 / .55));
}
#ui { z-index: 2; }