@hoangsonw/forge 0.1.0

package/dist/ui/public/styles.css

@@ -0,0 +1,1703 @@
+/* Forge dashboard — restrained palette, honest hierarchy, no gradient titles. */
+
+:root {
+  --bg: #0a0b0d;
+  --bg-1: #0d0f12;
+  --bg-2: #111418;
+  --surface: #13171c;
+  --surface-hi: #181d23;
+  --border: #1d232a;
+  --border-hi: #272e36;
+  --fg: #e7eaee;
+  /* Aliases: keep older rules referencing --fg-0 / --fg-1 working.
+     --fg-0 is the brightest ("strong") text, --fg-1 is the default body
+     text, --fg-2 is dim/secondary. */
+  --fg-0: #ffffff;
+  --fg-1: #e7eaee;
+  --fg-2: #c1c7cf;
+  --muted: #7d8692;
+  --dim: #4b5460;
+  --accent: #14b8a6;
+  --accent-hi: #2dd4bf;
+  --accent-soft: rgba(20, 184, 166, 0.12);
+  --warn: #f59e0b;
+  --warn-soft: rgba(245, 158, 11, 0.12);
+  --err: #ef4444;
+  --err-soft: rgba(239, 68, 68, 0.12);
+  --ok: #22c55e;
+  --ok-soft: rgba(34, 197, 94, 0.12);
+  --radius: 8px;
+  --radius-lg: 12px;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 6px 24px -8px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.55);
+  --tween: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
+  --sidebar-w: 236px;
+}
+
+/* ---- Reset / base ---- */
+*,
+*::before,
+*::after { box-sizing: border-box; }
+*:focus { outline: none; }
+*:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Make the `hidden` attribute actually hide — this is the default UA rule
+   that was being overridden when we set display:flex on .modal-overlay etc. */
+[hidden] { display: none !important; }
+
+html, body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
+}
+
+code, pre, .mono {
+  font-family: 'JetBrains Mono', ui-monospace, 'Menlo', monospace;
+  font-feature-settings: 'ss01', 'ss02';
+}
+
+/* ---- Sidebar ---- */
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: var(--sidebar-w);
+  background: var(--bg-1);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  z-index: 20;
+  overflow-y: auto;
+}
+.sidebar::-webkit-scrollbar { width: 6px; }
+.sidebar::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 3px; }
+
+.sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 18px 18px 20px;
+}
+
+.sidebar-brand .brand-mark {
+  width: 28px;
+  height: 28px;
+  border-radius: 7px;
+  background: linear-gradient(140deg, var(--accent), #0891b2);
+  color: #03100e;
+  display: grid;
+  place-items: center;
+  font-weight: 800;
+  font-size: 16px;
+  box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.25);
+}
+
+.sidebar-brand .brand-name {
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  color: var(--fg);
+}
+.sidebar-brand .brand-sub {
+  font-size: 10.5px;
+  letter-spacing: 0.06em;
+  color: var(--muted);
+  margin-top: 1px;
+}
+
+.side-nav {
+  flex: 1;
+  padding: 6px 10px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.nav-group-title {
+  color: var(--dim);
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  font-weight: 600;
+  padding: 6px 10px 6px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 7px 10px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--fg-2);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background var(--tween), color var(--tween), border-color var(--tween);
+  text-align: left;
+  margin-bottom: 1px;
+}
+
+.nav-item .nav-icon {
+  width: 16px;
+  height: 16px;
+  display: grid;
+  place-items: center;
+  color: var(--muted);
+  flex-shrink: 0;
+}
+.nav-item .nav-icon svg {
+  width: 16px;
+  height: 16px;
+  stroke-width: 1.6;
+}
+
+.nav-item kbd {
+  margin-left: auto;
+  opacity: 0.5;
+  font-size: 10px;
+}
+
+.nav-item:hover {
+  background: var(--surface);
+  color: var(--fg);
+}
+.nav-item:hover .nav-icon { color: var(--fg); }
+
+.nav-item.active {
+  background: var(--surface);
+  color: var(--fg);
+  border-color: var(--border-hi);
+}
+.nav-item.active .nav-icon { color: var(--accent); }
+
+.badge-live {
+  margin-left: auto;
+  font-size: 10px;
+  font-weight: 700;
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  border: 1px solid rgba(20, 184, 166, 0.25);
+}
+
+.sidebar-footer {
+  padding: 12px 16px 16px;
+  border-top: 1px solid var(--border);
+  font-size: 11px;
+  color: var(--muted);
+}
+.sidebar-footer .status-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11.5px;
+  color: var(--fg-2);
+}
+.sidebar-footer .dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--ok);
+  box-shadow: 0 0 8px var(--ok);
+}
+.sidebar-footer .dot.off { background: var(--err); box-shadow: none; }
+.sidebar-footer .hint {
+  color: var(--dim);
+  margin-top: 6px;
+  font-size: 10.5px;
+}
+
+/* ---- Content ---- */
+/* Content fills the full viewport width minus the sidebar. Inner sections
+   get their own sensible max-widths where necessary (hero, prose). */
+.content {
+  margin-left: var(--sidebar-w);
+  padding: 32px 44px 80px;
+  animation: fade-in var(--tween);
+}
+
+.content-inner {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 1680px;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ---------- Mobile navigation ---------- */
+
+.nav-toggle {
+  position: fixed;
+  top: 12px;
+  left: 12px;
+  z-index: 80;
+  width: 44px;
+  height: 44px;
+  border: 1px solid var(--border);
+  background: var(--bg-1);
+  border-radius: 10px;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.1s ease, transform 0.15s ease;
+}
+.nav-toggle:hover { background: var(--bg-2); }
+.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.nav-toggle-bar {
+  width: 20px;
+  height: 2px;
+  background: var(--fg);
+  border-radius: 2px;
+  transition: transform 0.18s ease, opacity 0.15s ease;
+}
+.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
+.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
+.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
+
+.nav-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(6, 8, 10, 0.55);
+  backdrop-filter: blur(2px);
+  z-index: 60;
+  opacity: 0;
+  transition: opacity 0.18s ease;
+  pointer-events: none;
+}
+.nav-backdrop.visible { opacity: 1; pointer-events: auto; }
+
+@media (max-width: 920px) {
+  .nav-toggle { display: flex; }
+  .sidebar {
+    transform: translateX(-100%);
+    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
+    z-index: 70;
+    width: min(84vw, 320px);
+    box-shadow: 4px 0 22px rgba(0, 0, 0, 0.35);
+  }
+  .sidebar.open { transform: translateX(0); }
+  .content { margin-left: 0; padding: 64px 16px 48px; }
+  .content-inner { max-width: 100%; }
+  .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
+}
+
+/* Prevent horizontal scroll from any stray overflow. Forced here so every
+   view inherits the boundary. */
+html, body { overflow-x: hidden; }
+.content, .content-inner { min-width: 0; }
+.table-wrap { max-width: 100%; overflow-x: auto; }
+
+.page-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 28px;
+}
+
+.page-title {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0;
+  color: var(--fg);
+  letter-spacing: -0.01em;
+}
+
+.page-subtitle {
+  color: var(--muted);
+  font-size: 12.5px;
+  margin-top: 4px;
+}
+
+.page-actions { display: flex; gap: 8px; }
+
+/* ---- Hero prompt (dashboard) ---- */
+.hero {
+  padding: 56px 40px 44px;
+  margin-bottom: 24px;
+  border-radius: var(--radius-lg);
+  background:
+    radial-gradient(ellipse 60% 70% at 50% -10%, rgba(20, 184, 166, 0.08), transparent 65%),
+    radial-gradient(ellipse 40% 50% at 85% 110%, rgba(167, 139, 250, 0.06), transparent 60%),
+    var(--bg-1);
+  border: 1px solid var(--border);
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.hero::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: 20%;
+  right: 20%;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--accent), transparent);
+  opacity: 0.4;
+}
+
+.hero h1 {
+  margin: 0 0 10px;
+  font-size: 28px;
+  font-weight: 600;
+  color: var(--fg);
+  letter-spacing: -0.015em;
+  line-height: 1.2;
+}
+
+.hero .hero-sub {
+  color: var(--muted);
+  font-size: 14px;
+  margin-bottom: 28px;
+}
+
+.hero-input-wrap {
+  max-width: 720px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.hero-input {
+  width: 100%;
+  background: var(--surface);
+  border: 1px solid var(--border-hi);
+  border-radius: 12px;
+  color: var(--fg);
+  font-family: inherit;
+  font-size: 15.5px;
+  padding: 18px 68px 18px 22px;
+  transition: border-color var(--tween), box-shadow var(--tween);
+  box-shadow: var(--shadow-md);
+}
+
+.hero-input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md);
+}
+
+.hero-submit {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 44px;
+  height: 44px;
+  border-radius: 9px;
+  border: none;
+  background: var(--accent);
+  color: #022;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  transition: background var(--tween);
+}
+.hero-submit:hover { background: var(--accent-hi); }
+.hero-submit svg { width: 18px; height: 18px; }
+
+.hero-hint {
+  color: var(--muted);
+  font-size: 11.5px;
+  margin-top: 18px;
+}
+.hero-hint kbd { margin: 0 2px; }
+
+.hero-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+  max-width: 720px;
+  margin: 20px auto 0;
+}
+
+.chip {
+  padding: 7px 14px;
+  border-radius: 999px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--fg-2);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all var(--tween);
+  font-family: inherit;
+}
+.chip:hover {
+  background: var(--surface-hi);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+.chip .chip-icon {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  vertical-align: middle;
+  margin-right: 5px;
+  color: var(--muted);
+}
+.chip:hover .chip-icon { color: var(--accent); }
+
+/* ---- Stats ---- */
+.stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 14px;
+  margin-bottom: 24px;
+}
+
+.stat {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px;
+  transition: border-color var(--tween);
+}
+.stat:hover { border-color: var(--border-hi); }
+
+.stat .label {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.stat .value {
+  margin-top: 6px;
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--fg);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.01em;
+}
+
+.stat .sub {
+  color: var(--muted);
+  font-size: 11.5px;
+  margin-top: 4px;
+}
+
+/* ---- Section ---- */
+.section {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  margin-bottom: 18px;
+  overflow: hidden;
+}
+
+.section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--border);
+}
+
+.section-head h2 {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--fg);
+  letter-spacing: 0.01em;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.section-head .section-meta {
+  color: var(--muted);
+  font-size: 11.5px;
+}
+
+.section-body { padding: 4px 0; }
+.section-body-padded { padding: 16px 18px; }
+
+/* ---- Rows (compact list) ---- */
+.row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 11px 18px;
+  border-bottom: 1px solid var(--border);
+  transition: background var(--tween);
+}
+.row:last-child { border-bottom: none; }
+.row:hover { background: var(--surface-hi); }
+
+.row-main { flex: 1; min-width: 0; }
+.row-main .title {
+  font-weight: 500;
+  color: var(--fg);
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.row-main .sub {
+  color: var(--muted);
+  font-size: 11.5px;
+  margin-top: 2px;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+/* ---- Table ---- */
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.table th, .table td {
+  text-align: left;
+  padding: 10px 18px;
+  border-bottom: 1px solid var(--border);
+}
+.table tr:last-child td { border-bottom: none; }
+.table tbody tr { transition: background var(--tween); }
+.table tbody tr:hover { background: var(--surface-hi); cursor: default; }
+.table th {
+  color: var(--muted);
+  font-weight: 600;
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  background: var(--bg-2);
+}
+
+/* ---- Badges ---- */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: lowercase;
+  border: 1px solid transparent;
+}
+.badge::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.8;
+}
+.badge-running   { color: var(--accent); background: var(--accent-soft); }
+.badge-running::before { animation: pulse 1.6s ease-in-out infinite; }
+.badge-awaiting  { color: var(--warn); background: var(--warn-soft); }
+.badge-completed, .badge-done { color: var(--ok); background: var(--ok-soft); }
+.badge-failed    { color: var(--err); background: var(--err-soft); }
+.badge-cancelled, .badge-draft { color: var(--muted); background: rgba(125, 134, 146, 0.1); }
+.badge-planned, .badge-scheduled, .badge-approved, .badge-verifying { color: var(--warn); background: var(--warn-soft); }
+.badge-blocked   { color: var(--err); background: var(--err-soft); }
+
+@keyframes pulse {
+  0%, 100% { opacity: 0.8; }
+  50% { opacity: 1; transform: scale(1.2); }
+}
+
+/* ---- Pill (provider status) ---- */
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 9px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 500;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--fg-2);
+}
+.pill .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--muted);
+}
+.pill.ok { color: var(--ok); border-color: rgba(34, 197, 94, 0.25); }
+.pill.ok .dot { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
+.pill.down .dot { background: var(--err); }
+.pill.warn { color: var(--warn); border-color: rgba(245, 158, 11, 0.25); }
+.pill.warn .dot { background: var(--warn); }
+
+/* ---- Buttons ---- */
+.btn {
+  padding: 8px 14px;
+  border-radius: 7px;
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background var(--tween), color var(--tween), border-color var(--tween);
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  line-height: 1;
+}
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.btn-primary {
+  background: var(--accent);
+  color: #03100e;
+  font-weight: 600;
+}
+.btn-primary:hover { background: var(--accent-hi); }
+
+.btn-secondary {
+  background: var(--surface);
+  color: var(--fg);
+  border-color: var(--border-hi);
+}
+.btn-secondary:hover { background: var(--surface-hi); border-color: var(--accent); }
+
+.btn-ghost {
+  background: transparent;
+  color: var(--muted);
+  border-color: var(--border);
+}
+.btn-ghost:hover { color: var(--fg); border-color: var(--border-hi); background: var(--surface); }
+
+.btn-danger {
+  background: var(--err-soft);
+  color: var(--err);
+  border-color: rgba(239, 68, 68, 0.3);
+}
+.btn-danger:hover { background: rgba(239, 68, 68, 0.2); }
+
+.btn-sm { padding: 5px 10px; font-size: 11.5px; }
+
+/* ---- Form controls ---- */
+.form-row { margin-bottom: 14px; }
+.form-row label {
+  display: block;
+  color: var(--fg-2);
+  font-size: 12px;
+  font-weight: 500;
+  margin-bottom: 6px;
+}
+
+input[type="text"], input[type="search"], input[type="url"], input[type="password"], textarea, select {
+  background: var(--bg-1);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  padding: 9px 13px;
+  border-radius: 7px;
+  font-family: inherit;
+  font-size: 13px;
+  width: 100%;
+  transition: border-color var(--tween), box-shadow var(--tween);
+}
+input:focus, textarea:focus, select:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+textarea {
+  font-family: 'JetBrains Mono', monospace;
+  min-height: 110px;
+  resize: vertical;
+  line-height: 1.5;
+}
+
+.checkbox-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 11px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+  cursor: pointer;
+  font-size: 12.5px;
+  color: var(--fg-2);
+  transition: all var(--tween);
+  user-select: none;
+}
+.checkbox-row:hover { border-color: var(--border-hi); color: var(--fg); }
+.checkbox-row input { accent-color: var(--accent); cursor: pointer; }
+.checkbox-row:has(input:checked) {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: var(--accent-soft);
+}
+
+.grid-checkboxes {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 6px;
+}
+
+/* ---- Log stream ---- */
+.log-stream {
+  background: #07090c;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px 16px;
+  max-height: 420px;
+  overflow-y: auto;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 12px;
+  color: var(--fg-2);
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-hi) transparent;
+}
+.log-stream::-webkit-scrollbar { width: 6px; }
+.log-stream::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 3px; }
+
+.log-line {
+  padding: 2px 0;
+  animation: fade-in 0.15s ease-out;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.log-line time {
+  color: var(--dim);
+  margin-right: 10px;
+  font-size: 10.5px;
+}
+.log-line .log-type { color: var(--accent); font-weight: 600; }
+.log-line.warning { color: var(--warn); }
+.log-line.error { color: var(--err); }
+.log-line.critical { color: var(--err); font-weight: 700; }
+
+/* ---- Plan viewer ---- */
+.plan-viewer { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; }
+.plan-step {
+  display: flex;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-1);
+}
+.plan-step:hover { border-color: var(--border-hi); }
+.plan-step-num {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-weight: 600;
+  font-size: 11px;
+  display: grid;
+  place-items: center;
+  font-family: 'JetBrains Mono', monospace;
+}
+.plan-step-body { flex: 1; min-width: 0; }
+.plan-step-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
+.plan-step-type {
+  font-size: 10.5px;
+  letter-spacing: 0.03em;
+  font-weight: 600;
+  color: var(--accent);
+}
+.plan-step-desc { color: var(--fg); font-size: 12.5px; line-height: 1.5; }
+.plan-step-meta { color: var(--muted); font-size: 11px; margin-top: 5px; display: flex; gap: 12px; flex-wrap: wrap; }
+
+/* ---- Modal + palette (click-outside + esc + X) ---- */
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(4, 6, 9, 0.7);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  z-index: 100;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 15vh;
+  animation: fade-in 0.15s ease-out;
+}
+
+.modal {
+  width: 100%;
+  max-width: 520px;
+  background: var(--surface);
+  border: 1px solid var(--border-hi);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+  animation: modal-in 0.18s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+}
+
+@keyframes modal-in {
+  from { opacity: 0; transform: translateY(-12px) scale(0.99); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.modal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.modal-title { font-size: 14px; font-weight: 600; color: var(--fg); }
+
+.modal-close {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  transition: background var(--tween), color var(--tween);
+}
+.modal-close:hover { background: var(--surface-hi); color: var(--fg); }
+.modal-close svg { width: 14px; height: 14px; }
+
+.modal-body { padding: 18px 20px; }
+.modal-foot {
+  padding: 12px 20px 16px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* Palette: same overlay shell, bigger input */
+.palette-input {
+  width: 100%;
+  background: transparent;
+  border: none;
+  color: var(--fg);
+  font-size: 16px;
+  padding: 18px 20px;
+  outline: none;
+}
+.palette-hint {
+  color: var(--muted);
+  font-size: 11.5px;
+  padding: 10px 20px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  gap: 14px;
+  align-items: center;
+}
+
+/* ---- Toast ---- */
+.toast-host {
+  position: fixed;
+  right: 18px;
+  bottom: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 150;
+  pointer-events: none;
+}
+
+.toast {
+  pointer-events: auto;
+  padding: 10px 16px;
+  border-radius: 7px;
+  background: var(--surface);
+  border: 1px solid var(--border-hi);
+  border-left: 3px solid var(--accent);
+  color: var(--fg);
+  font-size: 12.5px;
+  box-shadow: var(--shadow-md);
+  animation: toast-in 0.18s ease-out both, toast-out 0.2s ease-in 3.8s both;
+  max-width: 320px;
+}
+.toast-ok { border-left-color: var(--ok); }
+.toast-warn { border-left-color: var(--warn); }
+.toast-err { border-left-color: var(--err); }
+
+@keyframes toast-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes toast-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+/* ---- Loading skeletons ---- */
+.skeleton-list {
+  padding: 8px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.skeleton {
+  height: 14px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-hi) 50%, var(--surface) 100%);
+  background-size: 200% 100%;
+  animation: shimmer 1.4s ease-in-out infinite;
+}
+.skeleton.w-50 { width: 50%; }
+.skeleton.w-70 { width: 70%; }
+.skeleton.w-90 { width: 90%; }
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* ---- Empty state ---- */
+.empty {
+  padding: 48px 24px;
+  text-align: center;
+  color: var(--muted);
+  font-size: 13px;
+}
+.empty-title {
+  color: var(--fg);
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+/* ---- Generic ---- */
+code {
+  background: var(--bg-2);
+  color: var(--accent-hi);
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 11.5px;
+  border: 1px solid var(--border);
+}
+
+kbd {
+  background: var(--bg-1);
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  padding: 1px 6px;
+  font-size: 10.5px;
+  color: var(--muted);
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.divider { height: 1px; margin: 20px 0; background: var(--border); }
+
+.grid-2 {
+  display: grid;
+  grid-template-columns: 1.6fr 1fr;
+  gap: 16px;
+}
+@media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } }
+
+.grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+@media (max-width: 1200px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
+@media (max-width: 760px) { .grid-3 { grid-template-columns: 1fr; } }
+
+/* Monaco editor mount point */
+.monaco-host {
+  width: 100%;
+  height: 520px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: #1e1e1e;
+}
+
+/* Command palette list */
+.palette-list {
+  max-height: 360px;
+  overflow-y: auto;
+  padding: 6px 0;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-hi) transparent;
+}
+.palette-list::-webkit-scrollbar { width: 6px; }
+.palette-list::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 3px; }
+
+.palette-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 9px 20px;
+  cursor: pointer;
+  color: var(--fg-2);
+  font-size: 13px;
+  border-left: 2px solid transparent;
+  transition: background var(--tween);
+}
+.palette-item:hover,
+.palette-item.active {
+  background: var(--surface-hi);
+  color: var(--fg);
+  border-left-color: var(--accent);
+}
+.palette-item .palette-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--muted);
+  flex-shrink: 0;
+}
+.palette-item.active .palette-icon,
+.palette-item:hover .palette-icon { color: var(--accent); }
+.palette-item .palette-label { flex: 1; }
+.palette-item .palette-kbd {
+  font-size: 10.5px;
+  color: var(--dim);
+  font-family: 'JetBrains Mono', monospace;
+}
+.palette-item .palette-group {
+  font-size: 10px;
+  color: var(--dim);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-left: auto;
+}
+.palette-empty {
+  padding: 14px 20px;
+  color: var(--muted);
+  font-size: 12.5px;
+  text-align: center;
+}
+
+/* JSON viewer */
+.json-view {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 12px;
+  background: var(--bg-1);
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  padding: 14px;
+  white-space: pre;
+  overflow-x: auto;
+  color: var(--fg-2);
+  margin: 0;
+}
+.json-key { color: var(--accent-hi); }
+.json-string { color: #a7d3ff; }
+.json-number { color: var(--warn); }
+.json-boolean { color: #f0abfc; }
+.json-null { color: var(--muted); }
+
+.table-wrap { overflow-x: auto; }
+
+/* ---------- Chat (multi-turn) ---------- */
+
+.chat-shell {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 0;
+  height: calc(100vh - 80px);
+  min-height: 560px;
+  background: var(--bg-1);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.chat-sidebar {
+  border-right: 1px solid var(--border);
+  background: var(--bg-0);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.chat-sidebar-head {
+  padding: 14px;
+  border-bottom: 1px solid var(--border);
+}
+.chat-new-btn {
+  width: 100%;
+  background: var(--accent);
+  color: #031615;
+  border: none;
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-weight: 600;
+  font-size: 13.5px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: filter 0.12s ease;
+}
+.chat-new-btn:hover { filter: brightness(1.08); }
+.chat-new-btn svg { width: 16px; height: 16px; }
+
+.chat-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.chat-list-item {
+  background: transparent;
+  border: none;
+  border-radius: 7px;
+  padding: 10px 12px;
+  text-align: left;
+  cursor: pointer;
+  color: var(--fg-2);
+  transition: background 0.1s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.chat-list-item:hover { background: var(--bg-2); }
+.chat-list-item.active { background: rgba(20, 184, 166, 0.12); color: var(--fg-0); }
+.chat-list-item.active .chat-list-title { color: var(--accent-hi); }
+.chat-list-title {
+  font-size: 13.5px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.chat-list-meta {
+  font-size: 11.5px;
+  color: var(--muted);
+  display: flex;
+  gap: 5px;
+}
+.chat-list-empty {
+  padding: 14px;
+  color: var(--muted);
+  font-size: 12.5px;
+  text-align: center;
+}
+
+.chat-main {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--bg-0);
+}
+
+.chat-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  padding: 32px;
+}
+.chat-empty-icon {
+  width: 56px; height: 56px;
+  background: rgba(20, 184, 166, 0.1);
+  color: var(--accent-hi);
+  border-radius: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.chat-empty-icon svg { width: 28px; height: 28px; }
+.chat-empty-title { font-size: 18px; font-weight: 600; color: var(--fg-0); }
+.chat-empty-sub { color: var(--muted); font-size: 13.5px; max-width: 440px; text-align: center; }
+.chat-empty-cta {
+  margin-top: 6px;
+  background: var(--accent);
+  color: #031615;
+  border: none;
+  border-radius: 8px;
+  padding: 10px 16px;
+  font-weight: 600;
+  font-size: 13.5px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+.chat-empty-cta svg { width: 16px; height: 16px; }
+
+.chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-1);
+}
+.chat-header-title {
+  font-weight: 600;
+  font-size: 14.5px;
+  color: var(--fg-0);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 640px;
+}
+.chat-header-meta { display: flex; gap: 8px; align-items: center; }
+.chat-header-del {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--muted);
+  border-radius: 6px;
+  padding: 5px 8px;
+  cursor: pointer;
+}
+.chat-header-del:hover { color: var(--err); border-color: var(--err); }
+.chat-header-del svg { width: 14px; height: 14px; display: block; }
+
+.chat-turns {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.chat-turn {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.chat-msg {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+}
+.chat-msg-user { justify-content: flex-end; }
+.chat-msg-user .chat-avatar { order: 2; }
+.chat-msg-user .chat-bubble { background: var(--accent); color: #031615; }
+
+.chat-avatar {
+  width: 30px; height: 30px;
+  border-radius: 8px;
+  background: var(--bg-2);
+  color: var(--fg-2);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.chat-avatar svg { width: 16px; height: 16px; }
+.chat-avatar.agent { background: rgba(167, 139, 250, 0.14); color: #c4b5fd; }
+
+.chat-bubble {
+  background: var(--bg-1);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px 14px;
+  max-width: min(780px, 74%);
+  font-size: 13.5px;
+  line-height: 1.5;
+  color: var(--fg-1);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.chat-msg-user .chat-bubble { border: none; white-space: pre-wrap; }
+
+.chat-bubble-head {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 6px;
+  flex-wrap: wrap;
+}
+.chat-meta { color: var(--muted); font-size: 11.5px; }
+.chat-summary { color: var(--fg-1); }
+.chat-thinking {
+  color: var(--muted);
+  font-style: italic;
+  animation: chat-pulse 1.6s ease-in-out infinite;
+}
+@keyframes chat-pulse {
+  0%, 100% { opacity: 0.55; }
+  50% { opacity: 1; }
+}
+
+.chat-files {
+  margin-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.chat-file {
+  background: var(--bg-2);
+  color: var(--fg-2);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  padding: 3px 8px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11.5px;
+}
+.chat-file-more { color: var(--muted); font-size: 11.5px; align-self: center; }
+
+.chat-running {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--accent-hi);
+  font-size: 13px;
+  padding: 6px 12px;
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+  width: fit-content;
+  animation: chat-pulse 1.6s ease-in-out infinite;
+}
+.chat-running svg { width: 14px; height: 14px; }
+
+.chat-composer {
+  border-top: 1px solid var(--border);
+  background: var(--bg-1);
+  padding: 14px 20px;
+}
+.chat-composer-inner {
+  background: var(--bg-0);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px 12px;
+  transition: border-color 0.12s ease;
+}
+.chat-composer-inner:focus-within { border-color: var(--accent); }
+.chat-composer textarea {
+  width: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--fg-0);
+  font-family: inherit;
+  font-size: 14px;
+  resize: none;
+  min-height: 22px;
+  line-height: 1.45;
+}
+.chat-composer-bar {
+  margin-top: 8px;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+.chat-mode-select {
+  background: var(--bg-2);
+  border: 1px solid var(--border);
+  color: var(--fg-1);
+  border-radius: 6px;
+  padding: 4px 8px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.chat-auto {
+  color: var(--muted);
+  font-size: 12px;
+  display: inline-flex;
+  gap: 5px;
+  align-items: center;
+  cursor: pointer;
+}
+.chat-send {
+  margin-left: auto;
+  background: var(--accent);
+  color: #031615;
+  border: none;
+  border-radius: 7px;
+  padding: 7px 14px;
+  font-weight: 600;
+  font-size: 13px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+.chat-send:disabled { opacity: 0.5; cursor: not-allowed; }
+.chat-send svg { width: 14px; height: 14px; }
+
+/* generic chips reused by chat */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11.5px;
+  font-weight: 500;
+  border: 1px solid var(--border);
+}
+.chip-ok   { background: rgba(34, 197, 94, 0.12);   color: #86efac; border-color: transparent; }
+.chip-warn { background: rgba(251, 191, 36, 0.14);  color: #fcd34d; border-color: transparent; }
+.chip-err  { background: rgba(239, 68, 68, 0.14);   color: #fca5a5; border-color: transparent; }
+.chip-neutral { background: var(--bg-2); color: var(--fg-2); }
+
+@media (max-width: 900px) {
+  .chat-shell { grid-template-columns: 1fr; height: calc(100vh - 100px); }
+  .chat-sidebar { display: none; }
+}
+
+/* ---------- Shortcut overlay ---------- */
+.shortcut-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(6, 8, 10, 0.62);
+  backdrop-filter: blur(3px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  animation: shortcut-fade 0.15s ease;
+}
+@keyframes shortcut-fade { from { opacity: 0; } to { opacity: 1; } }
+.shortcut-card {
+  background: var(--bg-1);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  min-width: 420px;
+  max-width: 560px;
+  padding: 16px 20px 18px;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
+}
+.shortcut-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  font-weight: 600;
+  color: var(--fg-0);
+}
+.shortcut-close {
+  background: transparent;
+  border: none;
+  color: var(--muted);
+  cursor: pointer;
+}
+.shortcut-close:hover { color: var(--fg-0); }
+.shortcut-close svg { width: 16px; height: 16px; }
+.shortcut-table { width: 100%; border-collapse: collapse; }
+.shortcut-table td { padding: 5px 0; font-size: 13px; color: var(--fg-2); }
+.shortcut-table td:first-child { width: 40%; }
+.shortcut-table kbd {
+  background: var(--bg-0);
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  padding: 1px 7px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11.5px;
+  color: var(--fg-0);
+}
+
+/* Source badges on chat/repl conversations */
+.chat-src {
+  display: inline-block;
+  padding: 1px 6px;
+  margin-right: 8px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  vertical-align: middle;
+}
+.chat-src-repl {
+  background: rgba(20, 184, 166, 0.18);
+  color: #5eead4;
+}
+.chat-src-chat {
+  background: rgba(167, 139, 250, 0.18);
+  color: #c4b5fd;
+}
+
+/* Failure + retry styling for chat turns */
+.chat-failure {
+  border-left: 3px solid var(--err);
+  padding: 6px 10px;
+  background: rgba(239, 68, 68, 0.06);
+  border-radius: 4px;
+  margin-top: 4px;
+}
+.chat-failure-title {
+  font-weight: 600;
+  color: #fca5a5;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 4px;
+}
+.chat-failure-body {
+  color: var(--fg-1);
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 13px;
+  line-height: 1.45;
+}
+.chat-retry {
+  margin-top: 8px;
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--fg-1);
+  border-radius: 6px;
+  padding: 4px 10px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+.chat-retry:hover { background: var(--bg-2); color: var(--fg-0); }
+.chat-retry svg { width: 12px; height: 12px; }
+
+/* ---------- Mobile: tighten dimensions + fix overflows across views ---------- */
+
+/* ============================================================
+   Mobile responsive rules.
+
+   Key invariants enforced here so children never exceed the viewport:
+     - Grid children use `min-width: 0` so wide tables don't balloon the cell.
+     - Sections and tables cap at `100%` and route overflow into a scroll
+       container (`.table-wrap`), not the card/grid/viewport.
+     - Hero submit button preserves its base `top: 50%; translateY(-50%)`
+       centering; only size/right tweak per breakpoint.
+   ============================================================ */
+
+@media (max-width: 920px) {
+  .hero {
+    padding: 36px 18px 28px;
+    border-radius: 12px;
+  }
+  .hero h1 { font-size: 22px; }
+  .hero .hero-sub { font-size: 13px; margin-bottom: 18px; }
+  .hero-input { font-size: 14.5px; padding: 14px 54px 14px 14px; }
+  /* Keep the button vertically centred: don't touch `top` / `transform`. */
+  .hero-submit { width: 38px; height: 38px; right: 6px; }
+  .hero-submit svg { width: 16px; height: 16px; }
+  .hero-chips { gap: 6px; }
+
+  /* Grids: every child must allow shrinking below its intrinsic width,
+     otherwise a wide table inside forces the grid cell out of the viewport
+     and the whole row drifts right. `min-width: 0` is the canonical fix. */
+  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
+  .grid-2 > *, .grid-3 > * { min-width: 0; }
+
+  /* Stat/card grids collapse to a single column. */
+  .stat-grid,
+  .card-grid { grid-template-columns: 1fr !important; }
+  .stat-grid > *, .card-grid > * { min-width: 0; }
+
+  /* Sections: cap at container width, allow horizontal scroll to live in
+     the `.table-wrap` below rather than bleeding the whole card. */
+  .section,
+  .section-body,
+  .section-body-padded {
+    max-width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+  }
+
+  /* Tables: the wrap scrolls horizontally; the table itself doesn't grow
+     the viewport. No forced min-width — let columns be natural so short
+     tables don't force a scrollbar at all. */
+  .table-wrap {
+    max-width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  /* Default: cells stay on one line so identifiers, statuses, dates render
+     cleanly. Opt specific long-form columns INTO wrapping via `.col-wrap`. */
+  table th, table td { white-space: nowrap; }
+  table td.col-wrap, table th.col-wrap {
+    white-space: normal;
+    word-break: break-word;
+    min-width: 160px;
+    max-width: 380px;
+  }
+
+  /* Forms and inputs: fill width, don't overflow. */
+  input, textarea, select, .monaco-host {
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+  .monaco-host { height: min(60vh, 500px); }
+
+  /* Long ID strings, file paths, code — let pre wrap so it doesn't force
+     a horizontal scrollbar at the page level. */
+  pre, code { white-space: pre-wrap; word-break: break-word; }
+  .json-view { white-space: pre-wrap; word-break: break-word; }
+
+  /* ...BUT: `<code>` elements rendered inside a table cell are atomic
+     identifiers (task ids, model ids, file paths) — they must stay on a
+     single line. The .table-wrap's horizontal scroll handles the overflow.
+     Without this override the `code`-wrapping rule above causes IDs to
+     break character-by-character into ugly vertical strips. */
+  table td code, table th code {
+    white-space: nowrap;
+    word-break: keep-all;
+    overflow-wrap: normal;
+  }
+
+  /* Command palette fits the screen. */
+  .palette-card { width: min(94vw, 620px); }
+
+  /* Chip rows wrap so they don't spill. */
+  .hero-chips, .chips, .chat-list-meta, .chat-header-meta { flex-wrap: wrap; }
+}
+
+@media (max-width: 520px) {
+  .content { padding-left: 12px; padding-right: 12px; }
+  .hero { padding: 28px 14px 22px; }
+  .hero h1 { font-size: 20px; }
+  .hero-input { font-size: 14px; padding: 13px 48px 13px 14px; }
+  .hero-submit { width: 34px; height: 34px; right: 6px; }
+  /* Hamburger slightly smaller + inset */
+  .nav-toggle { width: 40px; height: 40px; top: 10px; left: 10px; }
+}
+
+/* ---------- Sortable tables ---------- */
+.table-wrap table.sortable th.sort-head {
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  padding-right: 20px;
+  transition: color 0.12s ease;
+}
+.table-wrap table.sortable th.sort-head:hover { color: var(--fg); }
+.table-wrap table.sortable th.sort-head:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+.table-wrap table.sortable th.sort-head::after {
+  content: '↕';
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0.25;
+  font-size: 10px;
+  transition: opacity 0.12s ease;
+}
+.table-wrap table.sortable th.sort-head:hover::after { opacity: 0.6; }
+.table-wrap table.sortable th.sorted-asc::after  { content: '↑'; opacity: 1; color: var(--accent); }
+.table-wrap table.sortable th.sorted-desc::after { content: '↓'; opacity: 1; color: var(--accent); }