/* Iris V2 -- the semantic token layer.
 *
 * This is the DESIGN seed's recommended starting point, mapped onto the
 * selectors the existing CSS already uses. It is NOT a rewrite of the
 * vendor stylesheet: the old tokens stay as ALIASES, so every rule that
 * already reads --bg / --text / --panel keeps working and no page shows
 * two palettes at once.
 *
 * The four channels are separate ON PURPOSE, and no token decides a state:
 *
 *   connection  -- is the agent reachable?            (--iris-status-unverified)
 *   run         -- is a turn running?                  (--iris-status-running)
 *   selection   -- what the browser has selected?      (--iris-selected)
 *   quota       -- a real usage figure, or nothing.    (never a ring)
 *
 * A visual token never decides a state machine; the state machine decides
 * what to show, and these colours only describe what it already decided.
 */
:root {
  --iris-bg: #f4f9ff;
  --iris-bg-end: #e8f3ff;
  --iris-primary: #007aff;
  --iris-on-primary: #ffffff;
  --iris-text: #1f2937;
  --iris-text-secondary: #60748f;
  --iris-surface: rgba(255, 255, 255, .86);
  --iris-surface-solid: #f7fbff;
  --iris-user-bg: #dbeaff;
  --iris-user-text: #0758cc;
  --iris-agent-bg: rgba(255, 255, 255, .94);
  --iris-divider: rgba(67, 101, 142, .14);

  /* The browser's current selection. It is NOT a completion marker. */
  --iris-selected: rgba(0, 122, 255, .09);

  /* The four status channels. */
  --iris-status-unverified: #8b96a5;
  --iris-status-running: #17824a;
  --iris-status-approval: #a76b00;
  --iris-status-complete: #007aff;
  --iris-status-error: #c23b3b;

  /* The compatibility aliases: the old names now point at the new layer.
   * Every existing rule keeps working and reads the same value. */
  --bg: var(--iris-bg);
  --topbar-bg: var(--iris-surface-solid);
  --panel: var(--iris-surface-solid);
  --panel-2: var(--iris-user-bg);
  --text: var(--iris-text);
  --muted: var(--iris-text-secondary);
  --faint: var(--iris-status-unverified);
  --user: var(--iris-user-bg);
  --line: var(--iris-divider);
  --iris-control-accent: var(--iris-primary);
  --iris-on-accent: var(--iris-on-primary);
  --iris-status-glow: rgba(0, 122, 255, .3);
  --keyboard-gap-bg: var(--iris-bg);
  color-scheme: light;
}

/* The dark theme keeps the same channel meanings: the colours change, the
 * state they describe does not. */
:root.theme-dark {
  --iris-bg: #10151c;
  --iris-bg-end: #0b0f14;
  --iris-primary: #4aa3ff;
  --iris-on-primary: #06121f;
  --iris-text: #e8eef6;
  --iris-text-secondary: #9aa9bb;
  --iris-surface: rgba(23, 30, 40, .88);
  --iris-surface-solid: #171e28;
  --iris-user-bg: #16324f;
  --iris-user-text: #b9dbff;
  --iris-agent-bg: rgba(23, 30, 40, .95);
  --iris-divider: rgba(150, 175, 205, .16);
  --iris-selected: rgba(74, 163, 255, .13);
  --iris-status-unverified: #7d8a99;
  --iris-status-running: #43c07f;
  --iris-status-approval: #d9a441;
  --iris-status-complete: #4aa3ff;
  --iris-status-error: #e0736d;
  color-scheme: dark;
}

/* The body carries the two-stop background. It is a STATIC gradient: a
 * moving background costs frames on a phone and buys nothing.
 *
 * The shorthand is set deliberately: the reused shell sets
 * `background: var(--bg)` on the body, and a shorthand would drop this
 * layer's background-IMAGE when it overrides. */
body {
  background-color: var(--iris-bg);
  background-image: linear-gradient(180deg, var(--iris-bg) 0%, var(--iris-bg-end) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* -- the state channels, as classes the renderer sets ------------------- */
/* The connection channel: not connected, or a read that failed. */
.iris-connection-unverified { color: var(--iris-status-unverified); }

/* The run channel: a turn that is really queued or working. */
.iris-run-working { color: var(--iris-status-running); }
.iris-run-working .thread-option-dot { background: var(--iris-status-running); }

/* The approval channel. Yellow is used ONLY for a real pending request --
 * an agent that is merely online must never flash yellow. */
.iris-approval-pending { color: var(--iris-status-approval); }
.iris-approval-pending .thread-option-dot { background: var(--iris-status-approval); }

/* The completion channel: a turn that really terminated. */
.iris-run-complete { color: var(--iris-status-complete); }

/* The error channel: a real failure, paired with its text. */
.iris-run-error { color: var(--iris-status-error); }

/* The selection channel. It is a BACKGROUND, never a colour: the selected
 * conversation must not look like a finished one. */
.hermes-session.selected { background: var(--iris-selected); }

/* A user message reads on the light blue; an agent message on white. */
.message.user .bubble {
  background: var(--iris-user-bg);
  color: var(--iris-user-text);
}
.message.assistant .bubble {
  background: var(--iris-agent-bg);
  color: var(--iris-text);
}

/* Reduced motion: the running indicator must not pulse. */
@media (prefers-reduced-motion: reduce) {
  .hermes-dot, .thread-option-spinner { animation: none !important; }
  * { transition-duration: .01ms !important; }
}

/* Reduced transparency: the glass layers fall back to the solid surface. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --iris-surface: #ffffff;
    --iris-agent-bg: #ffffff;
  }
}