/* ============================================================
   Assistant mock — theme tokens
   data-mode ("light" | "dark") is set on <html>; the blocks below
   are the Default theme. Picking any other theme injects the same
   variables into a <style id="themeVars"> tag, built at runtime
   from the theme's spec (see themes.js).
   ============================================================ */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* layout */
  --sidebar-w: 236px;
  --panel-w: 304px;
  --titlebar-h: 52px;

  /* shape */
  --bubble-radius: 18px;
  --radius-m: 10px;

  /* ---- default theme, light mode ---- */
  --bg-app: #ffffff;
  --bg-side: #f5f5f6;
  --bg-panel: #ffffff;
  --bg-raised: #ffffff;
  --bg-hover: rgba(0, 0, 0, 0.05);
  --bg-pill: #f1f1f3;
  --bubble-assistant: #f1f1f3;
  --bubble-user: #1d1d1f;
  --bubble-user-fg: #ffffff;
  --text-1: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #a4a4aa;
  --border: #e9e9ec;
  --accent: #3a82f7;
  --accent-fg: #ffffff;
  --dot-active: #32c463;
  --dot-idle: #c3c3c9;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.07), 0 0 0 0.5px rgba(0, 0, 0, 0.04);

  /* ---- stage (the page around the window) ---- */
  --stage-bg1: #ecedf2;
  --stage-bg2: #d9dbe4;
  --stage-text: #55575f;
  --stage-text-dim: #9092a0;
  --stage-card: rgba(255, 255, 255, 0.72);
  --stage-border: rgba(30, 30, 40, 0.1);
  --stage-accent: #60636d;
  --stage-accent-fg: #ffffff;
  --window-shadow: 0 40px 90px rgba(20, 22, 34, 0.28), 0 6px 24px rgba(20, 22, 34, 0.12),
    0 0 0 0.5px rgba(0, 0, 0, 0.14);
}

[data-mode="dark"] {
  --bg-app: #1d1d20;
  --bg-side: #161618;
  --bg-panel: #1d1d20;
  --bg-raised: #27272b;
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-pill: #2a2a2e;
  --bubble-assistant: #2a2a2e;
  --bubble-user: #f2f2f7;
  --bubble-user-fg: #1d1d1f;
  --text-1: #f2f2f7;
  --text-2: #9c9ca3;
  --text-3: #6c6c73;
  --border: #2c2c31;
  --dot-idle: #55555c;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.06);

  --stage-bg1: #131318;
  --stage-bg2: #0b0b0e;
  --stage-text: #b9bac4;
  --stage-text-dim: #6d6e7a;
  --stage-card: rgba(30, 30, 36, 0.72);
  --stage-border: rgba(255, 255, 255, 0.1);
  --stage-accent: #a7a9b2;
  --stage-accent-fg: #17171b;
  --window-shadow: 0 40px 100px rgba(0, 0, 0, 0.65), 0 6px 24px rgba(0, 0, 0, 0.4),
    0 0 0 0.5px rgba(255, 255, 255, 0.12);
}

/* ============================================================
   Base
   ============================================================ */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-1);
  background: radial-gradient(120% 120% at 50% 0%, var(--stage-bg1) 0%, var(--stage-bg2) 100%) fixed;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* The composer pill already signals focus via its focus-within ring, so the
   inner text field's own outline would just draw a second, misaligned box. */
.composer input:focus-visible {
  outline: none;
}

/* Standalone pill-shaped fields: swap the hard outline for a soft ring that
   hugs their actual shape. */
.search-wrap input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 0 3.5px color-mix(in srgb, var(--accent) 13%, transparent);
}

.hidden { display: none !important; }

.ico {
  width: 18px;
  height: 18px;
  flex: none;
  display: block;
}

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-3) 45%, transparent);
  border-radius: 8px;
  border: 3.5px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text-3) 70%, transparent);
  background-clip: content-box;
}

/* ============================================================
   Stage: page backdrop, control rail, centered window
   ============================================================ */

.stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 32px 36px;
}

.window {
  flex: none;
  width: min(1180px, calc(100vw - 340px));
  height: min(760px, calc(100vh - 64px));
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--window-shadow);
  transition: box-shadow 0.3s ease;
  transform: translate(var(--win-x, 0px), var(--win-y, 0px));
}
.window.dragging {
  box-shadow: var(--window-shadow), 0 60px 130px rgba(0, 0, 0, 0.2);
}
.window.settling {
  transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.25, 1);
}

