/*
 * Bot HQ: global tokens + page layout (CONTRACT v2.3, full-bleed scene with glass overlays).
 * Component styles live in ui/ui.css, in-scene tags and the canvas in scene/scene.css.
 *
 * Theme: the scene module publishes <html data-daylight="day|golden|dusk|night|dawn"> and the CSS
 * variable --night (0 = full day, 1 = full night, float). The UI flips between light and dark glass when
 * --night crosses 0.5: --theme steps 0 -> 1 and eases over 1 s, and every colour token below is a
 * colour-mix() between its day and night value driven by --theme. (Blending text and glass continuously
 * with --night would pass through grey-on-grey around dusk, so the UI never rests in between.)
 */

@property --night { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --theme { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --night: 0;
  --theme: 0;
  --n: calc(var(--theme) * 100%);

  /* text */
  --ink: color-mix(in srgb, #F5F5F7 var(--n), #1D1D1F);
  --muted: color-mix(in srgb, #AEAEB2 var(--n), #6E6E73);
  --faint: #8E8E93;
  --hair: color-mix(in srgb, rgba(255, 255, 255, .10) var(--n), rgba(0, 0, 0, .07));

  /* glass */
  --glass: color-mix(in srgb, rgba(28, 28, 30, .62) var(--n), rgba(255, 255, 255, .64));
  --glass-strong: color-mix(in srgb, rgba(28, 28, 30, .78) var(--n), rgba(255, 255, 255, .78));
  --glass-edge: color-mix(in srgb, rgba(255, 255, 255, .10) var(--n), rgba(255, 255, 255, .75));
  --glass-hi: color-mix(in srgb, rgba(255, 255, 255, .07) var(--n), rgba(255, 255, 255, .8));
  --glass-shadow: color-mix(in srgb, rgba(0, 0, 0, .38) var(--n), rgba(17, 24, 39, .08));
  --glass-blur: blur(28px) saturate(180%);

  /* quiet surfaces on top of glass */
  --tile: color-mix(in srgb, rgba(255, 255, 255, .08) var(--n), rgba(0, 0, 0, .05));
  --tile-soft: color-mix(in srgb, rgba(255, 255, 255, .06) var(--n), rgba(0, 0, 0, .035));
  --track: color-mix(in srgb, rgba(255, 255, 255, .14) var(--n), rgba(0, 0, 0, .08));
  --ava-bg: color-mix(in srgb, #D4D7E0 var(--n), #F2F2F4); /* stays light at night so dark blobs remain visible */
  --row-hover: color-mix(in srgb, rgba(255, 255, 255, .07) var(--n), rgba(0, 0, 0, .04));

  /* primary button / active floor pill: black by day, near-white at night */
  --btn-bg: color-mix(in srgb, #F5F5F7 var(--n), #1D1D1F);
  --btn-fg: color-mix(in srgb, #1D1D1F var(--n), #FFFFFF);
  --on-btn-tile: color-mix(in srgb, rgba(0, 0, 0, .08) var(--n), rgba(255, 255, 255, .14));
  --on-btn-muted: color-mix(in srgb, rgba(0, 0, 0, .5) var(--n), rgba(255, 255, 255, .6));
  --on-btn-idle: color-mix(in srgb, rgba(0, 0, 0, .22) var(--n), rgba(255, 255, 255, .35));

  /* status colours (Apple system, CONTRACT v2.3) */
  --working: #34C759; --waiting: #FF9F0A; --error: #FF3B30;
  --stuck: #FF9500; --done: #0A84FF; --idle: #A1A1A6;

  /* readable status text on a tinted chip (darker by day, lighter at night) */
  --ink-working: color-mix(in srgb, #5FD87D var(--n), #1F7A37);
  --ink-waiting: color-mix(in srgb, #FFB445 var(--n), #9A5B00);
  --ink-error: color-mix(in srgb, #FF8077 var(--n), #C4271D);
  --ink-stuck: color-mix(in srgb, #FFAA4D var(--n), #A85A00);
  --ink-done: color-mix(in srgb, #64AEFF var(--n), #0A5FBF);
  --ink-idle: color-mix(in srgb, #AEAEB2 var(--n), #6E6E73);
  --alert-bg: color-mix(in srgb, rgba(255, 159, 10, .20) var(--n), rgba(255, 159, 10, .12));
  --alert-ink: color-mix(in srgb, #FFC266 var(--n), #9A5B00);
  --alert-strong: color-mix(in srgb, #FFD590 var(--n), #7A4600);

  /* page + scene backdrop */
  --bg-0: color-mix(in srgb, #1B2240 var(--n), #FFFFFF);
  --bg-1: color-mix(in srgb, #10162B var(--n), #F3F4F6);
  --bg-2: color-mix(in srgb, #080B18 var(--n), #E7E9ED);

  /* layout */
  --gutter: 24px;
  --top: 22px;
  --below-top: 96px;
  --floors-w: 212px;
  --panel-w: 352px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ui.js adds .bhq-ready after the first paint, so the first theme is applied without a fade. */
:root.bhq-ready { transition: --theme 1s cubic-bezier(.4, 0, .2, 1); }

/* --theme follows --night, snapped to 0 or 1 (round() needs Chrome 125 / Safari 15.4 / Firefox 118). */
@supports (width: round(1.5px, 1px)) {
  :root { --theme: round(var(--night), 1); }
}
/* Older engines: the attribute set by the scene decides. */
@supports not (width: round(1.5px, 1px)) {
  :root[data-daylight="dawn"], :root[data-daylight="dusk"], :root[data-daylight="night"] { --theme: 1; }
  :root[data-daylight="dawn"] { --theme: 0; }
}

/* white studio backdrop (scene/studio.js): the ground is white at every hour, so the UI stays on light glass */
:root[data-sky="studio"] { --theme: 0; }

@media (prefers-reduced-motion: reduce) {
  :root.bhq-ready { transition: none; }
}

/* Solid panels when the OS asks for less transparency. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass: color-mix(in srgb, #1C1C1E var(--n), #F5F5F7);
    --glass-strong: color-mix(in srgb, #1C1C1E var(--n), #F5F5F7);
    --glass-blur: none;
  }
}

/* No backdrop-filter support: make the glass more opaque so text stays readable over the scene. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass: color-mix(in srgb, rgba(28, 28, 30, .9) var(--n), rgba(255, 255, 255, .9));
    --glass-strong: color-mix(in srgb, rgba(28, 28, 30, .94) var(--n), rgba(255, 255, 255, .94));
    --glass-blur: none;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(70% 70% at 42% 38%, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-2) 100%);
  color: var(--ink);
  font: 500 13px/1.4 var(--font);
  font-feature-settings: "cv11", "ss03";
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---------- layout: the scene is the page, everything else floats on it ---------- */

#scene {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden;
  background: radial-gradient(70% 70% at 42% 38%, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-2) 100%);
  cursor: grab;
}
#scene:active { cursor: grabbing; }
#scene.is-hovering { cursor: pointer; }
#scene canvas { display: block; width: 100%; height: 100%; }
.hq-labels { position: absolute; inset: 0; pointer-events: none; }
.hq-loading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 13px; color: var(--muted); letter-spacing: .02em;
}

/* Overlay containers never block the scene; only the panels inside them take pointer events. */
#topbar {
  position: fixed; z-index: 20; top: var(--top); left: var(--gutter); right: var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 16px;
  pointer-events: none;
}
#floors {
  position: fixed; z-index: 20; left: var(--gutter); top: var(--below-top);
  width: var(--floors-w); max-height: calc(100vh - var(--below-top) - 210px);
}
#panel {
  position: fixed; z-index: 20; right: var(--gutter); top: var(--below-top);
  width: min(var(--panel-w), calc(100vw - 2 * var(--gutter)));
  max-height: calc(100vh - var(--below-top) - var(--gutter));
  display: flex; flex-direction: column; pointer-events: none;
}
#feed {
  position: fixed; z-index: 20; left: var(--gutter); bottom: var(--gutter);
  width: min(372px, calc(100vw - 2 * var(--gutter)));
}

@media (max-width: 1100px) {
  #feed { display: none; }
}

/* ---------- wallpaper mode (?mode=wallpaper, app.js adds html.wallpaper; status line = web/wallpaper.js) ----------
   The office alone: no panels (they are never built), no pointer cursor games, no in-scene tags unless &tags=1,
   and no always-on CSS animation, so the page only draws what the 30 fps render loop asks for. */

html.wallpaper, html.wallpaper * { cursor: default !important; -webkit-user-select: none; user-select: none; }
html.wallpaper .hq-labels { display: none; }
html.wallpaper.wp-tags .hq-labels { display: block; }

.wp-status {
  position: fixed; z-index: 20; top: 24px; right: 28px;
  display: flex; align-items: center; gap: 0; max-width: calc(100vw - 56px);
  padding: 9px 16px 9px 13px; border-radius: 999px;
  font: 500 14px/1 var(--font); letter-spacing: -.003em; white-space: nowrap;
  color: var(--muted);
  background: var(--glass); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05), 0 8px 24px var(--glass-shadow);
  pointer-events: none;
}
.wp-status[hidden], .wp-seg[hidden] { display: none; }
.wp-seg { display: inline-flex; align-items: center; gap: 0; }
/* a dot between two visible segments */
.wp-seg:not([hidden]) ~ .wp-seg:not([hidden])::before {
  content: ""; width: 3px; height: 3px; margin: 0 10px; border-radius: 50%; background: currentColor; opacity: .45;
}
.wp-dot { width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--idle); flex: none; }
.wp-num { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); margin-right: 0; }
.wp-seg > span { margin-left: .3em; }
.wp-working .wp-dot { background: var(--working); box-shadow: 0 0 0 3px color-mix(in srgb, var(--working) 22%, transparent); }
.wp-attention { color: var(--alert-ink); }
.wp-attention .wp-num { color: var(--alert-strong); }
.wp-attention .wp-dot { background: var(--waiting); box-shadow: 0 0 0 3px color-mix(in srgb, var(--waiting) 24%, transparent); }
.wp-error { color: var(--ink-error); }
.wp-error .wp-num { color: var(--ink-error); }
.wp-error .wp-dot { background: var(--error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 22%, transparent); }
.wp-rest { color: var(--muted); }

@media (prefers-reduced-transparency: reduce) {
  .wp-status { -webkit-backdrop-filter: none; backdrop-filter: none; }
}