/*
 * MRUSMAN AI — living interface, shared by /ai/ and the admin assistant.
 * Loaded as /assets/mrusman-ai/living.css (unhashed, served no-cache).
 *
 * 1. Tokens: colours, glow, orb sizes, speeds, particle density. Tune here.
 * 2. Stage: the chat area, its bar, the motion control, buttons
 * 3. AICoreOrb and its states
 * 4. Ambient background
 * 5. Hero (welcome) and status halo
 * 6. Chat component in the dark theme, composer and response states
 * 7. Entrance, container-responsive rules, motion modes
 *
 * Scope: an element with class "aix-page" carries the tokens; "aix" is the
 * theme and state scope (AIStatus writes its data-ai-state:
 * idle | waiting | responding | complete | stopped | error); "aix-main" is the
 * chat stage and a size container, so the hero adapts to the space it has,
 * not to the window (the admin column is narrower than the screen).
 */

/* ---------- 1. Tokens ---------- */
.aix-page {
  /* colour */
  --ai-bg: #070b0a;
  --ai-surface: #0c1210;
  --ai-surface-2: #111a16;
  --ai-line: #1a2520;
  --ai-line-2: #26362e;
  --ai-text: #e7eeea;
  --ai-text-soft: #c2d0c8;
  --ai-text-muted: #8a9a92;
  --ai-mint: #34d399;
  --ai-mint-light: #a7f3d0;
  --ai-green: #22c55e;
  --ai-green-bright: #4ade80;
  --ai-cyan: #22d3ee;
  --ai-violet: #818cf8;
  --ai-on-accent: #03200e;
  --ai-grad: linear-gradient(135deg, #86efac, #22c55e 55%, #16a34a);
  /* light: 0 = none, 1 = default; scales every glow */
  --ai-glow: 1;
  /* orb sizes */
  --ai-orb-hero: clamp(150px, 17vw, 196px);
  --ai-orb-hero-phone: 112px;
  --ai-orb-compact: 30px;
  /* motion: loops (seamless) and transitions */
  --ai-orbit-a: 26s;
  --ai-orbit-b: 18s;
  --ai-orbit-c: 60s;
  --ai-comet-a: 9s;
  --ai-comet-b: 7s;
  --ai-boost: 2.6s;
  --ai-sweep: 2.4s;
  --ai-breath: 5s;
  --ai-t: 240ms;
  --ai-ease: cubic-bezier(.2, .8, .2, 1);
  /* ambient background (read by ambient.js) */
  --ai-particles: 34;
  --ai-particles-mobile: 16;
  --ai-link-distance: 150;

  background: var(--ai-bg);
  color: var(--ai-text);
  color-scheme: dark;
}
.aix-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mrai-mark { display: block; width: 100%; height: 100%; }
/* The shared gradient definitions (defsSvg): out of flow, never a layout or grid item. */
.mrai-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.aix-page :focus-visible { outline: 2px solid var(--ai-green-bright); outline-offset: 2px; }
.aix-brandword { white-space: nowrap; }
.aix-brandword b, .aix-lockup b, .aix-halo b { font-weight: inherit; background: var(--ai-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 2. Stage ---------- */
.aix-iconbtn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ai-text-soft); cursor: pointer; transition: background var(--ai-t), color var(--ai-t); }
.aix-iconbtn svg { width: 20px; height: 20px; }
.aix-iconbtn:hover { background: var(--ai-surface-2); color: #fff; }
.aix-iconbtn[hidden] { display: none; }
.aix-iconbtn--ring { width: 36px; height: 36px; border: 1px solid var(--ai-line-2); border-radius: 999px; }
.aix-iconbtn--ring svg { width: 17px; height: 17px; }
.aix-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--ai-bg); }
.aix-main > :not(.ai-ambient) { position: relative; z-index: 1; }
.aix-bar { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; height: 56px; padding: 0 18px; }
.aix-lang select { height: 36px; padding: 0 12px; border: 1px solid var(--ai-line-2); border-radius: 999px; background: #0c1210; color: var(--ai-text); font: inherit; font-size: 13px; cursor: pointer; }
.aix-offline { flex: none; margin: 0 18px 8px; padding: 10px 14px; border: 1px solid rgb(250 204 21 / .35); border-radius: 12px; background: rgb(250 204 21 / .08); color: #fde68a; font-size: 14px; text-align: center; }
.aix-offline[hidden] { display: none; }
.aix-offline a { color: #fff; font-weight: 700; }
.aix-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* MotionPreferenceControl */
.ai-motion { margin: auto 0 0; padding: 12px 6px 0; border: 0; border-top: 1px solid var(--ai-line); min-width: 0; }
.ai-motion legend { float: left; width: 100%; margin-bottom: 8px; padding: 0; font-size: 12.5px; font-weight: 700; color: var(--ai-text-soft); }
.ai-motion__options { clear: both; display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border: 1px solid var(--ai-line-2); border-radius: 12px; background: #0b110e; }
.ai-motion label { position: relative; display: grid; }
.ai-motion input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ai-motion span { display: grid; place-items: center; min-height: 34px; border-radius: 9px; font-size: 12.5px; color: var(--ai-text-muted); transition: background var(--ai-t), color var(--ai-t); }
.ai-motion input:checked + span { background: rgb(34 197 94 / .16); color: #fff; box-shadow: inset 0 0 0 1px rgb(74 222 128 / .35); }
.ai-motion input:focus-visible + span { outline: 2px solid var(--ai-green-bright); outline-offset: 1px; }

.aix-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--ai-line-2); border-radius: 999px; color: var(--ai-text); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.aix-btn:hover { border-color: var(--ai-green-bright); }
.aix-btn--green { border: 0; background: var(--ai-grad); color: var(--ai-on-accent); }

/* ---------- 3. AICoreOrb ---------- */
.ai-orb { position: relative; display: grid; place-items: center; width: var(--orb-size); aspect-ratio: 1; flex: none; isolation: isolate; }
.ai-orb > * { grid-area: 1 / 1; }
/* Explicit layers: transformed layers would otherwise paint over the core. */
.ai-orb__field, .ai-orb__ring { position: relative; z-index: 0; }
.ai-orb__sweep { position: relative; z-index: 1; }
.ai-orb__core { position: relative; z-index: 2; }
.ai-orb--hero { --orb-size: var(--ai-orb-hero); }
.ai-orb--compact { --orb-size: var(--ai-orb-compact); }

.ai-orb__glow { position: absolute; inset: -26%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgb(52 211 153 / calc(.30 * var(--ai-glow))) 0%, rgb(34 211 238 / calc(.10 * var(--ai-glow))) 36%, transparent 66%);
  animation: ai-breathe var(--ai-breath) ease-in-out infinite; transition: opacity 600ms ease, filter 600ms ease; }
.ai-orb--compact .ai-orb__glow { inset: -45%; opacity: .55; animation: none; }
@keyframes ai-breathe { 0%, 100% { transform: scale(.92); opacity: .78; } 50% { transform: scale(1.04); opacity: 1; } }

.ai-orb__field { width: 100%; height: 100%; overflow: visible; }
.ai-orb__halo { fill: none; stroke: var(--ai-mint); stroke-opacity: .26; stroke-width: 1; transition: stroke-opacity 400ms ease; }
.ai-orb__dash { fill: none; stroke: var(--ai-cyan); stroke-opacity: .16; stroke-width: 1.1; stroke-dasharray: 1 7; }
.ai-orb__orbit { fill: none; stroke-width: 1.4; }
.ai-orb__orbit--a { stroke: url(#mrai-g-orbit-a); opacity: .95; }
.ai-orb__orbit--b { stroke: url(#mrai-g-orbit-b); opacity: .8; }
.ai-orb__spin { transform-box: view-box; transform-origin: 120px 120px; animation: ai-spin var(--spin) linear infinite; }
.ai-orb__spin--a { --spin: var(--ai-orbit-a); }
.ai-orb__spin--b { --spin: var(--ai-orbit-b); animation-direction: reverse; }
.ai-orb__spin--c { --spin: var(--ai-orbit-c); }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-orb__comet { fill: none; stroke-linecap: round; stroke-width: 2.8; stroke-dasharray: 5 95; animation: ai-comet var(--comet) linear infinite; }
.ai-orb__comet--a { --comet: var(--ai-comet-a); stroke: var(--ai-mint-light); }
.ai-orb__comet--b { --comet: var(--ai-comet-b); stroke: #7dd3fc; animation-direction: reverse; }
@keyframes ai-comet { to { stroke-dashoffset: -100; } }
/* A second, faster comet per orbit that only runs while real work is happening. */
.ai-orb__comet.ai-orb__boost { --comet: var(--ai-boost); stroke-width: 2; stroke-dasharray: 3 97; animation-delay: -1.1s; animation-play-state: paused; opacity: 0; transition: opacity var(--ai-t) ease; }
.ai-orb__bead { fill: #d1fae5; }
.ai-orb__bead--dim { opacity: .55; }
.ai-orb__bead--violet { fill: #c7d2fe; }
.ai-orb__sparks circle { fill: var(--ai-mint-light); opacity: .15; animation: ai-twinkle 4.8s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes ai-twinkle { 0%, 100% { opacity: .12; } 50% { opacity: .75; } }

.ai-orb__ring { width: 100%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 1px rgb(52 211 153 / .45); }
/* The sweep: a thin arc of light that circles the core while an answer is being prepared or written. */
.ai-orb__sweep { width: 58%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 62%, rgb(94 234 212 / .95) 90%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: ai-spin var(--ai-sweep) linear infinite paused; transition: opacity var(--ai-t) ease; }
.ai-orb--compact .ai-orb__sweep { width: 124%; }
.ai-orb__core { display: grid; place-items: center; width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #13261d, #070d0a 72%);
  box-shadow: inset 0 0 0 1px rgb(94 234 212 / .32), inset 0 0 22px rgb(52 211 153 / .16), 0 0 28px rgb(52 211 153 / calc(.3 * var(--ai-glow)));
  transition: box-shadow 900ms ease, filter 600ms ease; }
.ai-orb--compact .ai-orb__core { width: 100%; box-shadow: inset 0 0 0 1px rgb(94 234 212 / .3); }
.ai-orb__mark { width: 58%; height: 58%; }
.ai-orb--compact .ai-orb__mark { width: 62%; height: 62%; }

/* States. The orb itself stays readable in every state; only the energy around it changes. */
.aix[data-ai-state="waiting"] .ai-orb__boost,
.aix[data-ai-state="responding"] .ai-orb__boost { opacity: .9; animation-play-state: running; }
.aix[data-ai-state="waiting"] .ai-orb__halo,
.aix[data-ai-state="responding"] .ai-orb__halo { stroke-opacity: .42; }
.aix[data-ai-state="waiting"] .ai-orb__glow { --ai-glow: 1.35; }
.aix[data-ai-state="responding"] .ai-orb__glow { --ai-glow: 1.2; }
.aix[data-ai-state="waiting"] .ai-orb--compact .ai-orb__sweep,
.aix[data-ai-state="responding"] .ai-orb__sweep { opacity: 1; animation-play-state: running; }
.aix[data-ai-state="waiting"] .ai-orb--compact .ai-orb__glow,
.aix[data-ai-state="responding"] .ai-orb--compact .ai-orb__glow { opacity: .9; }
.aix[data-ai-state="complete"] .ai-orb__core { transition-duration: 180ms; box-shadow: inset 0 0 0 1px rgb(94 234 212 / .6), inset 0 0 22px rgb(52 211 153 / .28), 0 0 34px rgb(52 211 153 / .55); }
/* Stopping ends the active look at once. */
.aix[data-ai-state="stopped"] .ai-orb__boost,
.aix[data-ai-state="stopped"] .ai-orb__sweep { transition: none; }
.aix[data-ai-state="error"] .ai-orb { filter: saturate(.3) brightness(.85); }
.aix[data-ai-state="error"] .ai-orb * { animation-play-state: paused !important; }
.aix[data-ai-offline] .ai-orb__glow { opacity: .45; }

/* ---------- 4. Ambient background ---------- */
.ai-ambient { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ai-ambient__glow { position: absolute; left: 50%; top: 30%; width: min(980px, 130%); aspect-ratio: 1.7; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(34 197 94 / .15), rgb(34 211 238 / .05) 55%, transparent);
  transform: translate(-50%, -50%) translate(calc(var(--ai-px, 0) * -10px), calc(var(--ai-py, 0) * -8px));
  transition: transform 700ms ease-out, opacity 700ms ease, top 700ms ease; }
.ai-ambient__canvas { position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 30%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 72% 62% at 50% 30%, #000 25%, transparent 78%);
  transform: translate(calc(var(--ai-px, 0) * 8px), calc(var(--ai-py, 0) * 6px));
  transition: opacity 700ms ease, transform 900ms ease-out; }
/* Quieter behind a conversation, so nothing bright moves behind text. */
.aix-main:has(.mai--active) .ai-ambient__canvas { opacity: .22; }
.aix-main:has(.mai--active) .ai-ambient__glow { top: -8%; opacity: .6; }

/* ---------- 5. Hero and status halo ---------- */
.aix-hero { display: flex; flex-direction: column; align-items: center; }
.aix-hero .ai-orb__field { translate: calc(var(--ai-px, 0) * 4px) calc(var(--ai-py, 0) * 3px); transition: translate 800ms ease-out; }
.aix .mai-welcome p.aix-pill, .aix-pill { display: inline-flex; max-width: none; align-items: center; gap: 7px; margin: 4px 0 0; padding: 4px 12px; border: 1px solid var(--ai-line-2); border-radius: 999px; background: rgb(12 18 16 / .8); font-size: 12.5px; color: var(--ai-text-soft); }
.aix-pill[hidden] { display: none; }
.aix-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ai-green); box-shadow: 0 0 0 3px rgb(34 197 94 / .18); }
.aix[data-ai-offline] .aix-pill i { background: #7c8781; box-shadow: none; }
.aix .mai-welcome h2.aix-hero__title { margin: 14px 0 2px; font-family: var(--font-display, inherit); font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: #fff; }
.aix .mai-welcome p.aix-hero__sub { max-width: none; margin: 4px 0 0; font-size: clamp(17px, 2vw, 20px); color: var(--ai-text-soft); }
.aix .mai-welcome p.aix-hero__note { max-width: 520px; margin: 6px auto 0; font-size: 14px; color: var(--ai-text-muted); }
.aix-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 20px; }
.aix-langs button { min-height: 36px; padding: 0 16px; border: 1px solid var(--ai-line-2); border-radius: 999px; background: #0c1210; color: var(--ai-text-soft); font: inherit; font-size: 14px; cursor: pointer; transition: border-color var(--ai-t), background var(--ai-t), color var(--ai-t); }
.aix-langs button:hover { border-color: rgb(74 222 128 / .5); color: #fff; }
.aix-langs button:active { transform: scale(.97); }
.aix-langs button[aria-pressed="true"] { border-color: var(--ai-green); background: rgb(34 197 94 / .14); color: #fff; }
.aix-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; width: 100%; }
.aix-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 120px; padding: 14px; border: 1px solid var(--ai-line); border-radius: 16px; background: linear-gradient(180deg, rgb(17 26 21 / .92), rgb(11 17 14 / .92)); color: var(--ai-text); font: inherit; text-align: start; cursor: pointer; transition: border-color var(--ai-t), transform var(--ai-t) var(--ai-ease), box-shadow var(--ai-t); }
.aix-card:hover { border-color: rgb(74 222 128 / .45); transform: translateY(-2px); box-shadow: 0 14px 30px -20px rgb(34 197 94 / .6); }
.aix-card:active { transform: translateY(0) scale(.985); }
.aix-card__icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 10px; background: rgb(34 197 94 / .12); color: var(--ai-green-bright); }
.aix-card__icon svg { width: 20px; height: 20px; }
.aix-card strong { font-size: 14px; }
.aix-card span:last-child { font-size: 12px; line-height: 1.45; color: var(--ai-text-muted); }

/* Status halo in the bar: the compact orb, shown once a conversation is on screen. */
.aix-halo { display: none; align-items: center; gap: 10px; min-width: 0; margin-inline-end: auto; }
.aix-main:has(.mai--active) .aix-halo { display: flex; }
.aix-halo__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.aix-halo__text strong { font-family: var(--font-display, inherit); font-size: 13.5px; letter-spacing: .03em; }
.aix-halo__text span { overflow: hidden; font-size: 12px; color: var(--ai-text-muted); text-overflow: ellipsis; white-space: nowrap; transition: color var(--ai-t); }
.aix[data-ai-state="waiting"] .aix-halo__text span,
.aix[data-ai-state="responding"] .aix-halo__text span { color: var(--ai-mint); }
.aix[data-ai-state="error"] .aix-halo__text span { color: #fca5a5; }

/* ---------- 6. Chat component, dark ---------- */
.aix .mai { --mai-bg: #0c1210; --mai-soft: #151e19; --mai-user-bg: rgb(34 197 94 / .12); --mai-ink: var(--ai-text); --mai-muted: var(--ai-text-muted); --mai-line: var(--ai-line); --mai-line-strong: var(--ai-line-2); --mai-accent: var(--ai-green); --mai-violet: var(--ai-green-bright); --mai-dark: var(--ai-green); --mai-col: 800px; background: transparent; color-scheme: dark; }
.aix .mai-scroll { overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #26332c transparent; }
.aix .mai-welcome { width: 100%; min-width: 0; padding-top: 4px; }
.aix .mai-log { padding-top: 4px; }
.aix .mai-avatar { width: 34px; height: 34px; padding: 7px; box-sizing: border-box; border: 1px solid rgb(74 222 128 / .38); background: #0c1411; box-shadow: 0 0 16px -6px rgb(34 197 94 / .55); }
.aix .mai-avatar svg { width: 100%; height: 100%; }
.aix .mai-avatar--pulse { animation: ai-avatar-glow 1.8s ease-in-out infinite; }
@keyframes ai-avatar-glow { 50% { box-shadow: 0 0 0 5px rgb(34 197 94 / .14), 0 0 22px -4px rgb(34 197 94 / .85); } }
.aix .mai-user .mai-bubble { padding: 11px 16px; border: 1px solid rgb(74 222 128 / .26); border-radius: 18px 18px 6px 18px; color: #f1f7f3; }
.aix .mai[dir="rtl"] .mai-user .mai-bubble { border-radius: 18px 18px 18px 6px; }
.aix .mai-assistant .mai-body { position: relative; display: inline-block; max-width: 100%; box-sizing: border-box; padding: 12px 16px; border: 1px solid var(--ai-line); border-radius: 6px 18px 18px 18px; background: rgb(13 20 17 / .94); }
.aix .mai[dir="rtl"] .mai-assistant .mai-body { border-radius: 18px 6px 18px 18px; }
/* ResponseActivityIndicator, part 1: a thin light that runs along the bubble's edge while text arrives.
   It lives on the bubble, which persists while tokens stream, so it never restarts per token. */
.aix .mai-assistant .mai-body::before { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 1px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgb(94 234 212 / .9), transparent) no-repeat; background-size: 45% 100%; transition: opacity 500ms ease; }
.aix .mai-streaming .mai-body::before { opacity: 1; animation: ai-scan 2.2s linear infinite; }
@keyframes ai-scan { from { background-position: -80% 0; } to { background-position: 180% 0; } }
.aix .mai-streaming .mai-body > :last-child::after, .aix .mai-streaming .mai-body:empty::after { background: var(--ai-green-bright); box-shadow: 0 0 8px var(--ai-green-bright); }
.aix .mai-body a { color: var(--ai-green-bright); }
.aix .mai-body strong { color: #fff; }
.aix .mai-body code { background: #16201b; }
.aix .mai-body pre { max-width: 100%; border: 1px solid var(--ai-line); background: #050807; }
.aix .mai-cite { background: rgb(34 197 94 / .14); color: var(--ai-green-bright); }
.aix .mai-cite:hover { background: var(--ai-green); color: var(--ai-on-accent); }
.aix .mai-sources { margin-top: 10px; }
.aix .mai-source { height: 34px; padding: 0 14px 0 6px; border-color: rgb(74 222 128 / .28); border-radius: 12px; background: #0c1411; color: var(--ai-green-bright); transition: border-color var(--ai-t), background var(--ai-t), transform var(--ai-t) var(--ai-ease); }
.aix .mai-source b { background: rgb(34 197 94 / .14); color: var(--ai-green-bright); }
.aix a.mai-source:hover { border-color: var(--ai-green-bright); background: #101a15; transform: translateY(-1px); }
.aix .mai-mini { min-height: 34px; }
.aix .mai-mini:hover { background: var(--ai-surface-2); color: #fff; }
/* ResponseActivityIndicator, part 2: the waiting row before any text exists. */
.aix .mai-typing__box { padding: 7px 14px; border: 1px solid var(--ai-line); border-radius: 999px; background: rgb(12 18 16 / .85); }
.aix .mai-dots i { background: var(--ai-green-bright); }
.aix [data-typing-label] { background: linear-gradient(90deg, var(--ai-text-muted) 0 38%, #d1fae5 50%, var(--ai-text-muted) 62% 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ai-shimmer 2.4s linear infinite; }
@keyframes ai-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.aix .mai-card { border-color: var(--ai-line-2); background: #0d1411; }
.aix .mai .mai-card input, .aix .mai .mai-card textarea { border-color: var(--ai-line-2); background: #070b0a; color: var(--ai-text); }
.aix .mai-btn { background: #0c1210; color: var(--ai-text); }
.aix .mai-primary { border: 0; background: var(--ai-grad); color: var(--ai-on-accent); }
.aix .mai-jump { border-color: var(--ai-line-2); background: #0d1411; color: var(--ai-text); }
.aix .mai-dock { background: transparent; }
.aix .mai-dock::before { background: linear-gradient(to bottom, transparent, var(--ai-bg)); }
.aix .mai-dock > .mai-col { display: flex; flex-direction: column; }
.aix .mai-status { order: 1; }

/* ChatComposer */
.aix .mai-compose { order: 2; position: relative; padding: 9px 9px 9px 20px; border-color: var(--ai-line-2); border-radius: 22px; background: #0b110f;
  box-shadow: 0 0 0 1px rgb(74 222 128 / .06), 0 18px 40px -24px rgb(34 197 94 / .45); transition: border-color var(--ai-t), box-shadow var(--ai-t); }
.aix .mai[dir="rtl"] .mai-compose { padding: 9px 20px 9px 9px; }
.aix .mai-compose:focus-within { border-color: rgb(74 222 128 / .55); box-shadow: 0 0 0 4px rgb(34 197 94 / .11), 0 18px 40px -22px rgb(34 197 94 / .55); }
/* While a real answer is on its way, a faint light runs along the top edge. */
.aix .mai-compose::after { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 1px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgb(94 234 212 / .85), transparent) no-repeat; background-size: 40% 100%; transition: opacity 400ms ease; }
.aix[data-ai-state="waiting"] .mai-compose::after,
.aix[data-ai-state="responding"] .mai-compose::after { opacity: 1; animation: ai-scan 2.6s linear infinite; }
.aix .mai button.mai-send { position: relative; width: 44px; height: 44px; background: var(--ai-grad); color: var(--ai-on-accent); box-shadow: 0 6px 18px -8px rgb(34 197 94 / .75); transition: transform var(--ai-t) var(--ai-ease), opacity var(--ai-t), box-shadow var(--ai-t); }
.aix .mai button.mai-send:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 8px 22px -6px rgb(34 197 94 / .85); }
.aix .mai button.mai-send:not(:disabled):active { transform: scale(.93); }
.aix .mai button.mai-send:disabled { opacity: .32; box-shadow: none; }
.aix .mai-send svg { width: 22px; height: 22px; }
/* Stop: a calm square with a ring of light that turns while the run is live. */
.aix .mai button.mai-send--stop { background: #0e1713; color: var(--ai-mint-light); box-shadow: inset 0 0 0 1px rgb(52 211 153 / .45); }
.aix .mai button.mai-send--stop::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 55%, rgb(94 234 212 / .9) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: ai-spin 1.6s linear infinite; }
.aix .mai-starters { order: 3; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 0; overflow: visible; }
.aix .mai-starters[hidden] { display: none; }
.aix .mai button.mai-starter { width: auto; min-height: 36px; padding: 7px 14px; border: 1px solid var(--ai-line-2); border-radius: 999px; background: #0c1210; color: var(--ai-text-soft); font-size: 13.5px; white-space: nowrap; transition: border-color var(--ai-t), background var(--ai-t), color var(--ai-t), transform var(--ai-t) var(--ai-ease); }
.aix .mai button.mai-starter:hover { border-color: rgb(74 222 128 / .5); background: #101813; color: #fff; transform: translateY(-1px); }
.aix .mai button.mai-starter:active { transform: scale(.97); }
.aix .mai-hint { order: 4; margin-top: 10px; color: #6f7d76; }

/* ---------- Entrance: once per page view, ~0.9s, never blocks the input ---------- */
html[data-motion="full"] .aix:not(.is-entered) .aix-hero .ai-orb__core { animation: ai-core-in 520ms var(--ai-ease) both; }
html[data-motion="full"] .aix:not(.is-entered) .aix-hero .ai-orb__field { animation: ai-field-in 760ms var(--ai-ease) 120ms both; }
html[data-motion="full"] .aix:not(.is-entered) .aix-hero > :not(.ai-orb) { animation: ai-rise-in 520ms var(--ai-ease) both; animation-delay: 280ms; }
html[data-motion="full"] .aix:not(.is-entered) .aix-hero > .aix-cards { animation-delay: 380ms; }
@keyframes ai-core-in { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes ai-field-in { from { opacity: 0; transform: scale(.9) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes ai-rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Container-responsive: the chat stage, whatever surrounds it ---------- */
.aix-main { container: aix-stage / inline-size; }
/* Five cards in one row down to 760px; below that one scrolling row, never
   a wrapped second row that would push the composer down. */
@container aix-stage (max-width: 760px) {
  .aix-cards { display: flex; gap: 10px; width: calc(100% + 24px); margin-inline: -12px; padding: 2px 12px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; scrollbar-width: none; }
  .aix-cards::-webkit-scrollbar { display: none; }
  .aix-card { flex: 0 0 150px; min-height: 112px; scroll-snap-align: start; }
}
@container aix-stage (max-width: 640px) {
  .ai-orb--hero { --orb-size: var(--ai-orb-hero-phone); }
  .aix-bar { height: 50px; padding: 0 12px; }
  .aix .mai-welcome h2.aix-hero__title { margin-top: 10px; font-size: 24px; }
  .aix .mai-welcome p.aix-hero__sub { font-size: 16px; }
  .aix .mai-welcome p.aix-hero__note { font-size: 13px; }
  .aix-langs { flex-wrap: nowrap; justify-content: flex-start; width: calc(100% + 24px); margin: 14px -12px 14px; padding: 2px 12px; overflow-x: auto; scrollbar-width: none; }
  .aix-langs::-webkit-scrollbar { display: none; }
  .aix-langs button { flex: none; min-height: 36px; padding: 0 14px; font-size: 13.5px; }
  .aix-cards { display: flex; gap: 10px; width: calc(100% + 24px); margin-inline: -12px; padding: 2px 12px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; scrollbar-width: none; }
  .aix-cards::-webkit-scrollbar { display: none; }
  .aix-card { flex: 0 0 146px; min-height: 112px; scroll-snap-align: start; }
  .aix .mai-starters { flex-wrap: nowrap; margin-inline: -12px; padding-inline: 12px; overflow-x: auto; scrollbar-width: none; }
  .aix .mai-starters::-webkit-scrollbar { display: none; }
  .aix .mai-assistant .mai-body { padding: 11px 14px; }
  .aix-halo__text strong { font-size: 13px; }
}
/* Short phones (e.g. 390×664): keep the whole welcome above the composer.
   The starter chips are hidden here because the cards offer the same. */
@media (max-width: 640px) and (max-height: 700px) {
  .aix .mai-welcome p.aix-hero__note { display: none; }
  .aix .ai-orb--hero { --orb-size: 88px; }
  .aix .mai-welcome h2.aix-hero__title { margin-top: 6px; font-size: 22px; }
  .aix .aix-langs { margin-block: 10px; }
  .aix .mai-starters { display: none; }
}

/* ---------- 9. Motion modes and pausing ---------- */
/* Paused: tab hidden, orb off screen, reduced or off. Paused loops keep their
   current position, so resuming never jumps. */
html[data-page-hidden] .aix *,
[data-offscreen] *,
html[data-motion="reduced"] .ai-orb *,
html[data-motion="off"] .ai-orb * { animation-play-state: paused !important; }

/* Reduced: no continuous movement anywhere; short fades still mark changes. */
html[data-motion="reduced"] .aix .mai-dots i,
html[data-motion="reduced"] .aix [data-typing-label],
html[data-motion="reduced"] .aix .mai-avatar--pulse,
html[data-motion="reduced"] .aix .mai-streaming .mai-body::before,
html[data-motion="reduced"] .aix .mai-compose::after,
html[data-motion="reduced"] .aix .mai-send--stop::before,
html[data-motion="reduced"] .aix .mai-streaming .mai-body > :last-child::after { animation: none; }
html[data-motion="reduced"] .aix [data-typing-label] { background: none; color: var(--ai-text-muted); }
html[data-motion="reduced"] .aix .mai-card:hover,
html[data-motion="reduced"] .aix-card:hover { transform: none; }
html[data-motion="reduced"] .ai-ambient__canvas,
html[data-motion="reduced"] .ai-ambient__glow,
html[data-motion="reduced"] .aix-hero .ai-orb__field { transform: none; translate: none; }
html[data-motion="reduced"] .ai-ambient__glow { transform: translate(-50%, -50%); }

/* Off: nothing animates or transitions. */
html[data-motion="off"] .aix *,
html[data-motion="off"] .aix *::before,
html[data-motion="off"] .aix *::after,
html[data-motion="off"] .aix-info { animation: none !important; transition: none !important; }
html[data-motion="off"] .aix [data-typing-label] { background: none; color: var(--ai-text-muted); }
html[data-motion="off"] .ai-ambient__canvas { display: none; }
html[data-motion="off"] .ai-ambient__glow { transform: translate(-50%, -50%); }
html[data-motion="off"] .aix-hero .ai-orb__field { translate: none; }