/* --- control rail --- */

.controls {
  flex: none;
  width: 224px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 18px 16px 16px;
  border-radius: 16px;
  background: var(--stage-card);
  border: 1px solid var(--stage-border);
  backdrop-filter: blur(14px);
  color: var(--stage-text);
}
.controls :focus-visible { outline-color: var(--stage-accent); }

.controls-title {
  font-size: 13px;
  font-weight: 650;
  margin-bottom: 4px;
}

.controls-sub {
  font-size: 11px;
  line-height: 1.45;
  color: var(--stage-text-dim);
  margin-bottom: 16px;
}

.ctl + .ctl { margin-top: 16px; }

.ctl-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stage-text-dim);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}

.seg {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--stage-text) 10%, transparent);
}
.seg button {
  flex: 1;
  padding: 5px 0;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--stage-text-dim);
  transition: background 0.12s ease, color 0.12s ease;
}
.seg button.selected {
  background: var(--stage-card);
  color: var(--stage-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* --- theme picker --- */

.theme-list { display: flex; flex-direction: column; gap: 6px; }

.theme-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 7px;
  border-radius: 11px;
  border: 1px solid var(--stage-border);
  text-align: left;
  color: var(--stage-text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.theme-chip:hover { border-color: var(--stage-text-dim); }
.theme-chip.selected {
  border-color: var(--stage-accent);
  box-shadow: 0 0 0 1px var(--stage-accent);
}

.theme-chip .chip-preview {
  width: 36px;
  height: 32px;
  flex: none;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: block;
  overflow: hidden;
  background: var(--stage-card);
}
.theme-chip .chip-preview svg {
  display: block;
  width: 100%;
  height: 100%;
}
.theme-chip .chip-name {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theme-chip .chip-meta { flex: 1; min-width: 0; }

.theme-chip .chip-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--stage-text);
  color: var(--stage-card);
  font-size: 11px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
}
.theme-chip:hover .chip-remove { display: inline-flex; }

/* freshly designed theme pops into the list */
.theme-chip.just-added { animation: chip-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes chip-pop {
  0% { transform: scale(0.85); opacity: 0; }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); opacity: 1; }
}

/* --- theme maker (locked Zoo demo) --- */

.maker { display: flex; gap: 6px; align-items: stretch; }

.maker-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 12px;
  background: color-mix(in srgb, var(--stage-text) 10%, transparent);
  color: var(--stage-text);
  white-space: nowrap;
  overflow: hidden;
}
.maker-text:empty::before {
  content: "Design a theme…";
  color: var(--stage-text-dim);
}
.maker-caret {
  width: 1.5px;
  height: 13px;
  margin-left: 1px;
  background: var(--stage-text-dim);
  opacity: 0;
}
.maker-field.active .maker-caret { animation: caret-blink 0.9s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 1; } }

.maker-btn {
  flex: none;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: var(--stage-accent);
  color: var(--stage-accent-fg);
  transition: opacity 0.12s ease;
}
.maker-btn:disabled { opacity: 0.55; cursor: default; }

/* pulses until the first run, so people know to try it */
.maker-btn.attention { animation: attn-pulse 2.2s ease-out infinite; }
@keyframes attn-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--stage-accent) 55%, transparent); }
  60% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* the "mixing" stage that reveals during the demo */
