@auxiora/dashboard 1.0.0 → 1.3.1

package/ui/src/styles/global.css

@@ -1,2308 +0,0 @@
-/* ═══════════════════════════════════════════════════════
-   AUXIORA — Electric Minimal
-   Swiss poster meets command center.
-   One accent. Maximum contrast. Zero noise.
-   ═══════════════════════════════════════════════════════ */
-
-@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');
-@import './themes/index.css';
-
-:root {
-  --bg-primary: #0a0a0a;
-  --bg-secondary: #0f0f0f;
-  --bg-card: #141414;
-  --bg-hover: #1a1a1a;
-  --text-primary: #f5f5f5;
-  --text-secondary: #6b6b6b;
-  --accent: #7c3aed;
-  --accent-hover: #6d28d9;
-  --accent-glow: rgba(124, 58, 237, 0.12);
-  --accent-subtle: rgba(124, 58, 237, 0.08);
-  --danger: #ef4444;
-  --danger-hover: #dc2626;
-  --success: #22c55e;
-  --warning: #eab308;
-  --border: rgba(255, 255, 255, 0.06);
-  --border-strong: rgba(255, 255, 255, 0.1);
-  --radius: 8px;
-  --radius-lg: 12px;
-  --font-display: 'Syne', sans-serif;
-  --font-body: 'DM Sans', sans-serif;
-  --font-mono: 'JetBrains Mono', monospace;
-  --transition-fast: 120ms ease;
-  --transition-base: 180ms ease;
-}
-
-/* ── Reset ─────────────────────────────────────── */
-
-* { margin: 0; padding: 0; box-sizing: border-box; }
-
-::selection {
-  background: var(--accent);
-  color: white;
-}
-
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.08);
-  border-radius: 3px;
-}
-::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.14); }
-
-body {
-  font-family: var(--font-body);
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  line-height: 1.55;
-  font-size: 14px;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* ── Layout Shell ──────────────────────────────── */
-
-.layout {
-  display: flex;
-  min-height: 100vh;
-}
-
-/* ── Sidebar ───────────────────────────────────── */
-
-.sidebar {
-  width: 220px;
-  background: var(--bg-secondary);
-  padding: 2rem 0.75rem 1.25rem;
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid var(--border);
-  flex-shrink: 0;
-}
-
-.sidebar-header h1 {
-  font-family: var(--font-display);
-  font-size: 1.1rem;
-  font-weight: 800;
-  color: var(--text-primary);
-  margin-bottom: 2rem;
-  padding: 0 0.75rem;
-  letter-spacing: -0.02em;
-}
-
-.sidebar-header h1::before {
-  content: '';
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  background: var(--accent);
-  border-radius: 2px;
-  margin-right: 0.5rem;
-  vertical-align: middle;
-  position: relative;
-  top: -1px;
-}
-
-.nav-list {
-  list-style: none;
-  flex: 1;
-  overflow-y: auto;
-}
-
-.nav-group { margin-bottom: 1.5rem; }
-
-.nav-group-label {
-  font-family: var(--font-mono);
-  font-size: 0.6rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  color: var(--text-secondary);
-  padding: 0 0.75rem;
-  margin-bottom: 0.35rem;
-}
-
-.nav-link {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.45rem 0.75rem;
-  color: var(--text-secondary);
-  text-decoration: none;
-  border-radius: 6px;
-  margin-bottom: 1px;
-  font-size: 0.875rem;
-  font-weight: 400;
-  transition: color var(--transition-fast), background var(--transition-fast);
-}
-
-.nav-link:hover {
-  color: var(--text-primary);
-  background: var(--bg-hover);
-}
-
-.nav-link.active {
-  color: var(--text-primary);
-  background: var(--accent-subtle);
-  font-weight: 500;
-}
-
-.nav-link.active::before {
-  content: '';
-  width: 3px;
-  height: 16px;
-  background: var(--accent);
-  border-radius: 2px;
-  margin-right: 0.25rem;
-  flex-shrink: 0;
-}
-
-/* Channel status dots */
-.channel-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  flex-shrink: 0;
-  margin-left: auto;
-  transition: background var(--transition-base);
-}
-
-.channel-dot.connected { background: var(--success); }
-.channel-dot.disconnected { background: rgba(255, 255, 255, 0.1); }
-
-/* Status bar (sidebar) */
-.status-bar {
-  padding: 0.75rem;
-  background: var(--bg-card);
-  border-radius: var(--radius);
-  margin-bottom: 1rem;
-  font-size: 0.75rem;
-  border: 1px solid var(--border);
-}
-
-.status-item { margin-bottom: 0.2rem; color: var(--text-secondary); }
-
-/* Logout */
-.logout-btn {
-  padding: 0.5rem 0.75rem;
-  background: transparent;
-  border: 1px solid var(--border);
-  color: var(--text-secondary);
-  border-radius: 6px;
-  cursor: pointer;
-  font-family: var(--font-body);
-  font-size: 0.8rem;
-  transition: all var(--transition-fast);
-}
-
-.logout-btn:hover {
-  color: var(--danger);
-  border-color: rgba(239, 68, 68, 0.3);
-  background: rgba(239, 68, 68, 0.06);
-}
-
-/* ── Main Content ──────────────────────────────── */
-
-.content {
-  flex: 1;
-  padding: 2.5rem 3rem;
-  overflow-y: auto;
-  max-height: 100vh;
-}
-
-.page h2 {
-  font-family: var(--font-display);
-  font-size: 1.75rem;
-  font-weight: 700;
-  letter-spacing: -0.03em;
-  margin-bottom: 1.75rem;
-  color: var(--text-primary);
-}
-
-/* ── Status Grid (Overview) ────────────────────── */
-
-.status-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 1px;
-  margin-bottom: 2rem;
-  background: var(--border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  border: 1px solid var(--border);
-}
-
-.status-card {
-  background: var(--bg-card);
-  padding: 1.25rem 1.5rem;
-}
-
-.status-card h3 {
-  font-family: var(--font-mono);
-  font-size: 0.65rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--text-secondary);
-  margin-bottom: 0.6rem;
-}
-
-.status-card .value {
-  font-family: var(--font-display);
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--text-primary);
-  letter-spacing: -0.02em;
-}
-
-.status-card .sub {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  margin-top: 0.15rem;
-}
-
-/* ── Mission Control ──────────────────────────────── */
-
-.mc-columns {
-  display: grid;
-  grid-template-columns: 2fr 3fr;
-  gap: 1.5rem;
-  min-height: 0;
-}
-
-.mc-section-title {
-  font-family: var(--font-mono);
-  font-size: 0.65rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--text-secondary);
-  margin-bottom: 1rem;
-}
-
-/* Activity Feed */
-.activity-feed-list {
-  max-height: 60vh;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.activity-item {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  padding: 0.5rem 0.75rem;
-  border-radius: var(--radius);
-  background: var(--bg-card);
-  font-size: 0.82rem;
-  animation: mc-fade-in var(--transition-base);
-}
-
-.activity-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.activity-label {
-  flex: 1;
-  color: var(--text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.activity-time {
-  font-family: var(--font-mono);
-  font-size: 0.7rem;
-  color: var(--text-secondary);
-  flex-shrink: 0;
-}
-
-.activity-empty {
-  color: var(--text-secondary);
-  font-size: 0.82rem;
-  padding: 1rem 0.75rem;
-}
-
-/* Behavior Health */
-.bh-list {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.bh-card {
-  background: var(--bg-card);
-  padding: 0.75rem;
-  border-radius: var(--radius);
-}
-
-.bh-card-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.bh-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.bh-action {
-  flex: 1;
-  font-size: 0.82rem;
-  color: var(--text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.bh-type-badge {
-  font-family: var(--font-mono);
-  font-size: 0.6rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-secondary);
-  background: var(--bg-hover);
-  padding: 0.15rem 0.4rem;
-  border-radius: 3px;
-  flex-shrink: 0;
-}
-
-.bh-card-meta {
-  display: flex;
-  gap: 0.75rem;
-  margin-top: 0.35rem;
-  font-size: 0.72rem;
-}
-
-.bh-health-label {
-  font-weight: 500;
-}
-
-.bh-stat {
-  color: var(--text-secondary);
-}
-
-.bh-result {
-  margin-top: 0.35rem;
-  font-size: 0.72rem;
-  color: var(--text-secondary);
-  line-height: 1.4;
-}
-
-.bh-empty {
-  color: var(--text-secondary);
-  font-size: 0.82rem;
-  padding: 1rem 0;
-}
-
-@keyframes mc-fade-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-/* ── Data Tables ───────────────────────────────── */
-
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  border: 1px solid var(--border);
-}
-
-.data-table th {
-  text-align: left;
-  padding: 0.75rem 1.25rem;
-  background: var(--bg-secondary);
-  color: var(--text-secondary);
-  font-family: var(--font-mono);
-  font-weight: 500;
-  font-size: 0.65rem;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  border-bottom: 1px solid var(--border);
-}
-
-.data-table td {
-  padding: 0.7rem 1.25rem;
-  border-top: 1px solid var(--border);
-  font-size: 0.875rem;
-  background: var(--bg-card);
-}
-
-.data-table tbody tr {
-  transition: background var(--transition-fast);
-}
-
-.data-table tbody tr:hover td {
-  background: var(--bg-hover);
-}
-
-.empty-row {
-  text-align: center;
-  color: var(--text-secondary);
-  padding: 3rem !important;
-  font-size: 0.85rem;
-}
-
-.actions-cell { white-space: nowrap; }
-
-/* ── Badges ────────────────────────────────────── */
-
-.badge {
-  display: inline-block;
-  padding: 0.15rem 0.5rem;
-  border-radius: 4px;
-  font-family: var(--font-mono);
-  font-size: 0.65rem;
-  font-weight: 500;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
-}
-
-.badge-green { background: rgba(34, 197, 94, 0.1); color: var(--success); }
-.badge-yellow { background: rgba(234, 179, 8, 0.1); color: var(--warning); }
-.badge-red { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
-.badge-gray { background: rgba(255, 255, 255, 0.04); color: var(--text-secondary); }
-
-.badge-primary { background: var(--accent-glow); color: var(--accent); }
-.badge-fallback { background: rgba(234, 179, 8, 0.1); color: var(--warning); }
-
-.badge-pill {
-  display: inline-block;
-  padding: 0.1rem 0.4rem;
-  border-radius: 4px;
-  font-family: var(--font-mono);
-  font-size: 0.6rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-
-/* ── Buttons ───────────────────────────────────── */
-
-.btn-sm {
-  padding: 0.3rem 0.7rem;
-  border: 1px solid var(--border-strong);
-  background: transparent;
-  color: var(--text-primary);
-  border-radius: 6px;
-  cursor: pointer;
-  font-family: var(--font-body);
-  font-size: 0.8rem;
-  margin-right: 0.25rem;
-  transition: all var(--transition-fast);
-}
-
-.btn-sm:hover {
-  border-color: var(--accent);
-  color: var(--accent);
-  background: var(--accent-subtle);
-}
-
-.btn-danger { color: var(--danger); border-color: rgba(239, 68, 68, 0.3); }
-.btn-danger:hover { background: rgba(239, 68, 68, 0.08); border-color: var(--danger); }
-
-/* ── Filters ───────────────────────────────────── */
-
-.filters { margin-bottom: 1rem; }
-
-.filters select {
-  padding: 0.4rem 0.75rem;
-  background: var(--bg-card);
-  border: 1px solid var(--border-strong);
-  color: var(--text-primary);
-  border-radius: 6px;
-  font-family: var(--font-body);
-  font-size: 0.85rem;
-  cursor: pointer;
-  transition: border-color var(--transition-fast);
-}
-
-.filters select:hover { border-color: var(--accent); }
-.filters select:focus { outline: none; border-color: var(--accent); }
-
-/* ── Login ─────────────────────────────────────── */
-
-.login-page {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  background: var(--bg-primary);
-}
-
-.login-card {
-  background: var(--bg-card);
-  padding: 3rem;
-  border-radius: var(--radius-lg);
-  width: 380px;
-  border: 1px solid var(--border);
-  animation: cardEnter 0.4s ease both;
-}
-
-.login-card h1 {
-  font-family: var(--font-display);
-  font-size: 1.4rem;
-  font-weight: 800;
-  margin-bottom: 2rem;
-  color: var(--text-primary);
-  letter-spacing: -0.02em;
-}
-
-.login-card h1::before {
-  content: '';
-  display: block;
-  width: 24px;
-  height: 4px;
-  background: var(--accent);
-  border-radius: 2px;
-  margin-bottom: 1rem;
-}
-
-.login-card input {
-  width: 100%;
-  padding: 0.7rem 0.85rem;
-  margin-bottom: 1rem;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-strong);
-  color: var(--text-primary);
-  border-radius: 6px;
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  transition: border-color var(--transition-fast);
-}
-
-.login-card input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-glow);
-}
-
-.login-card input::placeholder { color: var(--text-secondary); }
-
-.login-card button {
-  width: 100%;
-  padding: 0.7rem;
-  background: var(--accent);
-  border: none;
-  color: white;
-  border-radius: 6px;
-  cursor: pointer;
-  font-family: var(--font-body);
-  font-weight: 600;
-  font-size: 0.875rem;
-  transition: background var(--transition-fast), transform var(--transition-fast);
-}
-
-.login-card button:hover { background: var(--accent-hover); }
-.login-card button:active { transform: scale(0.98); }
-.login-card button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
-
-.error {
-  color: var(--danger);
-  font-size: 0.8rem;
-  margin-top: 0.5rem;
-}
-
-/* ── Setup Wizard ──────────────────────────────── */
-
-.setup-page {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  padding: 2rem;
-  background: var(--bg-primary);
-}
-
-.setup-card {
-  background: var(--bg-card);
-  padding: 2.5rem;
-  border-radius: var(--radius-lg);
-  width: 100%;
-  max-width: 560px;
-  border: 1px solid var(--border);
-  animation: cardEnter 0.35s ease both;
-}
-
-.setup-card h1 {
-  font-family: var(--font-display);
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--text-primary);
-  margin-bottom: 0.4rem;
-  letter-spacing: -0.02em;
-}
-
-.setup-card p.subtitle {
-  color: var(--text-secondary);
-  margin-bottom: 1.5rem;
-  font-size: 0.9rem;
-}
-
-.setup-card label {
-  display: block;
-  color: var(--text-secondary);
-  font-size: 0.8rem;
-  margin-bottom: 0.3rem;
-  font-weight: 500;
-}
-
-.setup-card input,
-.setup-card select,
-.setup-card textarea {
-  width: 100%;
-  padding: 0.65rem 0.85rem;
-  margin-bottom: 1rem;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-strong);
-  color: var(--text-primary);
-  border-radius: 6px;
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  transition: border-color var(--transition-fast);
-}
-
-.setup-card input:focus,
-.setup-card select:focus,
-.setup-card textarea:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-glow);
-}
-
-.setup-card input::placeholder,
-.setup-card textarea::placeholder { color: var(--text-secondary); }
-
-.setup-card textarea {
-  resize: vertical;
-  line-height: 1.5;
-}
-
-.setup-btn-primary,
-.setup-card button[type="submit"] {
-  width: 100%;
-  padding: 0.7rem;
-  background: var(--accent);
-  border: none;
-  color: white;
-  border-radius: 6px;
-  cursor: pointer;
-  font-family: var(--font-body);
-  font-weight: 600;
-  font-size: 0.9rem;
-  transition: background var(--transition-fast), transform var(--transition-fast);
-}
-
-.setup-btn-primary:hover { background: var(--accent-hover); }
-.setup-btn-primary:active { transform: scale(0.98); }
-.setup-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
-
-.setup-btn-secondary {
-  width: 100%;
-  padding: 0.7rem;
-  background: transparent;
-  border: 1px solid var(--border-strong);
-  color: var(--text-secondary);
-  border-radius: 6px;
-  cursor: pointer;
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  margin-top: 0.5rem;
-  transition: all var(--transition-fast);
-}
-
-.setup-btn-secondary:hover {
-  color: var(--text-primary);
-  border-color: var(--accent);
-  background: var(--accent-subtle);
-}
-
-/* Setup progress */
-.setup-progress {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 2rem;
-  gap: 0;
-}
-
-.setup-progress-step {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--font-mono);
-  font-size: 0.7rem;
-  font-weight: 500;
-  border: 1px solid var(--border-strong);
-  color: var(--text-secondary);
-  background: var(--bg-secondary);
-  transition: all var(--transition-base);
-}
-
-.setup-progress-step.active {
-  border-color: var(--accent);
-  color: var(--accent);
-  background: var(--accent-glow);
-  box-shadow: 0 0 0 4px var(--accent-subtle);
-}
-
-.setup-progress-step.completed {
-  border-color: var(--accent);
-  color: white;
-  background: var(--accent);
-}
-
-.setup-progress-line {
-  width: 32px;
-  height: 1px;
-  background: var(--border-strong);
-  transition: background var(--transition-base);
-}
-
-.setup-progress-line.completed { background: var(--accent); }
-
-/* Password strength */
-.password-strength {
-  height: 3px;
-  border-radius: 2px;
-  margin-bottom: 1rem;
-  background: rgba(255, 255, 255, 0.04);
-}
-
-.password-strength-bar {
-  height: 100%;
-  border-radius: 2px;
-  transition: width 0.3s ease, background 0.3s ease;
-}
-
-.password-strength-label {
-  font-size: 0.7rem;
-  font-family: var(--font-mono);
-  margin-top: -0.75rem;
-  margin-bottom: 0.75rem;
-  letter-spacing: 0.03em;
-}
-
-/* Template grid (personality selection) */
-.template-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 0.75rem;
-  margin-bottom: 1.5rem;
-}
-
-.template-card {
-  background: var(--bg-primary);
-  padding: 1rem;
-  border-radius: var(--radius);
-  border: 1px solid var(--border-strong);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.template-card:hover {
-  border-color: var(--accent);
-  background: var(--accent-subtle);
-}
-
-.template-card.selected {
-  border-color: var(--accent);
-  background: var(--accent-glow);
-}
-
-.template-card.recommended {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 1px var(--accent-glow);
-}
-
-.template-card h3 {
-  font-family: var(--font-display);
-  font-size: 0.85rem;
-  font-weight: 600;
-  margin-bottom: 0.25rem;
-}
-
-.template-card p {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  line-height: 1.4;
-}
-
-/* Channel cards (setup) */
-.channel-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  gap: 0.75rem;
-  margin-bottom: 1.5rem;
-}
-
-.channel-card {
-  background: var(--bg-primary);
-  padding: 1rem;
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-}
-
-.channel-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.75rem;
-}
-
-.channel-card-header h3 {
-  font-size: 0.9rem;
-  font-weight: 500;
-}
-
-.channel-card-fields {
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--border);
-}
-
-.channel-card-fields label {
-  display: block;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  margin-bottom: 0.2rem;
-}
-
-.channel-card-fields input {
-  width: 100%;
-  padding: 0.45rem 0.6rem;
-  margin-bottom: 0.75rem;
-  background: var(--bg-card);
-  border: 1px solid var(--border-strong);
-  color: var(--text-primary);
-  border-radius: 6px;
-  font-family: var(--font-body);
-  font-size: 0.8rem;
-}
-
-.channel-card-fields input:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-/* Toggle switch */
-.toggle {
-  position: relative;
-  width: 36px;
-  height: 20px;
-  background: rgba(255, 255, 255, 0.08);
-  border-radius: 10px;
-  cursor: pointer;
-  transition: background var(--transition-fast);
-}
-
-.toggle.active { background: var(--accent); }
-
-.toggle::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 16px;
-  height: 16px;
-  background: white;
-  border-radius: 50%;
-  transition: transform var(--transition-fast);
-}
-
-.toggle.active::after { transform: translateX(16px); }
-
-/* Skip link */
-.skip-link {
-  display: block;
-  text-align: center;
-  color: var(--text-secondary);
-  font-size: 0.8rem;
-  margin-top: 1rem;
-  cursor: pointer;
-  transition: color var(--transition-fast);
-}
-
-.skip-link:hover { color: var(--accent); }
-
-/* Setup complete */
-.setup-complete-check {
-  font-size: 2.5rem;
-  color: var(--success);
-  margin-bottom: 1rem;
-}
-
-.setup-complete-buttons {
-  display: flex;
-  gap: 0.75rem;
-  margin-top: 1.5rem;
-}
-
-.setup-complete-buttons button { flex: 1; }
-
-/* ── Settings Forms ────────────────────────────── */
-
-.settings-form { max-width: 560px; }
-
-.settings-form label {
-  display: block;
-  color: var(--text-secondary);
-  font-size: 0.8rem;
-  margin-bottom: 0.3rem;
-  font-weight: 500;
-}
-
-.settings-form input,
-.settings-form select {
-  width: 100%;
-  padding: 0.65rem 0.85rem;
-  margin-bottom: 1rem;
-  background: var(--bg-card);
-  border: 1px solid var(--border-strong);
-  color: var(--text-primary);
-  border-radius: 6px;
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  transition: border-color var(--transition-fast);
-}
-
-.settings-form input:focus,
-.settings-form select:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-glow);
-}
-
-.settings-form input::placeholder { color: var(--text-secondary); }
-
-.settings-section {
-  margin-bottom: 2rem;
-  padding-bottom: 2rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.settings-section:last-child { border-bottom: none; }
-
-.settings-section h3 {
-  font-family: var(--font-display);
-  font-size: 1.1rem;
-  font-weight: 600;
-  margin-bottom: 1rem;
-  letter-spacing: -0.01em;
-}
-
-.masked-key {
-  font-family: var(--font-mono);
-  color: var(--text-secondary);
-  font-size: 0.8rem;
-  margin-bottom: 0.5rem;
-}
-
-.settings-success {
-  color: var(--success);
-  font-size: 0.8rem;
-  margin-top: 0.5rem;
-  font-weight: 500;
-}
-
-.settings-btn {
-  padding: 0.6rem 1.5rem;
-  background: var(--accent);
-  border: none;
-  color: white;
-  border-radius: 6px;
-  cursor: pointer;
-  font-family: var(--font-body);
-  font-weight: 600;
-  font-size: 0.875rem;
-  transition: background var(--transition-fast), transform var(--transition-fast);
-}
-
-.settings-btn:hover { background: var(--accent-hover); }
-.settings-btn:active { transform: scale(0.98); }
-.settings-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
-
-/* ── Create Forms ─────────────────────────────── */
-
-.create-form-toggle {
-  margin-bottom: 1rem;
-}
-
-.create-form {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  padding: 1.5rem;
-  margin-bottom: 1.5rem;
-  max-width: 560px;
-  animation: cardEnter 0.25s ease both;
-}
-
-.create-form label {
-  display: block;
-  color: var(--text-secondary);
-  font-size: 0.8rem;
-  margin-bottom: 0.3rem;
-  font-weight: 500;
-}
-
-.create-form input,
-.create-form select,
-.create-form textarea {
-  width: 100%;
-  padding: 0.65rem 0.85rem;
-  margin-bottom: 1rem;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-strong);
-  color: var(--text-primary);
-  border-radius: 6px;
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  transition: border-color var(--transition-fast);
-}
-
-.create-form input:focus,
-.create-form select:focus,
-.create-form textarea:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-glow);
-}
-
-.create-form input::placeholder,
-.create-form textarea::placeholder { color: var(--text-secondary); }
-
-.create-form textarea {
-  resize: vertical;
-  font-family: var(--font-body);
-  line-height: 1.5;
-}
-
-.create-form-group {
-  padding: 1rem;
-  margin-bottom: 1rem;
-  background: var(--bg-hover);
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-}
-
-.create-form-group label {
-  margin-top: 0.5rem;
-}
-
-.create-form-group label:first-child {
-  margin-top: 0;
-}
-
-.form-hint {
-  margin-top: 0.75rem;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.85rem;
-  color: var(--text-muted);
-  background: var(--bg-primary);
-  border-radius: var(--radius);
-  border: 1px dashed var(--border);
-}
-
-.create-form-success {
-  background: rgba(34, 197, 94, 0.06);
-  border: 1px solid rgba(34, 197, 94, 0.2);
-  color: var(--success);
-  padding: 0.75rem 1rem;
-  border-radius: var(--radius);
-  margin-bottom: 1rem;
-  font-size: 0.85rem;
-}
-
-.create-form-success code {
-  font-family: var(--font-mono);
-  font-size: 0.8rem;
-  background: rgba(34, 197, 94, 0.1);
-  padding: 0.15rem 0.4rem;
-  border-radius: 4px;
-  word-break: break-all;
-}
-
-/* ── Provider Grid ─────────────────────────────── */
-
-.provider-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 0.75rem;
-  margin-bottom: 2rem;
-}
-
-.provider-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 1.25rem;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.provider-card:hover { border-color: var(--border-strong); }
-
-.provider-card.configured {
-  border-color: rgba(34, 197, 94, 0.25);
-}
-
-.provider-card.expanded {
-  border-color: var(--accent);
-  background: var(--bg-hover);
-}
-
-.provider-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.5rem;
-}
-
-.provider-card-header h3 {
-  font-size: 0.9rem;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.provider-card .status-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  display: inline-block;
-}
-
-.provider-card .status-dot.active { background: var(--success); }
-.provider-card .status-dot.inactive { background: rgba(255, 255, 255, 0.1); }
-
-.provider-card .provider-badges {
-  display: flex;
-  gap: 0.35rem;
-}
-
-.provider-card .provider-model {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  margin-top: 0.2rem;
-  font-family: var(--font-mono);
-}
-
-.provider-expand {
-  margin-top: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--border);
-}
-
-.provider-expand label {
-  display: block;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  margin-bottom: 0.2rem;
-  font-weight: 500;
-}
-
-.provider-expand input,
-.provider-expand select {
-  width: 100%;
-  padding: 0.5rem 0.65rem;
-  margin-bottom: 0.75rem;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-strong);
-  color: var(--text-primary);
-  border-radius: 6px;
-  font-family: var(--font-body);
-  font-size: 0.8rem;
-}
-
-.provider-expand input:focus,
-.provider-expand select:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-.provider-expand .provider-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.provider-expand .provider-actions button {
-  padding: 0.45rem 1rem;
-  border-radius: 6px;
-  cursor: pointer;
-  font-family: var(--font-body);
-  font-size: 0.8rem;
-  font-weight: 600;
-  border: none;
-  transition: all var(--transition-fast);
-}
-
-.provider-expand .btn-save {
-  background: var(--accent);
-  color: white;
-}
-
-.provider-expand .btn-save:hover { background: var(--accent-hover); }
-.provider-expand .btn-save:disabled { opacity: 0.4; cursor: not-allowed; }
-
-.provider-expand .btn-remove {
-  background: transparent;
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  color: var(--danger);
-}
-
-.provider-expand .btn-remove:hover {
-  background: rgba(239, 68, 68, 0.08);
-  border-color: var(--danger);
-}
-
-/* Routing config */
-.routing-config {
-  display: flex;
-  gap: 1.25rem;
-  align-items: flex-end;
-  flex-wrap: wrap;
-  margin-bottom: 2rem;
-  padding: 1rem 1.25rem;
-  background: var(--bg-card);
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-}
-
-.routing-config .routing-field {
-  flex: 1;
-  min-width: 180px;
-}
-
-.routing-config label {
-  display: block;
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  margin-bottom: 0.25rem;
-  font-weight: 500;
-}
-
-.routing-config select {
-  width: 100%;
-  padding: 0.5rem 0.65rem;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-strong);
-  color: var(--text-primary);
-  border-radius: 6px;
-  font-family: var(--font-body);
-  font-size: 0.85rem;
-}
-
-.routing-config button {
-  padding: 0.5rem 1.25rem;
-  background: var(--accent);
-  border: none;
-  color: white;
-  border-radius: 6px;
-  cursor: pointer;
-  font-family: var(--font-body);
-  font-weight: 600;
-  font-size: 0.85rem;
-  align-self: flex-end;
-  transition: background var(--transition-fast);
-}
-
-.routing-config button:hover { background: var(--accent-hover); }
-.routing-config button:disabled { opacity: 0.4; cursor: not-allowed; }
-
-/* Cost summary */
-.cost-summary {
-  display: flex;
-  gap: 1px;
-  margin-bottom: 2rem;
-  flex-wrap: wrap;
-  background: var(--border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  border: 1px solid var(--border);
-}
-
-.cost-summary .cost-box {
-  flex: 1;
-  min-width: 140px;
-  background: var(--bg-card);
-  padding: 1rem 1.25rem;
-}
-
-.cost-summary .cost-box h4 {
-  font-family: var(--font-mono);
-  font-size: 0.6rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--text-secondary);
-  margin-bottom: 0.25rem;
-}
-
-.cost-summary .cost-box .cost-value {
-  font-family: var(--font-display);
-  font-size: 1.25rem;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-}
-
-.cost-summary .cost-box.over-budget {
-  border-left: 2px solid var(--danger);
-}
-
-.cost-summary .cost-box.over-budget .cost-value { color: var(--danger); }
-
-/* ── Chat scroll fix — chat manages its own scrolling ── */
-.content:has(.chat-layout) { overflow: hidden; max-height: none; }
-.content:has(.chat-container) { overflow: hidden; max-height: none; }
-
-/* ── Chat Layout ────────────────────────────── */
-
-.chat-layout {
-  display: flex;
-  height: calc(100vh - 6rem);
-  gap: 0;
-}
-
-.chat-layout .chat-container {
-  flex: 1;
-  min-width: 0;
-}
-
-/* ── Chat Sidebar ────────────────────────────── */
-
-.chat-sidebar {
-  width: 260px;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid var(--border);
-  background: var(--bg-surface);
-  transition: width 0.2s ease;
-}
-
-.chat-sidebar.closed {
-  width: 48px;
-}
-
-.chat-sidebar-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.new-chat-btn {
-  flex: 1;
-  padding: 0.5rem 0.75rem;
-  border: 1px dashed var(--border);
-  border-radius: var(--radius);
-  background: transparent;
-  color: var(--text-primary);
-  cursor: pointer;
-  font-size: 0.85rem;
-  transition: all 0.15s ease;
-}
-
-.new-chat-btn:hover {
-  border-color: var(--accent);
-  color: var(--accent);
-  background: color-mix(in srgb, var(--accent) 8%, transparent);
-}
-
-.sidebar-toggle {
-  padding: 0.5rem;
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  cursor: pointer;
-  font-size: 1rem;
-  border-radius: var(--radius);
-}
-
-.sidebar-toggle:hover {
-  background: var(--bg-hover);
-}
-
-.sidebar-toggle-inline {
-  padding: 0.3rem 0.5rem;
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  cursor: pointer;
-  font-size: 0.9rem;
-  border-radius: var(--radius);
-}
-
-.sidebar-toggle-inline:hover {
-  background: var(--bg-hover);
-}
-
-.chat-sidebar-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.25rem 0;
-}
-
-.chat-sidebar-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.6rem 0.75rem;
-  cursor: pointer;
-  border-left: 3px solid transparent;
-  transition: all 0.12s ease;
-}
-
-.chat-sidebar-item:hover {
-  background: var(--bg-hover);
-}
-
-.chat-sidebar-item.active {
-  background: color-mix(in srgb, var(--accent) 12%, transparent);
-  border-left-color: var(--accent);
-}
-
-.chat-sidebar-title {
-  flex: 1;
-  font-size: 0.85rem;
-  color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.chat-sidebar-time {
-  font-size: 0.7rem;
-  color: var(--text-secondary);
-  margin-left: 0.5rem;
-  flex-shrink: 0;
-}
-
-.chat-sidebar-empty {
-  text-align: center;
-  color: var(--text-secondary);
-  padding: 2rem 1rem;
-  font-size: 0.85rem;
-}
-
-.chat-rename-input {
-  flex: 1;
-  padding: 0.25rem 0.4rem;
-  font-size: 0.85rem;
-  border: 1px solid var(--accent);
-  border-radius: var(--radius);
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  outline: none;
-}
-
-/* ── Chat Context Menu ────────────────────────── */
-
-.chat-context-menu {
-  background: var(--bg-surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  z-index: 1000;
-  min-width: 120px;
-  padding: 0.25rem 0;
-}
-
-.chat-context-menu button {
-  display: block;
-  width: 100%;
-  text-align: left;
-  padding: 0.5rem 0.75rem;
-  border: none;
-  background: transparent;
-  color: var(--text-primary);
-  cursor: pointer;
-  font-size: 0.85rem;
-}
-
-.chat-context-menu button:hover {
-  background: var(--bg-hover);
-}
-
-.chat-context-menu button.danger {
-  color: var(--status-error);
-}
-
-.chat-context-menu button.danger:hover {
-  background: color-mix(in srgb, var(--status-error) 12%, transparent);
-}
-
-.chat-status-right {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-/* ── Chat Interface ────────────────────────────── */
-
-.chat-container {
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - 4rem);
-}
-
-.chat-status {
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem 0;
-  margin-bottom: 0.5rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.chat-status-left {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-}
-
-.chat-status-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--text-secondary);
-  flex-shrink: 0;
-}
-
-.chat-status-dot[data-connected="true"] {
-  background: var(--success);
-}
-
-.chat-agent-name {
-  font-family: var(--font-display);
-  font-weight: 600;
-  font-size: 0.85rem;
-  color: var(--text-primary);
-  letter-spacing: -0.01em;
-}
-
-.chat-status-sep {
-  width: 1px;
-  height: 0.9rem;
-  background: var(--border);
-  flex-shrink: 0;
-}
-
-.chat-status-label {
-  font-family: var(--font-body);
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-}
-
-.chat-status-label strong {
-  color: var(--text-primary);
-  font-weight: 600;
-}
-
-.model-selector {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.model-selector select {
-  padding: 0.25rem 0.5rem;
-  background: var(--bg-card);
-  border: 1px solid var(--border-strong);
-  color: var(--text-primary);
-  border-radius: 6px;
-  font-family: var(--font-body);
-  font-size: 0.75rem;
-  cursor: pointer;
-  transition: border-color var(--transition-fast);
-}
-
-.model-selector select:hover { border-color: var(--accent); }
-.model-selector select:focus { outline: none; border-color: var(--accent); }
-
-.model-label {
-  font-family: var(--font-mono);
-  font-size: 0.65rem;
-  color: var(--text-secondary);
-  margin-top: 0.2rem;
-  text-align: right;
-  letter-spacing: 0.02em;
-}
-
-/* Messages */
-.chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 1rem 0;
-}
-
-.chat-message {
-  margin-bottom: 0.75rem;
-  max-width: 78%;
-  font-size: 0.9rem;
-  line-height: 1.55;
-  animation: messageIn 0.2s ease both;
-}
-
-.chat-message.user {
-  margin-left: auto;
-  background: var(--accent);
-  color: white;
-  padding: 0.65rem 1rem;
-  border-radius: var(--radius) var(--radius) 2px var(--radius);
-}
-
-.chat-message.assistant {
-  background: var(--bg-card);
-  padding: 0.65rem 1rem;
-  border-radius: var(--radius) var(--radius) var(--radius) 2px;
-  border: 1px solid var(--border);
-}
-
-.chat-message.error {
-  background: rgba(239, 68, 68, 0.06);
-  color: var(--danger);
-  padding: 0.6rem 1rem;
-  border-radius: var(--radius);
-  font-size: 0.85rem;
-  border: 1px solid rgba(239, 68, 68, 0.15);
-}
-
-/* Chat input */
-.chat-input-area {
-  display: flex;
-  gap: 0.5rem;
-  padding: 1rem 0;
-  border-top: 1px solid var(--border);
-}
-
-.chat-input-area > .chat-input-wrapper { flex: 1; }
-
-.chat-input-wrapper {
-  flex: 1;
-  position: relative;
-}
-
-.chat-input-wrapper input {
-  width: 100%;
-  padding: 0.7rem 0.85rem;
-  background: var(--bg-card);
-  border: 1px solid var(--border-strong);
-  color: var(--text-primary);
-  border-radius: 6px;
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  transition: border-color var(--transition-fast);
-}
-
-.chat-input-wrapper input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-glow);
-}
-
-.chat-input-wrapper input::placeholder { color: var(--text-secondary); }
-.chat-input-wrapper input:disabled { opacity: 0.4; }
-
-.chat-input-area button {
-  padding: 0.7rem 1.5rem;
-  background: var(--accent);
-  border: none;
-  color: white;
-  border-radius: 6px;
-  cursor: pointer;
-  font-family: var(--font-body);
-  font-weight: 600;
-  font-size: 0.875rem;
-  transition: background var(--transition-fast), transform var(--transition-fast);
-}
-
-.chat-input-area button:hover { background: var(--accent-hover); }
-.chat-input-area button:active { transform: scale(0.97); }
-.chat-input-area button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
-
-/* Slash command autocomplete */
-.slash-autocomplete {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  right: 0;
-  margin-bottom: 4px;
-  background: var(--bg-card);
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius);
-  max-height: 240px;
-  overflow-y: auto;
-  z-index: 10;
-  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
-}
-
-.slash-ac-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.5rem 0.75rem;
-  cursor: pointer;
-  transition: background var(--transition-fast);
-}
-
-.slash-ac-item:hover,
-.slash-ac-item.selected {
-  background: var(--accent-subtle);
-}
-
-.slash-ac-cmd {
-  font-family: var(--font-mono);
-  font-size: 0.8rem;
-  color: var(--accent);
-  white-space: nowrap;
-  min-width: 140px;
-}
-
-.slash-ac-desc {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-}
-
-/* ── Markdown (Chat Messages) ──────────────────── */
-
-.chat-markdown { line-height: 1.6; }
-
-.chat-markdown h2,
-.chat-markdown h3,
-.chat-markdown h4 {
-  margin: 0.75rem 0 0.35rem;
-  color: var(--text-primary);
-  font-family: var(--font-display);
-  letter-spacing: -0.01em;
-}
-
-.chat-markdown h2 { font-size: 1.1rem; font-weight: 700; }
-.chat-markdown h3 { font-size: 1rem; font-weight: 600; }
-.chat-markdown h4 { font-size: 0.9rem; font-weight: 600; }
-
-.chat-markdown p { margin: 0.35rem 0; }
-
-.chat-markdown .code-block {
-  margin: 0.5rem 0;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  overflow: hidden;
-}
-
-.chat-markdown .code-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.35rem 0.75rem;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border);
-  font-size: 0.7rem;
-}
-
-.chat-markdown .code-lang {
-  font-family: var(--font-mono);
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  font-size: 0.6rem;
-}
-
-.chat-markdown .code-copy {
-  background: transparent;
-  border: 1px solid var(--border-strong);
-  color: var(--text-secondary);
-  font-family: var(--font-mono);
-  font-size: 0.6rem;
-  padding: 0.15rem 0.5rem;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  letter-spacing: 0.02em;
-}
-
-.chat-markdown .code-copy:hover {
-  color: var(--accent);
-  border-color: var(--accent);
-  background: var(--accent-subtle);
-}
-
-.chat-markdown pre {
-  background: var(--bg-primary);
-  padding: 0.75rem;
-  overflow-x: auto;
-  margin: 0;
-  font-size: 0.8rem;
-  line-height: 1.55;
-}
-
-.chat-markdown code {
-  font-family: var(--font-mono);
-  font-size: 0.85em;
-}
-
-.chat-markdown :not(pre) > code {
-  background: var(--accent-subtle);
-  color: var(--accent);
-  padding: 0.15rem 0.4rem;
-  border-radius: 4px;
-  font-size: 0.82em;
-}
-
-.chat-markdown ul {
-  margin: 0.35rem 0;
-  padding-left: 1.25rem;
-}
-
-.chat-markdown li { margin: 0.15rem 0; }
-
-.chat-markdown strong {
-  color: var(--text-primary);
-  font-weight: 600;
-}
-
-.chat-markdown em {
-  font-style: italic;
-  color: var(--text-secondary);
-}
-
-.chat-markdown hr {
-  border: none;
-  border-top: 1px solid var(--border);
-  margin: 0.75rem 0;
-}
-
-/* ── Theme Selector ───────────────────────────── */
-
-.theme-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1rem;
-  margin-top: 1rem;
-}
-
-.theme-card {
-  background: var(--bg-card);
-  border: 2px solid var(--border);
-  border-radius: var(--radius-lg);
-  padding: 1rem;
-  cursor: pointer;
-  transition: border-color var(--transition-base), transform var(--transition-fast);
-}
-
-.theme-card:hover {
-  border-color: var(--border-strong);
-  transform: translateY(-1px);
-}
-
-.theme-card.selected {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 1px var(--accent);
-}
-
-.theme-swatches {
-  display: flex;
-  gap: 6px;
-  margin-bottom: 0.75rem;
-}
-
-.theme-swatch {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  border: 1px solid rgba(128, 128, 128, 0.2);
-}
-
-.theme-info {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.25rem;
-}
-
-.theme-info h3 {
-  font-family: var(--font-display);
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: 0;
-}
-
-.theme-mode-badge {
-  font-family: var(--font-mono);
-  font-size: 0.55rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  padding: 2px 6px;
-  border-radius: 4px;
-}
-
-.theme-mode-badge.dark {
-  background: rgba(255, 255, 255, 0.08);
-  color: var(--text-secondary);
-}
-
-.theme-mode-badge.light {
-  background: rgba(59, 130, 246, 0.1);
-  color: #3b82f6;
-}
-
-.theme-description {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  margin: 0;
-}
-
-/* ── Animations ────────────────────────────────── */
-
-@keyframes cardEnter {
-  from {
-    opacity: 0;
-    transform: translateY(12px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes messageIn {
-  from {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* ── Responsive ────────────────────────────────── */
-
-@media (max-width: 900px) {
-  .mc-columns {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 768px) {
-  .sidebar { display: none; }
-
-  .content {
-    padding: 1.5rem;
-  }
-
-  .status-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .chat-message { max-width: 90%; }
-  .chat-sidebar { width: 200px; }
-  .chat-sidebar.closed { width: 0; border-right: none; overflow: hidden; }
-
-  .provider-grid,
-  .channel-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .theme-grid { grid-template-columns: repeat(2, 1fr); }
-}
-
-@media (max-width: 480px) {
-  .content { padding: 1rem; }
-
-  .status-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .page h2 {
-    font-size: 1.4rem;
-  }
-
-  .theme-grid { grid-template-columns: 1fr; }
-}
-
-/* ─── Personality Editor ─── */
-.page .page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.5rem;
-}
-
-.editor-section {
-  margin-bottom: 2rem;
-  padding: 1.5rem;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-}
-
-.editor-section h3 {
-  margin: 0 0 1rem;
-  font-size: 1rem;
-  color: var(--text-primary);
-}
-
-.form-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-}
-
-.form-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-
-.form-field.full-width {
-  grid-column: 1 / -1;
-}
-
-.form-field label {
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-  font-weight: 500;
-}
-
-.field-hint {
-  font-size: 0.7rem;
-  color: var(--text-secondary);
-  opacity: 0.7;
-  margin-top: 0.15rem;
-}
-
-/* Tone sliders */
-.tone-sliders {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.tone-slider-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.25rem;
-}
-
-.tone-label {
-  font-size: 0.85rem;
-  color: var(--text-primary);
-  font-weight: 500;
-}
-
-.tone-value {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  font-variant-numeric: tabular-nums;
-}
-
-.tone-slider-row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.tone-extreme {
-  font-size: 0.7rem;
-  color: var(--text-secondary);
-  min-width: 4rem;
-}
-
-.tone-extreme:last-child {
-  text-align: right;
-}
-
-.slider {
-  flex: 1;
-  height: 6px;
-  -webkit-appearance: none;
-  appearance: none;
-  background: var(--border);
-  border-radius: 3px;
-  outline: none;
-}
-
-.slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: var(--accent);
-  cursor: pointer;
-  border: 2px solid var(--bg-card);
-  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
-}
-
-/* Tag input */
-.tag-input-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.35rem;
-  padding: 0.4rem;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--bg-primary);
-  min-height: 38px;
-  align-items: center;
-}
-
-.tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.15rem 0.5rem;
-  background: var(--accent);
-  color: #fff;
-  border-radius: 4px;
-  font-size: 0.75rem;
-}
-
-.tag-remove {
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  padding: 0 0.15rem;
-  font-size: 0.7rem;
-  opacity: 0.7;
-}
-
-.tag-remove:hover {
-  opacity: 1;
-}
-
-.tag-input {
-  border: none;
-  background: transparent;
-  outline: none;
-  flex: 1;
-  min-width: 80px;
-  font-size: 0.85rem;
-  color: var(--text-primary);
-}
-
-/* Catchphrase grid */
-.catchphrase-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.catchphrase-row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.catchphrase-label {
-  min-width: 5rem;
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-  text-transform: capitalize;
-}
-
-.catchphrase-row input {
-  flex: 1;
-}
-
-/* Custom instructions / SOUL editor */
-.custom-instructions-textarea,
-.soul-editor-textarea {
-  width: 100%;
-  resize: vertical;
-  font-family: inherit;
-  font-size: 0.85rem;
-  padding: 0.75rem;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  transition: border-color var(--transition-fast);
-}
-
-.custom-instructions-textarea:focus,
-.soul-editor-textarea:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-glow);
-}
-
-.soul-editor-textarea {
-  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
-  font-size: 0.8rem;
-}
-
-/* Section toggle */
-.section-toggle {
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  font-size: 0.9rem;
-  cursor: pointer;
-  padding: 0;
-  font-weight: 500;
-}
-
-.section-toggle:hover {
-  color: var(--text-primary);
-}
-
-/* Editor footer */
-.editor-footer {
-  position: sticky;
-  bottom: 0;
-  padding: 1rem 1.5rem;
-  background: var(--bg-primary);
-  border-top: 1px solid var(--border);
-  text-align: right;
-  margin: 0 -1.5rem;
-}
-
-/* Form inputs inside editor-section (for elements not covered by .settings-form) */
-.editor-section input[type="text"],
-.editor-section select {
-  width: 100%;
-  padding: 0.65rem 0.85rem;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-strong);
-  color: var(--text-primary);
-  border-radius: 6px;
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  transition: border-color var(--transition-fast);
-}
-
-.editor-section input[type="text"]:focus,
-.editor-section select:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-glow);
-}
-
-.editor-section input[type="text"]::placeholder {
-  color: var(--text-secondary);
-}