/* CYONIX colors follow prototypes/design-system-v1.html and its embedded
   Home, Login and Agents references. Keep the approved saturated gradients,
   near-black glass, live scene, breathing effects and vendor marks. */
:root {
  --canvas: #030609;
  --surface: #0a0f14;
  --surface-deep: #070b0f;
  --surface-raised: #0e151b;
  --text: #f3f6f8;
  --muted: #b1bec8;
  --ink-secondary: #b1bec8;
  --ink-subtle: #9aa6b1;
  --edge: #ffffff1c;
  --edge-strong: #ffffff24;
  --line: #ffffff1c;
  --ember: #ff6a00;
  --ember-deep: #ff4338;
  --orange: var(--ember);
  --amber: var(--ember);
  --ice: #00d5f2;
  --violet: #9938ff;
  --jade: #00dca0;
  --warning: #f7b731;
  --danger: #ff4d4f;
  --on-ember: #ffffff;
  /* Microsoft's own logo colours, for the four squares on the Microsoft sign-in button only. */
  --ms-red: #f25022;
  --ms-green: #7fba00;
  --ms-blue: #00a4ef;
  --ms-yellow: #ffb900;
  --brand-gradient: linear-gradient(135deg, #ff8a00, #ff5a00 68%, #ff4338);
  --title-gradient: linear-gradient(180deg, #ff9a00, #ff6a00 48%, #ff4900);
  --panel-gradient: linear-gradient(135deg, #0e141ad9, #070b0fe8 65%, #050a0de0);
  --input-gradient: linear-gradient(135deg, #111a20, #0b1217);
}
body {
  background-color: var(--canvas);
  color: var(--text);
}
::selection {
  background: #ff6a0038;
  color: var(--text);
}
html {
  scrollbar-color: #465367 var(--canvas);
}

/* The reference uses near-black glass with localized colored light. */
.workspace-page aside {
  background: linear-gradient(160deg, #080d10, #030709 65%, #050a0d);
  border-right-color: var(--edge);
}
.workspace-page .nav {
  color: var(--muted);
}
.workspace-page .nav.active {
  background: linear-gradient(100deg, #ff6a002e, #ff433810 65%, #ffffff04);
  box-shadow:
    inset 2px 0 var(--ember),
    inset 0 1px #ff9a001c;
  color: var(--text);
}
.workspace-page .nav.active .icon {
  color: var(--ember);
}
.workspace-page .avatar {
  background: linear-gradient(140deg, #35454e, #182129);
  border-color: #b7caff26;
}
.workspace-page :is(.panel, .context-card, .help-bar),
.workspace-page #messages {
  background: var(--panel-gradient);
  border-color: var(--edge-strong);
  box-shadow:
    inset 0 1px #e0edff0c,
    0 16px 38px #0003;
}
.workspace-page .context-card::before,
.workspace-page .context-card::after {
  border-color: var(--ember);
}
dialog,
#command-palette {
  background: linear-gradient(145deg, #10191f, #070d11 70%);
  border-color: #66758b88;
  color: var(--text);
}
.workspace-page :is(.env-tag, .system-status) {
  background: #091115de;
  border-color: #63738a55;
  color: #b7c5ce;
}
.workspace-page .env-tag::before,
.home-page .system-status > span {
  background: var(--warning);
}
.workspace-page :is(.intro, .agent-description, .help-bar small),
.login-page :is(.subtitle, .description) {
  color: var(--muted);
}
.workspace-page
  :is(
    .source-label,
    .source small,
    .agent-number,
    .h-head,
    .h-when,
    .h-title small,
    .field-label,
    .field > .icon,
    .toggle-row small,
    .row-btn small,
    .theme small,
    .workspace-note,
    .composer-mode,
    .recent-label small
  ),
#composer-hint,
.home-page .action p {
  color: var(--ink-subtle);
}
.workspace-page .eyebrow,
.login-page .eyebrow,
.workspace-page .panel-title .icon,
.workspace-page .context-card h2 .icon {
  color: var(--ember);
}
.workspace-page h1 em,
.home-page .hero h1 em,
.login-page h1 .accent {
  background-image: var(--title-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* The original orange-to-red gradient is shared by primary actions. */
.workspace-page .primary,
.workspace-page .send,
.home-page .ask form button:not(.select-trigger),
.workspace-page .orange .start-chat,
.settings-page .settings-actions .primary,
.login-page .submit {
  background: var(--brand-gradient);
  border-color: #ff9a0088;
  color: var(--on-ember);
  box-shadow:
    inset 0 1px #ffe0b888,
    0 5px 22px #ff433824;
}
.workspace-page :is(.suggestions button, .ghost, .filter, .tabs, .agent-select),
.settings-page .settings-actions .ghost,
.command-trigger {
  background: var(--input-gradient);
  border-color: #35454f88;
  color: #c7d0d8;
}
.workspace-page :is(.suggestions button, .ghost, .filter):hover {
  border-color: var(--ember);
  color: var(--text);
}
.workspace-page .tab.active,
.settings-page .s-nav.active,
.settings-page .theme.active {
  background: linear-gradient(120deg, #ff6a0029, #ff43380d);
  color: #ff9a00;
  border-color: var(--ember);
}
.tab.active::after,
.switch input:checked ~ .track,
.theme.active::after {
  background: var(--brand-gradient);
}
.workspace-page :is(.fld input, .fld select, .fld textarea, .pref-row select, .toggle-row select),
.login-page .field input,
.command-search {
  background: var(--input-gradient);
  border-color: #35454f;
  color: var(--text);
}
.workspace-page :is(input, textarea)::placeholder,
.login-page input::placeholder,
.home-page #prompt::placeholder {
  color: #92a3ae;
}
.workspace-page :is(select option),
.agent-select option {
  background: #0e151b;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-color: var(--ember);
}

/* Retain the traveling blue-to-ember edge and both breathing light sources. */
.workspace-page .ask form,
.workspace-page #chat-form,
.workspace-page .agent-search {
  background-image:
    linear-gradient(#0b151bf5, #070d11f5),
    linear-gradient(
      100deg,
      #00d5f2,
      #157a93 12%,
      #24414f 28%,
      #a3620f 44%,
      #ff9c3d 52%,
      #a3620f 60%,
      #24414f 74%,
      #157a93 88%,
      #00d5f2
    );
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}
.ai-spark,
.agent-select > .icon {
  color: var(--ember);
}
.ai-spark {
  text-shadow: 0 0 18px #ff8a0088;
}
/* The composer bars already show focus through their animated gradient border
   plus the soft glow in base.css. A hard ember outline on top of that draws a
   solid box around the bar that hides the gradient motion, so they are left to
   the glow. The command palette has no gradient border, so it keeps the ring. */
.command-search:focus-within {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}
.home-page .action {
  background: linear-gradient(115deg, #ff6a0012, #111a20 50%, #080f14);
  border-color: #ffffff21;
}
.home-page .action > .icon,
.home-page .action .arrow {
  color: var(--ember);
}
.home-page .action:hover {
  background: linear-gradient(115deg, #ff6a002b, #111a20 60%, #0b1419);
  border-color: #ff6a0077;
}
.workspace-page .user-message {
  background: var(--input-gradient);
}
.workspace-page .source {
  background: linear-gradient(140deg, #111b22aa, #080f14cc);
  border-color: var(--edge);
}
#command-results button.is-selected,
#command-results button:hover {
  background: linear-gradient(100deg, #ff6a0022, #ff43380c);
  border-color: #ff6a0066;
  color: #ffffff;
}
#command-results .icon {
  color: var(--ember);
}
#command-results button.is-selected .icon,
#command-results button:hover .icon {
  color: #ff9a2e;
}

/* Saturated specialist colors on near-black surfaces, as in the screenshot. */
.workspace-page .agent-card {
  --accent: var(--ember);
}
.workspace-page .agent-card.cyan {
  --accent: var(--ice);
}
.workspace-page .agent-card.violet {
  --accent: var(--violet);
}
.workspace-page .agent-card.green {
  --accent: var(--jade);
}
.workspace-page .platform-card {
  --accent: #ff4338;
}
.workspace-page .platform-card.violet {
  --accent: var(--violet);
}
.workspace-page .agent-card,
.workspace-page .platform-card {
  background:
    radial-gradient(
      ellipse at 5% 0%,
      color-mix(in srgb, var(--accent) var(--glow), transparent),
      transparent 65%
    ),
    var(--panel-gradient);
  border-color: color-mix(in srgb, var(--accent) 48%, #263b45);
}
.workspace-page .start-chat {
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, #0a0f14), #081115);
  border-color: var(--accent);
  color: var(--text);
}
.workspace-page .orange .start-chat {
  background: var(--brand-gradient);
  color: var(--on-ember);
}
.platform-card .configure {
  background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 80%, white), var(--accent));
  color: #18121f;
}

/* Status colors describe outcomes; they don't compete with the action color. */
.tag.done,
.toggle-row.static .tag {
  color: var(--jade);
  background: #00dca012;
  border-color: #00dca042;
}
.toggle-row.static .tag.is-off {
  color: var(--muted);
  background: transparent;
  border-color: var(--edge);
}
.tag.prog,
.tag.gen {
  color: var(--ice);
  background: #00d5f212;
  border-color: #00d5f242;
}
.h-mark.high,
.h-sev.high,
.h-sev.high .icon {
  color: var(--danger);
}
.h-mark.med,
.h-sev.med,
.h-sev.med .icon {
  color: var(--warning);
}
.h-mark.low,
.h-sev.low,
.h-sev.low .icon {
  color: var(--ice);
}
.critical .recent-label small {
  color: var(--danger);
}
.delta.up,
#save-note {
  color: var(--jade);
}

/* Warm translucent login glass; no changes to the approved Earth or lava. */
.login-page .login-card {
  background:
    radial-gradient(ellipse at 0 0, #ff6a002b, transparent 48%),
    linear-gradient(140deg, #071013ee, #050b0ef5 65%, #080e11f2);
  border-color: #526b7780;
}
.login-page .ms-button {
  background: linear-gradient(130deg, #1a252c, #121d24);
  border-color: #617780;
  color: var(--text);
}
.login-page .tile.cyan {
  color: var(--ice);
}
.login-page .tile.orange {
  color: var(--ember);
}
.login-page .tile.green {
  color: var(--jade);
}

/* Keep the icon-only send action dark as in the Home reference. */
.workspace-page .send {
  color: #101010;
}

/* Smoked glass: blur only major surfaces, avoiding nested compositor layers.
   Opaque fallbacks keep the same contrast when backdrop filtering is absent. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .workspace-page :is(.panel, .context-card, .help-bar, .agent-card, .platform-card, #messages),
  .login-page .login-card {
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);
  }
  .workspace-page .ask form,
  .workspace-page #chat-form,
  .workspace-page #profile-menu,
  #command-palette {
    -webkit-backdrop-filter: blur(22px) saturate(120%);
    backdrop-filter: blur(22px) saturate(120%);
  }
  .workspace-page .ask form,
  .workspace-page #chat-form {
    background-image:
      linear-gradient(#0b151bd9, #080f14e8),
      linear-gradient(
        100deg,
        #00d5f2,
        #157a93 12%,
        #24414f 28%,
        #a3620f 44%,
        #ff9c3d 52%,
        #a3620f 60%,
        #24414f 74%,
        #157a93 88%,
        #00d5f2
      );
  }
  .login-page .login-card {
    background:
      radial-gradient(ellipse at 0 0, #ff6a0026, transparent 48%),
      linear-gradient(140deg, #071013cc, #050b0ee6 65%, #080e11d9);
  }
  #command-palette {
    background: linear-gradient(145deg, #10191fe8, #070d11ed 70%);
  }
}
.workspace-page :is(.panel, .context-card, .help-bar, #messages) {
  border-top-color: #b8d6e033;
  border-left-color: #b8d6e029;
  box-shadow:
    inset 0 1px #dcf3ff0d,
    0 16px 38px #0005;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --panel-gradient: linear-gradient(135deg, #0e141a, #070b0f 65%, #050a0d);
  }
}