.maker-stage {
  margin-top: 9px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.maker-palette { display: flex; gap: 4px; height: 11px; }
.maker-palette i {
  flex: 1;
  border-radius: 3px;
  background: var(--c);
  transform: scaleY(0);
  animation: swatch-in 0.32s ease forwards;
}
@keyframes swatch-in { to { transform: scaleY(1); } }

.maker-scene {
  aspect-ratio: 216 / 92;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--stage-border);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.maker-scene.show { opacity: 1; transform: none; }
.maker-scene svg { display: block; width: 100%; height: 100%; }

.maker-cast { display: flex; gap: 5px; justify-content: center; }
.maker-cast .cast-dot {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  background: var(--stage-card);
  border: 1px solid var(--stage-border);
  opacity: 0;
  transform: scale(0.4) translateY(4px);
}
/* the img is rounded itself so a manager badge can sit outside the dot */
.maker-cast .cast-dot .portrait-img { width: 100%; height: 100%; border-radius: 50%; animation: none; }
.maker-cast .cast-dot .portrait-emoji { font-size: 15px; }
.maker-cast .cast-dot .portrait-art { width: 58%; height: 58%; color: var(--stage-text); }

/* subtle "lead" marker — a small star chip, not loud */
.maker-cast .cast-dot.is-manager { border-color: color-mix(in srgb, var(--stage-accent) 55%, var(--stage-border)); }
.maker-cast .cast-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--stage-card);
  border: 1px solid var(--stage-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.maker-cast .cast-badge::before {
  content: "★";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  line-height: 1;
  color: color-mix(in srgb, var(--stage-accent) 78%, #d98a2b);
}
.maker-cast .cast-dot.pop { animation: cast-pop 0.34s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
@keyframes cast-pop { to { opacity: 1; transform: none; } }

.maker-hint {
  margin-top: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--stage-text);
  background: color-mix(in srgb, var(--stage-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--stage-accent) 28%, transparent);
}

.theme-maker-status {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--stage-text-dim);
}
.theme-maker-status.error { color: #c4554d; }
.theme-maker-status.success { color: var(--stage-text); }
.theme-maker-status .spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  border: 1.5px solid var(--stage-text-dim);
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
  vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   App frame (inside the window)
   ============================================================ */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--panel-w);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  background: var(--bg-app);
  transition: grid-template-columns 0.25s ease;
}

.app.sidebar-hidden { grid-template-columns: 0 minmax(0, 1fr) var(--panel-w); }
.app.panel-hidden   { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) 0; }
.app.sidebar-hidden.panel-hidden { grid-template-columns: 0 minmax(0, 1fr) 0; }

.titlebar {
  height: var(--titlebar-h);
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
  /* title bars double as window drag handles */
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.icon-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--text-2);
  transition: background 0.12s ease, color 0.12s ease;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text-1); }
.icon-btn:disabled { color: var(--text-3); cursor: default; }
.icon-btn:disabled:hover { background: none; }
.icon-btn.boxed { background: var(--bg-pill); border-radius: 9px; }
.icon-btn.boxed:hover { background: var(--bg-hover); }

/* ============================================================
   Sidebar
   ============================================================ */

.sidebar {
  background: var(--bg-side);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.theme-vignette {
  position: relative;
  flex: none;
  aspect-ratio: 216 / 92; /* matches the scene viewBox so art fills edge-to-edge */
  margin: auto 0 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 10px;
  background: var(--bg-raised);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--text-1) 7%, transparent);
}
.theme-vignette svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* entrance moment: the vignette lifts + settles whenever the theme switches */
.theme-vignette.vignette-enter { animation: vignette-in 0.44s cubic-bezier(0.2, 0.9, 0.3, 1.05); }
@keyframes vignette-in {
  0% { opacity: 0; transform: translateY(7px) scale(0.965); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-vignette.vignette-enter { animation: none; }
  .portrait-img { animation: none; }
}

.traffic { display: flex; gap: 8px; padding: 0 6px 0 2px; }
.tl {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}
.tl.red    { background: #ff5f57; }
.tl.yellow { background: #febc2e; }
.tl.green  { background: #28c840; }

.nav-arrows { display: flex; gap: 2px; }

.side-nav { padding: 2px 10px 10px; }

.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--text-1);
  font-size: 13.5px;
  font-weight: 450;
  white-space: nowrap;
}
.side-link .ico { width: 17px; height: 17px; color: var(--text-2); }
.side-link:hover { background: var(--bg-hover); }

/* Legacy "New chat" coach bubble. The guided tour (search "Guided tour"
   near the bottom of this file) supersedes it with a stage-level overlay
   and keeps it suppressed, but the class is retained as a stable hook. */
.coach {
  display: block;
  width: calc(100% - 4px);
  margin: 2px 2px 4px;
  padding: 8px 10px;
  border-radius: 10px;
  text-align: left;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-1);
  background: color-mix(in srgb, var(--accent) 11%, var(--bg-raised));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  animation: coach-in 0.35s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.coach:hover { background: color-mix(in srgb, var(--accent) 18%, var(--bg-raised)); }
.coach b { color: var(--accent); }
@keyframes coach-in {
  from { opacity: 0; transform: translateY(-5px); }
}

.search-wrap { padding: 2px 8px 4px; }
.search-wrap input {
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--bg-pill);
  font-size: 13px;
  box-shadow: inset 0 0 0 1px var(--border);
}
.search-wrap input::placeholder { color: var(--text-3); }

.chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: var(--radius-m);
  text-align: left;
  width: 100%;
  transition: background 0.12s ease;
}
.chat-item:hover { background: var(--bg-hover); }
.chat-item.selected {
  background: var(--bg-raised);
  box-shadow: var(--shadow-card);
}

