/* ============================================================
   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);
  --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);
  --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);
}

/* Themed background motifs (set by the active theme's spec) */
:root {
  --motif-image: none;
  --motif-image-faint: none;
  --motif-size: auto;
}

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

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-1);
  background-image: var(--motif-image),
    radial-gradient(120% 120% at 50% 0%, var(--stage-bg1) 0%, var(--stage-bg2) 100%);
  background-size: var(--motif-size), cover;
  background-attachment: fixed, 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;
}

.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-title {
  font-size: 13px;
  font-weight: 650;
  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(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.theme-chip .chip-preview {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, var(--pv1) 0%, var(--pv2) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.theme-chip .chip-name {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theme-chip .chip-tagline {
  font-size: 10.5px;
  color: var(--stage-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.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; }

/* --- theme maker --- */

.theme-maker { display: flex; gap: 6px; }
.theme-maker input {
  flex: 1;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 12px;
  background: color-mix(in srgb, var(--stage-text) 10%, transparent);
  color: var(--stage-text);
}
.theme-maker input::placeholder { color: var(--stage-text-dim); }
.theme-maker button {
  flex: none;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-fg);
  transition: opacity 0.12s ease;
}
.theme-maker button:disabled { opacity: 0.55; cursor: default; }

.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 .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);
  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;
}

.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); }

.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.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;
}
.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;
  background-image: var(--motif-image-faint);
  background-size: var(--motif-size);
}
.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;
}
.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;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
.panel-titlebar { justify-content: flex-end; }

.panel-body { flex: 1; overflow-y: auto; padding: 8px 16px 20px; }

.profile { text-align: center; padding: 12px 0 20px; }
.profile .avatar.lg { margin: 0 auto 14px; }
.profile-name { font-size: 19px; font-weight: 650; }
.profile-desc { font-size: 12.5px; color: var(--text-3); margin-top: 7px; }

.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(420px, calc(100% - 48px));
  max-height: min(560px, 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: 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sheet-agent {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 11px;
  text-align: left;
  transition: background 0.12s ease;
}
.sheet-agent:hover { background: var(--bg-hover); }
.sheet-agent .agent-meta { flex: 1; min-width: 0; }
.sheet-agent .agent-name { font-size: 13.5px; font-weight: 600; }
.sheet-agent .agent-desc {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 1px;
  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); }
}

/* ============================================================
   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; }
}
