{
  "version": 3,
  "sources": [],
  "sections": [
    {"offset": {"line": 2, "column": 0}, "map": {"version":3,"sources":["file:///Users/admin/open-design/apps/web/src/index.css"],"sourcesContent":["@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap');\n\n/* ============================================================\n   Open Design — visual language modeled on claude.ai/design\n   ============================================================ */\n:root {\n  /* Surface palette — warmer paper, hairline borders, soft shadows.\n     The entry view and project view share the same warm cream backdrop\n     (--bg) so transitioning between them feels seamless. --bg-app is kept\n     as an alias for compatibility but now resolves to the same value. */\n  --bg: #faf9f7;\n  --bg-app: #faf9f7;\n  --bg-panel: #ffffff;\n  --bg-subtle: #f4f2ed;\n  --bg-muted: #ece9e2;\n  --bg-elevated: #ffffff;\n  --border: #ebe8e1;\n  --border-strong: #d8d4cb;\n  --border-soft: #f1eee7;\n\n  --text: #1a1916;\n  --text-strong: #0d0c0a;\n  --text-muted: #74716b;\n  --text-soft: #989590;\n  --text-faint: #b3b0a8;\n\n  /* Accent — Claude rust/burnt-sienna. */\n  --accent: #c96442;\n  --accent-strong: #b45a3b;\n  --accent-soft: #f5d8cb;\n  --accent-tint: #fbeee5;\n  --accent-hover: #b45a3b;\n\n  /* Semantic accent tints used by tool / status pills. */\n  --green: #1f7a3a;\n  --green-bg: #e8f7ee;\n  --green-border: #c6ead2;\n  --blue: #2348b8;\n  --blue-bg: #e8efff;\n  --blue-border: #c8d6ff;\n  --purple: #6c3aa6;\n  --purple-bg: #f3ecf9;\n  --purple-border: #e4d4f1;\n  --red: #9c2a25;\n  --red-bg: #fdecea;\n  --red-border: #f5c6c2;\n  --amber: #b26200;\n  --amber-bg: #fff3e0;\n\n  --shadow-xs: 0 1px 0 rgba(28, 27, 26, 0.04);\n  --shadow-sm: 0 1px 2px rgba(28, 27, 26, 0.05), 0 1px 3px rgba(28, 27, 26, 0.04);\n  --shadow-md: 0 6px 24px rgba(28, 27, 26, 0.07), 0 2px 6px rgba(28, 27, 26, 0.04);\n  --shadow-lg: 0 24px 60px rgba(28, 27, 26, 0.16), 0 8px 16px rgba(28, 27, 26, 0.07);\n\n  --radius-sm: 6px;\n  --radius: 10px;\n  --radius-lg: 14px;\n  --radius-pill: 999px;\n\n  --serif: 'Source Serif Pro', 'Source Serif 4', 'Iowan Old Style', 'Apple Garamond', Georgia, 'Times New Roman', serif;\n  --sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;\n}\n\n/* Dark theme variables — shared between explicit [data-theme=\"dark\"] and the\n   OS-level prefers-color-scheme media query (system mode = no data-theme attr). */\n[data-theme=\"dark\"] {\n  color-scheme: dark;\n  --bg: #1a1917;\n  --bg-app: #1a1917;\n  --bg-panel: #222120;\n  --bg-subtle: #272523;\n  --bg-muted: #2e2c29;\n  --bg-elevated: #2a2825;\n  --border: #333128;\n  --border-strong: #46433c;\n  --border-soft: #2a2825;\n\n  --text: #e8e4dc;\n  --text-strong: #f2ede4;\n  --text-muted: #9a9690;\n  --text-soft: #6e6b65;\n  --text-faint: #4e4b46;\n\n  --accent: #d97a56;\n  --accent-strong: #e8896a;\n  --accent-soft: #3d2318;\n  --accent-tint: #2e1a12;\n  --accent-hover: #e8896a;\n\n  --green: #4caf72;\n  --green-bg: #0f2a18;\n  --green-border: #1a4028;\n  --blue: #6b8fe8;\n  --blue-bg: #0f1a38;\n  --blue-border: #1a2c58;\n  --purple: #a87dd4;\n  --purple-bg: #1e1030;\n  --purple-border: #321a50;\n  --red: #e06b65;\n  --red-bg: #2a0e0c;\n  --red-border: #451714;\n  --amber: #e09a40;\n  --amber-bg: #2a1a04;\n\n  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.2);\n  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);\n  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);\n  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.3);\n}\n\n/* System mode: follow OS preference when no explicit data-theme is set. */\n@media (prefers-color-scheme: dark) {\n  html:not([data-theme]) {\n    color-scheme: dark;\n    --bg: #1a1917;\n    --bg-app: #1a1917;\n    --bg-panel: #222120;\n    --bg-subtle: #272523;\n    --bg-muted: #2e2c29;\n    --bg-elevated: #2a2825;\n    --border: #333128;\n    --border-strong: #46433c;\n    --border-soft: #2a2825;\n\n    --text: #e8e4dc;\n    --text-strong: #f2ede4;\n    --text-muted: #9a9690;\n    --text-soft: #6e6b65;\n    --text-faint: #4e4b46;\n\n    --accent: #d97a56;\n    --accent-strong: #e8896a;\n    --accent-soft: #3d2318;\n    --accent-tint: #2e1a12;\n    --accent-hover: #e8896a;\n\n    --green: #4caf72;\n    --green-bg: #0f2a18;\n    --green-border: #1a4028;\n    --blue: #6b8fe8;\n    --blue-bg: #0f1a38;\n    --blue-border: #1a2c58;\n    --purple: #a87dd4;\n    --purple-bg: #1e1030;\n    --purple-border: #321a50;\n    --red: #e06b65;\n    --red-bg: #2a0e0c;\n    --red-border: #451714;\n    --amber: #e09a40;\n    --amber-bg: #2a1a04;\n\n    --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.2);\n    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);\n    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);\n    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.3);\n  }\n}\n\n* { box-sizing: border-box; }\n\nhtml, body, #root { height: 100%; margin: 0; }\n\nbody {\n  font-family: var(--sans);\n  color: var(--text);\n  background: var(--bg-app);\n  font-size: 13.5px;\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.od-loading-shell {\n  min-height: 100vh;\n  display: grid;\n  place-items: center;\n  color: var(--text-muted);\n  background: var(--bg-app);\n  font: 500 13px/1.4 var(--sans);\n}\n\n/* -------- Buttons --------------------------------------------------- */\nbutton {\n  font: inherit;\n  color: var(--text);\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n  padding: 6px 12px;\n  cursor: pointer;\n  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;\n}\nbutton:hover:not(:disabled) { background: var(--bg-subtle); border-color: var(--border-strong); }\nbutton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n\nbutton.primary {\n  background: var(--accent);\n  border-color: var(--accent);\n  color: white;\n  font-weight: 500;\n  box-shadow: 0 1px 0 rgba(180, 90, 59, 0.18) inset, var(--shadow-xs);\n}\nbutton.primary:hover:not(:disabled) {\n  background: var(--accent-hover);\n  border-color: var(--accent-hover);\n}\nbutton.primary-ghost {\n  background: var(--bg-panel);\n  border-color: var(--accent);\n  color: var(--accent);\n  font-weight: 500;\n}\nbutton.primary-ghost:hover:not(:disabled) { background: var(--accent-tint); }\n\nbutton.ghost {\n  background: transparent;\n  border-color: var(--border);\n  color: var(--text);\n}\nbutton.ghost:hover:not(:disabled) { background: var(--bg-subtle); border-color: var(--border-strong); }\n\nbutton.subtle {\n  background: var(--bg-subtle);\n  border-color: transparent;\n  color: var(--text);\n}\nbutton.subtle:hover:not(:disabled) { background: var(--bg-muted); }\n\nbutton.icon-btn { padding: 6px 10px; font-size: 13px; }\nbutton:disabled { opacity: 0.5; cursor: not-allowed; }\n\n/* -------- Inputs ---------------------------------------------------- */\ninput, textarea, select {\n  font: inherit;\n  color: var(--text);\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n  padding: 7px 10px;\n  width: 100%;\n  transition: border-color 120ms ease, box-shadow 120ms ease;\n}\ninput::placeholder, textarea::placeholder { color: var(--text-faint); }\ninput:focus, textarea:focus, select:focus {\n  outline: none;\n  border-color: var(--accent);\n  box-shadow: 0 0 0 3px var(--accent-soft);\n}\nselect { padding-right: 24px; }\ntextarea { resize: vertical; font-family: inherit; }\n\ncode {\n  font-family: var(--mono);\n  background: var(--bg-subtle);\n  padding: 1px 5px;\n  border-radius: 4px;\n  font-size: 0.92em;\n  color: var(--text);\n}\n\n/* -------- App shell ------------------------------------------------- */\n.app {\n  display: grid;\n  grid-template-rows: auto 1fr;\n  height: 100vh;\n  background: var(--bg-app);\n}\n\n.app-chrome-header {\n  --app-chrome-traffic-space: 0px;\n  display: flex;\n  align-items: center;\n  height: 40px;\n  min-height: 40px;\n  max-height: 40px;\n  padding: 4px 14px;\n  border-bottom: 1px solid var(--border);\n  background: var(--bg);\n  gap: 12px;\n  flex-shrink: 0;\n}\n.app-chrome-traffic-space {\n  width: var(--app-chrome-traffic-space);\n  flex: 0 0 var(--app-chrome-traffic-space);\n}\n.app-chrome-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex-shrink: 0;\n}\n.app-chrome-mark {\n  width: 28px;\n  height: 28px;\n  border-radius: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  overflow: visible;\n  flex-shrink: 0;\n}\n.app-chrome-mark .brand-mark-img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  display: block;\n  padding: 0;\n  user-select: none;\n  -webkit-user-drag: none;\n}\n.app-chrome-name {\n  color: var(--text-strong);\n  font-size: 18px;\n  font-weight: 650;\n  letter-spacing: -0.01em;\n  white-space: nowrap;\n}\n.app-chrome-back,\n.settings-icon-btn {\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border-color: transparent;\n  background: transparent;\n  color: var(--text-muted);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.app-chrome-back:hover:not(:disabled),\n.settings-icon-btn:hover:not(:disabled) {\n  background: var(--bg-subtle);\n  border-color: var(--border);\n  color: var(--text);\n}\n.app-chrome-content {\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  overflow: hidden;\n}\n.app-chrome-drag {\n  min-width: 24px;\n  flex: 1 1 auto;\n  align-self: stretch;\n}\n.app-chrome-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n.app-project-title {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  min-width: 0;\n  max-height: 31px;\n  overflow: hidden;\n}\n.app-project-title .title {\n  color: var(--text-strong);\n  font-size: 13.5px;\n  line-height: 16px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.app-project-title .meta {\n  color: var(--text-muted);\n  font-size: 11.5px;\n  line-height: 12px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.topbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--border);\n  background: var(--bg);\n  gap: 16px;\n  flex-wrap: wrap;\n}\n.topbar-left { display: flex; flex-direction: row; align-items: center; gap: 12px; min-width: 0; }\n.topbar-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }\n.topbar .title { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.topbar .meta { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.topbar-right { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }\n\n.topbar .brand-mark {\n  display: inline-flex;\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  background: linear-gradient(135deg, var(--accent-tint) 0%, var(--accent-soft) 100%);\n  color: var(--accent);\n  flex-shrink: 0;\n  overflow: hidden;\n}\n.topbar .brand-mark .brand-mark-img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  display: block;\n  padding: 1px;\n  user-select: none;\n  -webkit-user-drag: none;\n}\n\n.topbar-left .back-btn {\n  align-self: center;\n  padding: 4px 10px;\n  font-size: 12px;\n  background: transparent;\n  border-color: transparent;\n  color: var(--text-muted);\n}\n.topbar-left .back-btn:hover { background: var(--bg-subtle); color: var(--text); border-color: var(--border); }\n\n/* -------- Avatar menu (replaces in-topbar agent picker) ------------- */\n.avatar-menu { position: relative; }\n.avatar-btn {\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border-radius: 50%;\n  background: linear-gradient(135deg, var(--accent-tint) 0%, var(--accent-soft) 100%);\n  border: 1px solid var(--border);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  transition: box-shadow 120ms ease, transform 120ms ease;\n}\n.avatar-btn:hover:not(:disabled) {\n  box-shadow: 0 0 0 3px rgba(194, 83, 45, 0.18);\n  border-color: transparent;\n}\n.avatar-btn:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(194, 83, 45, 0.32);\n  border-color: transparent;\n}\n.avatar-btn:active:not(:disabled) { transform: scale(0.96); }\n.avatar-btn-photo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: 50% 22%;\n  display: block;\n  user-select: none;\n  -webkit-user-drag: none;\n  pointer-events: none;\n}\n.avatar-popover {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  z-index: 80;\n  min-width: 280px;\n  padding: 6px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-lg);\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.avatar-popover-head {\n  padding: 10px 10px 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  border-bottom: 1px solid var(--border-soft);\n  margin-bottom: 4px;\n}\n.avatar-popover-head .who { font-weight: 600; font-size: 13px; }\n.avatar-popover-head .where { font-size: 11.5px; color: var(--text-muted); }\n.avatar-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  font-size: 12.5px;\n  text-align: left;\n  background: transparent;\n  border: none;\n  border-radius: var(--radius-sm);\n  cursor: pointer;\n  color: var(--text);\n}\n.avatar-item:hover { background: var(--bg-subtle); }\n.avatar-item .avatar-item-icon {\n  width: 18px; text-align: center; color: var(--text-muted); flex-shrink: 0;\n}\n.avatar-item .avatar-item-meta {\n  margin-left: auto;\n  font-size: 11px;\n  color: var(--text-muted);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.avatar-section-label {\n  font-size: 10.5px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--text-faint);\n  font-weight: 600;\n  padding: 8px 10px 4px;\n}\n.avatar-model-section {\n  padding: 2px 10px 6px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  border-top: 1px dashed var(--border-soft);\n  margin-top: 4px;\n}\n.avatar-select-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--text-muted);\n}\n.avatar-select-label {\n  flex-shrink: 0;\n  min-width: 64px;\n}\n.avatar-select {\n  flex: 1;\n  min-width: 0;\n  font-size: 12px;\n  padding: 4px 6px;\n  border-radius: var(--radius-sm);\n  border: 1px solid var(--border);\n  background: var(--bg-panel);\n  color: var(--text);\n  cursor: pointer;\n}\n.avatar-select:focus { outline: 2px solid var(--accent-soft, var(--border-strong)); }\n\n/* Environment pill — only used in entry view header now */\n.env-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 12px 4px 4px;\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-pill);\n  cursor: pointer;\n  max-width: 360px;\n  min-width: 0;\n  font: inherit;\n  color: inherit;\n}\n.env-pill:hover { background: var(--bg-panel); border-color: var(--border-strong); }\n.env-pill-dot {\n  width: 22px; height: 22px; border-radius: 50%;\n  background: linear-gradient(135deg, #d97757 0%, #b85a3b 100%);\n  flex-shrink: 0;\n}\n.env-pill-dot[data-mode=\"api\"] {\n  background: linear-gradient(135deg, #1c1b1a 0%, #4b4948 100%);\n}\n.env-pill-label { font-weight: 500; font-size: 12px; }\n.env-pill-meta {\n  font-size: 12px; color: var(--text-muted);\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;\n}\n\n/* -------- Split / panes -------------------------------------------- */\n.split {\n  display: grid;\n  grid-template-columns: 460px 8px minmax(400px, 1fr);\n  min-height: 0;\n  min-width: 0;\n}\n.split.is-resizing-chat {\n  cursor: col-resize;\n  user-select: none;\n}\n.split.is-resizing-chat iframe {\n  pointer-events: none;\n}\n.split.split-focus {\n  grid-template-columns: minmax(0, 1fr);\n}\n.split-chat-slot {\n  display: flex;\n  min-height: 0;\n  min-width: 0;\n}\n.split-chat-slot[hidden] {\n  display: none;\n}\n.split-chat-slot > .pane {\n  flex: 1 1 auto;\n}\n.pane {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  min-width: 0;\n  background: var(--bg-panel);\n}\n.split-resize-handle {\n  width: 8px;\n  min-width: 8px;\n  height: 100%;\n  cursor: col-resize;\n  background:\n    linear-gradient(\n      90deg,\n      transparent 0,\n      transparent 3px,\n      var(--border) 3px,\n      var(--border) 5px,\n      transparent 5px\n    );\n  transition: background 120ms ease;\n  touch-action: none;\n}\n.split-resize-handle:hover,\n.split-resize-handle:focus-visible,\n.split.is-resizing-chat .split-resize-handle {\n  background:\n    linear-gradient(\n      90deg,\n      color-mix(in srgb, var(--accent) 16%, transparent) 0,\n      color-mix(in srgb, var(--accent) 16%, transparent) 3px,\n      var(--accent) 3px,\n      var(--accent) 5px,\n      color-mix(in srgb, var(--accent) 16%, transparent) 5px\n    );\n}\n.split-resize-handle:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: -2px;\n}\n\n/* -------- Chat sticky header --------------------------------------- */\n.chat-header {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--border);\n  background: var(--bg-panel);\n  position: sticky;\n  top: 0;\n  z-index: 4;\n  height: 44px;\n}\n.chat-header-tabs { display: inline-flex; gap: 16px; flex: 1; }\n.chat-header-tab {\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  border-radius: 0;\n  padding: 8px 0;\n  font-size: 13px;\n  color: var(--text-muted);\n  font-weight: 500;\n}\n.chat-header-tab:hover { color: var(--text); background: transparent; border-color: transparent; }\n.chat-header-tab.active {\n  color: var(--text);\n  border-bottom-color: var(--text);\n}\n.chat-header-actions { display: inline-flex; gap: 4px; align-items: center; }\n.chat-header-actions .icon-only {\n  width: 28px; height: 28px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  color: var(--text-muted);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.chat-header-actions .icon-only:hover { background: var(--bg-subtle); color: var(--text); }\n\n.chat-log {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  min-width: 0;\n}\n\n/* -------- Messages -------------------------------------------------- */\n.msg {\n  padding: 0;\n  background: transparent;\n  border: none;\n  white-space: normal;\n  word-wrap: break-word;\n}\n.msg .role {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  font-size: 12.5px;\n  text-transform: none;\n  color: var(--text-strong);\n  margin-bottom: 4px;\n  letter-spacing: 0;\n  font-weight: 600;\n}\n.msg-time {\n  color: var(--text-faint);\n  font-size: 11px;\n  font-weight: 500;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.chat-day-separator {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  color: var(--text-faint);\n  font-size: 11px;\n  font-weight: 600;\n  margin: 4px 0 0;\n}\n.chat-day-separator::before,\n.chat-day-separator::after {\n  content: '';\n  height: 1px;\n  background: var(--border);\n  flex: 1;\n}\n.msg.user .role::before { content: ''; }\n.msg.user .user-text { white-space: pre-wrap; color: var(--text); }\n.msg.assistant .prose { margin-top: 4px; }\n.msg .artifact-badge {\n  display: inline-block;\n  margin-top: 8px;\n  padding: 2px 8px;\n  font-size: 11px;\n  background: var(--accent);\n  color: white;\n  border-radius: 4px;\n}\n.msg.error {\n  border: 1px solid var(--red-border);\n  background: var(--red-bg);\n  color: var(--red);\n  padding: 10px 12px;\n  border-radius: var(--radius-sm);\n}\n\n/* -------- Composer -------------------------------------------------- */\n.composer {\n  border-top: 1px solid var(--border);\n  padding: 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  background: var(--bg-panel);\n}\n.composer-shell {\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  background: var(--bg-panel);\n  box-shadow: var(--shadow-xs);\n  padding: 8px 10px 6px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  transition: border-color 120ms ease, box-shadow 120ms ease;\n}\n.composer-shell:focus-within {\n  border-color: var(--border-strong);\n  box-shadow: var(--shadow-sm);\n}\n.composer.drag-active .composer-shell {\n  border-color: var(--accent);\n  box-shadow: 0 0 0 3px var(--accent-soft);\n}\n.composer textarea {\n  min-height: 60px;\n  border: none;\n  background: transparent;\n  padding: 4px 4px;\n  resize: vertical;\n}\n.composer textarea:focus { outline: none; box-shadow: none; }\n.composer-input-wrap { position: relative; }\n.composer-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding-top: 4px;\n}\n.composer-row .icon-btn {\n  width: 28px; height: 28px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  color: var(--text-muted);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n}\n.composer-row .icon-btn:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }\n.composer-spacer { flex: 1; }\n.composer-import {\n  background: transparent;\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n  padding: 4px 12px;\n  font-size: 12px;\n  color: var(--text-muted);\n}\n.composer-import:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }\n.composer-send {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--accent);\n  border-color: var(--accent);\n  color: white;\n  font-weight: 500;\n  padding: 4px 14px;\n  font-size: 12.5px;\n}\n.composer-send:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }\n.composer-send.stop { background: var(--text); border-color: var(--text); color: var(--bg); }\n.composer-send.stop:hover { background: var(--text-strong); border-color: var(--text-strong); color: var(--bg); }\n.composer-hint {\n  font-size: 11px;\n  color: var(--text-faint);\n  margin: 0 8px;\n}\n\n/* -------- Staged attachments -------------------------------------- */\n.staged-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 4px 4px 0;\n}\n.staged-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px 4px 4px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  max-width: 220px;\n  font-size: 11.5px;\n  box-shadow: var(--shadow-xs);\n}\n.staged-chip img {\n  width: 28px;\n  height: 28px;\n  border-radius: 6px;\n  object-fit: cover;\n}\n.staged-comment {\n  max-width: 280px;\n  border-radius: var(--radius-pill);\n  padding: 4px 6px 4px 10px;\n}\n.staged-comment .staged-name {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n}\n.staged-comment .staged-name strong {\n  color: var(--accent-strong);\n  font-weight: 650;\n  flex: 0 0 auto;\n}\n.staged-comment .staged-name span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.staged-comment button {\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-pill);\n  background: transparent;\n  color: var(--text-faint);\n  font-size: 14px;\n  line-height: 1;\n}\n.staged-comment button:hover {\n  background: var(--bg-subtle);\n  color: var(--text);\n}\n.staged-icon {\n  width: 28px; height: 28px;\n  border-radius: 6px;\n  background: var(--bg-subtle);\n  color: var(--text-muted);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n}\n.staged-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 140px;\n  color: var(--text);\n}\n.staged-remove {\n  background: transparent;\n  border: none;\n  padding: 0 2px;\n  color: var(--text-faint);\n  cursor: pointer;\n  font-size: 13px;\n  line-height: 1;\n  border-radius: 4px;\n}\n.staged-remove:hover { color: var(--red); background: var(--red-bg); }\n\n.linked-dirs-row {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n.linked-dir-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n  font-size: 11.5px;\n  color: var(--text-muted);\n  max-width: 220px;\n}\n.linked-dir-chip svg { flex-shrink: 0; color: var(--text-muted); }\n.linked-dir-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.composer-import-item-enabled {\n  cursor: pointer;\n  color: var(--text);\n}\n.composer-import-item-enabled:hover {\n  background: var(--bg-subtle);\n  color: var(--text);\n}\n\n.user-attachments {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n  margin-bottom: 8px;\n}\n.user-attachment {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 10px 4px 4px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  font-size: 11.5px;\n  max-width: 240px;\n  color: var(--text);\n  cursor: default;\n  text-align: left;\n  font: inherit;\n  font-size: 11.5px;\n}\n.user-attachment.openable { cursor: pointer; }\n.user-attachment.openable:hover {\n  background: var(--bg-subtle);\n  border-color: var(--accent);\n}\n.user-attachment img {\n  width: 28px;\n  height: 28px;\n  object-fit: cover;\n  border-radius: 6px;\n  display: block;\n}\n.user-attachment .staged-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* -------- Mention popover ------------------------------------------- */\n.mention-popover {\n  position: absolute;\n  bottom: 100%;\n  left: 0;\n  right: 0;\n  margin-bottom: 4px;\n  max-height: 220px;\n  overflow-y: auto;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-md);\n  z-index: 10;\n}\n.mention-item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  background: transparent;\n  border: none;\n  padding: 7px 10px;\n  font-size: 12px;\n  text-align: left;\n  gap: 8px;\n}\n.mention-item:hover { background: var(--bg-subtle); border-color: transparent; }\n.mention-item code {\n  flex: 1;\n  font-size: 11px;\n  background: transparent;\n  padding: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.mention-meta { color: var(--text-muted); font-size: 10px; flex-shrink: 0; }\n\n/* ===========================================================\n   Modal / Settings\n   =========================================================== */\n.modal-backdrop {\n  position: fixed; inset: 0;\n  background: rgba(28, 27, 26, 0.42);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  animation: fade-in 160ms ease-out;\n}\n.modal {\n  background: var(--bg-elevated);\n  border-radius: var(--radius-lg);\n  padding: 22px;\n  width: 520px;\n  max-width: calc(100vw - 32px);\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  box-shadow: var(--shadow-lg);\n  animation: pop-in 220ms cubic-bezier(0.21, 1.02, 0.73, 1);\n}\n.modal h2 { margin: 0; font-size: 18px; letter-spacing: -0.01em; font-weight: 600; }\n.modal label {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  font-size: 12px;\n  color: var(--text-muted);\n}\n.modal .hint {\n  font-size: 12px;\n  color: var(--text-muted);\n  line-height: 1.55;\n  margin: 0;\n}\n.modal .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }\n\n@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }\n@keyframes pop-in {\n  from { opacity: 0; transform: translateY(6px) scale(0.98); }\n  to   { opacity: 1; transform: translateY(0) scale(1); }\n}\n@keyframes pulse {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50% { opacity: 0.6; transform: scale(0.85); }\n}\n\n.modal-settings {\n  --modal-padding: 24px;\n  width: min(920px, calc(100vw - 48px));\n  padding: 0;\n  gap: 0;\n  max-height: calc(100vh - 64px);\n}\n@media (max-height: 600px) {\n  .modal-settings { max-height: 90vh; }\n}\n.modal-settings .modal-body {\n  overflow: hidden;\n  flex: 1;\n  min-height: 0;\n  display: grid;\n  grid-template-columns: 240px minmax(0, 1fr);\n  gap: 0;\n  margin: 0;\n  padding: 0;\n  border-top: 1px solid var(--border);\n}\n.modal-head {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  flex-shrink: 0;\n  padding: var(--modal-padding);\n}\n.modal-head .kicker {\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--accent);\n  font-weight: 600;\n}\n.modal-head h2 {\n  font-size: 22px;\n  font-weight: 600;\n  letter-spacing: -0.015em;\n  color: var(--text);\n}\n.modal-head .subtitle {\n  margin: 4px 0 0;\n  font-size: 13px;\n  color: var(--text-muted);\n  line-height: 1.55;\n  max-width: 50ch;\n}\n.modal-foot {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px var(--modal-padding);\n  border-top: 1px solid var(--border);\n  margin-top: 0;\n  flex-shrink: 0;\n}\n.settings-sidebar {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 22px 12px;\n  background: var(--bg-subtle);\n  border-right: 1px solid var(--border);\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n.settings-nav-item {\n  width: 100%;\n  border: 1px solid transparent;\n  border-radius: 12px;\n  background: transparent;\n  color: var(--text-muted);\n  display: grid;\n  grid-template-columns: 24px minmax(0, 1fr);\n  gap: 10px;\n  align-items: center;\n  padding: 12px;\n  text-align: left;\n  cursor: pointer;\n}\n.settings-nav-item:hover {\n  background: color-mix(in srgb, var(--bg-panel) 72%, transparent);\n  color: var(--text);\n}\n.settings-nav-item.active {\n  background: var(--bg-panel);\n  border-color: color-mix(in srgb, var(--accent) 62%, var(--border));\n  color: var(--text);\n  box-shadow: var(--shadow-xs);\n}\n.settings-nav-item svg {\n  justify-self: center;\n}\n.settings-nav-item span {\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.settings-nav-item strong {\n  color: currentColor;\n  font-size: 13px;\n  font-weight: 650;\n  line-height: 1.2;\n  overflow-wrap: anywhere;\n}\n.settings-nav-item small {\n  color: var(--text-muted);\n  font-size: 11px;\n  line-height: 1.25;\n  overflow-wrap: anywhere;\n}\n.settings-content {\n  min-width: 0;\n  min-height: 0;\n  padding: 22px var(--modal-padding);\n  overflow: auto;\n  overscroll-behavior: contain;\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n}\n@media (max-width: 760px) {\n  .modal-settings {\n    width: min(560px, calc(100vw - 24px));\n  }\n  .modal-settings .modal-body {\n    grid-template-columns: 1fr;\n  }\n  .settings-sidebar {\n    flex-direction: row;\n    overflow-x: auto;\n    overscroll-behavior-x: contain;\n    padding: 10px 12px;\n    border-right: 0;\n    border-bottom: 1px solid var(--border);\n  }\n  .settings-nav-item {\n    min-width: 150px;\n  }\n}\n\n/* Segmented control */\n.seg-control {\n  display: grid;\n  grid-template-columns: repeat(var(--seg-cols, 2), minmax(0, 1fr));\n  gap: 6px;\n  padding: 4px;\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-lg);\n  min-width: 0;\n}\n.seg-btn {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  align-items: flex-start;\n  padding: 10px 14px;\n  border: 1px solid transparent;\n  border-radius: 10px;\n  background: transparent;\n  cursor: pointer;\n  text-align: left;\n  min-width: 0;\n}\n.seg-btn:hover:not(:disabled):not(.active) { background: rgba(255, 255, 255, 0.5); }\n.seg-btn.active {\n  background: var(--bg-panel);\n  border-color: var(--border-strong);\n  box-shadow: var(--shadow-sm);\n}\n.seg-btn .seg-title { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }\n.seg-btn .seg-meta { font-size: 11px; color: var(--text-muted); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }\n.seg-btn:disabled { opacity: 0.55; cursor: not-allowed; }\n\n/* Secondary protocol selector — pill chips, wraps to multiple rows */\n.protocol-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin: 4px 0 8px;\n  padding: 0;\n  min-width: 0;\n}\n.protocol-chip {\n  flex: 0 1 auto;\n  max-width: 100%;\n  min-width: 0;\n  background: transparent;\n  border: 1px solid var(--border);\n  border-radius: 999px;\n  padding: 6px 12px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--text-muted);\n  cursor: pointer;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;\n}\n.protocol-chip:hover:not(.active) {\n  background: var(--bg-subtle);\n  color: var(--text);\n  border-color: var(--border-strong);\n}\n.protocol-chip.active {\n  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--accent-tint) 100%);\n  border-color: var(--accent);\n  color: var(--text);\n  font-weight: 600;\n  box-shadow: 0 0 0 2px var(--accent-soft);\n}\n\n.settings-section { display: flex; flex-direction: column; gap: 12px; }\n.settings-rescan-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 96px;\n  justify-content: center;\n}\n.settings-rescan-btn.loading {\n  border-color: var(--accent-soft);\n  background: var(--accent-tint);\n  color: var(--accent-strong);\n}\n.settings-rescan-status {\n  margin: -4px 0 0;\n  padding: 7px 10px;\n  border: 1px solid var(--green-border);\n  border-radius: var(--radius-sm);\n  background: var(--green-bg);\n  color: var(--green);\n  font-size: 12px;\n  line-height: 1.4;\n}\n.settings-rescan-status.error {\n  border-color: var(--red-border);\n  background: var(--red-bg);\n  color: var(--red);\n}\n.settings-field-error {\n  color: var(--red);\n  font-size: 12px;\n  line-height: 1.4;\n}\n\n.settings-about-list {\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.settings-about-list > div {\n  display: flex;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 12px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n}\n.settings-about-list dt {\n  font-size: 12px;\n  color: var(--text-muted);\n}\n.settings-about-list dd {\n  margin: 0;\n  color: var(--text);\n  font-size: 13px;\n  font-weight: 600;\n  text-align: right;\n  overflow-wrap: anywhere;\n}\n\n.media-provider-list {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.media-provider-row {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n}\n.media-provider-row.pending {\n  background: var(--bg-subtle);\n  border-style: dashed;\n}\n.media-provider-head {\n  display: flex;\n  justify-content: space-between;\n  gap: 10px;\n}\n.media-provider-meta {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.media-provider-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--text);\n}\n.media-provider-hint {\n  font-size: 11px;\n  color: var(--text-muted);\n}\n.media-provider-badge {\n  align-self: flex-start;\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 7px;\n  border-radius: var(--radius-pill);\n  border: 1px solid var(--border);\n}\n.media-provider-badges {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 6px;\n}\n.media-provider-badge.integrated {\n  color: #137a3d;\n  background: color-mix(in srgb, #1f9d55 10%, transparent);\n  border-color: color-mix(in srgb, #1f9d55 28%, var(--border));\n}\n.media-provider-badge.unsupported {\n  color: var(--text-soft);\n  background: var(--bg-subtle);\n  border-color: var(--border);\n}\n.media-provider-badge.on {\n  color: #3155c9;\n  background: color-mix(in srgb, #4169e1 10%, transparent);\n  border-color: color-mix(in srgb, #4169e1 28%, var(--border));\n}\n.media-provider-body {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;\n  gap: 6px;\n}\n.section-head {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 12px;\n}\n.section-head > div {\n  max-width: 100%;\n  min-width: 0;\n}\n.section-head h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }\n.section-head .hint { margin-top: 2px; }\n.field { display: flex; flex-direction: column; gap: 4px; }\n.field-label { font-size: 12px; font-weight: 500; color: var(--text-muted); }\n.field-row { display: flex; gap: 6px; align-items: stretch; }\n.field-row input { flex: 1; }\n.field-row .icon-btn { white-space: nowrap; padding: 6px 12px; }\n.settings-language-picker { position: relative; }\n.settings-language-button {\n  width: 100%;\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 14px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n  color: var(--text);\n  text-align: left;\n  box-shadow: none;\n}\n.settings-language-button:hover {\n  border-color: var(--border-strong);\n  box-shadow: var(--shadow-sm);\n}\n.settings-language-button[aria-expanded=\"true\"] {\n  border-color: var(--accent);\n  box-shadow: 0 0 0 3px var(--accent-soft);\n}\n.settings-language-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 42px;\n  height: 42px;\n  border-radius: 12px;\n  background: linear-gradient(135deg, var(--bg-panel) 0%, var(--bg-subtle) 100%);\n  border: 1px solid var(--border);\n  color: var(--accent);\n  flex-shrink: 0;\n}\n.settings-language-text,\n.settings-language-option > span:first-child {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n.settings-language-title,\n.settings-language-option-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--text);\n  overflow-wrap: anywhere;\n}\n.settings-language-code,\n.settings-language-option-code {\n  font-size: 11px;\n  color: var(--text-muted);\n  font-variant-numeric: tabular-nums;\n  letter-spacing: 0.02em;\n}\n.settings-language-menu {\n  position: fixed;\n  z-index: 1000;\n  max-width: calc(100vw - 24px);\n  /* 7 locales × ~58px + menu chrome (padding, gap, border) ≈ 428px;\n     --menu-available-h is set by JS to the distance between the trigger\n     and whichever viewport edge the menu opens toward, so the menu never\n     overflows the viewport regardless of placement direction. The 60vh\n     cap keeps the menu from feeling cramped on short viewports. */\n  max-height: min(428px, 60vh, var(--menu-available-h, 428px));\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 4px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border-strong);\n  border-radius: var(--radius-sm);\n  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);\n}\n.settings-language-option {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n  padding: 10px 12px;\n  border: 0;\n  border-radius: 9px;\n  background: transparent;\n  text-align: left;\n  color: var(--text);\n}\n.settings-language-option:hover,\n.settings-language-option.active { background: var(--bg-subtle); }\n.settings-language-option.active { color: var(--accent); }\n.empty-card {\n  padding: 16px;\n  border: 1px dashed var(--border);\n  border-radius: var(--radius-sm);\n  color: var(--text-muted);\n  font-size: 12px;\n  background: var(--bg-subtle);\n}\n\n.agent-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 8px;\n}\n.agent-card {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n  cursor: pointer;\n  text-align: left;\n  position: relative;\n  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease, background 120ms ease;\n}\n.agent-card:hover:not(.disabled) {\n  border-color: var(--border-strong);\n  transform: translateY(-1px);\n  box-shadow: var(--shadow-sm);\n}\n.agent-card.active {\n  border-color: var(--accent);\n  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--accent-tint) 100%);\n  box-shadow: 0 0 0 3px var(--accent-soft);\n}\n.agent-card.disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n  background: var(--bg-subtle);\n}\n.agent-card-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }\n.agent-card-name {\n  font-size: 13px; font-weight: 600; color: var(--text);\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n.agent-card-meta {\n  font-size: 11px; color: var(--text-muted);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n.agent-card-meta .muted { color: var(--text-soft); font-style: italic; }\n.agent-model-row {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  border: 1px solid var(--border-soft);\n  border-radius: var(--radius-sm);\n  background: var(--bg-subtle);\n}\n.agent-model-row .field { gap: 4px; }\n.agent-model-row .field-label {\n  font-size: 11.5px;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--text-muted);\n}\n.agent-model-row .hint { margin: 0; font-size: 11.5px; }\n.agent-cli-env {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  border: 1px solid var(--border-soft);\n  border-radius: var(--radius-sm);\n  background: var(--bg-panel);\n}\n.agent-cli-env-head {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.agent-cli-env-head h4 {\n  margin: 0;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--text);\n}\n.agent-cli-env-head .hint { margin: 0; font-size: 11.5px; }\n.agent-cli-env-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 8px;\n}\n.status-dot {\n  width: 8px; height: 8px;\n  border-radius: 50%;\n  background: #cbd5e1;\n  flex-shrink: 0;\n}\n.status-dot.active {\n  background: var(--accent);\n  box-shadow: 0 0 0 3px var(--accent-soft);\n}\n.agent-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);\n}\n\n.error {\n  border-color: var(--red-border);\n  background: var(--red-bg);\n  color: var(--red);\n}\n\n/* ===========================================================\n   Activity ticker (legacy — still used in some flows)\n   =========================================================== */\n.activity {\n  margin: 4px 0 8px;\n  padding: 8px 10px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n  background: var(--bg-subtle);\n}\n.activity-header { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 6px; }\n.activity-header .dot {\n  width: 8px; height: 8px;\n  border-radius: 50%;\n  background: var(--text-muted);\n  flex: 0 0 auto;\n}\n.activity-header .dot[data-active=\"true\"] {\n  background: var(--accent);\n  animation: pulse 1.2s ease-in-out infinite;\n}\n.activity-title { font-weight: 500; }\n.activity-stats {\n  margin-left: auto;\n  color: var(--text-muted);\n  font-variant-numeric: tabular-nums;\n  font-size: 11px;\n}\n.activity-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  max-height: 280px;\n  overflow-y: auto;\n}\n.activity-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  font-size: 12px;\n  line-height: 1.4;\n  padding: 2px 0;\n}\n.activity-item .badge {\n  flex: 0 0 auto;\n  display: inline-block;\n  padding: 1px 6px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 0.02em;\n  background: var(--bg-subtle);\n  color: var(--text-muted);\n  border: 1px solid var(--border);\n  min-width: 56px;\n  text-align: center;\n}\n.activity-item .badge-tool { background: var(--blue-bg); border-color: var(--blue-border); color: var(--blue); }\n.activity-item .badge-result { background: var(--green-bg); border-color: var(--green-border); color: var(--green); }\n.activity-item .badge-error,\n.activity-item .badge-result.badge-error {\n  background: var(--red-bg); border-color: var(--red-border); color: var(--red);\n}\n.activity-item .badge-thinking { background: var(--purple-bg); border-color: var(--purple-border); color: var(--purple); }\n.activity-item .badge-status { background: var(--bg-panel); }\n.activity-item .badge-text { background: transparent; border-color: var(--border); }\n.activity-item .badge-usage { background: var(--bg-panel); color: var(--text-muted); }\n.activity-item .detail { flex: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; }\n.activity-item .detail.muted { color: var(--text-muted); }\n.activity-item .thinking-text { font-style: italic; color: var(--text-muted); }\n.activity-waiting { font-size: 11px; color: var(--text-muted); font-style: italic; }\n\n/* ============================================================\n   Entry view — left sidebar + right tabs\n   ============================================================ */\n.entry-shell {\n  display: grid;\n  grid-template-rows: auto 1fr;\n  height: 100vh;\n  min-height: 0;\n  background: var(--bg);\n}\n\n.entry {\n  display: grid;\n  grid-template-columns: 380px 1fr;\n  height: 100%;\n  min-height: 0;\n  background: var(--bg);\n}\n\n.entry-side {\n  border-right: 1px solid var(--border);\n  background: var(--bg-panel);\n  padding: 28px 24px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  overflow-y: auto;\n}\n\n.entry-brand {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.entry-brand-mark {\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, var(--accent-tint) 0%, var(--accent-soft) 100%);\n  color: var(--accent);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n.entry-brand-mark .brand-mark-img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  display: block;\n  padding: 2px;\n  user-select: none;\n  -webkit-user-drag: none;\n}\n.entry-brand-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }\n.entry-brand-title-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.entry-brand-title {\n  font-family: var(--serif);\n  font-weight: 600;\n  font-size: 22px;\n  letter-spacing: -0.015em;\n  line-height: 1;\n  color: var(--text-strong);\n}\n.entry-brand-pill {\n  font-size: 10.5px;\n  letter-spacing: 0.02em;\n  padding: 2px 8px;\n  border-radius: var(--radius-pill);\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  color: var(--text-muted);\n}\n.entry-brand-subtitle {\n  font-size: 11.5px;\n  color: var(--text-muted);\n  letter-spacing: 0.01em;\n}\n\n/* New project panel */\n.newproj {\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  background: var(--bg-panel);\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--shadow-xs);\n}\n.newproj-tabs-shell {\n  position: relative;\n  border-bottom: 1px solid var(--border);\n  overflow: hidden;\n}\n.newproj-tabs {\n  display: flex;\n  padding: 4px 4px 0;\n  gap: 2px;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scroll-behavior: smooth;\n  scrollbar-width: none;\n}\n.newproj-tabs::-webkit-scrollbar { display: none; }\n.newproj-tabs-shell::before,\n.newproj-tabs-shell::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 28px;\n  z-index: 1;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 120ms ease;\n}\n.newproj-tabs-shell::before {\n  left: 0;\n  background: linear-gradient(90deg, var(--bg-panel), transparent);\n}\n.newproj-tabs-shell::after {\n  right: 0;\n  background: linear-gradient(270deg, var(--bg-panel), transparent);\n}\n.newproj-tabs-shell.can-left::before,\n.newproj-tabs-shell.can-right::after {\n  opacity: 1;\n}\n.newproj-tabs-arrow {\n  position: absolute;\n  top: 50%;\n  z-index: 2;\n  width: 28px;\n  height: 28px;\n  transform: translateY(-50%);\n  border: 1px solid var(--border);\n  border-radius: 999px;\n  background: var(--bg-panel);\n  color: var(--text-strong);\n  box-shadow: var(--shadow-xs);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  transition: opacity 120ms ease, transform 120ms ease;\n}\n.newproj-tabs-arrow:hover { border-color: var(--border-strong); background: var(--bg-subtle); }\n.newproj-tabs-arrow svg {\n  display: block;\n  flex: none;\n}\n.newproj-tabs-arrow.left { left: 6px; }\n.newproj-tabs-arrow.right { right: 6px; }\n.newproj-tabs-arrow.hidden {\n  opacity: 0;\n  pointer-events: none;\n  transform: translateY(-50%) scale(0.92);\n}\n.newproj-tab {\n  flex: 0 0 auto;\n  min-width: max-content;\n  padding: 10px 6px;\n  border: none;\n  background: transparent;\n  font-size: 12px;\n  border-radius: 6px 6px 0 0;\n  color: var(--text-muted);\n  border-bottom: 2px solid transparent;\n  font-weight: 500;\n}\n.newproj-tab:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }\n.newproj-tab.active {\n  color: var(--text);\n  border-bottom-color: var(--text);\n}\n.newproj-body {\n  padding: 18px;\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n.newproj-title {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.newproj-title-text { flex: 1 1 auto; min-width: 0; }\n.newproj-title-badge {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border-radius: var(--radius-pill);\n  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));\n  background: color-mix(in srgb, var(--accent) 12%, var(--bg-panel));\n  color: var(--accent);\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  line-height: 1.4;\n}\n.newproj-name { width: 100%; }\n.newproj-section { display: flex; flex-direction: column; gap: 6px; }\n.newproj-label {\n  font-size: 11.5px;\n  color: var(--text-muted);\n  font-weight: 500;\n}\n.newproj-media-options {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n.newproj-media-field,\n.newproj-media-options .newproj-label {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.newproj-model-groups {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.newproj-model-group {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.newproj-provider-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--text-muted);\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.11em;\n  text-transform: uppercase;\n}\n.newproj-provider-badge {\n  border-radius: 999px;\n  padding: 2px 8px;\n  font-size: 10px;\n  letter-spacing: 0.08em;\n}\n.newproj-provider-badge.configured {\n  border: 1px solid color-mix(in srgb, #4169e1 24%, transparent);\n  background: color-mix(in srgb, #4169e1 10%, transparent);\n  color: #3155c9;\n}\n.newproj-provider-badge.integrated {\n  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);\n  background: color-mix(in srgb, var(--accent) 10%, transparent);\n  color: color-mix(in srgb, var(--accent) 78%, var(--text-strong));\n}\n.newproj-provider-badge.unsupported {\n  border: 1px solid var(--border);\n  background: var(--bg-subtle);\n  color: var(--text-muted);\n}\n.newproj-model-grid,\n.newproj-option-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 8px;\n}\n.newproj-option-grid.aspect-grid {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.newproj-option-grid.compact {\n  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));\n}\n.newproj-card {\n  border: 1px solid var(--border);\n  border-radius: 10px;\n  background: var(--bg-panel);\n  color: var(--text-strong);\n  box-shadow: var(--shadow-xs);\n  cursor: pointer;\n  text-align: left;\n  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;\n}\n.newproj-card:hover {\n  border-color: var(--border-strong);\n  background: var(--bg-subtle);\n}\n.newproj-card.active {\n  border-color: var(--accent);\n  background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);\n}\n.newproj-model-card {\n  min-height: 74px;\n  padding: 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n}\n.newproj-model-name {\n  font-family: var(--font-mono);\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 1.2;\n}\n.newproj-model-hint {\n  color: var(--text-muted);\n  font-size: 12px;\n  line-height: 1.35;\n}\n.newproj-option-card {\n  min-height: 62px;\n  min-width: 0;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 7px;\n  text-align: center;\n  color: var(--text-muted);\n  font-size: 12px;\n  font-weight: 600;\n}\n.newproj-option-card small {\n  color: var(--text-muted);\n  font-size: 11px;\n}\n.aspect-grid .newproj-option-card {\n  flex-direction: column;\n  gap: 6px;\n  padding: 10px 6px;\n}\n.aspect-copy {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  align-items: center;\n  line-height: 1.15;\n  min-width: 0;\n  max-width: 100%;\n}\n.aspect-copy strong {\n  color: var(--text-muted);\n  font-size: 12.5px;\n  font-weight: 650;\n  letter-spacing: -0.005em;\n  max-width: 100%;\n  overflow-wrap: anywhere;\n}\n.aspect-copy small {\n  color: var(--text-muted);\n  font-size: 11.5px;\n}\n.aspect-glyph {\n  flex: none;\n  width: 34px;\n  height: 24px;\n  border-radius: 4px;\n  background: var(--bg-subtle);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);\n}\n.aspect-1-1 { width: 22px; height: 22px; }\n.aspect-16-9 { width: 32px; height: 18px; }\n.aspect-9-16 { width: 18px; height: 32px; }\n.aspect-4-3 { width: 28px; height: 21px; }\n.aspect-3-4 { width: 21px; height: 28px; }\n@media (max-width: 560px) {\n  .newproj-model-grid,\n  .newproj-option-grid,\n  .newproj-option-grid.aspect-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n.newproj-skills {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  max-height: 220px;\n  overflow-y: auto;\n  padding-right: 4px;\n}\n.skill-radio {\n  display: flex;\n  gap: 8px;\n  padding: 10px 12px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n  cursor: pointer;\n  align-items: flex-start;\n  background: var(--bg-panel);\n}\n.skill-radio:hover { background: var(--bg-subtle); border-color: var(--border-strong); }\n.skill-radio.active {\n  border-color: var(--accent);\n  background: var(--accent-tint);\n}\n.skill-radio input { width: auto; margin-top: 2px; }\n.skill-radio-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n.skill-radio-name { font-weight: 500; font-size: 13px; }\n.skill-radio-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }\n.newproj-empty {\n  font-size: 12px; color: var(--text-muted);\n  font-style: italic; padding: 8px 0;\n}\n.video-body,\n.audio-body {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  background: var(--bg-subtle);\n  flex: 1;\n  min-height: 0;\n}\n.video-body video {\n  max-width: 100%;\n  max-height: 100%;\n  border-radius: var(--radius-sm);\n  background: #000;\n}\n.audio-card {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  width: min(100%, 480px);\n  padding: 28px 32px;\n  color: var(--text-muted);\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n}\n.audio-card-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--text);\n  text-align: center;\n  word-break: break-word;\n}\n.audio-card audio {\n  width: 100%;\n}\n.newproj-create {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  padding: 11px;\n  margin-top: 4px;\n  font-size: 13px;\n  border-radius: var(--radius-sm);\n}\n.newproj-import {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  padding: 10px;\n  font-size: 12.5px;\n  border-radius: var(--radius-sm);\n}\n.newproj-create svg,\n.newproj-import svg {\n  display: block;\n  flex: 0 0 auto;\n}\n.newproj-footer {\n  padding: 0 18px 16px;\n  font-size: 11px;\n  color: var(--text-muted);\n  text-align: center;\n}\n\n/* -------- Fidelity cards (prototype tab) ---------------------------- */\n.fidelity-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n}\n.fidelity-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 8px;\n  padding: 10px 10px 12px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n  cursor: pointer;\n  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;\n}\n.fidelity-card:hover { border-color: var(--border-strong); }\n.fidelity-card.active {\n  border-color: var(--accent);\n  box-shadow:\n    0 0 0 1px var(--accent),\n    0 1px 0 rgba(180, 90, 59, 0.04);\n}\n.fidelity-thumb {\n  display: block;\n  width: 100%;\n  aspect-ratio: 12 / 7;\n  border-radius: 4px;\n  overflow: hidden;\n  background: var(--bg-subtle);\n  border: 1px solid var(--border-soft);\n}\n.fidelity-thumb-wireframe { background: #fbfaf6; }\n.fidelity-thumb-high-fidelity { background: var(--bg-panel); }\n.fidelity-card.active .fidelity-thumb { border-color: var(--accent-soft); }\n.fidelity-label {\n  text-align: center;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--text);\n}\n\n/* -------- Toggle row (deck \"speaker notes\", template \"animations\") -- */\n.toggle-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n  padding: 12px 14px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n  cursor: pointer;\n  text-align: left;\n  transition: border-color 120ms ease, background 120ms ease;\n}\n.toggle-row:hover { border-color: var(--border-strong); }\n.toggle-row.on { border-color: var(--accent); background: var(--accent-tint); }\n.toggle-row-text {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.toggle-row-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--text);\n}\n.toggle-row-hint {\n  font-size: 11.5px;\n  color: var(--text-muted);\n  line-height: 1.4;\n}\n.toggle-row-switch {\n  flex: none;\n  position: relative;\n  width: 32px;\n  height: 18px;\n  border-radius: 999px;\n  background: var(--border-strong);\n  transition: background 160ms ease;\n}\n.toggle-row-switch::after {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: #fff;\n  box-shadow: 0 1px 2px rgba(28, 27, 26, 0.18);\n  transition: transform 160ms cubic-bezier(0.2, 0, 0.2, 1);\n}\n.toggle-row.on .toggle-row-switch { background: var(--accent); }\n.toggle-row.on .toggle-row-switch::after { transform: translateX(14px); }\n\n/* -------- Template picker (template tab) ---------------------------- */\n.template-list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.template-option {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 12px 14px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n  cursor: pointer;\n  text-align: left;\n  transition: border-color 120ms ease, background 120ms ease;\n}\n.template-option:hover { border-color: var(--border-strong); }\n.template-option.active {\n  border-color: var(--accent);\n  background: var(--accent-tint);\n}\n.template-radio {\n  flex: none;\n  margin-top: 2px;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  border: 1.5px solid var(--border-strong);\n  background: var(--bg-panel);\n  position: relative;\n}\n.template-radio.active {\n  border-color: var(--accent);\n  background: var(--bg-panel);\n}\n.template-radio.active::after {\n  content: '';\n  position: absolute;\n  inset: 2px;\n  border-radius: 50%;\n  background: var(--accent);\n}\n.template-option-text {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.template-option-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--text);\n}\n.template-option-desc {\n  font-size: 11.5px;\n  color: var(--text-muted);\n  line-height: 1.4;\n}\n.template-howto {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 12px 14px;\n  background: var(--bg-subtle);\n  border: 1px dashed var(--border-strong);\n  border-radius: var(--radius-sm);\n}\n.template-howto-title {\n  font-size: 12.5px;\n  font-weight: 500;\n  color: var(--text);\n}\n.template-howto-body {\n  font-size: 11.5px;\n  color: var(--text-muted);\n  line-height: 1.45;\n}\n\n/* -------- New project · connectors section (live-artifact tab) ----- */\n.newproj-connectors { gap: 8px; }\n.newproj-connectors-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n.newproj-connectors-manage {\n  padding: 2px 8px;\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 0.02em;\n  color: var(--text-muted);\n  background: transparent;\n  border: 1px solid var(--border);\n  border-radius: 999px;\n  cursor: pointer;\n  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;\n}\n.newproj-connectors-manage:hover {\n  color: var(--text);\n  border-color: var(--border-strong);\n  background: var(--bg-subtle);\n}\n.newproj-connectors-hint {\n  font-size: 11.5px;\n  color: var(--text-muted);\n  line-height: 1.45;\n}\n.newproj-connectors-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n.newproj-connector-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px 4px 8px;\n  font-size: 11.5px;\n  color: var(--text);\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: 999px;\n  max-width: 100%;\n  min-width: 0;\n}\n.newproj-connector-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 999px;\n  background: #3bb273;\n  box-shadow: 0 0 0 3px color-mix(in srgb, #3bb273 22%, transparent);\n  flex: none;\n}\n.newproj-connector-name {\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 140px;\n}\n.newproj-connector-account {\n  color: var(--text-muted);\n  font-size: 11px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 120px;\n}\n.newproj-connectors-empty {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  width: 100%;\n  padding: 12px 14px;\n  background: var(--bg-subtle);\n  border: 1px dashed var(--border-strong);\n  border-radius: var(--radius-sm);\n  cursor: pointer;\n  text-align: left;\n  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;\n}\n.newproj-connectors-empty:hover {\n  border-color: var(--accent);\n  border-style: solid;\n  background: color-mix(in srgb, var(--accent) 4%, var(--bg-subtle));\n}\n.newproj-connectors-empty:active { transform: translateY(1px); }\n.newproj-connectors-empty:focus-visible {\n  outline: none;\n  border-color: var(--accent);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);\n}\n.newproj-connectors-empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  flex: none;\n  border-radius: 8px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  color: var(--text-muted);\n}\n.newproj-connectors-empty:hover .newproj-connectors-empty-icon {\n  color: var(--accent);\n  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));\n}\n.newproj-connectors-empty-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n.newproj-connectors-empty-title {\n  font-size: 12.5px;\n  font-weight: 500;\n  color: var(--text);\n}\n.newproj-connectors-empty-body {\n  font-size: 11.5px;\n  color: var(--text-muted);\n  line-height: 1.45;\n}\n.newproj-connectors-empty-cta {\n  margin-top: 4px;\n  font-size: 11.5px;\n  font-weight: 500;\n  color: var(--accent);\n}\n\n/* -------- Design system picker (custom popover dropdown) ------------ */\n.ds-picker { position: relative; }\n.ds-picker-trigger {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 8px 10px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n  cursor: pointer;\n  text-align: left;\n  transition: border-color 120ms ease, box-shadow 120ms ease;\n}\n.ds-picker-trigger:hover { border-color: var(--border-strong); }\n.ds-picker-trigger.open {\n  border-color: var(--accent);\n  box-shadow: 0 0 0 1px var(--accent);\n}\n.ds-picker-meta {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n.ds-picker-title {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ds-picker-extra-pill {\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  padding: 1px 6px;\n  background: var(--accent-soft);\n  color: var(--accent);\n  border-radius: 999px;\n}\n.ds-picker-sub {\n  font-size: 11px;\n  color: var(--text-muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ds-picker-chevron {\n  flex: none;\n  color: var(--text-muted);\n  transition: transform 160ms ease;\n}\n.ds-picker-trigger.empty .ds-picker-title { color: var(--text-muted); font-weight: 500; }\n\n/* Avatar — square with 2x2 swatch grid (or \"none\" diagonal slash). */\n.ds-avatar {\n  position: relative;\n  flex: none;\n  width: 32px;\n  height: 32px;\n  border-radius: 6px;\n  overflow: hidden;\n  border: 1px solid var(--border);\n  background: var(--bg-panel);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.ds-avatar-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-rows: 1fr 1fr;\n  width: 100%;\n  height: 100%;\n}\n.ds-avatar-cell { display: block; }\n.ds-avatar-stack {\n  position: absolute;\n  right: -2px;\n  bottom: -2px;\n  font-size: 9px;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  padding: 1px 5px;\n  background: var(--text-strong);\n  color: #fff;\n  border-radius: 999px;\n  border: 2px solid var(--bg-panel);\n}\n.ds-avatar-none {\n  background: var(--bg-subtle);\n  color: var(--text-faint);\n}\n\n/* Popover */\n.ds-picker-popover {\n  position: absolute;\n  top: calc(100% + 6px);\n  left: 0;\n  right: 0;\n  z-index: 30;\n  display: flex;\n  flex-direction: column;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-lg);\n  overflow: hidden;\n  animation: ds-pop-in 140ms cubic-bezier(0.2, 0, 0.2, 1);\n}\n@keyframes ds-pop-in {\n  from { opacity: 0; transform: translateY(-4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n.ds-picker-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px;\n  border-bottom: 1px solid var(--border);\n  background: var(--bg-subtle);\n}\n.ds-picker-search {\n  flex: 1;\n  padding: 6px 10px !important;\n  font-size: 12.5px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border) !important;\n  border-radius: var(--radius-sm) !important;\n}\n.ds-picker-mode {\n  flex: none;\n  display: inline-flex;\n  padding: 2px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: 999px;\n}\n.ds-picker-mode-btn {\n  padding: 3px 10px !important;\n  font-size: 11px !important;\n  font-weight: 500;\n  border: none !important;\n  background: transparent !important;\n  color: var(--text-muted) !important;\n  border-radius: 999px !important;\n  box-shadow: none !important;\n}\n.ds-picker-mode-btn.active {\n  background: var(--accent) !important;\n  color: #fff !important;\n}\n.ds-picker-list {\n  display: flex;\n  flex-direction: column;\n  max-height: 320px;\n  overflow-y: auto;\n  padding: 4px;\n}\n.ds-picker-empty {\n  padding: 16px 12px;\n  font-size: 12px;\n  color: var(--text-muted);\n  text-align: center;\n}\n.ds-picker-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--radius-sm);\n  cursor: pointer;\n  text-align: left;\n}\n.ds-picker-item:hover { background: var(--bg-subtle); }\n.ds-picker-item.active {\n  background: var(--accent-tint);\n  border-color: var(--accent-soft);\n}\n.ds-picker-item-text {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n.ds-picker-item-title {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12.5px;\n  font-weight: 500;\n  color: var(--text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ds-picker-item-badge {\n  font-size: 9px;\n  font-weight: 600;\n  letter-spacing: 0.06em;\n  padding: 2px 5px;\n  background: var(--accent-soft);\n  color: var(--accent);\n  border-radius: 4px;\n}\n.ds-picker-item-sub {\n  font-size: 11px;\n  color: var(--text-muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Selection mark — a circle for single-select, a square for multi.\n   In multi mode the active state shows the pick order (1 = primary). */\n.ds-picker-mark {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  font-size: 10px;\n  font-weight: 600;\n  color: transparent;\n}\n.ds-picker-mark.radio {\n  border-radius: 50%;\n  border: 1.5px solid var(--border-strong);\n  background: var(--bg-panel);\n  position: relative;\n}\n.ds-picker-mark.radio.active {\n  border-color: var(--accent);\n}\n.ds-picker-mark.radio.active::after {\n  content: '';\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: var(--accent);\n}\n.ds-picker-mark.check {\n  border-radius: 4px;\n  border: 1.5px solid var(--border-strong);\n  background: var(--bg-panel);\n  color: var(--bg-panel);\n}\n.ds-picker-mark.check.active {\n  border-color: var(--accent);\n  background: var(--accent);\n  color: #fff;\n}\n\n.ds-picker-foot {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  border-top: 1px solid var(--border);\n  background: var(--bg-subtle);\n  font-size: 11.5px;\n  color: var(--text-muted);\n  line-height: 1.4;\n}\n.ds-picker-foot-text { flex: 1; min-width: 0; }\n.ds-picker-foot-text strong { color: var(--text); font-weight: 600; }\n.ds-picker-clear {\n  flex: none;\n  padding: 4px 10px !important;\n  font-size: 11px !important;\n  background: var(--bg-panel) !important;\n  color: var(--text) !important;\n  border: 1px solid var(--border) !important;\n}\n.ds-picker-clear:hover { border-color: var(--border-strong) !important; }\n\n.entry-side-foot {\n  margin-top: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding-top: 16px;\n}\n.entry-side-foot .foot-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-pill);\n  font-size: 11.5px;\n  color: var(--text-muted);\n  align-self: flex-start;\n  cursor: pointer;\n  text-decoration: none;\n}\n.entry-side-foot .foot-pill:hover { background: var(--bg-panel); border-color: var(--border-strong); color: var(--text); }\n.entry-side-foot .foot-pill .ico { font-size: 12px; opacity: 0.7; }\n\n/* Language switcher pill + popover (entry sidebar foot). */\n.lang-menu-wrap {\n  position: relative;\n  align-self: flex-start;\n}\n.lang-menu-wrap .lang-pill {\n  font-variant-numeric: tabular-nums;\n}\n.lang-menu-popover {\n  position: absolute;\n  bottom: calc(100% + 6px);\n  left: 0;\n  z-index: 50;\n  min-width: 180px;\n  width: max-content;\n  max-width: min(280px, calc(100vw - 48px));\n  display: flex;\n  flex-direction: column;\n  padding: 4px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border-strong);\n  border-radius: 10px;\n  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);\n}\n.lang-menu-item {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto auto;\n  align-items: center;\n  gap: 10px;\n  padding: 7px 10px;\n  background: transparent;\n  border: 0;\n  border-radius: 7px;\n  font-size: 12.5px;\n  color: var(--text);\n  text-align: left;\n  cursor: pointer;\n}\n.lang-menu-label {\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n.lang-menu-item:hover { background: var(--bg-subtle); }\n.lang-menu-item.active { background: var(--bg-subtle); }\n.lang-menu-item .lang-menu-code {\n  color: var(--text-faint);\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  letter-spacing: 0.02em;\n}\n.lang-menu-item .lang-menu-check {\n  color: var(--text-muted);\n  display: inline-flex;\n  align-items: center;\n}\n\n/* Right side */\n.entry-main {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n}\n.entry-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 0 28px;\n  border-bottom: 1px solid var(--border);\n  min-width: 0;\n  min-height: 52px;\n}\n.entry-header-tabs-row {\n  display: flex;\n  align-items: center;\n  gap: 24px;\n}\n.entry-tabs {\n  display: flex;\n  gap: 2px;\n  min-width: 0;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n}\n.entry-tabs::-webkit-scrollbar { display: none; }\n.entry-tab {\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  border-radius: 6px 6px 0 0;\n  padding: 14px 11px;\n  font-size: 14px;\n  color: var(--text-muted);\n  font-weight: 500;\n  flex: 0 0 auto;\n  white-space: nowrap;\n}\n.entry-tab:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }\n.entry-tab.active {\n  color: var(--text);\n  border-bottom-color: var(--text);\n}\n.entry-header-right {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  flex: 0 0 auto;\n}\n\n.entry-tab-content {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 22px 28px 32px;\n  background: var(--bg);\n}\n\n.tab-panel {\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n}\n.tab-panel-toolbar {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  /* Older browsers ignore row-gap on flex with wrap — explicit row-gap keeps\n     the wrapped row visually separated rather than flush against the pill. */\n  row-gap: 8px;\n}\n.tab-panel-toolbar .toolbar-left {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  flex: 0 0 auto;\n  min-width: 0;\n}\n.tab-panel-toolbar .toolbar-right {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  flex: 1 1 auto;\n  min-width: 0;\n  justify-content: flex-end;\n  flex-wrap: wrap;\n}\n.tab-panel-toolbar .toolbar-search {\n  position: relative;\n  flex: 1 1 180px;\n  min-width: 140px;\n  max-width: 280px;\n}\n/* Narrow columns (entry tab content sometimes lands at ~570px wide) — keep\n   the segmented pill on its own row above the search/view toggle so the\n   search input never collapses into a tiny stub squeezed between two pills. */\n@media (max-width: 720px) {\n  .tab-panel-toolbar { flex-direction: column; align-items: stretch; }\n  .tab-panel-toolbar .toolbar-left { justify-content: flex-start; }\n  .tab-panel-toolbar .toolbar-right { justify-content: space-between; }\n  .tab-panel-toolbar .toolbar-search { max-width: none; }\n}\n.tab-panel-toolbar .toolbar-search input {\n  padding-left: 30px;\n  background: var(--bg-panel);\n}\n.tab-panel-toolbar .toolbar-search input[type='search']::-webkit-search-cancel-button {\n  /* Hide the native clear control; we render our own styled button. */\n  appearance: none;\n  -webkit-appearance: none;\n}\n.tab-panel-toolbar .toolbar-search input[disabled] {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n.tab-panel-toolbar .toolbar-search .toolbar-search-clear {\n  position: absolute;\n  right: 6px;\n  top: 50%;\n  transform: translateY(-50%);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  border: 0;\n  border-radius: 999px;\n  background: transparent;\n  color: var(--text-faint);\n  cursor: pointer;\n  transition: background-color 120ms ease, color 120ms ease;\n}\n.tab-panel-toolbar .toolbar-search .toolbar-search-clear:hover {\n  background: var(--bg-subtle);\n  color: var(--text);\n}\n.tab-panel-toolbar .toolbar-search .toolbar-search-clear:focus-visible {\n  outline: 2px solid var(--text);\n  outline-offset: 2px;\n}\n.tab-panel-toolbar .toolbar-search .search-icon {\n  position: absolute;\n  left: 9px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--text-faint);\n  font-size: 13px;\n  pointer-events: none;\n}\n.tab-empty {\n  padding: 48px 0;\n  text-align: center;\n  color: var(--text-muted);\n  font-size: 13px;\n}\n\n.connectors-heading h2 {\n  margin: 0;\n  font-size: 18px;\n  line-height: 1.25;\n}\n.connectors-heading p {\n  margin: 4px 0 0;\n  color: var(--text-muted);\n  font-size: 13px;\n}\n.tab-panel-toolbar .toolbar-search.connectors-search {\n  flex: 0 1 320px;\n  width: min(320px, 100%);\n}\n.tab-panel-toolbar .toolbar-search.connectors-search input {\n  padding-right: 32px;\n}\n.connectors-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  padding: 64px 16px;\n  text-align: center;\n}\n.connectors-empty-title {\n  margin: 0;\n  font-size: 14px;\n  color: var(--text);\n  font-weight: 500;\n  max-width: 480px;\n  word-break: break-word;\n}\n.connectors-empty-body {\n  margin: 0;\n  font-size: 13px;\n  color: var(--text-muted);\n  max-width: 480px;\n}\n.connectors-empty-action {\n  margin-top: 8px;\n}\n.connector-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));\n  gap: 14px;\n}\n.connector-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-height: 168px;\n  padding: 16px 16px 14px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-xs);\n  cursor: pointer;\n  text-align: left;\n  transition:\n    transform 140ms ease,\n    border-color 140ms ease,\n    box-shadow 180ms ease,\n    background 140ms ease;\n}\n.connector-card:hover:not(.is-locked) {\n  transform: translateY(-1px);\n  border-color: color-mix(in srgb, var(--text) 28%, var(--border));\n  box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.25), var(--shadow-xs);\n}\n.connector-card:focus-visible {\n  outline: none;\n  border-color: color-mix(in srgb, var(--text) 48%, var(--border));\n  box-shadow:\n    0 0 0 3px color-mix(in srgb, var(--text) 14%, transparent),\n    0 8px 24px -14px rgba(0, 0, 0, 0.25);\n}\n.connector-card.status-connected {\n  border-color: color-mix(in srgb, var(--green) 40%, var(--border));\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--green) 5%, var(--bg-panel)) 0%,\n    var(--bg-panel) 60%\n  );\n}\n.connector-card.status-disabled { background: var(--bg-subtle); }\n.connector-card.status-error {\n  border-color: color-mix(in srgb, var(--red) 35%, var(--border));\n}\n.connector-card-top {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 10px;\n}\n.connector-card-head {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n  flex: 1 1 auto;\n}\n.connector-card-title {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 1.25;\n  letter-spacing: -0.005em;\n  color: var(--text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.connector-meta {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 6px;\n  color: var(--text-muted);\n  font-size: 12px;\n  line-height: 1;\n}\n.connector-meta-item {\n  white-space: nowrap;\n}\n.connector-meta-dot {\n  color: var(--text-faint);\n}\n.connector-tools-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 7px;\n  border-radius: var(--radius-pill);\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  color: var(--text-muted);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1.3;\n  white-space: nowrap;\n  transform-origin: left center;\n  will-change: transform, opacity;\n}\n.connector-tools-badge svg {\n  opacity: 0.65;\n}\n.connector-tools-badge.is-ready {\n  animation: connector-tools-badge-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n.connector-tools-badge.is-ready svg {\n  animation: connector-tools-badge-icon-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;\n  animation-delay: 120ms;\n}\n@keyframes connector-tools-badge-in {\n  0% {\n    opacity: 0;\n    transform: translateY(3px) scale(0.92);\n    border-color: color-mix(in srgb, var(--border) 40%, transparent);\n    background: color-mix(in srgb, var(--bg-subtle) 60%, transparent);\n  }\n  55% {\n    opacity: 1;\n    border-color: color-mix(in srgb, var(--accent, var(--text-muted)) 30%, var(--border));\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n    border-color: var(--border);\n    background: var(--bg-subtle);\n  }\n}\n@keyframes connector-tools-badge-icon-in {\n  0% {\n    opacity: 0;\n    transform: rotate(-12deg) scale(0.8);\n  }\n  100% {\n    opacity: 0.65;\n    transform: rotate(0) scale(1);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .connector-tools-badge.is-ready {\n    animation: connector-tools-badge-fade 180ms ease-out both;\n  }\n  .connector-tools-badge.is-ready svg {\n    animation: none;\n  }\n  @keyframes connector-tools-badge-fade {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n}\n.connector-status {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 2px 8px;\n  border-radius: var(--radius-pill);\n  background: var(--bg-subtle);\n  color: var(--text-muted);\n  border: 1px solid var(--border);\n  font-size: 11px;\n  font-weight: 600;\n  line-height: 1.4;\n  letter-spacing: 0.01em;\n}\n.connector-status-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 999px;\n  background: currentColor;\n  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent);\n}\n.connector-status.status-connected,\n.connector-status-pill.status-connected {\n  background: color-mix(in srgb, var(--green) 12%, transparent);\n  color: var(--green);\n  border-color: color-mix(in srgb, var(--green) 32%, transparent);\n}\n.connector-status.status-error,\n.connector-status-pill.status-error {\n  background: color-mix(in srgb, var(--red) 10%, transparent);\n  color: var(--red);\n  border-color: color-mix(in srgb, var(--red) 30%, transparent);\n}\n.connector-status.status-disabled,\n.connector-status-pill.status-disabled {\n  opacity: 0.7;\n}\n.connector-status-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 10px;\n  border-radius: var(--radius-pill);\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  color: var(--text-muted);\n  font-size: 12px;\n  font-weight: 600;\n}\n.connector-description {\n  margin: 0;\n  color: var(--text-muted);\n  font-size: 13px;\n  line-height: 1.5;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n.connector-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: auto;\n  padding-top: 4px;\n}\nbutton.connector-action {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 5px 12px;\n  font-size: 12px;\n  font-weight: 500;\n  border-radius: var(--radius);\n  transition: transform 120ms ease, background 140ms ease, border-color 140ms ease;\n}\nbutton.connector-action.is-connect {\n  min-width: 92px;\n}\nbutton.connector-action.is-disconnect {\n  min-width: 106px;\n  color: var(--text-muted);\n}\nbutton.connector-action.is-disconnect:hover:not(:disabled) {\n  color: var(--red);\n  border-color: color-mix(in srgb, var(--red) 35%, var(--border));\n}\nbutton.connector-action.is-loading {\n  cursor: wait;\n}\n\n/* Connector gate — masks the grid when the Composio API key is missing. */\n.connector-grid-wrap {\n  position: relative;\n}\n.connector-grid-wrap.is-masked .connector-grid {\n  filter: blur(2px) saturate(0.85);\n  opacity: 0.55;\n  pointer-events: none;\n  user-select: none;\n  transition: filter 160ms ease, opacity 160ms ease;\n}\n/* When the gate is shown, anchor it to the visible first screen of the\n   connectors tab instead of centering across the full (potentially long)\n   connector list. We lift the tab-content into a flex column, let the\n   connectors panel and the masked grid wrap stretch to fill the remaining\n   viewport height, and hide overflow so the absolutely-positioned gate\n   card remains fixed in the first-screen center. */\n.entry-tab-content:has(> .tab-panel.connectors-panel > .connector-grid-wrap.is-masked) {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.tab-panel.connectors-panel:has(> .connector-grid-wrap.is-masked) {\n  flex: 1 1 auto;\n  min-height: 0;\n}\n.connector-grid-wrap.is-masked {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n.connector-grid-wrap.is-masked .connector-grid {\n  /* Prevent the blurred grid from introducing its own scroll height inside\n     the now-clipped wrap — the wrap is our visible viewport for the gate. */\n  max-height: 100%;\n  overflow: hidden;\n}\n.connector-card.is-locked {\n  cursor: not-allowed;\n}\n.connector-gate {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  background:\n    radial-gradient(ellipse at top, color-mix(in srgb, var(--bg-panel) 78%, transparent) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 65%),\n    color-mix(in srgb, var(--bg) 45%, transparent);\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  border-radius: var(--radius);\n  animation: connector-gate-fade 220ms ease-out;\n}\n@keyframes connector-gate-fade {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n.connector-gate-card {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  max-width: 420px;\n  padding: 28px 28px 24px;\n  text-align: center;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-md, 0 10px 30px rgba(0, 0, 0, 0.18));\n}\n.connector-gate-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  color: var(--text-muted);\n}\n.connector-gate-title {\n  margin: 2px 0 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--text);\n  letter-spacing: 0.01em;\n}\n.connector-gate-body {\n  margin: 0;\n  max-width: 340px;\n  color: var(--text-muted);\n  font-size: 13px;\n  line-height: 1.5;\n}\n.connector-gate-action {\n  margin-top: 6px;\n  padding: 7px 16px;\n  font-size: 13px;\n  font-weight: 500;\n}\n\n/* ------------------------------------------------------------------ */\n/* Connector detail drawer                                             */\n/* ------------------------------------------------------------------ */\n.connector-drawer-backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 100;\n  background: color-mix(in srgb, #000 42%, transparent);\n  backdrop-filter: blur(2px);\n  -webkit-backdrop-filter: blur(2px);\n  display: flex;\n  justify-content: flex-end;\n  animation: connector-drawer-fade 180ms ease;\n}\n@keyframes connector-drawer-fade {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n.connector-drawer {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: min(480px, 92vw);\n  height: 100%;\n  background: var(--bg-panel);\n  border-left: 1px solid var(--border);\n  box-shadow: -24px 0 48px -20px rgba(0, 0, 0, 0.32);\n  animation: connector-drawer-slide 240ms cubic-bezier(0.22, 0.9, 0.3, 1);\n}\n@keyframes connector-drawer-slide {\n  from { transform: translateX(24px); opacity: 0; }\n  to { transform: translateX(0); opacity: 1; }\n}\n.connector-drawer-head {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 20px 22px 16px;\n  border-bottom: 1px solid var(--border);\n  background:\n    linear-gradient(180deg, color-mix(in srgb, var(--bg-subtle) 60%, transparent) 0%, transparent 100%);\n}\n.connector-drawer-titles {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.connector-drawer-eyebrow {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--text-faint);\n}\n.connector-drawer-titles h2 {\n  margin: 0;\n  font-size: 22px;\n  font-weight: 600;\n  line-height: 1.2;\n  letter-spacing: -0.01em;\n  color: var(--text);\n}\n.connector-drawer-status {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.connector-drawer-close {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border-radius: 999px;\n  color: var(--text-muted);\n}\n.connector-drawer-close:hover {\n  background: var(--bg-subtle);\n  color: var(--text);\n}\n.connector-drawer-body {\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: 20px 22px 24px;\n  display: flex;\n  flex-direction: column;\n  gap: 22px;\n}\n.connector-drawer-section {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.connector-drawer-section-title {\n  margin: 0;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--text-faint);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.connector-drawer-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 18px;\n  padding: 0 6px;\n  border-radius: 999px;\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  color: var(--text-muted);\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0;\n  text-transform: none;\n}\n.connector-drawer-description {\n  margin: 0;\n  color: var(--text);\n  font-size: 14px;\n  line-height: 1.6;\n}\n.connector-drawer-details {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  gap: 2px;\n  margin: 0;\n  padding: 2px 0;\n  border-radius: var(--radius);\n  border: 1px solid var(--border);\n  background: var(--bg-subtle);\n  overflow: hidden;\n}\n.connector-drawer-details > div {\n  display: grid;\n  grid-template-columns: 110px 1fr;\n  align-items: baseline;\n  gap: 12px;\n  padding: 10px 14px;\n  background: var(--bg-panel);\n}\n.connector-drawer-details > div + div {\n  border-top: 1px solid var(--border);\n}\n.connector-drawer-details dt {\n  margin: 0;\n  color: var(--text-muted);\n  font-size: 12px;\n  font-weight: 500;\n}\n.connector-drawer-details dd {\n  margin: 0;\n  color: var(--text);\n  font-size: 13px;\n  word-break: break-word;\n}\n.connector-drawer-details-error dd {\n  color: var(--red);\n}\n.connector-drawer-empty {\n  margin: 0;\n  padding: 14px 16px;\n  border: 1px dashed var(--border);\n  border-radius: var(--radius);\n  color: var(--text-muted);\n  font-size: 13px;\n  line-height: 1.5;\n}\n.connector-drawer-tools {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.connector-drawer-tool {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px 14px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  transition: border-color 140ms ease, background 140ms ease;\n}\n.connector-drawer-tool:hover {\n  border-color: color-mix(in srgb, var(--text) 20%, var(--border));\n}\n.connector-drawer-tool-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n}\n.connector-drawer-tool-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--text);\n}\n.connector-drawer-tool-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 1px 7px;\n  border-radius: var(--radius-pill);\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  color: var(--text-muted);\n}\n.connector-drawer-tool-badge.side-read {\n  background: color-mix(in srgb, var(--green) 10%, transparent);\n  border-color: color-mix(in srgb, var(--green) 28%, transparent);\n  color: var(--green);\n}\n.connector-drawer-tool-badge.side-write {\n  background: color-mix(in srgb, var(--amber, #d97706) 10%, transparent);\n  border-color: color-mix(in srgb, var(--amber, #d97706) 28%, transparent);\n  color: var(--amber, #d97706);\n}\n.connector-drawer-tool-badge.side-destructive {\n  background: color-mix(in srgb, var(--red) 10%, transparent);\n  border-color: color-mix(in srgb, var(--red) 30%, transparent);\n  color: var(--red);\n}\n.connector-drawer-tool-desc {\n  margin: 0;\n  color: var(--text-muted);\n  font-size: 12.5px;\n  line-height: 1.5;\n}\n.connector-drawer-tool-name {\n  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);\n  font-size: 11px;\n  color: var(--text-faint);\n  background: var(--bg-subtle);\n  padding: 2px 6px;\n  border-radius: 4px;\n  align-self: flex-start;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.connector-drawer-foot {\n  padding: 14px 22px 18px;\n  border-top: 1px solid var(--border);\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  background: var(--bg-panel);\n}\n.connector-drawer-foot button.connector-action {\n  padding: 7px 18px;\n  font-size: 13px;\n}\n@media (max-width: 520px) {\n  .connector-drawer-head {\n    padding: 16px 16px 14px;\n  }\n  .connector-drawer-body {\n    padding: 16px 16px 20px;\n  }\n  .connector-drawer-foot {\n    padding: 12px 16px 16px;\n  }\n  .connector-drawer-details > div {\n    grid-template-columns: 1fr;\n    gap: 2px;\n  }\n}\n\n/* Recent / Your designs segmented pill */\n.subtab-pill {\n  display: inline-flex;\n  padding: 3px;\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-pill);\n  gap: 2px;\n  max-width: 100%;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.subtab-pill::-webkit-scrollbar { display: none; }\n.subtab-pill button {\n  background: transparent;\n  border: none;\n  border-radius: var(--radius-pill);\n  padding: 5px 16px;\n  font-size: 12px;\n  color: var(--text-muted);\n  font-weight: 500;\n  white-space: nowrap;\n}\n.subtab-pill button:hover:not(.active) { background: rgba(255,255,255,0.6); border-color: transparent; color: var(--text); }\n.subtab-pill button.active {\n  background: var(--text);\n  color: var(--bg);\n  box-shadow: var(--shadow-xs);\n}\n/* Icon-only variant: any pill button whose sole child is an SVG icon.\n   Center the glyph via inline-flex (removes text line-height drift) and\n   use padding that matches the text variant's overall height so both\n   sub-pills align on the same baseline in the toolbar. */\n.subtab-pill button:has(> svg:only-child) {\n  padding: 5px 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 0;\n}\n\n/* Designs grid */\n.design-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n  gap: 14px;\n}\n.design-card {\n  position: relative;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  padding: 0;\n  cursor: pointer;\n  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 168px;\n}\n.design-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }\n.design-card-thumb {\n  flex: 1;\n  min-height: 100px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--bg-subtle);\n  color: var(--text-faint);\n  font-size: 38px;\n  position: relative;\n}\n.design-card-thumb::before {\n  /* Folder-shape icon */\n  content: '';\n  width: 56px;\n  height: 44px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border-strong);\n  border-radius: 4px 6px 6px 6px;\n  position: relative;\n  box-shadow: var(--shadow-xs);\n}\n.design-card-thumb::after {\n  /* Folder tab notch */\n  content: '';\n  position: absolute;\n  width: 22px;\n  height: 8px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border-strong);\n  border-bottom: none;\n  border-radius: 4px 4px 0 0;\n  margin-top: -52px;\n  margin-left: -26px;\n}\n.design-card-meta-block {\n  padding: 10px 12px 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  border-top: 1px solid var(--border-soft);\n  background: var(--bg-panel);\n}\n.design-card-name {\n  font-weight: 600;\n  font-size: 13px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--text-strong);\n}\n.design-card-meta {\n  font-size: 11.5px;\n  color: var(--text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.design-card-meta .ds {\n  color: var(--accent);\n}\n.design-card-status {\n  font-weight: 500;\n}\n.design-card-status-running {\n  color: var(--accent);\n}\n.design-card-status-awaiting_input {\n  color: var(--amber);\n}\n.design-card-status-queued,\n.design-card-status-not_started,\n.design-card-status-canceled {\n  color: var(--text-muted);\n}\n.design-card-status-succeeded {\n  color: var(--green);\n}\n.design-card-status-failed {\n  color: var(--red);\n}\n.design-card-close {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  border-radius: 50%;\n  font-size: 14px;\n  line-height: 1;\n  background: var(--bg-panel);\n  opacity: 0;\n  transition: opacity 0.15s;\n  border-color: var(--border);\n  z-index: 2;\n  /* Keep button interactive for keyboard/AT users even while visually hidden. */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--text-muted);\n}\n.design-card:hover .design-card-close,\n.design-card:focus-within .design-card-close,\n.design-kanban-card:hover .design-card-close,\n.design-kanban-card:focus-within .design-card-close,\n.design-card-close:focus-visible { opacity: 1; }\n.design-card-close:hover { color: var(--text-strong); border-color: var(--border-strong); }\n/* Larger comfortable touch target on coarse pointers (tablets/touch laptops).\n   On touch the hover reveal never fires, so keep the close button visible. */\n@media (hover: none) {\n  .design-card .design-card-close,\n  .design-kanban-card .design-card-close { opacity: 1; }\n}\n\n/* Featured (tutorial) card variant */\n.design-card.featured .design-card-thumb {\n  background: linear-gradient(180deg, #e8efff 0%, #d8e3ff 100%);\n}\n.design-card.featured .design-card-thumb::before {\n  background: var(--bg-panel);\n  border-color: rgba(35, 72, 184, 0.18);\n}\n.design-card.featured .design-card-thumb::after { display: none; }\n\n.live-artifact-card {\n  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));\n}\n.live-artifact-card:hover {\n  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-strong));\n}\n.live-artifact-thumb {\n  background:\n    radial-gradient(circle at 32% 28%, rgba(116, 92, 255, 0.18), transparent 36%),\n    linear-gradient(135deg, rgba(66, 153, 225, 0.16), rgba(116, 92, 255, 0.12));\n}\n.live-artifact-thumb::before,\n.live-artifact-thumb::after {\n  display: none;\n}\n.live-artifact-thumb-glyph {\n  width: 46px;\n  height: 46px;\n  border-radius: 16px;\n  display: grid;\n  place-items: center;\n  color: var(--accent);\n  background: var(--bg-panel);\n  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));\n  box-shadow: var(--shadow-xs);\n  font-size: 18px;\n  line-height: 1;\n}\n.design-card-badges,\n.live-artifact-badges {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 5px;\n  min-height: 18px;\n}\n.live-artifact-badge,\n.design-live-count {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 999px;\n  border: 1px solid var(--border);\n  padding: 2px 7px;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.03em;\n  text-transform: uppercase;\n  background: var(--bg-panel);\n}\n.live-artifact-badge.live {\n  color: var(--accent);\n  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));\n  background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));\n}\n.live-artifact-badge.refreshing {\n  color: #1d4ed8;\n  border-color: rgba(29, 78, 216, 0.22);\n  background: rgba(29, 78, 216, 0.08);\n}\n.live-artifact-badge.refresh-failed {\n  color: #b42318;\n  border-color: rgba(180, 35, 24, 0.22);\n  background: rgba(180, 35, 24, 0.08);\n}\n.live-artifact-badge.archived {\n  color: var(--text-muted);\n  border-color: var(--border-strong);\n  background: var(--bg-subtle);\n}\n.live-artifact-badges.compact {\n  display: inline-flex;\n  gap: 4px;\n  min-height: 0;\n  vertical-align: middle;\n}\n.live-artifact-badges.compact .live-artifact-badge {\n  padding: 1px 5px;\n  font-size: 9px;\n  line-height: 1.25;\n}\n.design-live-count {\n  position: absolute;\n  right: 10px;\n  bottom: 10px;\n  color: var(--accent);\n  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));\n  box-shadow: var(--shadow-xs);\n}\n\n/* Grid card keyboard focus (cards carry role=\"button\" on a div). */\n.design-card:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n  border-color: var(--border-strong);\n}\n\n/* Kanban View */\n.tab-panel.design-kanban-view {\n  /* Fill the scrollable parent (.entry-tab-content) so columns can size to\n     the available viewport without a fragile 100vh calc. */\n  flex: 1 1 auto;\n  min-height: 0;\n  height: 100%;\n}\n.design-kanban-board {\n  display: flex;\n  gap: 14px;\n  overflow-x: auto;\n  /* Let columns grow to fill the remaining vertical space inside\n     .tab-panel.design-kanban-view. */\n  flex: 1 1 auto;\n  min-height: 0;\n  padding-bottom: 8px;\n  /* Hint that horizontal content may overflow on narrow viewports. */\n  scroll-snap-type: x proximity;\n  scrollbar-gutter: stable;\n}\n.design-kanban-col {\n  width: 280px;\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--bg-subtle);\n  border-radius: var(--radius);\n  padding: 12px;\n  gap: 12px;\n  min-height: 0;\n  scroll-snap-align: start;\n}\n.design-kanban-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--text-strong);\n  padding-left: 2px;\n  /* Prevent long status labels from pushing the count chip out of the column. */\n  min-width: 0;\n}\n.design-kanban-header > span:first-child {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n.design-kanban-count {\n  background: var(--bg-panel);\n  border: 1px solid var(--border-soft);\n  color: var(--text-muted);\n  font-size: 11px;\n  padding: 2px 8px;\n  border-radius: var(--radius-pill);\n  flex-shrink: 0;\n}\n.design-kanban-list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  overflow-y: auto;\n  /* Keep the scrollbar gutter from shifting the list when content grows. */\n  padding-right: 4px;\n  margin-right: -4px;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n.design-kanban-empty {\n  color: var(--text-faint);\n  font-size: 13px;\n  text-align: center;\n  padding: 20px 0;\n}\n.design-kanban-card {\n  position: relative;\n  background: var(--bg-panel);\n  border: 1px solid var(--border-soft);\n  border-radius: var(--radius);\n  padding: 12px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  cursor: pointer;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;\n  box-shadow: var(--shadow-xs);\n}\n.design-kanban-card:hover {\n  border-color: var(--border-strong);\n  box-shadow: var(--shadow-sm);\n  transform: translateY(-1px);\n}\n.design-kanban-card:active {\n  transform: none;\n}\n.design-kanban-card:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n  border-color: var(--border-strong);\n}\n.design-kanban-card::before {\n  content: '';\n  position: absolute;\n  left: -1px;\n  top: -1px;\n  bottom: -1px;\n  width: 3px;\n  border-radius: var(--radius) 0 0 var(--radius);\n  background: var(--text-muted);\n}\n.design-kanban-card.status-running::before { background: var(--accent); }\n.design-kanban-card.status-awaiting_input::before { background: var(--amber); }\n.design-kanban-card.status-succeeded::before { background: var(--green); }\n.design-kanban-card.status-failed::before { background: var(--red); }\n.design-kanban-card.status-not_started::before,\n.design-kanban-card.status-queued::before,\n.design-kanban-card.status-canceled::before { background: var(--text-muted); }\n\n.design-kanban-card-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--text-strong);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  /* Reserve room for the absolutely-positioned close button. */\n  padding-right: 20px;\n}\n.design-kanban-card-meta {\n  font-size: 12px;\n  color: var(--text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.design-kanban-card-meta .ds {\n  color: var(--text-strong);\n  font-weight: 500;\n}\n\n/* Honor user motion preferences for the new hover transform / transitions\n   introduced alongside the kanban view. */\n@media (prefers-reduced-motion: reduce) {\n  .design-card,\n  .design-kanban-card {\n    transition: none;\n  }\n  .design-card:hover,\n  .design-kanban-card:hover {\n    transform: none;\n  }\n}\n\n/* Examples gallery */\n.examples-panel { gap: 32px; }\n.example-card {\n  display: grid;\n  grid-template-columns: 2fr 1fr;\n  gap: 24px;\n  align-items: center;\n}\n.example-preview {\n  position: relative;\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  height: 320px;\n  overflow: hidden;\n}\n.example-preview iframe {\n  width: 100%; height: 100%; border: none; background: white; pointer-events: none;\n}\n.example-preview-placeholder {\n  position: absolute; inset: 0;\n  display: flex; align-items: center; justify-content: center;\n  color: var(--text-muted); font-size: 12px;\n}\n.example-meta { display: flex; flex-direction: column; gap: 12px; }\n.example-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }\n.example-prompt {\n  font-size: 13px;\n  color: var(--text-muted);\n  line-height: 1.55;\n  font-style: italic;\n}\n.example-cta { align-self: flex-start; padding: 8px 18px; }\n.example-tag {\n  font-size: 10px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  padding: 2px 8px;\n  border-radius: var(--radius-pill);\n  background: var(--accent);\n  color: white;\n  flex-shrink: 0;\n}\n\n/* Design systems gallery — masonry-style cards with lazy showcase iframes\n   serving as thumbnails. The grid mirrors the prompt-templates and example\n   gallery surfaces so the three browse tabs feel uniform. */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 16px;\n}\n.ds-card {\n  display: flex;\n  flex-direction: column;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: 12px;\n  overflow: hidden;\n  cursor: pointer;\n  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;\n}\n.ds-card:hover {\n  border-color: var(--border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);\n}\n.ds-card:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n.ds-card.active {\n  border-color: var(--accent);\n  box-shadow: 0 0 0 2px var(--accent-tint);\n}\n.ds-card-thumb {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 4 / 3;\n  background: var(--bg-subtle);\n  overflow: hidden;\n  border-bottom: 1px solid var(--border);\n}\n.ds-card-thumb iframe {\n  width: 200%;\n  height: 200%;\n  border: none;\n  display: block;\n  background: white;\n  transform: scale(0.5);\n  transform-origin: top left;\n  pointer-events: none;\n}\n.ds-card-thumb-fallback {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ds-card-thumb-swatches {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  grid-template-rows: repeat(2, 1fr);\n  width: 100%;\n  height: 100%;\n}\n.ds-card-thumb-swatches > span { display: block; }\n.ds-card-thumb-overlay {\n  position: absolute;\n  right: 8px;\n  bottom: 8px;\n  background: rgba(15, 15, 18, 0.78);\n  color: #fff;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  padding: 4px 10px;\n  border-radius: 999px;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n.ds-card:hover .ds-card-thumb-overlay,\n.ds-card-thumb:focus-visible .ds-card-thumb-overlay {\n  opacity: 1;\n}\n.ds-card-meta {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px 14px 14px;\n  flex: 1;\n}\n.ds-card-title-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n}\n.ds-card-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--text);\n  letter-spacing: -0.005em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1;\n  min-width: 0;\n}\n.ds-card-badge {\n  font-size: 9px;\n  font-weight: 600;\n  letter-spacing: 0.06em;\n  padding: 2px 6px;\n  background: var(--accent-soft);\n  color: var(--accent);\n  border-radius: 4px;\n  flex-shrink: 0;\n}\n.ds-card-summary {\n  font-size: 12px;\n  color: var(--text-muted);\n  line-height: 1.45;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n.ds-card-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  margin-top: auto;\n  padding-top: 6px;\n}\n.ds-card-category {\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--text-muted);\n}\n.ds-card-swatches {\n  display: inline-flex;\n  align-items: center;\n  border-radius: 6px;\n  border: 1px solid var(--border);\n  overflow: hidden;\n  flex-shrink: 0;\n  height: 18px;\n}\n.ds-card-swatches > span {\n  display: block;\n  width: 14px;\n  height: 100%;\n}\n.ds-card-swatches > span + span {\n  border-left: 1px solid rgba(0, 0, 0, 0.05);\n}\n\n/* Legacy list classes kept for any consumer outside the tab — the gallery\n   itself no longer renders these. Safe to remove once nothing references\n   them. */\n.ds-list { display: flex; flex-direction: column; gap: 8px; }\n.ds-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 14px 16px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n  cursor: pointer;\n}\n.ds-row:hover { border-color: var(--border-strong); }\n.ds-row.active { background: var(--accent-tint); border-color: var(--accent); }\n.ds-row-body { flex: 1; min-width: 0; }\n.ds-row-title {\n  font-weight: 500;\n  font-size: 14px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.ds-row-default {\n  font-size: 9px;\n  font-weight: 600;\n  letter-spacing: 0.06em;\n  padding: 2px 6px;\n  background: var(--accent-soft);\n  color: var(--accent);\n  border-radius: 4px;\n}\n.ds-row-summary { font-size: 12px; color: var(--text-muted); margin-top: 2px; }\n.ds-row-swatches {\n  display: inline-flex;\n  align-items: center;\n  gap: 0;\n  border-radius: 6px;\n  border: 1px solid var(--border);\n  overflow: hidden;\n  flex-shrink: 0;\n  height: 24px;\n}\n.ds-row-swatch {\n  display: block;\n  width: 16px;\n  height: 100%;\n}\n.ds-row-swatch + .ds-row-swatch { border-left: 1px solid rgba(0, 0, 0, 0.05); }\n\n@media (max-width: 900px) {\n  .entry {\n    grid-template-columns: 1fr !important;\n    height: 100%;\n    min-height: 0;\n  }\n  .entry-side {\n    width: 100% !important;\n    min-width: 0;\n    max-width: none;\n    border-right: none;\n    border-bottom: 1px solid var(--border);\n  }\n  .entry-side-resizer { display: none; }\n  .example-card { grid-template-columns: 1fr; }\n  .example-preview { height: 240px; }\n}\n\n/* ============================================================\n   File workspace — tabs + viewer\n   ============================================================ */\n.workspace {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  background: var(--bg);\n  flex: 1;\n}\n.ws-tabs-shell {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 10px;\n  border-bottom: 1px solid var(--border);\n  background: var(--bg-panel);\n  height: 44px;\n  position: sticky;\n  top: 0;\n  z-index: 4;\n}\n.ws-tabs-bar {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  overflow-x: auto;\n  overflow-y: hidden;\n  flex-wrap: nowrap;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n}\n\n.ws-tab {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: transparent;\n  border: none;\n  border-radius: var(--radius-sm);\n  font-size: 12.5px;\n  cursor: pointer;\n  flex-shrink: 0;\n  max-width: 220px;\n  color: var(--text-muted);\n  transition: background 120ms ease, color 120ms ease;\n}\n.ws-tab:hover { background: var(--bg-subtle); color: var(--text); }\n.ws-tab:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n.ws-tab.active {\n  background: var(--bg-subtle);\n  color: var(--text);\n  font-weight: 500;\n}\n.ws-tab .tab-icon {\n  font-size: 13px;\n  color: var(--text-muted);\n  width: 14px;\n  text-align: center;\n}\n.ws-tab.active .tab-icon { color: var(--text); }\n.ws-tab-label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 180px;\n}\n.ws-live-artifact-badges {\n  flex-wrap: nowrap;\n  max-width: 145px;\n  overflow: hidden;\n}\n.ws-live-artifact-badges .live-artifact-badge:not(.live):not(.refreshing):not(.refresh-failed):not(.archived) {\n  display: none;\n}\n.ws-tab-close {\n  border: none;\n  background: transparent;\n  padding: 0 2px;\n  font-size: 14px;\n  line-height: 1;\n  color: var(--text-faint);\n  border-radius: 4px;\n  margin-left: 2px;\n  width: 16px;\n  height: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.ws-tab-close:hover { background: var(--border); color: var(--text); }\n\n.ws-tab.design-files-tab {\n  font-weight: 500;\n  color: var(--text);\n}\n\n.ws-tabs-actions { display: inline-flex; gap: 4px; align-items: center; }\n.ws-focus-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  height: 28px;\n  padding: 0 10px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n  background: var(--bg);\n  color: var(--text-muted);\n  font-size: 12px;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n.ws-focus-toggle:hover {\n  background: var(--bg-subtle);\n  color: var(--text);\n  border-color: var(--border-strong);\n}\n.ws-focus-toggle:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n.ws-tab-action {\n  padding: 4px 12px;\n  font-size: 12.5px;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--radius-sm);\n  color: var(--text-muted);\n}\n.ws-tab-action:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); border-color: transparent; }\n.ws-tab-action.share {\n  background: var(--text);\n  color: var(--bg);\n  border-color: var(--text);\n  font-weight: 500;\n}\n.ws-tab-action.share:hover:not(:disabled) {\n  background: #000;\n  border-color: #000;\n}\n\n.ws-body {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n/* -------- Design Files panel (full right pane) ---------------------- */\n.df-panel {\n  flex: 1;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);\n  min-height: 0;\n  background: var(--bg);\n}\n.df-panel.no-preview { grid-template-columns: minmax(0, 1fr); }\n.df-main {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  background: var(--bg);\n  border-right: 1px solid var(--border);\n}\n.df-main:last-child { border-right: none; }\n.df-head {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--border);\n  background: var(--bg);\n  position: sticky;\n  top: 0;\n  z-index: 3;\n}\n.df-head .icon-only {\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  color: var(--text-muted);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.df-head .icon-only:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }\n.df-head .crumbs {\n  font-size: 12.5px;\n  color: var(--text);\n  margin-left: 4px;\n  font-weight: 500;\n}\n.df-head .df-actions {\n  margin-left: auto;\n  display: inline-flex;\n  gap: 4px;\n}\n.df-head .df-actions button {\n  background: transparent;\n  border: 1px solid transparent;\n  color: var(--text-muted);\n  padding: 5px 10px;\n  font-size: 12.5px;\n  border-radius: var(--radius-sm);\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n.df-head .df-actions button:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }\n\n.df-body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 12px 0 0;\n}\n.df-section { display: flex; flex-direction: column; gap: 0; }\n.df-section + .df-section { margin-top: 6px; }\n.df-section-label {\n  font-size: 10.5px;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--text-faint);\n  font-weight: 600;\n  padding: 12px 20px 6px;\n}\n.df-section-count {\n  margin-left: 8px;\n  color: var(--text-faint);\n  font-weight: 500;\n  letter-spacing: 0;\n}\n.df-row {\n  display: grid;\n  grid-template-columns: 28px 36px 1fr auto auto;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 20px;\n  background: transparent;\n  border: none;\n  border-radius: 0;\n  text-align: left;\n  cursor: pointer;\n  width: 100%;\n  font: inherit;\n  color: inherit;\n  position: relative;\n  transition: background 120ms ease;\n}\n.df-row:hover { background: var(--bg-subtle); }\n.df-row.active { background: var(--blue-bg); color: var(--text); }\n.df-row.active .df-row-name { color: var(--text-strong); }\n.df-row.selected { background: var(--blue-bg); }\n\n.df-row-check {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--text-muted);\n  user-select: none;\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  transition: background 120ms ease, color 120ms ease;\n}\n.df-row-check:hover { background: var(--border); color: var(--text); }\n.df-row-check[aria-checked=\"true\"] { color: var(--accent-strong); }\n\n.df-select-all {\n  background: none;\n  border: none;\n  color: var(--text-muted);\n  cursor: pointer;\n  font: inherit;\n  font-size: 11px;\n  font-weight: 500;\n  margin-left: auto;\n  padding: 2px 8px;\n  border-radius: 4px;\n  transition: background 120ms ease, color 120ms ease;\n}\n.df-select-all:hover { background: var(--bg-subtle); color: var(--text); }\n.df-row-icon {\n  width: 32px;\n  height: 32px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  border-radius: 6px;\n  background: var(--bg-subtle);\n  color: var(--text-muted);\n  font-size: 14px;\n  position: relative;\n}\n.df-row-icon[data-kind=\"folder\"] { background: var(--bg-muted); color: var(--text-soft); }\n.df-row-icon[data-kind=\"html\"] { background: var(--accent-tint); color: var(--accent-strong); }\n.df-row-icon[data-kind=\"image\"] { background: var(--green-bg); color: var(--green); }\n.df-row-icon[data-kind=\"code\"] { background: #fff7d8; color: #8c6700; }\n.df-row-icon[data-kind=\"text\"] { background: var(--bg-subtle); color: var(--text-muted); }\n.df-row-icon[data-kind=\"sketch\"] { background: var(--purple-bg); color: var(--purple); }\n.df-row-name-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n.df-row-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.df-row-sub {\n  font-size: 11px;\n  color: var(--text-muted);\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n.df-row-time {\n  font-size: 11.5px;\n  color: var(--text-muted);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.df-row-menu {\n  background: transparent;\n  border: none;\n  padding: 4px 6px;\n  color: var(--text-muted);\n  font-size: 16px;\n  border-radius: 4px;\n  opacity: 0;\n  transition: opacity 120ms ease;\n}\n.df-row:hover .df-row-menu { opacity: 1; }\n.df-row-menu:hover { background: var(--border); color: var(--text); }\n.df-section-more {\n  margin: 6px 20px 10px;\n  width: auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  color: var(--text-muted);\n  font-size: 12px;\n  line-height: 1;\n}\n.df-section-more:hover:not(:disabled) {\n  background: var(--bg-muted);\n  color: var(--text);\n}\n.df-row-collapse {\n  background: transparent;\n  border: none;\n  color: var(--text-muted);\n  padding: 0;\n  width: 18px;\n  text-align: center;\n  font-size: 12px;\n  cursor: pointer;\n}\n.df-empty {\n  padding: 48px 24px;\n  text-align: center;\n  color: var(--text-muted);\n  font-size: 13px;\n}\n\n.df-drop {\n  margin: 18px 16px 16px;\n  padding: 16px;\n  border: 1px dashed var(--border-strong);\n  border-radius: var(--radius);\n  background: var(--bg-panel);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n  text-align: center;\n  color: var(--text-muted);\n}\n.df-drop.dragging {\n  border-color: var(--accent);\n  background: color-mix(in srgb, var(--accent) 10%, var(--bg-panel));\n  color: var(--text);\n}\n.df-drop .label {\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.1em;\n  color: var(--text-faint);\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 600;\n}\n.df-drop .desc {\n  font-size: 12px;\n  line-height: 1.5;\n  max-width: 56ch;\n}\n\n/* Right preview pane in design files */\n.df-preview {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  background: var(--bg-panel);\n  border-left: 1px solid var(--border);\n}\n.df-preview-empty {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--text-faint);\n  font-size: 13px;\n  padding: 32px;\n}\n.df-preview-thumb {\n  margin: 16px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  background: var(--bg);\n  overflow: hidden;\n  aspect-ratio: 16/10;\n  flex-shrink: 0;\n  position: relative;\n}\n.df-preview-thumb iframe,\n.df-preview-thumb img,\n.df-preview-thumb video {\n  width: 100%; height: 100%; border: none; background: white; object-fit: cover; display: block;\n}\n.df-preview-thumb audio {\n  width: calc(100% - 24px);\n  position: absolute;\n  left: 12px;\n  bottom: 12px;\n}\n.df-preview-meta {\n  padding: 0 16px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.df-preview-name {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--text-strong);\n  word-break: break-word;\n}\n.df-preview-kind { font-size: 12px; color: var(--text-muted); }\n.df-preview-stats { font-size: 11.5px; color: var(--text-muted); }\n.df-preview-actions { display: inline-flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }\n.df-preview-actions button {\n  font-size: 12px;\n  padding: 5px 10px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  color: var(--text);\n  border-radius: var(--radius-sm);\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n.df-preview-actions button:hover { background: var(--bg-subtle); border-color: var(--border-strong); }\n\n/* Row context menu */\n.df-row-popover {\n  position: fixed;\n  z-index: 200;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n  padding: 4px;\n  min-width: 160px;\n  display: flex;\n  flex-direction: column;\n}\n.df-row-popover button {\n  background: transparent;\n  border: none;\n  padding: 7px 10px;\n  font-size: 12.5px;\n  text-align: left;\n  border-radius: 4px;\n  color: var(--text);\n}\n.df-row-popover button:hover { background: var(--bg-subtle); }\n.df-row-popover button.danger { color: var(--red); }\n.df-row-popover button.danger:hover { background: var(--red-bg); }\n\n/* -------- Viewer ---------------------------------------------------- */\n.viewer {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n.viewer-toolbar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 14px;\n  border-bottom: 1px solid var(--border);\n  background: var(--bg-panel);\n  font-size: 12.5px;\n  color: var(--text-muted);\n  gap: 8px;\n  height: 44px;\n  flex-shrink: 0;\n}\n.viewer-toolbar-left { display: inline-flex; align-items: center; gap: 8px; }\n.viewer-toolbar-actions { display: inline-flex; gap: 2px; align-items: center; }\n.viewer-toolbar .icon-only,\n.viewer-toolbar-actions .icon-only {\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  color: var(--text-muted);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n}\n.viewer-toolbar .icon-only:hover:not(:disabled),\n.viewer-toolbar-actions .icon-only:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }\n.viewer-action {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 10px;\n  background: transparent;\n  border: none;\n  border-radius: var(--radius-sm);\n  color: var(--text-muted);\n  font-size: 12.5px;\n  white-space: nowrap;\n}\n.viewer-action:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }\n.viewer-action.active {\n  background: var(--accent-tint);\n  color: var(--accent-strong);\n}\n.viewer-action.primary {\n  background: var(--accent);\n  border: 1px solid var(--accent);\n  color: white;\n}\n.viewer-action.primary:hover:not(:disabled) {\n  background: var(--accent-hover);\n  border-color: var(--accent-hover);\n  color: white;\n}\n/* Primary actions support a subtle in-flight affordance via data-running. Keeps\n   layout stable (unlike :disabled-only) so locale text width doesn't jump. */\n.viewer-action.primary[data-running='true'] {\n  opacity: 0.75;\n  cursor: progress;\n}\n/* Preview-only controls: keep layout stable across modes.\n   When inactive, reserve the same horizontal slot but fully disable interaction. */\n.viewer-preview-controls {\n  display: inline-flex;\n  gap: 2px;\n  align-items: center;\n  transition: opacity 140ms ease;\n}\n.viewer-preview-controls[data-active='false'] {\n  opacity: 0;\n  pointer-events: none;\n  user-select: none;\n}\n.viewer-zoom-level {\n  min-width: 60px;\n  justify-content: center;\n}\n.viewer-divider {\n  width: 1px;\n  height: 18px;\n  background: var(--border);\n  margin: 0 4px;\n}\n.viewer-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12.5px;\n  color: var(--text-muted);\n  padding: 4px 10px;\n  border-radius: var(--radius-sm);\n  white-space: nowrap;\n}\n.viewer-toggle .switch {\n  position: relative;\n  width: 28px;\n  height: 16px;\n  background: var(--bg-muted);\n  border-radius: 999px;\n  border: 1px solid var(--border-strong);\n  transition: background 120ms ease;\n}\n.viewer-toggle .switch::after {\n  content: '';\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  width: 12px; height: 12px;\n  background: var(--bg-panel);\n  border-radius: 50%;\n  transition: transform 120ms ease;\n  box-shadow: var(--shadow-xs);\n}\n.viewer-toggle.on .switch,\n.viewer-toggle.active .switch { background: var(--text); border-color: var(--text); }\n.viewer-toggle.on .switch::after,\n.viewer-toggle.active .switch::after { transform: translateX(12px); }\n.viewer-tabs { display: inline-flex; gap: 2px; }\n.viewer-tab {\n  background: transparent;\n  border: none;\n  padding: 4px 10px;\n  font-size: 12px;\n  border-radius: var(--radius-sm);\n  color: var(--text-muted);\n  white-space: nowrap;\n}\n.viewer-tab:hover { background: var(--bg-subtle); color: var(--text); }\n.viewer-tab.active {\n  background: var(--bg-subtle);\n  color: var(--text);\n  font-weight: 500;\n}\n.viewer-meta { font-size: 12px; color: var(--text-muted); }\n.ghost-link {\n  font-size: 12px;\n  color: var(--text-muted);\n  text-decoration: none;\n  padding: 4px 10px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n.ghost-link:hover { background: var(--bg-subtle); color: var(--text); }\n.viewer-body {\n  flex: 1;\n  min-height: 0;\n  position: relative;\n  background: var(--bg);\n  overflow: auto;\n}\n.live-artifact-refresh-notice {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 9px 14px;\n  border-bottom: 1px solid var(--border);\n  background: var(--bg-panel);\n  color: var(--text-muted);\n  font-size: 12.5px;\n}\n.live-artifact-refresh-notice-copy {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n}\n.live-artifact-refresh-notice strong {\n  color: var(--text);\n  font-weight: 600;\n}\n.live-artifact-refresh-notice .icon-only {\n  width: 24px;\n  height: 24px;\n  flex: 0 0 auto;\n  border: none;\n  border-radius: var(--radius-sm);\n  background: transparent;\n  color: inherit;\n  font-size: 16px;\n}\n.live-artifact-refresh-notice .icon-only:hover {\n  background: color-mix(in srgb, currentColor 12%, transparent);\n}\n.live-artifact-refresh-notice.running {\n  background: var(--bg-subtle);\n}\n.live-artifact-refresh-notice.success {\n  background: var(--green-bg);\n  border-color: var(--green-border);\n  color: var(--green);\n}\n.live-artifact-refresh-notice.error {\n  background: var(--red-bg);\n  border-color: var(--red-border);\n  color: var(--red);\n}\n.live-artifact-refresh-notice.success strong,\n.live-artifact-refresh-notice.error strong {\n  color: inherit;\n}\n\n.live-artifact-code-panel {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  background: var(--bg);\n}\n.live-artifact-code-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--border);\n  background: var(--bg-panel);\n}\n.live-artifact-code-copy {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n.live-artifact-code-copy strong {\n  font-size: 13px;\n  color: var(--text);\n}\n.live-artifact-code-copy span {\n  font-size: 12px;\n  color: var(--text-muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.live-artifact-code-tabs {\n  flex-shrink: 0;\n}\n.live-artifact-code-panel pre.viewer-source {\n  flex: 1 1 auto;\n  min-height: 0;\n}\n\n/* ============================================================\n   Live artifact — Refresh history panel\n   ============================================================ */\n.live-artifact-refresh-panel {\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  padding: 20px 22px 28px;\n  color: var(--text);\n  background: var(--bg);\n  min-height: 100%;\n}\n.live-artifact-refresh-hero {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 20px;\n  padding: 16px 18px;\n  border: 1px solid var(--border);\n  border-radius: 10px;\n  background: var(--bg-panel);\n  box-shadow: var(--shadow-xs, 0 1px 2px rgba(16, 24, 40, 0.04));\n}\n.live-artifact-refresh-hero-main {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 0;\n  flex: 1 1 auto;\n}\n.live-artifact-refresh-hero-desc {\n  margin: 0;\n  color: var(--text-muted);\n  font-size: 12.5px;\n  line-height: 1.5;\n}\n.live-artifact-refresh-hero-meta {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 6px;\n  flex: 0 0 auto;\n}\n.live-artifact-refresh-hero-metric {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 2px;\n  text-align: right;\n}\n.live-artifact-refresh-label {\n  font-size: 10.5px;\n  font-weight: 600;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--text-muted);\n}\n.live-artifact-refresh-value {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--text);\n  font-variant-numeric: tabular-nums;\n}\n.live-artifact-refresh-value.muted {\n  color: var(--text-muted);\n  font-weight: 500;\n}\n.live-artifact-refresh-sub {\n  font-size: 11.5px;\n  color: var(--text-muted);\n  font-variant-numeric: tabular-nums;\n}\n\n/* Refresh status badges reuse the .live-artifact-badge pill shape with tone mixins */\n.live-artifact-badge.refresh-status {\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n.live-artifact-badge.refresh-status.tone-neutral {\n  color: var(--text-muted);\n  border-color: var(--border);\n  background: var(--bg-panel);\n}\n.live-artifact-badge.refresh-status.tone-running {\n  color: #1d4ed8;\n  border-color: rgba(29, 78, 216, 0.22);\n  background: rgba(29, 78, 216, 0.08);\n}\n.live-artifact-badge.refresh-status.tone-success {\n  color: var(--green);\n  border-color: var(--green-border);\n  background: var(--green-bg);\n}\n.live-artifact-badge.refresh-status.tone-warning {\n  color: var(--amber);\n  border-color: color-mix(in srgb, var(--amber) 28%, transparent);\n  background: var(--amber-bg);\n}\n.live-artifact-badge.refresh-status.tone-error {\n  color: var(--red);\n  border-color: var(--red-border);\n  background: var(--red-bg);\n}\n\n.live-artifact-refresh-facts {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 10px;\n}\n.live-artifact-refresh-fact {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 12px 14px;\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  background: var(--bg-panel);\n  min-width: 0;\n}\n.live-artifact-refresh-fact .live-artifact-refresh-value {\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.live-artifact-refresh-section {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.live-artifact-refresh-section-header {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 12px;\n}\n.live-artifact-refresh-section-header h4 {\n  margin: 0;\n  font-size: 12.5px;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--text-muted);\n}\n.live-artifact-refresh-hint {\n  font-size: 11.5px;\n  color: var(--text-muted);\n}\n.live-artifact-refresh-empty {\n  padding: 16px 18px;\n  border: 1px dashed var(--border);\n  border-radius: 8px;\n  background: var(--bg-panel);\n  color: var(--text-muted);\n  font-size: 12.5px;\n  line-height: 1.5;\n}\n.live-artifact-refresh-empty em {\n  font-style: normal;\n  font-weight: 600;\n  color: var(--text);\n}\n\n.live-artifact-refresh-timeline {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  background: var(--bg-panel);\n  overflow: hidden;\n}\n.live-artifact-refresh-event {\n  display: grid;\n  grid-template-columns: 20px 1fr;\n  column-gap: 12px;\n  padding: 12px 14px;\n  border-bottom: 1px solid var(--border-soft, var(--border));\n  position: relative;\n}\n.live-artifact-refresh-event:last-child {\n  border-bottom: none;\n}\n.live-artifact-refresh-event-dot {\n  width: 10px;\n  height: 10px;\n  border-radius: 999px;\n  margin-top: 5px;\n  justify-self: center;\n  background: var(--border-strong);\n  box-shadow: 0 0 0 3px var(--bg-panel);\n}\n.live-artifact-refresh-event.tone-running .live-artifact-refresh-event-dot {\n  background: #1d4ed8;\n  animation: liveArtifactRefreshPulse 1.5s ease-in-out infinite;\n}\n.live-artifact-refresh-event.tone-success .live-artifact-refresh-event-dot {\n  background: var(--green);\n}\n.live-artifact-refresh-event.tone-error .live-artifact-refresh-event-dot {\n  background: var(--red);\n}\n@keyframes liveArtifactRefreshPulse {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50% { opacity: 0.55; transform: scale(0.85); }\n}\n.live-artifact-refresh-event-body {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n}\n.live-artifact-refresh-event-row {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n.live-artifact-refresh-event-time {\n  font-size: 11.5px;\n  color: var(--text-muted);\n  font-variant-numeric: tabular-nums;\n}\n.live-artifact-refresh-event-detail {\n  font-size: 12.5px;\n  color: var(--text);\n  line-height: 1.5;\n  word-break: break-word;\n}\n\n.live-artifact-refresh-tiles {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  background: var(--bg-panel);\n  overflow: hidden;\n}\n.live-artifact-refresh-tile {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  column-gap: 12px;\n  row-gap: 6px;\n  padding: 12px 14px;\n  border-bottom: 1px solid var(--border-soft, var(--border));\n  align-items: center;\n}\n.live-artifact-refresh-tile:last-child {\n  border-bottom: none;\n}\n.live-artifact-refresh-tile-main {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n.live-artifact-refresh-tile-title {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.live-artifact-refresh-tile-meta code {\n  font-size: 11px;\n  font-family: var(--mono);\n  color: var(--text-muted);\n  background: var(--bg-subtle);\n  padding: 1px 6px;\n  border-radius: 4px;\n}\n.live-artifact-refresh-tile-side {\n  display: inline-flex;\n  justify-self: end;\n}\n.live-artifact-refresh-tile-error {\n  grid-column: 1 / -1;\n  font-size: 11.5px;\n  color: var(--red);\n  background: var(--red-bg);\n  border: 1px solid var(--red-border);\n  border-radius: 6px;\n  padding: 6px 10px;\n  line-height: 1.5;\n  word-break: break-word;\n}\n.live-artifact-refresh-tile-error.neutral {\n  color: var(--text-muted);\n  background: var(--bg-subtle);\n  border-color: var(--border);\n}\n\n.live-artifact-refresh-kv {\n  margin: 0;\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 10px;\n  padding: 14px 16px;\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  background: var(--bg-panel);\n}\n.live-artifact-refresh-kv > div {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  min-width: 0;\n}\n.live-artifact-refresh-kv dt {\n  font-size: 10.5px;\n  font-weight: 600;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--text-muted);\n}\n.live-artifact-refresh-kv dd {\n  margin: 0;\n  font-size: 13px;\n  color: var(--text);\n  word-break: break-word;\n}\n.live-artifact-refresh-kv dd code {\n  font-family: var(--mono);\n  font-size: 12px;\n  background: var(--bg-subtle);\n  padding: 1px 6px;\n  border-radius: 4px;\n}\n\n.live-artifact-refresh-raw {\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  background: var(--bg-panel);\n  overflow: hidden;\n}\n.live-artifact-refresh-raw > summary {\n  cursor: pointer;\n  padding: 10px 14px;\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--text-muted);\n  user-select: none;\n  list-style: none;\n}\n.live-artifact-refresh-raw > summary::-webkit-details-marker { display: none; }\n.live-artifact-refresh-raw > summary::before {\n  content: '▸';\n  display: inline-block;\n  width: 1em;\n  transition: transform 120ms ease;\n  color: var(--text-faint);\n}\n.live-artifact-refresh-raw[open] > summary::before {\n  transform: rotate(90deg);\n}\n.live-artifact-refresh-raw > summary:hover {\n  background: var(--bg-subtle);\n}\n.live-artifact-refresh-raw-note {\n  margin: 0;\n  padding: 0 14px 10px;\n  color: var(--text-muted);\n  font-size: 11.5px;\n  line-height: 1.5;\n}\n.live-artifact-refresh-raw pre.viewer-source {\n  border-top: 1px solid var(--border);\n  min-height: 0;\n  max-height: 320px;\n  overflow: auto;\n}\n\n@media (max-width: 640px) {\n  .live-artifact-refresh-hero {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .live-artifact-refresh-hero-meta {\n    align-items: flex-start;\n  }\n  .live-artifact-refresh-hero-metric {\n    align-items: flex-start;\n    text-align: left;\n  }\n}\n.viewer-body iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n  background: white;\n}\n.comment-preview-layer {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n}\n.comment-frame-clip {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n.comment-overlay-layer {\n  position: absolute;\n  inset: 0;\n  z-index: 3;\n  pointer-events: none;\n}\n.board-pod-stroke {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  pointer-events: none;\n}\n.board-pod-stroke polyline {\n  fill: none;\n  stroke: rgba(22, 119, 255, 0.95);\n  stroke-width: 3;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  filter: drop-shadow(0 0 4px rgba(22, 119, 255, 0.28));\n}\n.comment-target-overlay {\n  position: absolute;\n  pointer-events: none;\n  border: 1px solid var(--comment-overlay-border, #1677ff);\n  background: var(--comment-overlay-bg, rgba(22, 119, 255, 0.24));\n  box-shadow: 0 0 0 1px var(--comment-overlay-ring, rgba(22, 119, 255, 0.18));\n}\n.comment-target-overlay.selected {\n  border-width: 2px;\n}\n.comment-target-overlay-label {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n.comment-saved-marker {\n  position: absolute;\n  pointer-events: none;\n}\n.comment-saved-outline {\n  position: absolute;\n  inset: 0;\n  border: 1px dashed rgba(22, 119, 255, 0.72);\n  background: rgba(22, 119, 255, 0.08);\n}\n.comment-saved-pin {\n  position: absolute;\n  z-index: 2;\n  left: -8px;\n  top: -8px;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border: 1px solid #0958d9;\n  border-radius: var(--radius-pill);\n  background: #1677ff;\n  color: white;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 16px;\n  box-shadow: var(--shadow-sm);\n  pointer-events: auto;\n}\n.comment-saved-pin:hover {\n  background: #0958d9;\n  transform: translateY(-1px);\n}\n.comment-popover {\n  position: absolute;\n  left: 14px;\n  top: 14px;\n  z-index: 4;\n  width: min(320px, calc(100% - 28px));\n  padding: 10px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  background: var(--bg-panel);\n  box-shadow: var(--shadow-lg);\n}\n.comment-popover-head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 10px;\n  margin-bottom: 8px;\n}\n.comment-popover-head div {\n  display: grid;\n  gap: 1px;\n}\n.comment-popover-head strong { font-size: 13px; }\n.comment-popover-head span {\n  color: var(--text-muted);\n  font-size: 12px;\n}\n.board-pod-summary {\n  display: grid;\n  gap: 6px;\n  margin-bottom: 8px;\n  padding: 8px;\n  border: 1px solid var(--border-soft);\n  border-radius: var(--radius-sm);\n  background: var(--bg-subtle);\n}\n.board-pod-summary strong {\n  font-size: 12px;\n}\n.board-pod-members {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n.board-pod-chip {\n  padding: 3px 7px;\n  border: 1px solid var(--border-soft);\n  border-radius: var(--radius-pill);\n  background: var(--bg-panel);\n  color: var(--text-muted);\n  font-size: 11px;\n}\n.board-note-list {\n  display: grid;\n  gap: 6px;\n  margin-bottom: 8px;\n}\n.board-note-item {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 10px;\n  padding: 8px 9px;\n  border: 1px solid var(--border-soft);\n  border-radius: var(--radius-sm);\n  background: var(--bg-subtle);\n  font-size: 12px;\n}\n.board-note-item span {\n  color: var(--text);\n}\n.comment-popover textarea {\n  min-height: 78px;\n  max-height: 120px;\n  resize: vertical;\n}\n.comment-popover-actions {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n  margin-top: 8px;\n}\n.comment-popover-remove {\n  color: var(--red);\n  background: transparent;\n  border-color: transparent;\n}\n.comment-popover-remove:hover:not(:disabled) {\n  background: var(--red-bg);\n  border-color: var(--red-border);\n}\n.comments-panel {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 14px;\n  overflow: auto;\n}\n.comments-section {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.comments-section h3 {\n  margin: 0;\n  color: var(--text-muted);\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n.comments-empty {\n  margin: 0;\n  padding: 10px 12px;\n  border: 1px dashed var(--border);\n  border-radius: var(--radius);\n  color: var(--text-faint);\n  font-size: 12px;\n}\n.comment-card {\n  display: grid;\n  gap: 5px;\n  padding: 9px 10px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  background: var(--bg-panel);\n  box-shadow: var(--shadow-xs);\n}\n.comment-card.attached {\n  border-color: var(--accent-soft);\n  background: var(--accent-tint);\n}\n.comment-card-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n  min-width: 0;\n}\n.comment-card-top strong {\n  min-width: 0;\n  overflow: hidden;\n  color: var(--accent-strong);\n  font-size: 13px;\n  font-weight: 700;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.comment-card-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  flex: 0 0 auto;\n}\n.comment-card p {\n  margin: 0;\n  color: var(--text);\n  font-size: 12.5px;\n  line-height: 1.35;\n  overflow-wrap: anywhere;\n}\n.comment-card-action {\n  flex: 0 0 auto;\n  padding: 3px 8px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius-pill);\n  background: var(--bg);\n  color: var(--text-muted);\n  font-size: 11.5px;\n}\n.comment-card-action:hover {\n  border-color: var(--accent-soft);\n  color: var(--accent-strong);\n}\n.comment-card-action.danger {\n  color: var(--red);\n}\n.comment-card-action.danger:hover {\n  border-color: var(--red-border);\n  background: var(--red-bg);\n}\n.comment-card-meta {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  color: var(--text-faint);\n  font-size: 11px;\n}\n.comment-card-meta span {\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.comment-card-meta span:not(:last-child)::after {\n  content: '·';\n  margin-left: 4px;\n  color: var(--text-faint);\n}\n.comments-footer {\n  display: flex;\n  justify-content: flex-start;\n  padding-top: 2px;\n}\n.comments-footer .primary {\n  padding: 6px 12px;\n  font-size: 12px;\n}\n.comment-history-attachments {\n  gap: 6px;\n}\n.viewer-source {\n  margin: 0;\n  padding: 16px;\n  font-family: var(--mono);\n  font-size: 12px;\n  line-height: 1.55;\n  white-space: pre-wrap;\n  word-break: break-word;\n  color: var(--text);\n  background: var(--bg-panel);\n  min-height: 100%;\n}\n\n/* Code viewer with line numbers */\n.code-viewer {\n  background: var(--bg-panel);\n  margin: 0;\n  padding: 0;\n  display: grid;\n  grid-template-columns: auto 1fr;\n  font-family: var(--mono);\n  font-size: 12px;\n  line-height: 1.6;\n  min-height: 100%;\n}\n.code-viewer .gutter {\n  background: var(--bg);\n  color: var(--text-faint);\n  text-align: right;\n  padding: 16px 12px 16px 16px;\n  user-select: none;\n  border-right: 1px solid var(--border-soft);\n  white-space: pre;\n  font-variant-numeric: tabular-nums;\n}\n.code-viewer .lines {\n  padding: 16px 16px 16px 18px;\n  white-space: pre;\n  overflow-x: auto;\n  color: var(--text);\n}\n\n.viewer-empty {\n  padding: 48px 24px;\n  text-align: center;\n  color: var(--text-muted);\n  font-size: 13px;\n}\n.document-preview {\n  max-width: 860px;\n  margin: 0 auto;\n  padding: 32px 40px 56px;\n  color: var(--text);\n}\n.document-preview h2 {\n  margin: 0 0 24px;\n  font-size: 20px;\n  line-height: 1.25;\n}\n.document-preview section {\n  border-top: 1px solid var(--border-soft);\n  padding-top: 18px;\n  margin-top: 18px;\n}\n.document-preview h3 {\n  margin: 0 0 12px;\n  font-size: 13px;\n  color: var(--text-muted);\n  font-weight: 600;\n}\n.document-preview p {\n  margin: 0 0 8px;\n  font-size: 14px;\n  line-height: 1.65;\n  white-space: pre-wrap;\n}\n.markdown-rendered {\n  max-width: 900px;\n  margin: 0 auto;\n  padding: 24px 28px 40px;\n  color: var(--text);\n  line-height: 1.65;\n  white-space: normal;\n}\n.markdown-status {\n  margin: 12px auto 0;\n  max-width: 900px;\n  padding: 8px 10px;\n  border: 1px solid var(--border-soft);\n  border-radius: 8px;\n  background: var(--bg-panel);\n  color: var(--text-muted);\n  font-size: 12px;\n}\n.markdown-status-error {\n  border-color: color-mix(in oklab, var(--danger, #d04b4b) 45%, var(--border-soft));\n  color: var(--danger, #d04b4b);\n}\n.markdown-rendered h1,\n.markdown-rendered h2,\n.markdown-rendered h3,\n.markdown-rendered h4,\n.markdown-rendered h5,\n.markdown-rendered h6 {\n  margin: 20px 0 10px;\n  line-height: 1.25;\n}\n.markdown-rendered p { margin: 10px 0; }\n.markdown-rendered ul,\n.markdown-rendered ol {\n  margin: 10px 0;\n  padding-left: 24px;\n}\n.markdown-rendered blockquote {\n  margin: 12px 0;\n  padding: 8px 12px;\n  border-left: 3px solid var(--border);\n  color: var(--text-muted);\n  background: var(--bg-panel);\n}\n.markdown-code-block {\n  position: relative;\n}\n.markdown-code-copy {\n  position: absolute;\n  top: 18px;\n  right: 18px;\n  z-index: 1;\n  border: 1px solid var(--border-soft);\n  border-radius: 999px;\n  background: color-mix(in oklab, var(--bg-panel) 92%, black 8%);\n  color: var(--text-muted);\n  font: inherit;\n  font-size: 11px;\n  font-weight: 600;\n  line-height: 1;\n  padding: 7px 10px;\n  cursor: pointer;\n  opacity: 0;\n  transform: translateY(-2px);\n  transition:\n    opacity 120ms ease,\n    transform 120ms ease,\n    color 120ms ease,\n    border-color 120ms ease,\n    background 120ms ease;\n}\n.markdown-code-block:hover .markdown-code-copy,\n.markdown-code-block:focus-within .markdown-code-copy {\n  opacity: 1;\n  transform: translateY(0);\n}\n@media (hover: none) {\n  .markdown-code-copy {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.markdown-code-copy:hover,\n.markdown-code-copy:focus-visible {\n  color: var(--text);\n  border-color: var(--border);\n  background: var(--bg-elevated, var(--bg));\n}\n.markdown-code-toast {\n  position: absolute;\n  top: 18px;\n  right: 82px;\n  z-index: 1;\n  border-radius: 999px;\n  background: color-mix(in oklab, var(--accent) 18%, var(--bg-panel));\n  color: var(--text);\n  font-size: 11px;\n  font-weight: 600;\n  line-height: 1;\n  padding: 7px 10px;\n  box-shadow: 0 10px 26px color-mix(in oklab, var(--accent) 18%, transparent);\n}\n.markdown-rendered pre {\n  margin: 12px 0;\n  background: var(--bg-panel);\n  border: 1px solid var(--border-soft);\n  border-radius: 8px;\n  padding: 40px 12px 12px;\n  overflow: auto;\n}\n.markdown-rendered code {\n  font-family: var(--mono);\n  font-size: 12px;\n}\n.markdown-rendered a { color: var(--accent); }\n.image-body {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n}\n.image-body img {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  background: white;\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n}\n\n/* Sketch editor */\n.sketch-editor {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  background: var(--bg);\n}\n.sketch-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--border);\n  background: var(--bg-panel);\n  flex-wrap: wrap;\n}\n.sketch-tool {\n  padding: 6px 10px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: 6px;\n  font-size: 14px;\n  line-height: 1;\n  min-width: 32px;\n}\n.sketch-tool:hover { background: var(--bg-subtle); }\n.sketch-tool.active { background: var(--accent); color: white; border-color: var(--accent); }\n.sketch-divider { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }\n.sketch-color { width: 32px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }\n.sketch-size { width: 80px; background: transparent; border: none; }\n.sketch-spacer { flex: 1; }\n.sketch-canvas-wrap { flex: 1; min-height: 0; position: relative; background: var(--bg); }\n.sketch-canvas-wrap canvas { display: block; cursor: crosshair; }\n\n/* ===========================================================\n   Streaming chat: assistant message header, prose, thinking,\n   tool cards, status pills, grouped action card.\n   =========================================================== */\n.chat-empty-wrap {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 18px;\n  padding: 24px 8px;\n  min-height: 100%;\n}\n.chat-empty {\n  color: var(--text-muted);\n  font-size: 13px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  gap: 6px;\n  max-width: 44ch;\n}\n.chat-empty-title { font-weight: 600; color: var(--text-strong); font-size: 15px; }\n.chat-empty-hint { line-height: 1.6; }\n\n.chat-examples {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: 100%;\n  max-width: 520px;\n}\n\n.chat-example {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n  padding: 14px 16px;\n  text-align: left;\n  cursor: pointer;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-xs);\n  color: var(--text);\n  font: inherit;\n  overflow: hidden;\n  transition:\n    transform 160ms ease,\n    border-color 160ms ease,\n    box-shadow 160ms ease,\n    background-color 160ms ease;\n  opacity: 0;\n  animation: chat-example-in 380ms cubic-bezier(0.22, 1, 0.36, 1) forwards;\n}\n.chat-example::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    135deg,\n    var(--accent-tint) 0%,\n    transparent 55%\n  );\n  opacity: 0;\n  transition: opacity 200ms ease;\n  pointer-events: none;\n}\n.chat-example:hover {\n  transform: translateY(-2px);\n  border-color: var(--accent);\n  box-shadow: var(--shadow-md);\n  background: var(--bg-panel);\n}\n.chat-example:hover::before {\n  opacity: 1;\n}\n.chat-example:active {\n  transform: translateY(0);\n}\n.chat-example:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 2px;\n}\n\n.chat-example-icon {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n  border-radius: var(--radius-sm);\n  background: var(--accent);\n  color: #fff;\n  font-size: 18px;\n  line-height: 1;\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.08);\n}\n.chat-example-body {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  min-width: 0;\n  flex: 1;\n}\n.chat-example-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.chat-example-title {\n  font-weight: 600;\n  color: var(--text-strong);\n  font-size: 13.5px;\n}\n.chat-example-tag {\n  font-family: var(--mono);\n  font-size: 10.5px;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--accent);\n  background: var(--accent-tint);\n  border: 1px solid var(--accent-soft);\n  padding: 1px 7px;\n  border-radius: var(--radius-pill);\n  line-height: 1.5;\n  white-space: nowrap;\n}\n.chat-example-prompt {\n  color: var(--text-muted);\n  font-size: 12.5px;\n  line-height: 1.5;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n.chat-example-cta {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n  border-radius: 50%;\n  background: var(--bg-subtle);\n  color: var(--text-muted);\n  font-size: 13px;\n  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;\n}\n.chat-example:hover .chat-example-cta {\n  background: var(--accent);\n  color: #fff;\n  transform: translateX(2px);\n}\n\n@keyframes chat-example-in {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.assistant-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 11.5px;\n  color: var(--text-muted);\n  margin-bottom: 8px;\n}\n.assistant-header .dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--text-muted);\n}\n.assistant-header .dot[data-active=\"true\"] {\n  background: var(--accent);\n  animation: pulse 1.2s ease-in-out infinite;\n}\n.assistant-label { font-weight: 600; color: var(--text-strong); font-size: 12.5px; }\n.assistant-stats { font-variant-numeric: tabular-nums; margin-left: auto; }\n\n.assistant-flow {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.prose-block { line-height: 1.6; color: var(--text); }\n.prose-block .md-p { margin: 0; }\n.prose-block .md-p + .md-p { margin-top: 8px; }\n.prose-block .md-h { margin: 10px 0 4px; line-height: 1.3; font-weight: 600; }\n.prose-block .md-h1 { font-size: 18px; }\n.prose-block .md-h2 { font-size: 16px; }\n.prose-block .md-h3 { font-size: 14px; }\n.prose-block .md-h4 { font-size: 13px; }\n.prose-block .md-ul, .prose-block .md-ol { margin: 4px 0; padding-left: 20px; }\n.prose-block .md-ul li, .prose-block .md-ol li { margin: 2px 0; }\n.prose-block .md-inline-code {\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  border-radius: 4px;\n  padding: 1px 5px;\n  font-family: var(--mono);\n  font-size: 0.92em;\n}\n.prose-block .md-code {\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n  padding: 10px 12px;\n  margin: 6px 0;\n  overflow-x: auto;\n  font-size: 12px;\n  line-height: 1.5;\n}\n.prose-block .md-code code { font-family: var(--mono); }\n.prose-block .md-link { color: var(--accent); text-decoration: underline; }\n.prose-block .md-hr {\n  border: none;\n  border-top: 1px solid var(--border);\n  margin: 10px 0;\n}\n.op-waiting {\n  font-size: 12px;\n  color: var(--text-muted);\n  font-style: italic;\n}\n\n/* Thinking blocks */\n.thinking-block {\n  background: rgba(108, 58, 166, 0.04);\n  border: 1px solid rgba(108, 58, 166, 0.16);\n  border-radius: var(--radius-sm);\n}\n.thinking-toggle {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  padding: 7px 12px;\n  background: transparent;\n  border: none;\n  text-align: left;\n  font-size: 12px;\n  color: var(--text);\n  border-radius: var(--radius-sm);\n}\n.thinking-toggle:hover { background: rgba(108, 58, 166, 0.05); border-color: transparent; }\n.thinking-icon { color: var(--purple); }\n.thinking-label { font-weight: 500; }\n.thinking-preview {\n  flex: 1;\n  color: var(--text-muted);\n  font-style: italic;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.thinking-chev { color: var(--text-muted); font-size: 10px; }\n.thinking-body {\n  margin: 0;\n  padding: 0 14px 12px 14px;\n  font-family: var(--mono);\n  font-size: 11px;\n  line-height: 1.55;\n  color: var(--text-muted);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n\n/* Status pills */\n.status-pill {\n  display: inline-flex;\n  align-self: flex-start;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 12px;\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-pill);\n  font-size: 11.5px;\n  color: var(--text-muted);\n}\n.status-label { letter-spacing: 0.02em; }\n.status-detail { color: var(--text); }\n\n/* Grouped tool / action card — the collapsible pill from screenshot 9 */\n.action-card {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  background: var(--bg-panel);\n  overflow: hidden;\n}\n.action-card-toggle {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  padding: 8px 12px;\n  background: transparent;\n  border: none;\n  text-align: left;\n  font-size: 12.5px;\n  color: var(--text);\n  cursor: pointer;\n  border-radius: var(--radius);\n}\n.action-card-toggle:hover { background: var(--bg-subtle); border-color: transparent; }\n.action-card-toggle .ico {\n  width: 20px; height: 20px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  background: var(--bg-subtle);\n  color: var(--text-muted);\n  font-size: 12px;\n  font-family: var(--mono);\n  flex-shrink: 0;\n}\n.action-card-toggle .summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.action-card-toggle .summary strong { font-weight: 500; }\n.action-card-toggle .chev { color: var(--text-faint); font-size: 10px; flex-shrink: 0; }\n.action-card-toggle.running .ico { animation: pulse 1.6s ease-in-out infinite; background: var(--purple-bg); color: var(--purple); }\n.action-card-body {\n  padding: 0 12px 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  border-top: 1px solid var(--border-soft);\n}\n.action-card-body > .op-card { border-color: transparent; box-shadow: none; padding: 4px 0; }\n.action-card-body > .op-card .op-card-head { padding: 6px 0; }\n\n/* Tool / operation cards — single, ungrouped */\n.op-card {\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  background: var(--bg-panel);\n  overflow: hidden;\n  box-shadow: var(--shadow-xs);\n  min-width: 0;\n  max-width: 100%;\n}\n.op-card-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  font-size: 12.5px;\n  flex-wrap: wrap;\n}\n.op-icon {\n  width: 22px;\n  height: 22px;\n  border-radius: 6px;\n  background: var(--bg-subtle);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--text-muted);\n  font-size: 12px;\n  font-family: var(--mono);\n  flex-shrink: 0;\n}\n.op-icon-write { background: var(--green-bg); color: var(--green); }\n.op-icon-edit  { background: var(--amber-bg); color: var(--amber); }\n.op-icon-read  { background: var(--blue-bg); color: var(--blue); }\n.op-title { font-weight: 500; }\n.op-meta { color: var(--text-muted); font-size: 11.5px; }\n.op-desc { font-style: italic; }\n.op-path {\n  background: var(--bg-subtle);\n  padding: 1px 6px;\n  border-radius: 4px;\n  font-size: 11px;\n  font-family: var(--mono);\n  color: var(--text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: min(220px, 100%);\n}\n.op-status {\n  margin-left: auto;\n  font-size: 10.5px;\n  padding: 2px 9px;\n  border-radius: var(--radius-pill);\n  letter-spacing: 0.02em;\n  border: 1px solid var(--border);\n  color: var(--text-muted);\n  background: var(--bg-subtle);\n}\n.op-status-running {\n  border-color: var(--purple-border);\n  background: var(--purple-bg);\n  color: var(--purple);\n  animation: pulse 1.6s ease-in-out infinite;\n}\n.op-status-ok { border-color: var(--green-border); background: var(--green-bg); color: var(--green); }\n.op-status-error { border-color: var(--red-border); background: var(--red-bg); color: var(--red); }\n.op-toggle {\n  font-size: 10.5px;\n  padding: 2px 8px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius-pill);\n  background: transparent;\n  color: var(--text-muted);\n}\n.op-open {\n  font-size: 10.5px;\n  padding: 2px 9px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius-pill);\n  background: transparent;\n  color: var(--text);\n  cursor: pointer;\n}\n.op-open:hover {\n  background: var(--bg-subtle);\n  border-color: var(--accent);\n  color: var(--accent);\n}\n\n.produced-files {\n  margin-top: 4px;\n  padding: 12px 14px;\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n}\n.produced-files-label {\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--text-muted);\n  margin-bottom: 8px;\n  font-weight: 600;\n}\n.produced-files-list { display: flex; flex-direction: column; gap: 4px; }\n.produced-file {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: 6px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  font-size: 12px;\n}\n.produced-file-icon { width: 22px; text-align: center; color: var(--text-muted); }\n.produced-file-name {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-family: var(--mono);\n}\n.produced-file-size {\n  font-size: 10.5px;\n  color: var(--text-muted);\n  font-variant-numeric: tabular-nums;\n}\n.produced-file-actions { display: flex; gap: 6px; }\n.produced-file-actions .ghost,\n.produced-file-actions .ghost-link {\n  font-size: 11px;\n  padding: 3px 9px;\n}\n\n.op-bash .op-command,\n.op-bash .op-output {\n  margin: 0;\n  padding: 8px 12px;\n  background: #1c1b1a;\n  color: #f0eee9;\n  font-family: var(--mono);\n  font-size: 11px;\n  line-height: 1.55;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  max-height: 220px;\n  overflow-y: auto;\n}\n.op-bash .op-output { background: #2a2926; }\n\n.op-todo .todo-list {\n  list-style: none;\n  margin: 0;\n  padding: 6px 8px 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  font-size: 12px;\n}\n.todo-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 5px 8px;\n  line-height: 1.45;\n  border-radius: var(--radius-sm);\n  border: 1px solid transparent;\n  transition: background-color 120ms ease, border-color 120ms ease;\n}\n.todo-check {\n  width: 16px;\n  flex-shrink: 0;\n  color: var(--text-soft);\n  font-family: var(--mono);\n  text-align: center;\n  line-height: 1.45;\n}\n.todo-text { color: var(--text); }\n\n/* Pending — quietly waiting */\n.todo-pending .todo-check { color: var(--text-faint); }\n.todo-pending .todo-text { color: var(--text-muted); }\n\n/* In progress — the only row that should pop */\n.todo-in_progress {\n  background: color-mix(in srgb, var(--accent) 10%, var(--bg-panel));\n  border-color: color-mix(in srgb, var(--accent) 28%, transparent);\n}\n.todo-in_progress .todo-check { color: var(--accent); }\n.todo-in_progress .todo-text { color: var(--text-strong); font-weight: 600; }\n\n/* Completed — settled, but still readable */\n.todo-completed .todo-check { color: var(--green); }\n.todo-completed .todo-text {\n  text-decoration: line-through;\n  text-decoration-color: color-mix(in srgb, var(--text-muted) 60%, transparent);\n  color: var(--text-muted);\n}\n\n/* Composer extras */\n.composer.drag-active {\n  outline: 2px dashed var(--accent);\n  outline-offset: -4px;\n}\n\n/* Present / Share menus */\n.present-wrap { position: relative; display: inline-block; }\n.present-trigger .caret {\n  margin-left: 4px;\n  font-size: 10px;\n  opacity: 0.7;\n}\n.present-menu {\n  position: absolute;\n  top: calc(100% + 6px);\n  right: 0;\n  z-index: 60;\n  min-width: 168px;\n  padding: 4px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-md);\n  display: flex;\n  flex-direction: column;\n}\n.present-menu button {\n  background: transparent;\n  border: none;\n  padding: 8px 10px;\n  font-size: 12px;\n  text-align: left;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  color: var(--text);\n}\n.present-menu button:hover { background: var(--bg-subtle); border-color: transparent; }\n.present-icon {\n  display: inline-flex;\n  width: 14px;\n  justify-content: center;\n  color: var(--text-muted);\n  font-size: 12px;\n}\n\n.share-menu { position: relative; display: inline-block; }\n.share-menu-popover {\n  position: absolute;\n  top: calc(100% + 6px);\n  right: 0;\n  z-index: 50;\n  min-width: 240px;\n  padding: 4px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-md);\n  display: flex;\n  flex-direction: column;\n}\n.share-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  font-size: 12.5px;\n  text-align: left;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--text);\n}\n.share-menu-item:hover:not(:disabled) {\n  background: var(--bg-subtle);\n  border-color: transparent;\n}\n.share-menu-item:disabled { opacity: 0.45; cursor: not-allowed; }\n.share-menu-icon { flex: 0 0 auto; width: 18px; text-align: center; font-size: 13px; }\n.share-menu-divider { height: 1px; background: var(--border); margin: 4px 6px; }\n\n.button-like {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 36px;\n  padding: 0 14px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  background: var(--bg-panel);\n  color: var(--text);\n  text-decoration: none;\n  cursor: pointer;\n}\n.button-like:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.deploy-modal {\n  width: min(760px, calc(100vw - 32px));\n  max-height: calc(100vh - 32px);\n  overflow: auto;\n}\n.deploy-form {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  margin-top: 18px;\n}\n.field-label-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 16px;\n}\n.field-label-row a {\n  color: var(--accent);\n  font-size: 13px;\n  white-space: nowrap;\n}\n.field-label-group {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.field-label-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11.5px;\n  color: var(--text-muted);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: color 120ms ease;\n}\n.field-label-link:hover {\n  color: var(--accent);\n}\n.field-label-link svg {\n  opacity: 0.75;\n  transition: transform 120ms ease, opacity 120ms ease;\n}\n.field-label-link:hover svg {\n  opacity: 1;\n  transform: translate(1px, -1px);\n}\n.field-status-badge {\n  display: inline-flex;\n  align-items: center;\n  font-size: 10.5px;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  padding: 2px 7px;\n  border-radius: var(--radius-pill);\n  color: #137a3d;\n  background: color-mix(in srgb, #1f9d55 10%, transparent);\n  border: 1px solid color-mix(in srgb, #1f9d55 28%, var(--border));\n  font-variant-numeric: tabular-nums;\n}\n.deploy-form input {\n  width: 100%;\n  min-height: 44px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  padding: 0 12px;\n  background: var(--bg-panel);\n  color: var(--text);\n  font: inherit;\n}\n.deploy-config-actions {\n  display: flex;\n  justify-content: flex-end;\n}\n.deploy-field-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n}\n.deploy-field-grid label {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.deploy-error {\n  margin: 0;\n  color: var(--red);\n}\n.deploy-result {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 14px;\n  border-radius: var(--radius-lg);\n}\n.deploy-result.ready {\n  border: 1px solid color-mix(in srgb, var(--green) 35%, var(--border));\n  background: color-mix(in srgb, var(--green) 10%, var(--bg-panel));\n}\n.deploy-result.delayed {\n  border: 1px solid color-mix(in srgb, #b7791f 42%, var(--border));\n  background: color-mix(in srgb, #b7791f 10%, var(--bg-panel));\n}\n.deploy-result.protected {\n  border: 1px solid color-mix(in srgb, #c96442 48%, var(--border));\n  background: color-mix(in srgb, #c96442 10%, var(--bg-panel));\n}\n.deploy-result-label {\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--green);\n}\n.deploy-result.delayed .deploy-result-label {\n  color: #9a5b12;\n}\n.deploy-result.protected .deploy-result-label {\n  color: #a34828;\n}\n.deploy-result-message {\n  margin: 0;\n  color: var(--muted);\n}\n.deploy-result a {\n  overflow-wrap: anywhere;\n}\n.deploy-result-actions {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 10px;\n}\n.ghost-link.disabled,\n.ghost-link[aria-disabled='true'] {\n  opacity: 0.45;\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n.present-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 1000;\n  background: black;\n  display: flex;\n}\n.present-overlay iframe {\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  border: none;\n  background: white;\n}\n.present-exit {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  z-index: 1001;\n  padding: 6px 12px;\n  font-size: 12px;\n  background: rgba(255, 255, 255, 0.92);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n  cursor: pointer;\n}\n.present-exit:hover { background: white; }\n\n/* Picker (legacy in some surfaces) */\n.picker {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 6px 2px 10px;\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n}\n.picker-label {\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--text-muted);\n}\n.picker select {\n  border: none;\n  background: transparent;\n  padding: 4px 6px;\n  width: auto;\n  min-width: 120px;\n  box-shadow: none;\n}\n.picker select:focus { outline: none; box-shadow: none; }\n.picker.agent-picker select { min-width: 140px; }\n.picker.agent-picker .icon-btn {\n  padding: 2px 8px;\n  background: transparent;\n  border: none;\n}\n\n/* Preview pane (legacy single-iframe path; kept for fallbacks) */\n.preview {\n  display: flex;\n  flex-direction: column;\n  background: var(--bg-subtle);\n  min-height: 0;\n}\n.preview-header {\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--border);\n  background: var(--bg-panel);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 12px;\n  color: var(--text-muted);\n}\n.preview-title {\n  display: flex; align-items: center; gap: 10px; min-width: 0;\n}\n.preview-actions { display: flex; gap: 8px; align-items: center; }\n.preview-actions .muted { font-size: 11px; }\n.preview-actions button { padding: 4px 10px; font-size: 12px; }\n.preview-body { flex: 1; min-height: 0; position: relative; }\n.preview-body iframe {\n  width: 100%; height: 100%; border: none; background: white;\n}\n.preview-empty {\n  display: flex; align-items: center; justify-content: center;\n  height: 100%;\n  color: var(--text-muted);\n  padding: 24px;\n  text-align: center;\n  font-size: 13px;\n}\n\n/* ============================================================\n   Merged from main — persistence-era additions: editable project\n   title, conversations dropdown, examples filters + preview modal,\n   question form, design-system modal, system reminder collapse,\n   operations todo card.\n   ============================================================ */\n\n/* Editable project title (inline rename in topbar) */\n.topbar-title .title.editable,\n.app-project-title .title.editable {\n  outline: none;\n  border-radius: 4px;\n  padding: 1px 4px;\n  margin: -1px -4px;\n}\n.topbar-title .title.editable:focus,\n.app-project-title .title.editable:focus {\n  background: var(--bg-subtle);\n  box-shadow: 0 0 0 1px var(--accent);\n}\n\n/* Conversations dropdown — pill in the project topbar */\n.conv-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 10px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  background: var(--bg-panel);\n  font: inherit;\n  font-size: 12px;\n  color: inherit;\n  cursor: pointer;\n  user-select: none;\n  max-width: 220px;\n}\n.conv-pill:hover { background: var(--bg-subtle); }\n.conv-pill.open { background: var(--bg-subtle); border-color: var(--accent); }\n.conv-pill-icon { font-size: 13px; line-height: 1; }\n.conv-pill-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.conv-pill-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 6px;\n  border-radius: 9px;\n  background: var(--bg-subtle);\n  color: var(--text-muted);\n  font-size: 10px;\n}\n.conv-menu {\n  position: fixed;\n  width: 320px;\n  max-height: 420px;\n  overflow-y: auto;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n  z-index: 200;\n  padding: 8px;\n}\n.conv-menu-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 4px 6px 8px;\n  border-bottom: 1px solid var(--border);\n  margin-bottom: 6px;\n  font-size: 11px;\n  color: var(--text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n.conv-add-btn { padding: 2px 8px; font-size: 11px; }\n.conv-menu-empty {\n  padding: 16px 8px;\n  font-size: 12px;\n  color: var(--text-muted);\n  text-align: center;\n}\n.conv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }\n.conv-item {\n  display: flex;\n  align-items: stretch;\n  gap: 4px;\n  border-radius: 6px;\n}\n.conv-item.active { background: var(--bg-subtle); }\n.conv-item-button {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 6px 8px;\n  border: none;\n  background: transparent;\n  text-align: left;\n  border-radius: 6px;\n  cursor: pointer;\n}\n.conv-item-button:hover { background: var(--bg-subtle); }\n.conv-item-name {\n  font-size: 12px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.conv-item-meta {\n  font-size: 10px;\n  color: var(--text-muted);\n}\n.conv-item-del {\n  border: none;\n  background: transparent;\n  color: var(--text-muted);\n  font-size: 16px;\n  width: 24px;\n  cursor: pointer;\n  border-radius: 6px;\n}\n.conv-item-del:hover { background: var(--bg-subtle); color: var(--text); }\n.conv-rename-input {\n  flex: 1;\n  border: 1px solid var(--accent);\n  border-radius: 6px;\n  background: var(--bg-panel);\n  padding: 6px 8px;\n  font: inherit;\n  font-size: 12px;\n}\n\n/* Collapsible system-reminder block in chat */\n.system-reminder-block {\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  margin: 6px 0;\n}\n.system-reminder-toggle {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  padding: 6px 10px;\n  background: transparent;\n  border: none;\n  text-align: left;\n  font-size: 12px;\n  color: var(--text-muted);\n}\n.system-reminder-toggle:hover { background: rgba(0, 0, 0, 0.03); }\n.system-reminder-icon { color: var(--text-muted); }\n.system-reminder-label { font-weight: 500; color: var(--text); }\n.system-reminder-preview {\n  flex: 1;\n  color: var(--text-muted);\n  font-style: italic;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.system-reminder-chev { color: var(--text-muted); font-size: 10px; }\n.system-reminder-body {\n  margin: 0;\n  padding: 0 12px 10px 12px;\n  font-family: var(--mono);\n  font-size: 11px;\n  line-height: 1.5;\n  color: var(--text-muted);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n\n/* Waiting-on-input pill (richer than the simple italic version above). */\n.op-waiting {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  background: var(--bg-subtle);\n  font-size: 12px;\n  color: var(--text-muted);\n  font-style: normal;\n}\n.op-waiting-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 999px;\n  background: var(--accent);\n  flex-shrink: 0;\n  animation: pulse 1.4s ease-in-out infinite;\n}\n.op-waiting-label {\n  font-weight: 500;\n  color: var(--text);\n}\n.op-waiting-detail {\n  font-family: var(--mono);\n  font-size: 11px;\n  background: var(--bg-panel);\n  padding: 1px 6px;\n  border-radius: 4px;\n  color: var(--text-muted);\n}\n.op-waiting-hint {\n  flex-basis: 100%;\n  font-size: 11px;\n  color: var(--text-soft);\n  font-style: italic;\n}\n\n/* op-todo card variant (the .op-todo .todo-list rule already exists above) */\n.op-todo {\n  border-color: var(--accent-soft);\n  background: linear-gradient(180deg, var(--accent-tint) 0%, var(--bg-panel) 60%);\n}\n.op-todo .op-card-head {\n  border-bottom: 1px solid color-mix(in srgb, var(--accent-soft) 70%, transparent);\n  background: transparent;\n}\n.op-todo .op-icon {\n  background: var(--accent-soft);\n  color: var(--accent);\n}\n.op-todo .op-title {\n  letter-spacing: 0.02em;\n  text-transform: uppercase;\n  font-size: 11px;\n  color: var(--text-strong);\n}\n.op-todo .op-meta {\n  margin-left: auto;\n  font-variant-numeric: tabular-nums;\n  font-size: 11px;\n  color: var(--text-strong);\n}\n\n/* Question form — interactive form a planning agent can post into chat */\n.question-form {\n  margin: 8px 0;\n  border: 1px solid var(--border);\n  border-radius: var(--radius-lg);\n  background: var(--bg-panel);\n  box-shadow: var(--shadow-md);\n  overflow: hidden;\n}\n.question-form-locked {\n  background: var(--bg-subtle);\n  box-shadow: none;\n  opacity: 0.92;\n}\n.question-form-head {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 14px;\n  border-bottom: 1px solid var(--border);\n  background: linear-gradient(180deg, var(--accent-tint) 0%, var(--bg-panel) 100%);\n}\n.question-form-locked .question-form-head {\n  background: var(--bg-subtle);\n}\n.question-form-icon {\n  width: 28px;\n  height: 28px;\n  border-radius: 999px;\n  background: var(--accent);\n  color: white;\n  font-weight: 600;\n  font-size: 14px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.question-form-titles {\n  flex: 1;\n  min-width: 0;\n}\n.question-form-title {\n  font-size: 14px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  color: var(--text);\n}\n.question-form-desc {\n  margin-top: 2px;\n  font-size: 12px;\n  color: var(--text-muted);\n  line-height: 1.45;\n}\n.question-form-pill {\n  font-size: 10px;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  padding: 3px 8px;\n  border-radius: 999px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  color: var(--text-muted);\n}\n.question-form-body {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  padding: 14px;\n}\n.qf-field { display: flex; flex-direction: column; gap: 6px; }\n.qf-label {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--text);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.qf-required { color: var(--accent); }\n.qf-help { font-size: 11px; color: var(--text-muted); margin-top: -2px; }\n.qf-options {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n.qf-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border: 1px solid var(--border);\n  border-radius: 999px;\n  background: var(--bg-panel);\n  font-size: 12px;\n  cursor: pointer;\n  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;\n}\n.qf-chip input { width: auto; margin: 0; display: none; }\n.qf-chip:hover { border-color: var(--border-strong); }\n.qf-chip-disabled {\n  cursor: not-allowed;\n  opacity: 0.48;\n}\n.qf-chip-disabled:hover { border-color: var(--border); }\n.qf-chip-on {\n  border-color: var(--accent);\n  background: var(--accent-soft);\n  color: var(--accent-hover);\n  font-weight: 500;\n}\n.question-form-locked .qf-chip { cursor: not-allowed; }\n.qf-input,\n.qf-select,\n.qf-textarea {\n  font-size: 13px;\n}\n.question-form-foot {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 14px;\n  border-top: 1px solid var(--border);\n  background: var(--bg-subtle);\n}\n.qf-hint,\n.qf-locked-note {\n  flex: 1;\n  font-size: 11px;\n  color: var(--text-muted);\n  line-height: 1.4;\n}\n\n/* Direction-cards picker — used by the second discovery form when the user\n   selects \"Pick a direction for me\". Each card carries a palette swatch\n   row, a serif/sans type sample, a mood blurb, and a real-world refs\n   line so the user can scan visually instead of squinting at radio labels. */\n.qf-direction-cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n  gap: 10px;\n  margin-top: 4px;\n}\n.qf-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 14px;\n  background: var(--bg);\n  border: 1px solid var(--border);\n  border-radius: 10px;\n  cursor: pointer;\n  transition:\n    border-color 0.12s ease,\n    background 0.12s ease,\n    transform 0.06s ease;\n}\n.qf-card input { display: none; }\n.qf-card:hover { border-color: var(--border-strong); }\n.qf-card:active { transform: translateY(1px); }\n.qf-card-on {\n  border-color: var(--accent, #c96442);\n  background: color-mix(in oklch, var(--accent, #c96442) 4%, var(--bg));\n  box-shadow: 0 0 0 1px var(--accent, #c96442) inset;\n}\n.qf-card-disabled { cursor: not-allowed; opacity: 0.6; }\n.qf-card-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n.qf-card-title {\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: -0.005em;\n  color: var(--text);\n  line-height: 1.3;\n}\n.qf-card-pill {\n  font-family: ui-monospace, 'JetBrains Mono', monospace;\n  font-size: 9px;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  padding: 2px 6px;\n  background: var(--accent, #c96442);\n  color: #fff;\n  border-radius: 999px;\n  flex-shrink: 0;\n}\n.qf-card-swatches {\n  display: flex;\n  gap: 4px;\n  height: 18px;\n}\n.qf-card-swatch {\n  flex: 1;\n  border-radius: 3px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  min-width: 0;\n}\n.qf-card-types {\n  display: flex;\n  align-items: baseline;\n  gap: 12px;\n  padding: 6px 0;\n  border-top: 1px solid var(--border);\n  border-bottom: 1px solid var(--border);\n}\n.qf-card-type-display {\n  font-size: 28px;\n  line-height: 1;\n  letter-spacing: -0.02em;\n  color: var(--text);\n  flex-shrink: 0;\n}\n.qf-card-type-body {\n  font-size: 12px;\n  color: var(--text-muted);\n  line-height: 1.3;\n  letter-spacing: -0.005em;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.qf-card-mood {\n  margin: 0;\n  font-size: 12px;\n  line-height: 1.45;\n  color: var(--text-muted);\n}\n.qf-card-refs {\n  margin: 0;\n  font-size: 11px;\n  color: var(--text-muted);\n  line-height: 1.4;\n}\n.qf-card-refs-label {\n  font-family: ui-monospace, 'JetBrains Mono', monospace;\n  font-size: 10px;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--text-muted);\n  opacity: 0.7;\n}\n\n/* Design-system preview modal */\n.ds-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 900;\n  background: rgba(28, 27, 26, 0.42);\n  backdrop-filter: blur(2px);\n  display: flex;\n  align-items: stretch;\n  justify-content: center;\n  padding: 32px;\n}\n.ds-modal {\n  width: 100%;\n  max-width: 1320px;\n  background: var(--bg);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-lg);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n}\n.ds-modal-fullscreen {\n  max-width: none;\n  border-radius: 0;\n}\n.ds-modal-header {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n  gap: 16px;\n  padding: 14px 18px;\n  border-bottom: 1px solid var(--border);\n  background: var(--bg-panel);\n}\n.ds-modal-title-block {\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.ds-modal-title {\n  font-size: 15px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ds-modal-subtitle {\n  font-size: 12px;\n  color: var(--text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 60ch;\n}\n.ds-modal-tabs {\n  display: inline-flex;\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  border-radius: 999px;\n  padding: 3px;\n  gap: 2px;\n}\n.ds-modal-tab {\n  background: transparent;\n  border: none;\n  border-radius: 999px;\n  padding: 6px 16px;\n  font-size: 12.5px;\n  font-weight: 500;\n  color: var(--text-muted);\n  cursor: pointer;\n}\n.ds-modal-tab:hover { color: var(--text); }\n.ds-modal-tab.active {\n  background: var(--bg-panel);\n  color: var(--text);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);\n}\n.ds-modal-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  justify-content: flex-end;\n}\n.ds-modal-stage {\n  flex: 1;\n  min-height: 0;\n  background: white;\n  position: relative;\n  display: flex;\n  align-items: stretch;\n}\n.ds-modal-stage-iframe {\n  flex: 1;\n  min-width: 0;\n  position: relative;\n  overflow: hidden;\n  background: white;\n}\n.ds-modal-stage-iframe-scaler {\n  position: absolute;\n  top: 0;\n  left: 0;\n  transform-origin: top left;\n  background: white;\n  /* Prevent the GPU layer from blurring the scaled iframe on Retina. */\n  will-change: transform;\n}\n.ds-modal-stage-iframe-scaler iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n  display: block;\n  background: white;\n}\n.ds-modal-stage.has-sidebar .ds-modal-stage-iframe {\n  flex: 1 1 60%;\n}\n.ds-modal-sidebar {\n  position: relative;\n  flex: 1 1 40%;\n  min-width: 320px;\n  max-width: 560px;\n  border-left: 1px solid var(--border);\n  background: var(--bg-panel);\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n.ds-modal-stage-handle {\n  position: absolute;\n  top: 50%;\n  width: 18px;\n  height: 56px;\n  transform: translateY(-50%);\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  color: var(--text-muted);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  line-height: 1;\n  padding: 0;\n  z-index: 3;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);\n  transition: color 120ms ease, background 120ms ease;\n}\n.ds-modal-stage-handle:hover { color: var(--text); background: var(--bg-subtle); }\n.ds-modal-stage-handle.is-expand {\n  right: 0;\n  border-right: none;\n  border-radius: 8px 0 0 8px;\n}\n.ds-modal-stage-handle.is-collapse {\n  left: 0;\n  border-left: none;\n  border-radius: 0 8px 8px 0;\n}\n.ds-modal-fullscreen .ds-modal-stage:fullscreen .ds-modal-stage-iframe-scaler,\n.ds-modal-stage:fullscreen .ds-modal-stage-iframe-scaler {\n  height: 100vh;\n}\n.ds-modal-empty {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--text-muted);\n  font-size: 13px;\n}\n.ds-modal-actions .ghost.is-active {\n  background: var(--accent-tint);\n  color: var(--accent);\n  border-color: var(--accent);\n}\n\n/* DESIGN.md side panel — monospace source view with light syntax tints,\n   echoing the styles.refero.design \"compact\" markdown source pane. */\n.design-spec-empty {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  color: var(--text-muted);\n  font-size: 12px;\n}\n.design-spec-pre {\n  margin: 0;\n  padding: 16px 18px;\n  font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  font-size: 12px;\n  line-height: 1.6;\n  /* Wrap long lines instead of forcing the side pane to scroll horizontally —\n     DESIGN.md prose can have 200+ char paragraphs that otherwise produce a\n     scrollbar inside the modal. `overflow-wrap: anywhere` keeps long\n     hyphenated tokens (URLs, file paths) from blowing out the column. */\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n  overflow-y: auto;\n  overflow-x: hidden;\n  color: var(--text);\n  background: var(--bg-panel);\n  flex: 1;\n}\n.design-spec-pre code { font: inherit; color: inherit; background: transparent; }\n.design-spec-line { display: inline; }\n.design-spec-line.is-h1 { color: #2563eb; font-weight: 700; }\n.design-spec-line.is-h2 { color: #0891b2; font-weight: 700; }\n.design-spec-line.is-h3 { color: #0d9488; font-weight: 600; }\n.design-spec-line.is-h4 { color: #16a34a; font-weight: 600; }\n.design-spec-line.is-quote { color: #6b7280; font-style: italic; }\n.design-spec-line.is-list { color: var(--text); }\n.design-spec-line.is-table { color: #7c3aed; }\n.design-spec-line.is-fence { color: #dc2626; }\n.design-spec-line.is-blank { color: var(--text-muted); }\n.md-tk-bold { font-weight: 700; color: var(--text); }\n.md-tk-em { font-style: italic; color: var(--text); }\n.md-tk-code {\n  background: var(--bg-subtle);\n  padding: 0 4px;\n  border-radius: 3px;\n  color: #0f766e;\n}\n.md-tk-color {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  color: #be185d;\n}\n.md-tk-color-swatch {\n  display: inline-block;\n  width: 8px;\n  height: 8px;\n  border-radius: 2px;\n  border: 1px solid rgba(0, 0, 0, 0.12);\n  vertical-align: middle;\n}\n@media (max-width: 760px) {\n  .ds-modal-backdrop { padding: 0; }\n  .ds-modal { border-radius: 0; }\n  .ds-modal-header { grid-template-columns: 1fr; gap: 8px; }\n  .ds-modal-actions { justify-content: flex-start; flex-wrap: wrap; }\n  .ds-modal-stage { flex-direction: column; }\n  .ds-modal-stage.has-sidebar .ds-modal-stage-iframe { flex: 1 1 50%; }\n  .ds-modal-sidebar {\n    border-left: none;\n    border-top: 1px solid var(--border);\n    flex: 1 1 50%;\n    min-width: 0;\n    max-width: none;\n  }\n  /* On stacked layout the side handles (which assume horizontal split)\n     would float over content awkwardly — fall back to the header toggle. */\n  .ds-modal-stage-handle { display: none; }\n}\n\n/* Examples gallery toolbar — filter pills + richer card metadata */\n.examples-toolbar {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 8px;\n}\n.examples-search {\n  position: relative;\n  width: min(360px, 100%);\n}\n.examples-search input {\n  width: 100%;\n  padding: 7px 12px 7px 32px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  font-size: 13px;\n  color: var(--text);\n}\n.examples-search input::placeholder { color: var(--text-faint); }\n.examples-search input:focus {\n  outline: none;\n  border-color: var(--accent);\n  box-shadow: 0 0 0 3px var(--accent-soft);\n}\n.examples-search .search-icon {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--text-faint);\n  pointer-events: none;\n  display: inline-flex;\n  align-items: center;\n}\n.examples-filter-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n.examples-filter-label {\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--text-muted);\n  margin-right: 6px;\n  font-weight: 500;\n}\n.filter-pill {\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: 999px;\n  padding: 5px 12px;\n  font-size: 12px;\n  color: var(--text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  gap: 6px;\n  align-items: center;\n}\n.filter-pill:hover { border-color: var(--border-strong); color: var(--text); }\n.filter-pill.active {\n  background: var(--accent);\n  border-color: var(--accent);\n  color: white;\n}\n.filter-pill-count {\n  font-size: 11px;\n  opacity: 0.7;\n}\n.example-card-actions {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  flex-wrap: wrap;\n}\n.example-tags {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n  margin-top: 2px;\n}\n/* Tag variants — keep the worktree base .example-tag style; these add\n   color-coded variants for mode/platform pills. */\n.example-tag.platform-mobile { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }\n.example-tag.mode-deck { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }\n\n/* Example preview hover affordance + click-through overlay */\n.example-preview {\n  cursor: zoom-in;\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n.example-preview:hover {\n  border-color: var(--accent);\n  box-shadow: 0 6px 18px rgba(201, 100, 66, 0.10);\n}\n.example-preview:focus-visible {\n  outline: none;\n  border-color: var(--accent);\n  box-shadow: 0 0 0 3px var(--accent-soft);\n}\n.example-preview-overlay {\n  position: absolute;\n  bottom: 10px;\n  right: 10px;\n  padding: 5px 12px;\n  font-size: 11.5px;\n  font-weight: 500;\n  color: white;\n  background: rgba(28, 27, 26, 0.78);\n  border-radius: 999px;\n  opacity: 0;\n  transition: opacity 0.15s;\n  pointer-events: none;\n  letter-spacing: 0.02em;\n}\n.example-preview:hover .example-preview-overlay,\n.example-preview:focus-visible .example-preview-overlay { opacity: 1; }\n\n/* ============================================================\n   Loading primitives — spinner, skeletons, shimmer\n   ============================================================ */\n@keyframes icon-spin { to { transform: rotate(360deg); } }\n@keyframes shimmer {\n  0% { background-position: -400px 0; }\n  100% { background-position: 400px 0; }\n}\n.icon-spin { animation: icon-spin 0.9s linear infinite; transform-origin: center; }\n\n.loading-spinner {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--text-muted);\n}\n.loading-spinner-label { font-size: 12px; }\n\n.skeleton-block,\n.skeleton-shimmer {\n  display: inline-block;\n  background-color: var(--bg-subtle);\n  background-image: linear-gradient(\n    90deg,\n    var(--bg-subtle) 0%,\n    var(--bg-muted) 50%,\n    var(--bg-subtle) 100%\n  );\n  background-size: 800px 100%;\n  animation: shimmer 1.4s linear infinite;\n}\n.skeleton-block + .skeleton-block { margin-top: 6px; }\n\n.design-card-skeleton { cursor: default; pointer-events: none; }\n.design-card-skeleton .design-card-thumb { background: none; }\n.design-card-skeleton .design-card-thumb::before,\n.design-card-skeleton .design-card-thumb::after { display: none; }\n.design-card-skeleton .design-card-thumb {\n  background-image: linear-gradient(\n    90deg,\n    var(--bg-subtle) 0%,\n    var(--bg-muted) 50%,\n    var(--bg-subtle) 100%\n  );\n  background-size: 800px 100%;\n  animation: shimmer 1.4s linear infinite;\n}\n\n.centered-loader {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 48px 12px;\n  color: var(--text-muted);\n}\n.centered-loader-label { font-size: 12.5px; letter-spacing: 0.01em; }\n\n/* ============================================================\n   Resizable entry sidebar\n   ============================================================ */\n.entry {\n  /* The sidebar width is driven by an inline style fed from local state,\n     with sensible bounds enforced in JS. */\n}\n.entry-side {\n  position: relative;\n  min-width: 280px;\n  max-width: 560px;\n}\n.entry-side-resizer {\n  position: absolute;\n  top: 0;\n  right: -3px;\n  width: 6px;\n  height: 100%;\n  cursor: col-resize;\n  z-index: 5;\n  background: transparent;\n  border: 0;\n  padding: 0;\n  transition: background-color 120ms ease;\n}\n.entry-side-resizer:hover,\n.entry-side-resizer.dragging { background: var(--accent-soft); }\nbody.entry-resizing { cursor: col-resize; user-select: none; }\n\n/* Branded header — title + research-preview pill on a single line, with\n   the \"by …\" subtitle underneath. */\n.entry-brand-title-row {\n  flex-wrap: wrap;\n  row-gap: 4px;\n}\n\n/* ============================================================\n   Composer Import popover (coming-soon menu)\n   ============================================================ */\n.composer-import-wrap { position: relative; }\n.composer-import-menu {\n  position: absolute;\n  bottom: calc(100% + 6px);\n  left: 0;\n  min-width: 240px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-md);\n  padding: 6px;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  z-index: 30;\n  animation: pop-in 180ms cubic-bezier(0.21, 1.02, 0.73, 1);\n}\n.composer-import-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  background: transparent;\n  border: none;\n  border-radius: var(--radius-sm);\n  color: var(--text-muted);\n  cursor: not-allowed;\n  font-size: 12.5px;\n  text-align: left;\n  width: 100%;\n}\n.composer-import-item:hover {\n  background: var(--bg-subtle);\n  color: var(--text);\n}\n.composer-import-item-label { flex: 1; }\n.composer-import-item-soon {\n  font-size: 10px;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  color: var(--text-faint);\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-pill);\n  padding: 2px 6px;\n}\n.composer-import-item .ico {\n  display: inline-flex;\n  width: 16px;\n  align-items: center;\n  justify-content: center;\n  color: var(--text-muted);\n}\n\n/* ============================================================\n   Chat header: conversation history dropdown\n   ============================================================ */\n.chat-history-wrap { position: relative; display: inline-flex; align-items: center; }\n.chat-history-wrap .icon-only { position: relative; }\n.chat-history-wrap.open .icon-only { background: var(--bg-subtle); color: var(--text); }\n.chat-history-badge {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  min-width: 14px;\n  height: 14px;\n  padding: 0 3px;\n  font-size: 9.5px;\n  font-weight: 600;\n  letter-spacing: 0;\n  background: var(--accent);\n  color: white;\n  border-radius: 999px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n.chat-history-menu {\n  position: absolute;\n  top: calc(100% + 6px);\n  right: 0;\n  width: 280px;\n  max-height: 360px;\n  display: flex;\n  flex-direction: column;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-md);\n  z-index: 30;\n  overflow: hidden;\n  animation: pop-in 180ms cubic-bezier(0.21, 1.02, 0.73, 1);\n}\n.chat-history-menu-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 10px;\n  border-bottom: 1px solid var(--border);\n  background: var(--bg-panel);\n}\n.chat-history-menu-title {\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--text-muted);\n  font-weight: 600;\n}\n.chat-history-new {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 8px;\n  font-size: 11px;\n  border-radius: var(--radius-pill);\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  color: var(--text-muted);\n}\n.chat-history-new:hover { background: var(--bg-muted); color: var(--text); }\n.chat-history-list {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  padding: 4px 6px 6px;\n  overflow-y: auto;\n}\n.chat-history-empty {\n  padding: 16px 8px;\n  font-size: 12px;\n  color: var(--text-muted);\n  text-align: center;\n  font-style: italic;\n}\n.chat-conv-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: var(--radius-sm);\n  background: transparent;\n  border: 1px solid transparent;\n  color: var(--text);\n  font-size: 12.5px;\n  text-align: left;\n  cursor: pointer;\n  width: 100%;\n}\n.chat-conv-item:hover { background: var(--bg-subtle); }\n.chat-conv-item.active {\n  background: var(--accent-tint);\n  border-color: var(--accent-soft);\n  color: var(--text-strong);\n}\n.chat-conv-item-name {\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.chat-conv-item-meta {\n  font-size: 10.5px;\n  color: var(--text-faint);\n  font-variant-numeric: tabular-nums;\n}\n.chat-conv-item-del {\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--text-faint);\n  border-radius: 4px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;\n}\n.chat-conv-item:hover .chat-conv-item-del { opacity: 1; }\n.chat-conv-item-del:hover { background: var(--red-bg); color: var(--red); }\n\n/* ============================================================\n   Scroll-to-bottom button (chat)\n   ============================================================ */\n.chat-log-wrap { position: relative; flex: 1; min-height: 0; min-width: 0; display: flex; }\n.chat-log-wrap .chat-log { flex: 1; }\n.chat-jump-btn {\n  position: absolute;\n  bottom: 12px;\n  left: 50%;\n  transform: translateX(-50%);\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border-radius: var(--radius-pill);\n  background: var(--bg-panel);\n  border: 1px solid var(--border-strong);\n  color: var(--text);\n  font-size: 12px;\n  box-shadow: var(--shadow-sm);\n  cursor: pointer;\n  z-index: 6;\n  animation: pop-in 200ms cubic-bezier(0.21, 1.02, 0.73, 1);\n}\n.chat-jump-btn:hover { background: var(--bg-subtle); border-color: var(--border-strong); }\n\n/* ============================================================\n   Assistant message footer (bottom-of-message status pill)\n   ============================================================ */\n.assistant-footer {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 10px;\n  padding: 4px 10px;\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-pill);\n  font-size: 11.5px;\n  color: var(--text-muted);\n  width: fit-content;\n}\n.assistant-footer .dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--text-muted);\n}\n.assistant-footer .dot[data-active=\"true\"] {\n  background: var(--accent);\n  animation: pulse 1.2s ease-in-out infinite;\n}\n.assistant-footer .assistant-label {\n  font-weight: 600;\n  color: var(--text-strong);\n  font-size: 11.5px;\n}\n.assistant-footer .assistant-stats {\n  font-variant-numeric: tabular-nums;\n  color: var(--text-muted);\n}\n.assistant-footer[data-unfinished=\"true\"] {\n  background: var(--amber-bg);\n  border-color: color-mix(in srgb, var(--amber) 35%, var(--border));\n}\n.assistant-footer[data-unfinished=\"true\"] .dot {\n  background: var(--amber);\n}\n\n.unfinished-todos {\n  margin-top: 10px;\n  width: min(520px, 100%);\n  padding: 10px 12px;\n  border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--border));\n  border-radius: var(--radius);\n  background: color-mix(in srgb, var(--amber) 8%, var(--bg-panel));\n  color: var(--text);\n}\n.unfinished-todos-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n}\n.unfinished-todos-title {\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--text-strong);\n}\n.unfinished-todos-continue {\n  flex: 0 0 auto;\n  border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--border-strong));\n  border-radius: var(--radius-sm);\n  background: var(--bg-panel);\n  color: var(--text-strong);\n  font: inherit;\n  font-size: 12px;\n  font-weight: 650;\n  padding: 5px 9px;\n  cursor: pointer;\n}\n.unfinished-todos-continue:hover {\n  background: var(--bg-subtle);\n}\n.unfinished-todos-list {\n  margin: 8px 0 0;\n  padding-left: 18px;\n  font-size: 12.5px;\n  color: var(--text-muted);\n}\n.unfinished-todos-list li + li {\n  margin-top: 3px;\n}\n.unfinished-todos-more {\n  margin-top: 6px;\n  font-size: 12px;\n  color: var(--text-muted);\n}\n\n/* ============================================================\n   Coming-soon disabled affordance for viewer toolbar buttons\n   ============================================================ */\n.viewer-action[data-coming-soon='true'] {\n  position: relative;\n  z-index: 5;\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n.viewer-action[data-coming-soon='true']:hover { background: var(--bg-subtle); color: var(--text-muted); }\n.viewer-action[data-coming-soon='true']::after {\n  content: 'Coming soon';\n  position: absolute;\n  bottom: calc(100% + 6px);\n  left: 50%;\n  transform: translateX(-50%);\n  background: rgba(17, 24, 39, 0.95);\n  color: white;\n  font-size: 10.5px;\n  padding: 4px 8px;\n  border-radius: var(--radius-sm);\n  white-space: nowrap;\n  letter-spacing: 0.03em;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 120ms ease;\n  z-index: 10;\n  text-transform: uppercase;\n  font-weight: 600;\n}\n.viewer-action[data-coming-soon='true']:hover::after { opacity: 1; }\n.viewer-toggle[data-coming-soon='true'] {\n  position: relative;\n  z-index: 5;\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n.viewer-toggle[data-coming-soon='true']:hover { background: var(--bg-subtle); }\n.viewer-toggle[data-coming-soon='true']::after {\n  content: 'Coming soon';\n  position: absolute;\n  bottom: calc(100% + 6px);\n  left: 50%;\n  transform: translateX(-50%);\n  background: rgba(17, 24, 39, 0.95);\n  color: white;\n  font-size: 10.5px;\n  padding: 4px 8px;\n  border-radius: var(--radius-sm);\n  white-space: nowrap;\n  letter-spacing: 0.03em;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 120ms ease;\n  z-index: 10;\n  text-transform: uppercase;\n  font-weight: 600;\n}\n.viewer-toggle[data-coming-soon='true']:hover::after { opacity: 1; }\n\n/* Polished toolbar button states — coordinate with the global system.\n   Hover: subtle bg + soft border so groups look intentional. */\n.viewer-action,\n.viewer-tab,\n.viewer-toggle {\n  border: 1px solid transparent;\n  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;\n}\n.viewer-action:hover:not(:disabled):not([data-coming-soon='true']),\n.viewer-tab:hover { border-color: var(--border); }\n.viewer-tab.active { border-color: var(--border); }\n\n/* ============================================================\n   Composer — settings/upload icons consistent sizing + spacing\n   ============================================================ */\n.composer-row .icon-btn svg { display: block; }\n.composer-row .icon-btn.active { background: var(--bg-subtle); color: var(--text); }\n.composer-import {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n.composer-send svg { display: block; }\n\n/* Make the composer's leading icons share the same hit target. */\n.composer-row .composer-icon-divider {\n  width: 1px;\n  height: 18px;\n  background: var(--border);\n  margin: 0 2px;\n}\n\n/* ============================================================\n   Deck navigation toolbar (prev / counter / next)\n   ============================================================ */\n.deck-nav {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  padding: 0 6px;\n  margin-left: 4px;\n  border-left: 1px solid var(--border);\n  height: 28px;\n}\n.deck-nav-counter {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 50px;\n  padding: 0 6px;\n  font-size: 12px;\n  color: var(--text-muted);\n  font-variant-numeric: tabular-nums;\n  letter-spacing: 0.02em;\n}\n\n/* ============================================================\n   Composer rename input style for inline conversation rename.\n   ============================================================ */\n.chat-conv-rename-input {\n  border: 1px solid var(--accent);\n  border-radius: var(--radius-sm);\n  background: var(--bg-panel);\n  outline: none;\n}\n\n/* ============================================================\n   Prompt template gallery\n   ============================================================ */\n.prompt-templates-panel { display: flex; flex-direction: column; gap: 16px; }\n.prompt-templates-count {\n  margin-left: auto;\n  color: var(--text-muted);\n  font-size: 12px;\n}\n.prompt-templates-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n  gap: 14px;\n}\n.prompt-template-card {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 0;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: 10px;\n  overflow: hidden;\n  text-align: left;\n  cursor: pointer;\n  transition: border-color 0.15s ease, transform 0.15s ease;\n}\n.prompt-template-card:hover {\n  border-color: var(--border-strong);\n  transform: translateY(-1px);\n}\n.prompt-template-thumb {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 4 / 3;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--bg-subtle);\n  overflow: hidden;\n}\n.prompt-template-thumb img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n.prompt-template-thumb-fallback {\n  color: var(--text-faint);\n}\n.prompt-template-thumb-play {\n  position: absolute;\n  right: 8px;\n  bottom: 8px;\n  background: rgba(0, 0, 0, 0.55);\n  color: #fff;\n  font-size: 10px;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  letter-spacing: 0;\n}\n.prompt-template-thumb-provider {\n  position: absolute;\n  left: 8px;\n  top: 8px;\n  background: rgba(0, 0, 0, 0.62);\n  color: #fff;\n  font-size: 10px;\n  font-weight: 600;\n  padding: 3px 7px;\n  border-radius: 999px;\n  letter-spacing: 0.02em;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  max-width: calc(100% - 16px);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.prompt-template-thumb-provider.is-hyperframes {\n  background: linear-gradient(135deg, #ff5e3a 0%, #f0c14b 100%);\n  color: #1a1410;\n}\n.prompt-template-meta {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 0 12px 12px;\n}\n.prompt-template-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--text);\n  line-height: 1.3;\n}\n.prompt-template-summary {\n  font-size: 12px;\n  color: var(--text-muted);\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n.prompt-template-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-top: 4px;\n}\n.prompt-template-category {\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 6px;\n  border-radius: 4px;\n  background: var(--accent-tint);\n  color: var(--accent);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n.prompt-template-tag,\n.prompt-template-model {\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  background: var(--bg-subtle);\n  color: var(--text-muted);\n}\n.prompt-template-model {\n  font-weight: 500;\n}\n.prompt-template-source {\n  font-size: 10px;\n  color: var(--text-faint);\n  margin-top: 6px;\n}\n.prompt-templates-footer {\n  font-size: 11px;\n  color: var(--text-faint);\n  padding-top: 12px;\n  border-top: 1px dashed var(--border);\n  text-align: center;\n}\n.prompt-template-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(15, 15, 18, 0.45);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1500;\n  padding: 24px;\n}\n.prompt-template-modal {\n  background: var(--bg-panel);\n  border-radius: 14px;\n  width: min(820px, 100%);\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--border);\n  overflow: hidden;\n  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.25);\n}\n.prompt-template-modal-head {\n  display: flex;\n  gap: 12px;\n  align-items: flex-start;\n  padding: 18px 18px 0;\n}\n.prompt-template-modal-titles { flex: 1; min-width: 0; }\n.prompt-template-modal-titles h2 {\n  font-size: 17px;\n  margin: 0 0 6px 0;\n  color: var(--text);\n}\n.prompt-template-modal-titles p {\n  margin: 0;\n  font-size: 13px;\n  color: var(--text-muted);\n  line-height: 1.45;\n}\n.prompt-template-modal-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 10px 18px 0;\n}\n.prompt-template-modal-body {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px 18px;\n  overflow: auto;\n}\n.prompt-template-modal-asset {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #000;\n  border-radius: 8px;\n  overflow: hidden;\n  max-height: 360px;\n}\n.prompt-template-modal-asset img,\n.prompt-template-modal-asset video {\n  max-width: 100%;\n  max-height: 360px;\n  display: block;\n}\n.prompt-template-modal-asset-image-trigger {\n  display: block;\n  padding: 0;\n  margin: 0;\n  border: 0;\n  background: transparent;\n  cursor: zoom-in;\n  max-height: 360px;\n  line-height: 0;\n}\n.prompt-template-modal-asset-image-trigger img {\n  transition: transform 200ms ease;\n}\n.prompt-template-modal-asset-image-trigger:hover img,\n.prompt-template-modal-asset-image-trigger:focus-visible img {\n  transform: scale(1.02);\n}\n.prompt-template-modal-asset-expand {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 10px;\n  border: 0;\n  border-radius: 999px;\n  background: rgba(0, 0, 0, 0.55);\n  color: #fff;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.01em;\n  cursor: pointer;\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  opacity: 0.78;\n  transition: opacity 120ms ease, background 120ms ease;\n}\n.prompt-template-modal-asset:hover .prompt-template-modal-asset-expand,\n.prompt-template-modal-asset-expand:hover,\n.prompt-template-modal-asset-expand:focus-visible {\n  opacity: 1;\n  background: rgba(0, 0, 0, 0.72);\n}\n.prompt-template-lightbox-backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 1600;\n  background: rgba(8, 9, 12, 0.94);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 48px;\n  cursor: zoom-out;\n  animation: prompt-template-lightbox-fade 140ms ease-out;\n}\n@keyframes prompt-template-lightbox-fade {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n.prompt-template-lightbox-media {\n  max-width: 100%;\n  max-height: 100%;\n  width: auto;\n  height: auto;\n  display: block;\n  border-radius: 10px;\n  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.6);\n  cursor: default;\n  background: #000;\n}\n.prompt-template-lightbox-close {\n  position: fixed;\n  top: 18px;\n  right: 18px;\n  width: 40px;\n  height: 40px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 0;\n  border-radius: 999px;\n  background: rgba(255, 255, 255, 0.14);\n  color: #fff;\n  cursor: pointer;\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  transition: background 120ms ease, transform 120ms ease;\n}\n.prompt-template-lightbox-close:hover,\n.prompt-template-lightbox-close:focus-visible {\n  background: rgba(255, 255, 255, 0.26);\n  transform: scale(1.05);\n}\n@media (max-width: 640px) {\n  .prompt-template-lightbox-backdrop { padding: 16px; }\n  .prompt-template-lightbox-close { top: 12px; right: 12px; }\n}\n.prompt-template-modal-prompt {\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  background: var(--bg-subtle);\n  display: flex;\n  flex-direction: column;\n}\n.prompt-template-modal-prompt-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--border);\n}\n.prompt-template-modal-prompt-label {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--text-muted);\n}\n.prompt-template-modal-prompt-body {\n  margin: 0;\n  padding: 12px;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: var(--font-mono, ui-monospace, monospace);\n  font-size: 12px;\n  line-height: 1.5;\n  max-height: 320px;\n  overflow: auto;\n}\n.prompt-template-modal-foot {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 18px;\n  border-top: 1px solid var(--border);\n  font-size: 11px;\n  color: var(--text-faint);\n}\n.prompt-template-license {\n  padding: 1px 6px;\n  background: var(--bg-subtle);\n  border-radius: 4px;\n  color: var(--text-muted);\n}\n\n/* Prompt template picker — reuses the design-system picker shell so the\n   trigger / popover already look right. We only restyle the avatar (image\n   thumb) and add the editable prompt body block below the trigger. */\n.prompt-template-picker .prompt-template-avatar {\n  background: var(--bg-subtle);\n}\n.prompt-template-picker .prompt-template-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n.prompt-template-picker .prompt-template-avatar.fallback {\n  color: var(--text-muted);\n}\n.prompt-template-edit {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-top: 10px;\n  padding: 10px;\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n}\n.prompt-template-edit-head {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.prompt-template-edit-label {\n  font-size: 11.5px;\n  font-weight: 600;\n  color: var(--text);\n  letter-spacing: 0.01em;\n}\n.prompt-template-edit-hint {\n  font-size: 10.5px;\n  color: var(--text-muted);\n  line-height: 1.4;\n}\n.prompt-template-edit-textarea {\n  width: 100%;\n  min-height: 96px;\n  padding: 8px 10px;\n  font-size: 12px;\n  line-height: 1.5;\n  font-family: inherit;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n  color: var(--text);\n  resize: vertical;\n}\n.prompt-template-edit-textarea:focus {\n  outline: none;\n  border-color: var(--accent);\n  box-shadow: 0 0 0 1px var(--accent);\n}\n.prompt-template-edit-empty {\n  margin-top: 6px;\n  font-size: 11px;\n  color: var(--text-muted);\n  font-style: italic;\n}\n.prompt-template-error {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n  margin-top: 8px;\n  padding: 8px 10px;\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  border-left: 3px solid var(--danger, #c0392b);\n  border-radius: var(--radius-sm);\n  font-size: 12px;\n  color: var(--text);\n}\n.prompt-template-error-msg {\n  flex: 1;\n  min-width: 0;\n}\n.prompt-template-error-retry {\n  flex: none;\n  font-size: 11.5px !important;\n  padding: 4px 10px !important;\n}\n\n/* ============================================================\n   Pet — Codex-style floating companion + settings cards\n   ------------------------------------------------------------\n   The overlay anchors to the bottom-right via inline right/bottom\n   styles set by PetOverlay. The accent color cascades through the\n   `--pet-accent` custom property so every pet variant gets the\n   same halo / bubble border / focus ring without a class explosion.\n   ============================================================ */\n.pet-overlay {\n  position: fixed;\n  z-index: 90;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 10px;\n  pointer-events: none;\n  --pet-accent: var(--accent);\n}\n.pet-overlay > * { pointer-events: auto; }\n\n.pet-sprite {\n  position: relative;\n  /* The overlay sprite was 56px which read as a tiny postage stamp\n     against a 1280px+ canvas — bumped to 96px so the pet feels like\n     a present companion rather than a thumbnail. The image-mode\n     children inherit width/height: 100% via .pet-image, so atlas /\n     strip / static pets all scale up automatically. */\n  width: 96px;\n  height: 96px;\n  background: transparent;\n  border: 0;\n  box-shadow: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: grab;\n  user-select: none;\n  touch-action: none;\n  transition: transform 160ms ease;\n}\n.pet-sprite:hover {\n  transform: translateY(-2px);\n}\n.pet-sprite:active { cursor: grabbing; }\n.pet-sprite-glyph {\n  /* Glyph font-size scales with the sprite box (~0.55 ratio) so\n     emoji-only built-ins and the avatar mark stay legible at the\n     larger overlay size. */\n  font-size: 52px;\n  line-height: 1;\n  animation: var(--pet-anim, pet-float) 3.4s ease-in-out infinite;\n  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.08));\n}\n.pet-sprite-shadow {\n  position: absolute;\n  bottom: -12px;\n  left: 50%;\n  width: 64px;\n  height: 8px;\n  background: rgba(0, 0, 0, 0.18);\n  border-radius: 50%;\n  filter: blur(4px);\n  transform: translateX(-50%);\n  animation: pet-shadow 3.4s ease-in-out infinite;\n}\n\n@keyframes pet-bounce {\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(-6px); }\n}\n@keyframes pet-sway {\n  0%, 100% { transform: rotate(-4deg); }\n  50% { transform: rotate(4deg); }\n}\n@keyframes pet-float {\n  0%, 100% { transform: translateY(0) rotate(0); }\n  50% { transform: translateY(-4px) rotate(2deg); }\n}\n@keyframes pet-wiggle {\n  0%, 100% { transform: rotate(0); }\n  25% { transform: rotate(-6deg); }\n  75% { transform: rotate(6deg); }\n}\n@keyframes pet-shadow {\n  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.18; }\n  50% { transform: translateX(-50%) scale(0.85); opacity: 0.12; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pet-sprite-glyph,\n  .pet-sprite-shadow { animation: none !important; }\n}\n\n.pet-bubble {\n  max-width: 240px;\n  background: var(--bg-panel);\n  color: var(--text);\n  border: 1px solid var(--pet-accent);\n  border-radius: 12px;\n  padding: 10px 12px 8px;\n  box-shadow: var(--shadow-md);\n  font-size: 12.5px;\n  line-height: 1.4;\n  position: relative;\n  animation: pet-bubble-in 200ms ease-out;\n}\n.pet-bubble::after {\n  content: '';\n  position: absolute;\n  right: 18px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background: var(--bg-panel);\n  border-right: 1px solid var(--pet-accent);\n  border-bottom: 1px solid var(--pet-accent);\n  transform: rotate(45deg);\n}\n.pet-bubble-name {\n  font-weight: 600;\n  font-size: 12px;\n  color: var(--pet-accent);\n  margin-bottom: 2px;\n}\n.pet-bubble-line {\n  color: var(--text);\n}\n.pet-bubble-actions {\n  margin-top: 8px;\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n.pet-bubble-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  padding: 3px 8px;\n  border-radius: var(--radius-pill);\n  background: var(--bg-subtle);\n  color: var(--text-muted);\n  border: 1px solid var(--border);\n  cursor: pointer;\n}\n.pet-bubble-btn:hover {\n  background: var(--bg-muted);\n  color: var(--text);\n  border-color: var(--border-strong);\n}\n\n@keyframes pet-bubble-in {\n  from { opacity: 0; transform: translateY(4px) scale(0.96); }\n  to { opacity: 1; transform: translateY(0) scale(1); }\n}\n\n/* ----- Entry sidebar adopt pill ----- */\n.pet-pill {\n  position: relative;\n}\n.pet-pill .pet-pill-glyph {\n  font-size: 14px;\n  line-height: 1;\n}\n.pet-pill-fresh {\n  border-color: var(--accent);\n  color: var(--text);\n  background: var(--accent-tint);\n}\n.pet-pill-fresh:hover {\n  background: var(--accent-soft);\n  border-color: var(--accent);\n}\n.pet-pill-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--accent);\n  box-shadow: 0 0 0 3px var(--accent-tint);\n  margin-left: 2px;\n}\n\n/* ----- Settings → Pets ----- */\n.pet-wake-controls {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n.seg-btn.small {\n  padding: 4px 10px !important;\n  font-size: 12px !important;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  border-radius: var(--radius-pill);\n  border: 1px solid var(--border);\n  background: var(--bg-subtle);\n  color: var(--text-muted);\n  cursor: pointer;\n}\n.seg-btn.small.active {\n  background: var(--accent-tint);\n  color: var(--accent-strong);\n  border-color: var(--accent);\n}\n.seg-btn.small[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Pet source tabs — pill row that splits the panel into three\n   exclusive surfaces (built-in / custom / community). Sits flush\n   between the section head and the active tab's content so the user\n   reads it as \"pick a source, then pick a pet inside it\". */\n.pet-tabs {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-top: 12px;\n}\n.pet-tabs .subtab-pill {\n  align-self: flex-start;\n}\n.pet-tabs-hint {\n  margin: 0;\n}\n\n.pet-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n  gap: 10px;\n  margin-top: 4px;\n}\n\n/* The Community tab stacks the codex grid + hatch panel; flatten\n   their default top margins so the spacing reads as one column\n   rather than two ad-hoc cards. */\n.pet-community {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  margin-top: 4px;\n}\n.pet-community .pet-codex,\n.pet-community .pet-hatch {\n  margin-top: 0;\n}\n\n/* Custom tab dashed wrapper — strip the top margin so it tucks\n   directly under the tab pills. */\n.pet-tabs + .pet-custom,\n.pet-tabs + div + .pet-custom {\n  margin-top: 4px;\n}\n\n/* Highlight the codex card whose name + image match the user's\n   current adoption (community pets land in the custom slot, so we\n   piggy-back on the same \"active\" affordance used by built-ins). */\n.pet-codex-card.active {\n  border-color: var(--accent);\n  box-shadow: 0 0 0 1px var(--accent) inset;\n}\n.pet-card {\n  --pet-accent: var(--accent);\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 12px;\n  border-radius: var(--radius);\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  cursor: pointer;\n  text-align: left;\n  color: var(--text);\n  transition: border-color 120ms ease, transform 120ms ease;\n}\n.pet-card:hover {\n  border-color: var(--border-strong);\n  transform: translateY(-1px);\n}\n.pet-card.active {\n  border-color: var(--pet-accent);\n  box-shadow: 0 0 0 1px var(--pet-accent) inset;\n  background: var(--bg-panel);\n}\n.pet-card-glyph {\n  font-size: 28px;\n  line-height: 1;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--pet-accent) 14%, transparent);\n}\n.pet-card-meta {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  flex: 1;\n}\n.pet-card-name {\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--text-strong);\n}\n.pet-card-flavor {\n  font-size: 11.5px;\n  color: var(--text-muted);\n  line-height: 1.3;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n.pet-card-cta,\n.pet-card-badge {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 10.5px;\n  padding: 2px 7px;\n  border-radius: var(--radius-pill);\n  background: var(--bg-subtle);\n  color: var(--text-muted);\n  border: 1px solid var(--border);\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n}\n.pet-card-badge {\n  background: color-mix(in srgb, var(--pet-accent) 16%, transparent);\n  border-color: var(--pet-accent);\n  color: var(--pet-accent);\n}\n\n.pet-custom {\n  margin-top: 18px;\n  padding: 14px;\n  border-radius: var(--radius);\n  border: 1px dashed var(--border-strong);\n  background: var(--bg-subtle);\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.pet-custom-head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n}\n.pet-custom-head h4 {\n  margin: 0 0 4px;\n  font-size: 13px;\n}\n.pet-custom-preview {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border-radius: var(--radius);\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n}\n.pet-custom-sprite {\n  font-size: 32px;\n  line-height: 1;\n  width: 48px;\n  height: 48px;\n  /* Lock the sprite to a perfect square inside the flex preview row.\n     Without `flex-shrink: 0`, a long pet name or greeting in the\n     adjacent bubble shrinks the 48px box horizontally, squashing\n     the sprite and breaking the round halo. */\n  flex: 0 0 48px;\n  border-radius: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--pet-accent, var(--accent)) 14%, transparent);\n}\n.pet-custom-bubble {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  font-size: 12.5px;\n  color: var(--text);\n  /* Allow the text column to shrink past its intrinsic content width\n     so long greetings wrap instead of pushing the sprite. */\n  min-width: 0;\n}\n.pet-custom-bubble strong {\n  color: var(--pet-accent, var(--accent));\n}\n.pet-custom-fields {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 10px;\n}\n.pet-swatches {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n.pet-swatch {\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  border: 2px solid transparent;\n  cursor: pointer;\n  padding: 0;\n  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);\n}\n.pet-swatch.active {\n  border-color: var(--text-strong);\n}\n.pet-swatch-picker {\n  width: 22px;\n  height: 22px;\n  border: 1px dashed var(--border-strong);\n  border-radius: 50%;\n  background: transparent;\n  padding: 0;\n  cursor: pointer;\n}\n\n/* ============================================================\n   Pet — discovery surfaces (right rail, welcome teaser, composer)\n   ============================================================ */\n\n/* Right-side rail in the entry view. Renders as a third grid column\n   (the entry's gridTemplateColumns is set inline to `… 1fr auto`). */\n.pet-rail {\n  width: 232px;\n  border-left: 1px solid var(--border);\n  background: var(--bg-panel);\n  padding: 18px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  overflow-y: auto;\n}\n.pet-rail.collapsed {\n  width: 36px;\n  padding: 18px 4px;\n  align-items: center;\n}\n.pet-rail-toggle {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 4px;\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  color: var(--text-muted);\n  cursor: pointer;\n  width: 100%;\n}\n.pet-rail-toggle:hover {\n  background: var(--bg-muted);\n  color: var(--text);\n}\n.pet-rail-toggle-glyph {\n  font-size: 18px;\n  line-height: 1;\n}\n.pet-rail-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 6px;\n}\n.pet-rail-head-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n}\n.pet-rail-title {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--text);\n}\n.pet-rail-title strong {\n  font-size: 12px;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n.pet-rail-collapse {\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  border-radius: var(--radius-sm);\n  border: 1px solid var(--border);\n  background: var(--bg-subtle);\n  color: var(--text);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;\n}\n.pet-rail-collapse > svg {\n  flex-shrink: 0;\n}\n.pet-rail-collapse:hover {\n  background: var(--bg-muted);\n  border-color: var(--border-strong);\n  color: var(--text-strong);\n}\n.pet-rail-collapse:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px rgba(201, 100, 66, 0.32);\n  border-color: var(--accent);\n}\n.pet-rail-hint {\n  font-size: 11.5px;\n  color: var(--text-muted);\n  margin: 0;\n  line-height: 1.45;\n}\n.pet-rail-status {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.pet-rail-status-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 8px;\n  border-radius: var(--radius-pill);\n  font-size: 11px;\n  background: var(--accent-tint);\n  color: var(--accent-strong);\n  border: 1px solid var(--accent);\n  cursor: pointer;\n}\n.pet-rail-fresh {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 8px;\n  border-radius: var(--radius-pill);\n  font-size: 11px;\n  background: var(--accent-tint);\n  color: var(--accent-strong);\n  border: 1px dashed var(--accent);\n}\n.pet-rail-list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.pet-rail-item {\n  --pet-accent: var(--accent);\n  display: grid;\n  grid-template-columns: 32px 1fr auto;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: var(--radius);\n  background: var(--bg-panel);\n  border: 1px solid transparent;\n  cursor: pointer;\n  text-align: left;\n  color: var(--text);\n}\n.pet-rail-item:hover {\n  background: var(--bg-subtle);\n  border-color: var(--border);\n}\n.pet-rail-item.active {\n  border-color: var(--pet-accent);\n  background: color-mix(in srgb, var(--pet-accent) 8%, transparent);\n}\n.pet-rail-item.custom {\n  border-style: dashed;\n  border-color: var(--border-strong);\n}\n.pet-rail-item.custom.active {\n  border-style: solid;\n  border-color: var(--pet-accent);\n}\n.pet-rail-item-glyph {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  font-size: 18px;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--pet-accent) 14%, transparent);\n}\n.pet-rail-item-meta {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.pet-rail-item-name {\n  font-size: 12.5px;\n  font-weight: 600;\n  color: var(--text-strong);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.pet-rail-item-flavor {\n  font-size: 10.5px;\n  color: var(--text-muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.pet-rail-customize {\n  margin-top: 6px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 6px 10px;\n  border-radius: var(--radius);\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  color: var(--text-muted);\n  cursor: pointer;\n  font-size: 12px;\n}\n.pet-rail-customize:hover {\n  background: var(--bg-muted);\n  color: var(--text);\n  border-color: var(--border-strong);\n}\n\n/* Hide the rail on small viewports so it does not crowd the main column. */\n@media (max-width: 1100px) {\n  .pet-rail:not(.collapsed) {\n    display: none;\n  }\n}\n\n/* ----- Welcome dialog teaser ----- */\n.welcome-pet-teaser {\n  margin-top: 10px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 12px;\n  background: linear-gradient(135deg, var(--accent-tint) 0%, var(--accent-soft) 100%);\n  border: 1px solid var(--accent);\n  border-radius: var(--radius);\n  cursor: pointer;\n  text-align: left;\n  color: var(--text);\n  width: 100%;\n}\n.welcome-pet-teaser:hover {\n  filter: brightness(1.02);\n}\n.welcome-pet-glyph {\n  font-size: 24px;\n  line-height: 1;\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: var(--bg-panel);\n  border: 1px solid var(--accent);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n}\n.welcome-pet-copy {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n}\n.welcome-pet-copy strong {\n  font-size: 12.5px;\n  color: var(--text-strong);\n}\n.welcome-pet-copy span {\n  font-size: 11px;\n  color: var(--text-muted);\n  line-height: 1.35;\n}\n.welcome-pet-cta {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11.5px;\n  color: var(--accent-strong);\n  font-weight: 600;\n  white-space: nowrap;\n}\n\n/* ----- Composer pet button + popover ----- */\n.composer-pet-wrap {\n  position: relative;\n  display: inline-flex;\n}\n.composer-pet {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border-radius: var(--radius-pill);\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  color: var(--text-muted);\n  cursor: pointer;\n  font-size: 12px;\n}\n.composer-pet:hover {\n  background: var(--bg-muted);\n  color: var(--text);\n  border-color: var(--border-strong);\n}\n.composer-pet.adopted {\n  border-color: var(--accent);\n  color: var(--accent-strong);\n  background: var(--accent-tint);\n}\n.composer-pet-glyph {\n  font-size: 14px;\n  line-height: 1;\n}\n.composer-pet-label {\n  font-weight: 500;\n}\n.composer-pet-menu {\n  position: absolute;\n  bottom: calc(100% + 6px);\n  right: 0;\n  z-index: 30;\n  width: 260px;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-md);\n  padding: 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.composer-pet-menu-head {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 0 2px 6px;\n  border-bottom: 1px solid var(--border-soft);\n}\n.composer-pet-menu-head strong {\n  font-size: 12px;\n  color: var(--text-strong);\n}\n.composer-pet-menu-head span {\n  font-size: 10.5px;\n  color: var(--text-muted);\n  font-family: var(--mono);\n}\n.composer-pet-menu-row {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border-radius: var(--radius-sm);\n  background: transparent;\n  border: 1px solid transparent;\n  color: var(--text-muted);\n  cursor: pointer;\n  font-size: 12px;\n  text-align: left;\n}\n.composer-pet-menu-row:hover {\n  background: var(--bg-subtle);\n  color: var(--text);\n}\n.composer-pet-menu-row.toggle {\n  background: var(--bg-subtle);\n  border-color: var(--border);\n}\n.composer-pet-menu-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 4px;\n}\n.composer-pet-menu-pet {\n  --pet-accent: var(--accent);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n  padding: 6px 2px;\n  border-radius: var(--radius-sm);\n  background: var(--bg-subtle);\n  border: 1px solid transparent;\n  cursor: pointer;\n  font-size: 10.5px;\n  color: var(--text-muted);\n}\n.composer-pet-menu-pet:hover {\n  border-color: var(--border-strong);\n  color: var(--text);\n}\n.composer-pet-menu-pet.active {\n  border-color: var(--pet-accent);\n  background: color-mix(in srgb, var(--pet-accent) 12%, transparent);\n  color: var(--text);\n}\n.composer-pet-menu-pet span:first-child {\n  font-size: 18px;\n  line-height: 1;\n}\n.composer-pet-menu-row.settings {\n  border-top: 1px solid var(--border-soft);\n  margin-top: 2px;\n  padding-top: 8px;\n  border-radius: 0;\n  border-bottom: 1px solid transparent;\n  border-left: 1px solid transparent;\n  border-right: 1px solid transparent;\n}\n\n/* ============================================================\n   Pet — uploaded image / spritesheet rendering\n   ------------------------------------------------------------\n   The face element switches between an emoji glyph and an\n   image/spritesheet via the PetSpriteFace component. Static\n   images inherit the float animation from .pet-sprite-glyph;\n   spritesheets get their own pet-frames keyframes which the\n   component drives with an inline `animation: …` string so\n   each pet can choose its own (frames, fps) combo.\n   ============================================================ */\n.pet-image {\n  display: inline-block;\n  background-position: 0 0;\n  background-repeat: no-repeat;\n  background-size: 100% 100%;\n  width: 100%;\n  height: 100%;\n  /* Pixel art-friendly upscale so 32×32 sheets stay crisp at 56 px. */\n  image-rendering: pixelated;\n  image-rendering: -moz-crisp-edges;\n}\n.pet-image.static {\n  /* Single static image — let the parent .pet-sprite-glyph float\n     animation drive subtle movement. */\n  background-size: contain;\n  background-position: center;\n}\n\n/* Spritesheet keyframe used by PetSpriteFace inline animation. The\n   from/to span 0% → 100%, which CSS resolves against\n   (container_width − background_width). With background-size set to\n   `${frames * 100}% 100%` each `steps()` tick lands on a frame edge. */\n@keyframes pet-frames {\n  from { background-position-x: 0%; }\n  to { background-position-x: 100%; }\n}\n\n/* Full-atlas mode: the sprite renders the active row from a Codex\n   8x9 grid. background-position-y is set inline to the row offset and\n   the keyframe walks frames inside that row. We use a CSS variable\n   for the endpoint so a single keyframe block can drive any row's\n   `frames`/`cols` combination — `--pet-atlas-end-x` is set per row by\n   PetSpriteFace based on `frames / (cols - 1) * 100%`. */\n.pet-image.atlas {\n  background-repeat: no-repeat;\n  /* The sprite element switches rows on the fly; smooth out the\n     row transitions so direction changes feel less jarring without\n     blurring the per-frame `steps()` cadence. */\n  transition: background-position-y 220ms ease;\n}\n@keyframes pet-atlas-frames {\n  from { background-position-x: 0%; }\n  to { background-position-x: var(--pet-atlas-end-x, 100%); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pet-image.frames,\n  .pet-image.atlas { animation: none !important; background-position-x: 0% !important; }\n}\n\n/* PetSettings — upload row, frames/fps grid, error caption */\n.pet-image-controls {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-top: 4px;\n  padding: 10px;\n  border-radius: var(--radius);\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n}\n.pet-image-row {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n.seg-btn.small.ghost {\n  background: transparent;\n  border-color: var(--border);\n  color: var(--text-muted);\n}\n.seg-btn.small.ghost:hover {\n  background: var(--bg-subtle);\n  color: var(--text);\n  border-color: var(--border-strong);\n}\n.pet-image-error {\n  color: var(--red) !important;\n}\n.pet-image-frames {\n  margin-top: 6px;\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n  gap: 8px;\n}\n.pet-image-frames .field input {\n  width: 100%;\n}\n\n/* Make the custom-pet preview / settings sprite respect the rounded\n   accent halo used for emoji glyphs even when an image is rendered. */\n.pet-custom-sprite {\n  overflow: hidden;\n}\n\n/* --- Codex hatch-pet atlas import + AI generation panels ------------ */\n\n.pet-atlas-preview {\n  margin-top: 14px;\n  padding: 14px;\n  border: 1px solid var(--border);\n  border-radius: 12px;\n  background: var(--surface);\n  display: grid;\n  gap: 12px;\n}\n\n.pet-atlas-head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n}\n\n.pet-atlas-head strong {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--text);\n}\n\n.pet-atlas-thumb {\n  width: 100%;\n  aspect-ratio: 1536 / 1872;\n  max-height: 240px;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  background-color: var(--surface-2, #f6f4ee);\n  border-radius: 8px;\n  border: 1px solid var(--border);\n  image-rendering: pixelated;\n}\n\n.pet-atlas-rows {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n  gap: 6px;\n}\n\n.pet-atlas-row {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 2px;\n  padding: 8px 10px;\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  background: var(--bg);\n  cursor: pointer;\n  font: inherit;\n  text-align: left;\n  transition: border-color 120ms ease, background 120ms ease;\n}\n\n.pet-atlas-row:hover {\n  border-color: var(--accent);\n}\n\n.pet-atlas-row.active {\n  border-color: var(--accent);\n  background: color-mix(in srgb, var(--accent) 10%, transparent);\n}\n\n.pet-atlas-row[disabled] {\n  opacity: 0.55;\n  cursor: progress;\n}\n\n.pet-atlas-row-name {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--text);\n}\n\n.pet-atlas-row-meta {\n  font-size: 11px;\n  color: var(--text-muted);\n}\n\n.pet-atlas-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n}\n\n/* \"Hatch with AI\" panel */\n\n.pet-hatch {\n  margin-top: 14px;\n  padding: 14px;\n  border: 1px dashed var(--border);\n  border-radius: 12px;\n  background: color-mix(in srgb, var(--accent) 4%, transparent);\n  display: grid;\n  gap: 10px;\n}\n\n.pet-hatch-head h4 {\n  margin: 0 0 4px 0;\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.pet-hatch-prompt {\n  margin: 0;\n  padding: 10px 12px;\n  background: var(--bg);\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);\n  font-size: 11px;\n  line-height: 1.5;\n  color: var(--text);\n  max-height: 200px;\n  overflow: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.pet-hatch-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.pet-hatch-foot {\n  margin: 0;\n}\n\n/* \"Recently hatched\" — Codex pets discovered under ~/.codex/pets/ */\n\n.pet-codex {\n  margin-top: 14px;\n  padding: 14px;\n  border: 1px solid var(--border);\n  border-radius: 12px;\n  background: var(--surface);\n  display: grid;\n  gap: 10px;\n}\n\n.pet-codex-head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n}\n\n.pet-codex-head h4 {\n  margin: 0 0 4px 0;\n  font-size: 13px;\n  font-weight: 600;\n}\n\n/* Right-aligned button cluster in the codex head — keeps the\n   \"Download community pets\" + \"Refresh\" buttons on a single row even\n   when the section title wraps. */\n.pet-codex-head-actions {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n}\n\n.pet-codex-empty {\n  margin: 4px 0 0 0;\n}\n\n/* Inline status line shown after a community sync completes. Stays in\n   the section flow so the result reads as part of the same control\n   group as the trigger button. The error variant tints toward the\n   accent without screaming red — sync errors are usually transient\n   network blips. */\n.pet-codex-sync-status {\n  margin: 6px 0 8px 0;\n  padding: 6px 10px;\n  border-radius: 6px;\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  font-size: 12px;\n  color: var(--text-muted);\n}\n\n.pet-codex-sync-status.error {\n  background: color-mix(in srgb, var(--accent) 8%, var(--bg-subtle));\n  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));\n  color: var(--text-strong);\n}\n\n.pet-codex-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 10px;\n}\n\n.pet-codex-card {\n  display: grid;\n  grid-template-columns: 56px 1fr auto;\n  align-items: center;\n  gap: 10px;\n  padding: 10px;\n  border: 1px solid var(--border);\n  border-radius: 10px;\n  background: var(--bg);\n}\n\n.pet-codex-thumb {\n  position: relative;\n  width: 56px;\n  height: 56px;\n  border-radius: 8px;\n  border: 1px solid var(--border);\n  background-color: var(--surface-2, #f6f4ee);\n  background-image: var(--pet-codex-src);\n  background-repeat: no-repeat;\n  /* Show only the top-left cell of the 8x9 atlas — that is the\n     `idle` row, frame 0, and reads as a recognizable still even\n     before adoption. */\n  background-position: 0 0;\n  background-size: 800% 900%;\n  image-rendering: pixelated;\n}\n\n/* Hover preview — a larger floating overlay that plays through every\n   cell of the 8x9 Codex atlas so users can see what animations (idle,\n   running, waving, jumping, failed, waiting, …) the pet has before they\n   adopt it. The overlay is purely decorative: pointer-events: none\n   prevents it from stealing hover from the card, and aria-hidden keeps\n   it out of the accessibility tree. */\n.pet-codex-thumb-preview {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  left: 50%;\n  width: 128px;\n  /* 128 * (208/192) ≈ 138.7 — matches a single atlas cell aspect. */\n  height: 139px;\n  border-radius: 10px;\n  border: 1px solid var(--border);\n  background-color: var(--surface-2, #f6f4ee);\n  background-image: var(--pet-codex-src);\n  background-repeat: no-repeat;\n  background-position: 0% 0%;\n  background-size: 800% 900%;\n  image-rendering: pixelated;\n  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);\n  opacity: 0;\n  pointer-events: none;\n  transform: translate(-50%, 6px) scale(0.82);\n  transform-origin: 50% 100%;\n  transition:\n    opacity 140ms ease,\n    transform 160ms ease;\n  z-index: 20;\n}\n\n.pet-codex-card:hover .pet-codex-thumb-preview,\n.pet-codex-card:focus-within .pet-codex-thumb-preview {\n  opacity: 1;\n  transform: translate(-50%, 0) scale(1);\n  /* 8 column steps (1 row) in 0.6s → ~13 fps per animation, then the row\n     index advances every 0.6s for a full 5.4s sweep through all 9 rows.\n     Animating background-position-x + -y as two independent animations\n     keeps the nested loop in pure CSS. */\n  animation:\n    pet-codex-preview-col 0.6s steps(8, jump-none) infinite,\n    pet-codex-preview-row 5.4s steps(9, jump-none) infinite;\n}\n\n@keyframes pet-codex-preview-col {\n  from { background-position-x: 0%; }\n  to { background-position-x: 100%; }\n}\n\n@keyframes pet-codex-preview-row {\n  from { background-position-y: 0%; }\n  to { background-position-y: 100%; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pet-codex-card:hover .pet-codex-thumb-preview,\n  .pet-codex-card:focus-within .pet-codex-thumb-preview {\n    animation: none;\n    background-position: 0% 0%;\n  }\n}\n\n.pet-codex-meta {\n  display: grid;\n  gap: 2px;\n  min-width: 0;\n}\n\n.pet-codex-meta strong {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.pet-codex-meta span {\n  font-size: 11px;\n  color: var(--text-muted);\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* Slash-command popover in the chat composer */\n\n.slash-popover {\n  position: absolute;\n  bottom: 100%;\n  left: 0;\n  right: 0;\n  margin-bottom: 4px;\n  max-height: 260px;\n  overflow-y: auto;\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-md);\n  z-index: 10;\n  padding: 6px;\n}\n\n.slash-popover-head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 10px;\n  padding: 4px 6px 6px 6px;\n  border-bottom: 1px solid var(--border);\n  margin-bottom: 4px;\n  font-size: 11px;\n  color: var(--text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n\n.slash-popover-hint {\n  font-size: 10px;\n  text-transform: none;\n  letter-spacing: 0;\n  color: var(--text-muted);\n}\n\n.slash-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  width: 100%;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  padding: 7px 8px;\n  text-align: left;\n  cursor: pointer;\n  font: inherit;\n}\n\n.slash-item:hover,\n.slash-item.active {\n  background: var(--bg-subtle);\n  border-color: var(--border);\n}\n\n.slash-item-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  border-radius: 6px;\n  background: color-mix(in srgb, var(--accent) 12%, transparent);\n  color: var(--accent);\n  flex-shrink: 0;\n  margin-top: 1px;\n}\n\n.slash-item-body {\n  display: grid;\n  gap: 2px;\n  min-width: 0;\n  flex: 1;\n}\n\n.slash-item-row {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n}\n\n.slash-item-label {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--text);\n  background: transparent;\n  padding: 0;\n}\n\n.slash-item-arg {\n  font-size: 10px;\n  color: var(--text-muted);\n  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);\n}\n\n.slash-item-desc {\n  font-size: 11px;\n  color: var(--text-muted);\n  line-height: 1.35;\n}\n\n/* --- Arabic & Persian Comfort Pass --- */\n[dir=\"rtl\"] {\n  --sans: \"Cairo\", \"Inter\", \"Vazirmatn\", \"Noto Sans Arabic\", \"Segoe UI Arabic\", \"Tahoma\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n}\n\n/* Scope line-height increase to prose and chat to avoid breaking compact UI chrome */\n[dir=\"rtl\"] .prose,\n[dir=\"rtl\"] .chat-message,\n[dir=\"rtl\"] .msg .user-text {\n  line-height: 1.7;\n}\n\n[dir=\"rtl\"] .avatar-item,\n[dir=\"rtl\"] .settings-tab,\n[dir=\"rtl\"] .ds-item-name {\n  text-align: right;\n}\n\n[dir=\"rtl\"] .app-chrome-back svg,\n[dir=\"rtl\"] .back-btn svg,\n[dir=\"rtl\"] .icon-btn svg[data-lucide=\"chevron-left\"],\n[dir=\"rtl\"] .icon-btn svg[data-lucide=\"chevron-right\"],\n[dir=\"rtl\"] .icon-btn svg[data-lucide=\"arrow-left\"],\n[dir=\"rtl\"] .icon-btn svg[data-lucide=\"arrow-right\"],\n[dir=\"rtl\"] .newproj-tabs-arrow svg,\n[dir=\"rtl\"] .icon-only svg[data-lucide=\"chevron-left\"],\n[dir=\"rtl\"] .icon-only svg[data-lucide=\"chevron-right\"],\n[dir=\"rtl\"] .icon-only svg[data-lucide=\"arrow-left\"],\n[dir=\"rtl\"] .icon-only svg[data-lucide=\"arrow-right\"],\n[dir=\"rtl\"] .pet-rail-collapse svg,\n[dir=\"rtl\"] .welcome-pet-teaser svg {\n  transform: scaleX(-1);\n}\n\n[dir=\"rtl\"] .title,\n[dir=\"rtl\"] .meta {\n  text-align: right;\n}\n\n/* ============================================================\n   Quick Switcher (Cmd/Ctrl+P file palette)\n   ============================================================ */\n.qs-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(13, 12, 10, 0.32);\n  /* Sits in the modal tier (alongside prompt-template-modal-overlay) so\n   * the palette renders above any open context menus or popovers. */\n  z-index: 1500;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding-top: 12vh;\n}\n.qs-palette {\n  width: min(560px, 92vw);\n  background: var(--bg-panel);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-lg);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  color: var(--text);\n}\n.qs-input {\n  appearance: none;\n  border: 0;\n  outline: none;\n  background: transparent;\n  padding: 14px 16px;\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--text);\n  border-bottom: 1px solid var(--border-soft);\n}\n.qs-input::placeholder {\n  color: var(--text-faint);\n}\n.qs-list {\n  max-height: 50vh;\n  overflow-y: auto;\n  padding: 4px 0;\n}\n.qs-empty {\n  padding: 20px 16px;\n  color: var(--text-muted);\n  text-align: center;\n  font-size: 13px;\n}\n.qs-row {\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  gap: 10px;\n  align-items: baseline;\n  padding: 7px 16px;\n  cursor: pointer;\n  border-left: 3px solid transparent;\n}\n.qs-row-active {\n  background: var(--accent-soft);\n  border-left-color: var(--accent);\n}\n.qs-name {\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.qs-path {\n  color: var(--text-muted);\n  font-size: 12.5px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n.qs-kind {\n  font-size: 10.5px;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--text-faint);\n  font-weight: 600;\n}\n.qs-row-active .qs-kind {\n  color: var(--accent-strong);\n}\n.qs-footer {\n  display: flex;\n  gap: 14px;\n  padding: 8px 16px;\n  border-top: 1px solid var(--border-soft);\n  font-size: 11.5px;\n  color: var(--text-muted);\n}\n.qs-footer kbd {\n  background: var(--bg-subtle);\n  border: 1px solid var(--border);\n  border-radius: 3px;\n  padding: 0 4px;\n  margin-right: 2px;\n  font-family: ui-monospace, monospace;\n  font-size: 10px;\n  color: var(--text-muted);\n}\n\n/* Library section (Skills & Design Systems management) */\n\n.library-toolbar {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 16px;\n}\n\n.library-search {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  font-size: 13px;\n  background: var(--bg);\n  color: var(--text);\n  outline: none;\n}\n\n.library-search:focus {\n  border-color: var(--accent);\n}\n\n.library-filters {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.library-content {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.library-group {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.library-group-title {\n  font-size: 13px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.library-group-count {\n  font-weight: 400;\n  font-size: 11px;\n  opacity: 0.6;\n}\n\n.library-card {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 10px 12px;\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  flex-wrap: wrap;\n}\n\n.library-card.disabled {\n  opacity: 0.45;\n}\n\n.library-card-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.library-card-title-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 4px;\n}\n\n.library-card-name {\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.library-card-badge {\n  font-size: 10px;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  padding: 1px 6px;\n  border-radius: 4px;\n  background: var(--accent-tint);\n  color: var(--accent);\n  font-weight: 500;\n}\n\n.library-card-desc {\n  font-size: 12px;\n  color: var(--text-muted);\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.library-card-expand {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px;\n  color: var(--text-muted);\n  border-radius: 4px;\n}\n\n.library-card-expand:hover {\n  background: var(--border);\n}\n\n.library-ds-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--border);\n  border-radius: 12px;\n  overflow: hidden;\n  padding: 12px;\n  gap: 8px;\n}\n\n.library-ds-card.disabled {\n  opacity: 0.45;\n}\n\n.library-ds-card-content {\n  cursor: pointer;\n}\n\n.library-ds-swatches {\n  display: flex;\n  gap: 4px;\n  margin-bottom: 6px;\n}\n\n.library-ds-swatch {\n  width: 18px;\n  height: 18px;\n  border-radius: 4px;\n  border: 1px solid rgba(128, 128, 128, 0.2);\n}\n\n.library-ds-title {\n  font-size: 13px;\n  font-weight: 600;\n  margin-bottom: 2px;\n}\n\n.library-ds-summary {\n  font-size: 11px;\n  color: var(--text-muted);\n  line-height: 1.3;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.library-ds-card .toggle-switch {\n  align-self: flex-end;\n}\n\n.library-preview {\n  width: 100%;\n  padding: 12px;\n  border-top: 1px solid var(--border);\n  margin-top: 4px;\n}\n\n.library-preview-body {\n  font-size: 12px;\n  line-height: 1.5;\n  white-space: pre-wrap;\n  word-break: break-word;\n  max-height: 300px;\n  overflow-y: auto;\n  margin: 0;\n  color: var(--text-muted);\n}\n\n.library-empty {\n  text-align: center;\n  color: var(--text-muted);\n  font-size: 13px;\n  padding: 32px 0;\n}\n\n/* Toggle switch */\n\n.toggle-switch {\n  position: relative;\n  display: inline-block;\n  width: 36px;\n  height: 20px;\n  flex-shrink: 0;\n}\n\n.toggle-switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n.toggle-slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: var(--border);\n  border-radius: 20px;\n  transition: background-color 0.2s;\n}\n\n.toggle-slider::before {\n  content: '';\n  position: absolute;\n  height: 14px;\n  width: 14px;\n  left: 3px;\n  bottom: 3px;\n  background-color: white;\n  border-radius: 50%;\n  transition: transform 0.2s;\n}\n\n.toggle-switch input:checked + .toggle-slider {\n  background-color: var(--accent);\n}\n\n.toggle-switch input:checked + .toggle-slider::before {\n  transform: translateX(16px);\n}\n\n.toggle-switch-sm {\n  width: 30px;\n  height: 17px;\n}\n\n.toggle-switch-sm .toggle-slider::before {\n  height: 11px;\n  width: 11px;\n}\n\n.toggle-switch-sm input:checked + .toggle-slider::before {\n  transform: translateX(13px);\n}\n/* Manual edit mode */\n.manual-edit-workspace {\n  display: grid;\n  grid-template-columns: 240px minmax(420px, 1fr) 344px;\n  gap: 10px;\n  height: 100%;\n  min-height: 0;\n  padding: 10px;\n  background: var(--bg);\n}\n\n.manual-edit-canvas {\n  position: relative;\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  background: var(--bg-panel);\n}\n\n.manual-edit-canvas iframe {\n  width: 100%;\n  height: 100%;\n  border: 0;\n}\n\n.manual-edit-layers,\n.manual-edit-right {\n  min-height: 0;\n}\n\n.manual-edit-layers,\n.manual-edit-modal,\n.manual-edit-changes {\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  background: var(--bg-panel);\n}\n\n.manual-edit-layers {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.manual-edit-panel-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 12px;\n  border-bottom: 1px solid var(--border);\n}\n\n.manual-edit-panel-head h3 {\n  margin: 0;\n  font-size: 13px;\n}\n\n.manual-edit-panel-head span {\n  color: var(--text-muted);\n  font-size: 11px;\n}\n\n.manual-edit-layer-list,\n.manual-edit-history-list {\n  display: grid;\n  gap: 7px;\n  overflow: auto;\n  padding: 10px;\n}\n\n.manual-edit-layer-row {\n  display: grid;\n  gap: 3px;\n  width: 100%;\n  height: auto;\n  padding: 9px 10px;\n  text-align: left;\n  border: 1px solid var(--border);\n  border-radius: 7px;\n  background: var(--bg-panel);\n}\n\n.manual-edit-layer-row.selected {\n  border-color: var(--accent);\n  background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));\n  box-shadow: inset 3px 0 0 var(--accent);\n}\n\n.manual-edit-layer-row strong {\n  overflow: hidden;\n  font-size: 13px;\n  text-overflow: ellipsis;\n}\n\n.manual-edit-layer-row span {\n  color: var(--text-muted);\n  font-size: 11px;\n}\n\n.manual-edit-right {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.manual-edit-modal {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);\n}\n\n.manual-edit-modal-head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 10px;\n  padding: 13px;\n  border-bottom: 1px solid var(--border);\n}\n\n.manual-edit-modal-head span {\n  display: block;\n  color: var(--text-muted);\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n\n.manual-edit-modal-head h3 {\n  max-width: 220px;\n  margin: 2px 0 0;\n  overflow: hidden;\n  font-size: 15px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.manual-edit-modal-head em {\n  flex: 0 0 auto;\n  padding: 4px 8px;\n  border: 1px solid var(--border);\n  border-radius: 999px;\n  color: var(--text-muted);\n  font-size: 11px;\n  font-style: normal;\n}\n\n.manual-edit-empty {\n  margin: 12px;\n  color: var(--text-muted);\n  font-size: 12px;\n}\n\n.manual-edit-meta {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n  margin: 12px 12px 10px;\n  padding: 10px;\n  border: 1px solid var(--border);\n  border-radius: 7px;\n  background: var(--bg);\n}\n\n.manual-edit-meta strong,\n.manual-edit-meta span,\n.manual-edit-meta code {\n  display: block;\n}\n\n.manual-edit-meta span {\n  margin-top: 2px;\n  color: var(--text-muted);\n  font-size: 11px;\n}\n\n.manual-edit-meta code {\n  max-width: 120px;\n  overflow: hidden;\n  color: var(--text-muted);\n  font-size: 11px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.manual-edit-tabs {\n  display: grid;\n  grid-template-columns: repeat(5, minmax(0, 1fr));\n  gap: 5px;\n  padding: 0 12px 12px;\n}\n\n.manual-edit-tabs button {\n  min-height: 30px;\n  padding: 0 6px;\n  font-size: 11px;\n  text-transform: capitalize;\n}\n\n.manual-edit-tabs button.active {\n  color: var(--bg-panel);\n  border-color: var(--accent);\n  background: var(--accent);\n}\n\n.manual-edit-tab-body {\n  display: grid;\n  gap: 10px;\n  min-height: 0;\n  padding: 0 12px 12px;\n  overflow: auto;\n}\n\n.manual-edit-field {\n  display: grid;\n  gap: 6px;\n}\n\n.manual-edit-field span {\n  color: var(--text);\n  font-size: 12px;\n  font-weight: 650;\n}\n\n.manual-edit-field input,\n.manual-edit-field textarea,\n.manual-edit-field select {\n  width: 100%;\n  border: 1px solid var(--border);\n  border-radius: 6px;\n  padding: 8px 9px;\n  color: var(--text);\n  background: var(--bg-panel);\n  font: inherit;\n}\n\n.manual-edit-field textarea {\n  min-height: 110px;\n  resize: vertical;\n  line-height: 1.45;\n}\n\n.manual-edit-field.compact {\n  gap: 4px;\n}\n\n.manual-edit-field.compact input,\n.manual-edit-field.compact select {\n  min-height: 32px;\n  padding: 6px 8px;\n}\n\n.manual-edit-code {\n  min-height: 150px;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace !important;\n  font-size: 11px !important;\n  white-space: pre;\n}\n\n.manual-edit-code.tall {\n  min-height: 260px;\n}\n\n.manual-edit-style-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 9px;\n}\n\n.manual-edit-style-grid .wide {\n  grid-column: 1 / -1;\n}\n\n.manual-edit-error {\n  margin: 0 12px 10px;\n  padding: 8px 10px;\n  border: 1px solid var(--red-border);\n  border-radius: 6px;\n  color: var(--red);\n  background: var(--red-bg);\n  font-size: 12px;\n}\n\n.manual-edit-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-top: auto;\n  padding: 12px;\n  border-top: 1px solid var(--border);\n  background: var(--bg-subtle);\n}\n\n.manual-edit-actions .primary {\n  color: var(--bg-panel);\n  border-color: var(--accent);\n  background: var(--accent);\n}\n\n.manual-edit-changes {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.manual-edit-history-actions {\n  display: flex;\n  gap: 6px;\n  padding: 0 10px 8px;\n}\n\n.manual-edit-history-entry {\n  display: grid;\n  gap: 6px;\n  padding: 9px;\n  border: 1px solid var(--border);\n  border-radius: 7px;\n  background: var(--bg);\n}\n\n.manual-edit-history-entry strong {\n  font-size: 12px;\n}\n\n.manual-edit-history-entry code {\n  overflow-wrap: anywhere;\n  color: var(--text-muted);\n  font-size: 11px;\n  white-space: pre-wrap;\n}\n"],"names":[],"mappings":"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"}}]
}