.chat-meta { flex: 1; min-width: 0; }
.chat-row1, .chat-row2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-time { font-size: 11.5px; color: var(--text-3); flex: none; }
.chat-preview {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.badge {
  flex: none;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.me {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 14px;
  white-space: nowrap;
}
.me-name { font-size: 13px; font-weight: 600; }
.me-mail { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }

/* ============================================================
   Avatars
   ============================================================ */

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--av-bg, var(--bg-pill));
  color: var(--av-fg, var(--text-2));
  user-select: none;
}
.avatar.has-portrait { overflow: hidden; }
.portrait-art {
  width: 58%;
  height: 58%;
  display: block;
}
/* illustrated character art fills the (already circular, clipped) avatar */
.portrait-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* the SVG frame carries color; a gentle pop-in when it first appears */
  animation: portrait-in 0.34s cubic-bezier(0.2, 1.3, 0.4, 1);
}
@keyframes portrait-in {
  from { opacity: 0; transform: scale(0.82); }
}
.portrait-emoji {
  font-size: 20px;
  line-height: 1;
  user-select: none;
}
.avatar.sm .portrait-emoji { font-size: 14px; }
.avatar.xs .portrait-emoji { font-size: 9px; }
.avatar.lg .portrait-emoji { font-size: 34px; }
.avatar.me-av .portrait-emoji { font-size: 17px; }
.portrait-speck {
  fill: currentColor;
  stroke: none;
  opacity: 0.22;
}
.avatar.sm { width: 26px; height: 26px; font-size: 9.5px; }
.avatar.xs { width: 16px; height: 16px; font-size: 6.5px; font-weight: 800; }
.avatar.lg { width: 64px; height: 64px; font-size: 21px; }
.avatar.me-av { width: 32px; height: 32px; font-size: 11px; }

.hue-pink       { --av-bg: #f7bede; --av-fg: #a82c74; }
.hue-periwinkle { --av-bg: #c9d4f6; --av-fg: #4054b8; }
.hue-mint       { --av-bg: #c2ecd7; --av-fg: #1e7a4d; }
.hue-tan        { --av-bg: #e7d9bc; --av-fg: #7c6433; }
.hue-gray       { --av-bg: #e3e3e8; --av-fg: #5f5f66; }

[data-mode="dark"] .hue-pink       { --av-bg: #5c2b46; --av-fg: #f7a8d4; }
[data-mode="dark"] .hue-periwinkle { --av-bg: #333d66; --av-fg: #aebcf5; }
[data-mode="dark"] .hue-mint       { --av-bg: #1e4634; --av-fg: #96e0bb; }
[data-mode="dark"] .hue-tan        { --av-bg: #4d4128; --av-fg: #e0cb9b; }
[data-mode="dark"] .hue-gray       { --av-bg: #3a3a40; --av-fg: #b8b8bf; }

/* ============================================================
   Main column
   ============================================================ */

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-app);
}

.main-header {
  border-bottom: 1px solid var(--border);
  gap: 10px;
  padding: 0 14px;
  position: relative;
}
.app[data-theme="beach"] .main-header::after,
.app[data-theme="cool-runnings"] .main-header::after,
.app[data-theme="my-family"] .main-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  opacity: 0.72;
}
.app[data-theme="beach"] .main-header::after {
  background: linear-gradient(90deg, #0e8b8f 0 42%, #f0b257 42% 70%, transparent 70%);
}
.app[data-theme="cool-runnings"] .main-header::after {
  background: linear-gradient(90deg, #078745 0 36%, #f2c230 36% 58%, #111418 58% 72%, transparent 72%);
}
.app[data-theme="my-family"] .main-header::after {
  background: linear-gradient(90deg, #c65f41 0 34%, #e0b958 34% 56%, #789466 56% 70%, transparent 70%);
}
.reveal-sidebar { display: none; }
.app.sidebar-hidden .reveal-sidebar { display: inline-flex; }

.peer { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.peer-name {
  font-size: 15px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-actions { display: flex; gap: 8px; }

/* --- thread --- */

.thread {
  flex: 1;
  overflow-y: auto;
}
.thread-inner {
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  padding: 14px 20px 10px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.sep {
  text-align: center;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-3);
  margin: 20px 0 10px;
}

/* relay pill: a message forwarded from another agent */
.relay {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 86%;
  width: fit-content;
  padding: 7px 13px;
  margin: 5px 0;
  border-radius: 999px;
  background: var(--bg-pill);
  font-size: 12.5px;
  color: var(--text-3);
  cursor: pointer;
  animation: msg-in 0.18s ease;
}
.relay .from { flex: none; }
.relay .relay-name { flex: none; font-weight: 600; color: var(--text-2); }
.relay .relay-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.relay.expanded { border-radius: var(--bubble-radius); align-items: flex-start; }
.relay.expanded .relay-text { white-space: normal; }
.relay.expanded .avatar.xs { margin-top: 1px; }

/* chat bubbles — incoming on the left, your messages on the right (iMessage style) */
.msg {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 3px 0;
  animation: msg-in 0.18s ease;
}

.bubble {
  position: relative;
  max-width: min(78%, 560px);
  padding: 11px 14px;
  border-radius: var(--bubble-radius);
  font-size: 13.5px;
  line-height: 1.45;
  background: var(--bubble-assistant);
  color: var(--text-1);
  overflow-wrap: anywhere;
}
.msg.user {
  flex-direction: row-reverse;
}
.msg.user .bubble {
  background: var(--bubble-user);
  color: var(--bubble-user-fg);
}

.msg .actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.13s ease;
}
.msg:hover .actions { opacity: 1; }
.msg .actions .icon-btn { width: 27px; height: 27px; color: var(--text-3); }
.msg .actions .icon-btn:hover { color: var(--text-1); }
.msg .actions .ico { width: 15.5px; height: 15.5px; }

.reaction {
  position: absolute;
  left: 10px;
  bottom: -10px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 6px 2px;
  font-size: 12px;
  box-shadow: var(--shadow-card);
}
.msg.user .reaction {
  left: auto;
  right: 10px;
}
.msg.has-reaction { margin-bottom: 14px; }

.typing-dots { display: inline-flex; gap: 4px; padding: 3px 0; }
.typing-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  animation: bounce 1.2s infinite;
}
.typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.typing-dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(5px); }
}

.empty {
  margin: auto;
  text-align: center;
  color: var(--text-3);
  padding: 40px 0;
}
.empty .avatar.lg { margin: 0 auto 14px; }
.empty-title { font-size: 15px; font-weight: 600; color: var(--text-2); }
.empty-hint { font-size: 12.5px; margin-top: 5px; }

/* --- composer --- */

.composer-wrap {
  flex: none;
  padding: 10px 16px 16px;
}
.composer {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-app);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.app[data-theme="cool-runnings"] .composer {
  box-shadow: inset 0 -2px 0 color-mix(in srgb, #f2c230 72%, transparent);
}
.app[data-theme="beach"] .composer {
  box-shadow: inset 0 -2px 0 color-mix(in srgb, #2b9da5 50%, transparent);
}
.app[data-theme="my-family"] .composer {
  box-shadow: inset 0 -2px 0 color-mix(in srgb, #c65f41 42%, transparent);
}
.composer:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--accent) 13%, transparent);
}
.composer input {
  flex: 1;
  min-width: 0;
  padding: 7px 2px;
  font-size: 13.5px;
}
.composer input::placeholder { color: var(--text-3); }

.comp-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, background 0.12s ease;
}
.comp-btn:active { transform: scale(0.92); }
.comp-btn .ico { width: 16.5px; height: 16.5px; }
.comp-btn.plus { background: var(--bg-pill); color: var(--text-2); }
.comp-btn.plus:hover { background: var(--bg-hover); }
.comp-btn.mic { background: var(--text-1); color: var(--bg-app); }
.comp-btn.send { background: var(--accent); color: var(--accent-fg); }

/* ============================================================
   Right panel
   ============================================================ */

.panel {
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
.panel-titlebar { justify-content: flex-end; }

.panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
}

.profile { text-align: center; padding: 12px 0 20px; }
.profile .avatar.lg { margin: 0 auto 14px; }
.profile-name { font-size: 19px; font-weight: 650; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  background: var(--bg-pill);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot-idle); }
.chip .dot.active { background: var(--dot-active); }
.chip .dot.working { background: var(--accent); animation: pulse 1s ease infinite; }

@keyframes pulse {
  50% { opacity: 0.35; }
}

.panel-group {
  border-top: 1px solid var(--border);
  padding: 6px 0;
}

.panel-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 6px;
  border-radius: var(--radius-m);
  text-align: left;
  transition: background 0.12s ease;
}
.panel-row:hover { background: var(--bg-hover); }
.panel-row .ico { width: 17px; height: 17px; color: var(--text-2); }
.panel-row-label { flex: 1; font-size: 13.5px; font-weight: 450; }
.panel-row-value { font-size: 12.5px; color: var(--text-3); }
.panel-row .chev { width: 13px; height: 13px; color: var(--text-3); }

/* ============================================================
   New-agent picker sheet (themed starter agents)
   ============================================================ */

.window { position: relative; }

.sheet-backdrop {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 14, 0.34);
  backdrop-filter: blur(3px);
  animation: fade-in 0.16s ease;
}

.sheet {
  width: min(500px, calc(100% - 48px));
  max-height: min(590px, calc(100% - 48px));
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: var(--bg-app);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 0 0.5px var(--border);
  animation: sheet-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.sheet-head { padding: 16px 18px 8px; }
.sheet-title { font-size: 15px; font-weight: 650; }
.sheet-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }

.sheet-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sheet-agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 132px;
  padding: 14px 8px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
  background: color-mix(in srgb, var(--bg-raised) 76%, transparent);
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.sheet-agent:hover {
  background: var(--bg-hover);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  transform: translateY(-1px);
}
.sheet-agent .agent-card-portrait { width: 68px; height: 68px; }
.sheet-agent .agent-card-portrait .portrait-art { width: 56%; height: 56%; }
.sheet-agent .agent-card-portrait .portrait-emoji { font-size: 36px; }
.sheet-agent .agent-name {
  width: 100%;
  min-width: 0;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-agent .added {
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
}

.sheet-custom {
  flex: none;
  margin: 8px 16px 16px;
  padding: 9px 0;
  border-radius: 10px;
  background: var(--bg-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  transition: background 0.12s ease, color 0.12s ease;
}
.sheet-custom:hover { background: var(--bg-hover); color: var(--text-1); }

@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-in {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
}

/* ---------- in-app theme studio ----------
   A sheet (same chrome as the agent picker) that hosts "Design your own"
   (primary) above a preset grid (fallback). It re-skins the maker + chips
   with the app's own tokens so it reads as part of the product, not the
   engineer control rail it moved out of. */
.theme-sheet { width: min(440px, calc(100% - 40px)); position: relative; }
.theme-sheet .sheet-head { padding: 18px 18px 6px; }

.sheet-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  color: var(--text-3);
  display: grid;
  place-items: center;
  z-index: 1;
  transition: background 0.12s ease, color 0.12s ease;
}
.sheet-x:hover { background: var(--bg-hover); color: var(--text-1); }

.theme-sheet-body { overflow-y: auto; padding: 6px 18px 18px; }

.theme-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}

.theme-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
}
.theme-divider::before,
.theme-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* presets read as a picker grid inside the sheet, not the rail column */
.theme-sheet .theme-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.theme-sheet .theme-chip {
  padding: 8px 9px;
  border-color: var(--border);
  color: var(--text-1);
  background: color-mix(in srgb, var(--bg-raised) 70%, transparent);
}
.theme-sheet .theme-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--bg-hover);
}
.theme-sheet .theme-chip.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.theme-sheet .theme-chip .chip-preview { background: var(--bg-pill); }
.theme-sheet .theme-chip .chip-name { color: var(--text-1); }
.theme-sheet .theme-chip .chip-remove { background: var(--text-2); color: var(--bg-app); }

/* the maker adopts app tokens inside the sheet (it used --stage-* on the rail) */
.theme-sheet .maker-field {
  background: var(--bg-pill);
  color: var(--text-1);
}
.theme-sheet .maker-text:empty::before { color: var(--text-3); }
.theme-sheet .maker-caret { background: var(--text-3); }
.theme-sheet .maker-btn {
  background: var(--accent);
  color: var(--accent-fg);
}
.theme-sheet .maker-btn.attention { animation: attn-pulse-app 2.2s ease-out infinite; }
@keyframes attn-pulse-app {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}
.theme-sheet .maker-stage {
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg-raised) 60%, transparent);
}
.theme-sheet .maker-scene { border-color: var(--border); }
.theme-sheet .maker-cast .cast-dot {
  background: var(--bg-pill);
  border-color: var(--border);
}
.theme-sheet .maker-cast .cast-dot .portrait-art { color: var(--text-1); }
.theme-sheet .maker-hint { color: var(--text-3); }
.theme-sheet .theme-maker-status { color: var(--text-2); }
.theme-sheet .theme-maker-status.success { color: var(--text-1); }

/* ============================================================
   Guided tour — stage-level coach overlay (see app.js)

   Fixed to the viewport at a high z-index so the spotlight + callout
   float ABOVE the mock window, the control rail, and the agent sheet
   (which the old sidebar coach mark could not). The layer ignores
   pointer events so the REAL target underneath stays clickable; only
   the callout itself is interactive.
   ============================================================ */
.tour {
  position: fixed;
  inset: 0;
  z-index: 4000;
  pointer-events: none;
}
.tour.hidden { display: none !important; }

.tour-spot {
  position: fixed;
  border-radius: 13px;
  box-shadow: 0 0 0 9999px rgba(12, 14, 24, 0.44);
  transition: top 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.tour-spot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 88%, #fff);
  animation: tour-halo 1.9s ease-in-out infinite;
}
@keyframes tour-halo {
  0%, 100% {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 88%, #fff),
      0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
  }
  55% {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 88%, #fff),
      0 0 0 11px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}

.tour-pop {
  position: fixed;
  width: max-content;
  max-width: 258px;
  padding: 13px 30px 12px 15px;
  border-radius: 14px;
  background: var(--bg-raised);
  color: var(--text-1);
  box-shadow: 0 20px 55px rgba(10, 12, 22, 0.32), 0 0 0 0.5px rgba(0, 0, 0, 0.07);
  pointer-events: auto;
  transition: top 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  animation: tour-pop-in 0.34s cubic-bezier(0.2, 1.35, 0.4, 1);
}
@keyframes tour-pop-in {
  from { opacity: 0; transform: scale(0.9) translateY(4px); }
}
.tour-pop::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--bg-raised);
  transform: rotate(45deg);
}
.tour-pop[data-placement="left"]::before { right: -5px; top: calc(50% - 6px); }
.tour-pop[data-placement="right"]::before { left: -5px; top: calc(50% - 6px); }
.tour-pop[data-placement="top"]::before { bottom: -5px; left: calc(50% - 6px); }
.tour-pop[data-placement="bottom"]::before { top: -5px; left: calc(50% - 6px); }

.tour-text { font-size: 12.5px; line-height: 1.45; }
.tour-text b { color: var(--accent); font-weight: 650; }

.tour-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 11px;
}
.tour-dots { display: inline-flex; gap: 5px; align-items: center; }
.tour-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-3) 62%, transparent);
  transition: width 0.24s ease, background 0.24s ease;
}
.tour-dots i.on { width: 15px; border-radius: 3px; background: var(--accent); }

.tour-skip {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
  padding: 2px 4px;
}
.tour-skip:hover { color: var(--text-1); }

/* Late manager tip: the dots give way to a friendly CTA that adds the
   theme's manager on the spot. */
.tour-cta {
  font-size: 12px;
  font-weight: 650;
  color: var(--accent-fg);
  background: var(--accent);
  padding: 6px 13px;
  border-radius: 9px;
  transition: filter 0.15s ease;
}
.tour-cta:hover { filter: brightness(1.07); }
.tour-cta.hidden { display: none !important; }
.tour-pop.tip { max-width: 272px; }
.tour-pop.tip .tour-dots { display: none; }

.tour-x {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1;
  color: var(--text-3);
  display: grid;
  place-items: center;
}
.tour-x:hover { background: var(--bg-hover); color: var(--text-1); }

@media (prefers-reduced-motion: reduce) {
  .tour-spot, .tour-spot::after, .tour-pop { animation: none; transition: none; }
}

/* subtle "Replay tour" affordance at the foot of the control rail */
.replay-tour {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--stage-text-dim);
  transition: color 0.12s ease;
}
.replay-tour:hover { color: var(--stage-text); }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1120px) {
  .stage {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    flex-direction: column;
  }
  .controls { width: min(560px, 100%); max-height: none; }
  .window {
    width: 100%;
    height: 760px;
    min-height: 0;
    flex: 0 1 760px;
  }
}

@media (max-width: 900px) {
  :root { --panel-w: 280px; }
}

@media (max-width: 620px) {
  .sheet-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
