/* ================================================================
   CozyOps – Light ocean-green dashboard
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Core palette – light ocean green */
  --bg-primary: #ffffff;
  --bg-secondary: #f6f9f8;
  --bg-card: #ffffff;
  --bg-elevated: #f8fbfa;
  --bg-hover: #eef5f3;

  /* Accent – dark ocean green */
  --accent: #0f4d4a;
  --accent-dim: rgba(15, 77, 74, 0.08);
  --accent-glow: rgba(15, 77, 74, 0.14);
  --accent-hover: #15635f;
  --accent-solid: #0a3d3b;
  --accent-text: #ffffff;
  --accent-teal: #3d9b8f;

  /* Text */
  --text: #0f2926;
  --text-secondary: #4a6561;
  --text-muted: #6b8480;

  /* Borders */
  --border: rgba(15, 77, 74, 0.12);
  --border-subtle: rgba(15, 77, 74, 0.08);
  --border-accent: rgba(15, 77, 74, 0.35);

  /* Status */
  --success: #0d9488;
  --success-dim: rgba(13, 148, 136, 0.12);
  --error: #dc2626;
  --error-dim: rgba(220, 38, 38, 0.08);
  --warning: #d97706;
  --cyan: #3d9b8f;
  --orange: #ea580c;
  --pink: #db2777;

  /* Links */
  --link: #0f766e;
  --link-hover: #0d9488;
  --link-underline: rgba(15, 118, 110, 0.35);

  /* Fonts */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;

  /* Layout */
  --left-width: 270px;
  --right-width: 420px;
  --topbar-height: 56px;
  --chat-header-height: 48px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 41, 38, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 41, 38, 0.08);
  --shadow-lg: 0 8px 24px rgba(15, 41, 38, 0.1);
  --shadow-glow: 0 0 20px var(--accent-glow);
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dashboard-route-view {
  display: none !important;
}

/* Route mode: hide chat sidebar, editor fills remaining space */
.app.route-mode {
  grid-template-columns: var(--col-1-width) 1fr;
}
.app.route-mode .sidebar-right,
.app.route-mode .col-divider {
  display: none !important;
}
.app.route-mode .editor-placeholder,
.app.route-mode .editor-tabs-bar {
  display: none !important;
}

/* ── Project mode: chat left, canvas right, sidebar as drawer ── */
.app.project-mode {
  grid-template-columns: var(--project-chat-width, 30%) 1fr !important;
}
.app.project-mode .editor-placeholder {
  display: none !important;
}
/* ── Project-mode resize divider ── */
.project-divider {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 20;
  transition: background 0.15s ease;
}
.app.project-mode .project-divider {
  display: block;
}
.project-divider:hover {
  background: var(--accent);
  opacity: 0.5;
}
.project-divider:active {
  background: var(--accent);
  opacity: 0.7;
}
.app.project-mode .sidebar-left {
  display: none !important;
}
.app.project-mode .sidebar-left.mobile-open {
  display: block !important;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 280px;
  max-width: 85vw;
  z-index: 200;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
}
.app.project-mode .sidebar-right {
  grid-column: 1;
  border-left: none;
  border-right: 1px solid var(--border);
  display: flex !important;
  flex-direction: column;
  min-width: 0;
  width: auto !important;
  max-width: none !important;
}
.app.project-mode .editor-main {
  grid-column: 2;
  display: flex !important;
  flex-direction: column;
  min-width: 0;
}
.app.project-mode .col-divider { display: none !important; }
.app.project-mode .panel-drag-handle { display: none !important; }
.app.project-mode #btn-mobile-menu { display: none !important; }
.app.project-mode .chat-tab-expand,
.app.project-mode .chat-tab-collapse { display: none; }
.app.project-mode .expanded-side-panel { display: none !important; }
.app.project-mode .exp-divider { display: none !important; }

/* ── Project header (replaces "Agent" in project mode) ── */
.app.project-mode .chat-header { padding-left: 0.5rem; }
.app.project-mode .chat-title { display: none; }
/* Back-to-dashboard button */
.project-back-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.app.project-mode .project-back-btn { display: flex; }
.project-back-btn:hover { background: var(--bg-hover); color: var(--text); }

.project-header-btn {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: background 0.15s;
}
.project-header-btn:hover { background: var(--bg-hover); }
.app.project-mode .project-header-btn { display: flex; }
img.project-header-logo {
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.project-header-name {
  font-size: 0.88rem;
  font-weight: 600;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-header-chevron {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  transition: transform 0.2s;
}
.project-header-btn.open .project-header-chevron { transform: rotate(180deg); }

.project-header-dropdown-wrap {
  position: relative;
  z-index: 12;
}

/* Project dropdown menu */
.project-dropdown {
  display: none;
  position: fixed;
  min-width: 220px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 99999;
  padding: 0.35rem 0;
  animation: dropFade 0.12s ease;
}
@keyframes dropFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.project-dropdown.open { display: block; }
.project-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background 0.12s;
}
.project-dropdown-item:hover { background: var(--bg-hover); }
.project-dropdown-item svg { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.project-dropdown-sep {
  height: 1px;
  background: var(--border);
  margin: 0.3rem 0;
}
.project-header-upgrade-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-accent);
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}
.project-header-upgrade-btn:hover {
  border-color: var(--accent);
  background: rgba(15, 77, 74, 0.12);
  color: var(--accent-hover);
  box-shadow: var(--shadow-sm);
}
.project-header-upgrade-btn svg {
  flex-shrink: 0;
}

/* Mobile-only: play control — same pill “chip” language as .project-header-upgrade-btn, separate control */
.project-header-preview-btn {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-accent);
  background: var(--accent-dim);
  color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.project-header-preview-btn svg {
  flex-shrink: 0;
  display: block;
  opacity: 0.95;
}
.project-header-preview-btn:hover {
  border-color: var(--accent);
  background: rgba(15, 77, 74, 0.12);
  color: var(--accent-hover);
  box-shadow: var(--shadow-sm);
}
.project-header-preview-btn.active {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.project-header-preview-btn.active svg {
  opacity: 1;
  color: var(--text);
}
.project-header-preview-btn:focus {
  outline: none;
}
.project-header-preview-btn:focus-visible {
  outline: 2px solid rgba(103, 232, 249, 0.45);
  outline-offset: 2px;
}

/* ── Canvas tabs (pinned tabs in editor-tabs-bar) ── */
.app.project-mode .editor-tabs-bar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  padding: 0 0.5rem;
}
.canvas-tab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 1rem;
  height: 100%;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  user-select: none;
}
.canvas-tab:hover { color: var(--text); background: rgba(15, 77, 74, 0.04); }
.canvas-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.canvas-tab svg { flex-shrink: 0; opacity: 0.5; width: 14px; height: 14px; }
.canvas-tab.active svg { opacity: 1; color: var(--text); }
.canvas-tab.canvas-tab-dragging { opacity: 0.35; }
.canvas-tab.canvas-tab-drag-over-left { box-shadow: inset 2px 0 0 0 var(--accent); }
.canvas-tab.canvas-tab-drag-over-right { box-shadow: inset -2px 0 0 0 var(--accent); }
.canvas-tab-divider {
  width: 1px; height: 16px;
  background: var(--border);
  margin: 0 0.35rem;
  flex-shrink: 0;
  align-self: center;
}

/* ── Canvas empty state ── */
.canvas-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 70vh; text-align: center; padding: 2rem 2rem; gap: 1.75rem;
}
.canvas-empty-title { font-size: 1.35rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.canvas-empty-subtitle { font-size: 0.9rem; color: var(--text-secondary); max-width: 440px; line-height: 1.5; }
.canvas-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.75rem; width: 100%;
}
.canvas-source-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.65rem;
  padding: 1.5rem 1.25rem; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-card); cursor: pointer; transition: all 0.2s ease; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.canvas-source-card:hover {
  border-color: var(--accent); background: var(--bg-elevated);
  transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.canvas-source-card[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; box-shadow: none; }
.canvas-source-card svg { width: 28px; height: 28px; }
.canvas-source-card-name { font-size: 0.92rem; font-weight: 600; color: var(--text); }
.canvas-source-card-desc { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.4; }

/* ── Canvas sections ── */
.canvas-section { margin-bottom: 0; }
.canvas-section:last-child { grid-column: 1 / -1; }
.canvas-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}
.canvas-section-header svg { opacity: 0.5; }
.canvas-section .canvas-cards { margin-top: 0.5rem; }
.canvas-section .canvas-source-rows { margin-bottom: 0.5rem; }
.canvas-provider-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}
.canvas-provider-actions .settings-save-btn {
  margin-top: 0;
  padding: 0.38rem 0.72rem;
  font-size: 0.76rem;
}

/* ── Canvas body (populated state) ── */
.canvas-body {
  padding: 1.5rem 1.25rem;
  overflow-y: auto;
  flex: 1;
}
/* ── Files tab ── */
.canvas-body.files-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  max-width: none;
  line-height: normal;
}
.editor-content:has(.files-body) { padding: 0; }
.files-path-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  font-family: var(--font-mono, 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace);
  font-size: 13px;
}
.files-path-bar .files-path-prefix {
  color: var(--text-muted);
  user-select: none;
  flex-shrink: 0;
}
.files-path-bar input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
  outline: none;
  min-width: 0;
}
.files-path-bar .files-go-btn {
  padding: 2px 10px;
  border: 1px solid rgba(15, 77, 74, 0.12);
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.files-path-bar .files-go-btn:hover {
  color: var(--text);
  border-color: rgba(15, 77, 74, 0.2);
}
.files-tree {
  overflow-y: auto;
  padding: 4px 0;
}
.files-tree-row {
  display: flex;
  align-items: center;
  height: 28px;
  padding-right: 12px;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-mono, 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace);
  font-size: 13px;
  user-select: none;
  white-space: nowrap;
}
.files-tree-row:hover {
  background: var(--border-subtle);
}
.files-tree-row.files-tree-changed {
  border-left: 2px solid var(--accent, #4f8ff7);
  background: rgba(79,143,247,0.06);
}
.files-tree-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-right: 8px;
  opacity: 0.5;
  display: flex;
  align-items: center;
}
.files-tree-icon svg {
  width: 16px;
  height: 16px;
}
.files-tree-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.files-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
}
/* ── Files split layout ── */
.files-split { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.files-split .files-tree { flex: 0 0 auto; width: 50%; overflow-y: auto; padding: 4px 0; border-right: 1px solid var(--border-subtle); }
.files-split .files-preview { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.files-preview-header { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; font-family: var(--font-mono, monospace); font-size: 13px; color: var(--text); }
.files-preview-filename { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-preview-actions { display: flex; gap: 4px; margin-left: auto; }
.files-preview-action-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 4px; border-radius: 3px; display: flex; align-items: center; }
.files-preview-action-btn:hover { color: var(--text); background: var(--border-subtle); }
.files-preview-content { flex: 1; overflow: auto; margin: 0; padding: 12px; font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word; background: transparent; }
.files-tree-row.files-tree-selected { background: rgba(79,143,247,0.12); }

.files-start-sandbox-btn {
  margin-top: 4px;
  padding: 6px 18px;
  border: 1px solid rgba(15, 77, 74, 0.12);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.files-start-sandbox-btn:hover { color: var(--text); border-color: rgba(15, 77, 74, 0.2); }
.files-start-sandbox-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Preview tab ── */
.canvas-body.preview-body {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: none;
  line-height: normal;
}
.preview-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.preview-url-display {
  flex: 1;
  background: var(--border-subtle);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  color: var(--text-secondary);
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  outline: none;
}
.preview-refresh-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  transition: color 0.15s, border-color 0.15s;
}
.preview-refresh-btn:hover {
  color: var(--text);
  border-color: var(--border);
}
.preview-iframe-container {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}
.preview-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}
.preview-start-btn {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.preview-start-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
.canvas-body.canvas-body-sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  align-content: start;
}

/* ── Sources tab (clean stage-based layout) ── */
.src-body { padding: 0; }

/* ── Sources sub-tab bar ── */
.src-tabs-bar {
  display: flex; align-items: center; gap: 0;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 1.25rem;
  background: transparent;
}
.src-tab {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.75rem 1rem; border: none; background: none;
  color: var(--text-muted); font-size: 0.82rem; font-weight: 500;
  cursor: pointer; position: relative; transition: color 0.15s;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.src-tab:hover { color: var(--text-secondary); }
.src-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.src-tab svg { opacity: 0.6; }
.src-tab.active svg { opacity: 1; }
.src-tab-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.src-tab-dot--ok { background: #4ade80; }
.src-tab-dot--warn { background: #f59e0b; }
.src-tab-dot--off { background: rgba(15, 77, 74, 0.12); }

/* ── Tab panels ── */
.src-tab-panels { padding: 1.25rem; }
.src-tab-panel { display: none; }
.src-tab-panel.active { display: block; }

/* ── Panel cards (replaces src-section grid) ── */
.src-panel-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.src-panel-card + .src-panel-card {
  margin-top: 1rem;
}
.src-panel-card:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-md);
}
.src-panel-card--connected {
  border-color: rgba(13, 148, 136, 0.35);
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-dim) 100%);
}
.src-panel-card--connected:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.src-panel-card--warn {
  border-color: rgba(245,158,11,0.2);
}
.src-panel-card--warn:hover {
  border-color: rgba(245,158,11,0.3);
  box-shadow: 0 4px 20px rgba(245,158,11,0.08);
}
.src-panel-card--dimmed { opacity: 0.5; }
.src-panel-card-header {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}
.src-panel-card-body { padding: 0.85rem 1rem; }

/* Keep old src-header-icon/title/badge for reuse in panel cards */
.src-header-icon {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent-dim); color: var(--accent); flex-shrink: 0;
  border: 1px solid var(--border-accent);
}
.src-header-icon svg { width: 16px; height: 16px; }
.src-header-title { font-size: 0.88rem; font-weight: 600; color: var(--text); flex: 1; }
.src-badge {
  font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.2rem 0.55rem; border-radius: 999px; flex-shrink: 0;
}
.src-badge-ok {
  background: var(--success-dim); color: #0d6b63; border: 1px solid rgba(13, 148, 136, 0.35);
}
.src-badge-warn {
  background: rgba(245,158,11,0.1); color: #fcd34d; border: 1px solid rgba(245,158,11,0.22);
}
.src-badge-off {
  background: var(--border-subtle); color: var(--text-muted);
  border: 1px solid rgba(15, 77, 74, 0.06);
}
.src-badge-soon {
  background: rgba(15, 77, 74, 0.04); color: var(--border);
  border: 1px solid var(--border-subtle);
}

/* ── Instructions block ── */
.src-instruction p {
  color: var(--text-muted); font-size: 0.82rem; line-height: 1.55; margin-bottom: 0.5rem;
}
.src-instruction-list {
  list-style: none; padding: 0; margin: 0 0 1rem 0;
}
.src-instruction-list li {
  position: relative; padding-left: 1rem; font-size: 0.78rem;
  color: var(--text-muted); line-height: 1.7;
}
.src-instruction-list li::before {
  content: "\2022"; position: absolute; left: 0; color: var(--border);
}

/* Connect prompt (not-connected state) */
.src-connect-prompt { text-align: center; padding: 1rem 0.5rem; }
.src-connect-prompt p { color: var(--text-muted); font-size: 0.82rem; margin-bottom: 0.75rem; line-height: 1.55; }
.src-connect-prompt .src-instruction { text-align: left; }
.src-connect-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1.15rem; border-radius: 8px; border: 1px solid var(--border-accent);
  background: var(--accent); color: var(--accent-text);
  font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.src-connect-btn:hover {
  border-color: var(--accent-hover); background: var(--accent-hover);
  color: var(--accent-text);
}
.src-connect-btn svg { opacity: 0.7; width: 14px; height: 14px; }
.src-waiting-spinner {
  width: 24px; height: 24px; margin: 0.75rem auto;
  border: 2px solid var(--border-subtle); border-top-color: var(--text-muted);
  border-radius: 50%; animation: src-spin 0.8s linear infinite;
}
@keyframes src-spin { to { transform: rotate(360deg); } }

/* Legacy src-section (skeleton uses these) */
.src-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem;
}
.src-section {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-card); box-shadow: var(--shadow-sm); overflow: hidden;
}
.src-section-soon { opacity: 0.35; pointer-events: none; }
.src-section-soon .src-header { border-bottom: none; }
.src-header {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--border-subtle);
}
.src-content { padding: 0.85rem 1rem; }

/* Items list (repos / resources in project) */
.src-items { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.75rem; }
.src-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.7rem; border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--border-subtle); transition: border-color 0.15s, background 0.15s;
}
.src-item:hover { border-color: rgba(15, 77, 74, 0.08); background: var(--border-subtle); }
.src-item-icon { display: flex; align-items: center; color: var(--text-muted); flex-shrink: 0; }
.src-item-name { flex: 1; font-size: 0.82rem; font-weight: 500; color: var(--text); }
.src-item-type {
  font-size: 0.68rem; color: var(--text-muted); text-transform: capitalize;
  padding: 0.12rem 0.4rem; background: var(--border-subtle); border-radius: 5px;
}
.src-item-remove {
  border: none; background: transparent; color: var(--border); cursor: pointer;
  padding: 0.2rem; border-radius: 4px; display: flex; transition: color 0.15s;
}
.src-item-remove:hover { color: #f87171; }

/* Add toggle button */
.src-add-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.75rem; border-radius: 7px;
  border: 1px dashed rgba(15, 77, 74, 0.12); background: transparent;
  color: var(--text-secondary); font-size: 0.82rem; font-weight: 500;
  cursor: pointer; transition: all 0.15s; width: 100%; justify-content: center;
}
.src-add-toggle:hover { border-color: var(--accent); color: var(--accent-text); }

/* Catalog (expandable list of available items) */
.src-catalog {
  margin-top: 0.75rem; padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}
.src-catalog-item {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.5rem 0.65rem; border-radius: 7px; transition: background 0.12s;
}
.src-catalog-item:hover { background: var(--border-subtle); }
.src-catalog-name { flex: 1; font-size: 0.84rem; color: var(--text); }
.src-catalog-meta { font-size: 0.72rem; color: var(--text-muted); }
.src-catalog-add {
  padding: 0.28rem 0.65rem; border-radius: 7px; border: 1px solid var(--border-subtle);
  background: rgba(15, 77, 74, 0.04); color: var(--text); font-size: 0.76rem; font-weight: 500;
  cursor: pointer; transition: all 0.15s; flex-shrink: 0;
}
.src-catalog-add:hover { background: rgba(15, 77, 74, 0.06); border-color: rgba(15, 77, 74, 0.12); color: var(--text); }
.src-catalog-add:disabled { opacity: 0.35; cursor: not-allowed; }
.src-add-all-btn {
  display: block; width: 100%; padding: 0.45rem; margin-bottom: 0.5rem;
  border-radius: 7px; border: 1px solid var(--accent);
  background: rgba(74,124,201,0.08); color: var(--accent-text);
  font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.15s;
}
.src-add-all-btn:hover { background: rgba(74,124,201,0.15); }
.src-add-all-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Azure subscription row */
.src-sub-row {
  display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.75rem;
}
.src-sub-label { font-size: 0.76rem; font-weight: 500; color: var(--text-muted); flex-shrink: 0; }
.src-sub-select {
  flex: 1; padding: 0.42rem 0.65rem; border-radius: 8px;
  border: 1px solid var(--border-subtle); background: var(--border-subtle);
  color: var(--text); font-size: 0.82rem; outline: none;
  transition: border-color 0.15s;
}
.src-sub-select:focus { border-color: rgba(15, 77, 74, 0.12); }

/* Azure actions row */
.src-az-actions {
  display: flex; align-items: center; gap: 0.75rem; margin-top: 0.85rem;
  padding-top: 0.65rem; border-top: 1px solid var(--border-subtle);
}
.src-text-btn {
  border: none; background: transparent; color: var(--text-muted);
  font-size: 0.76rem; cursor: pointer; padding: 0.2rem 0; transition: color 0.15s;
}
.src-text-btn:hover { color: var(--text-secondary); }
.src-text-btn-danger:hover { color: #f87171; }

/* Loading / empty states */
.src-loading { color: var(--text-muted); font-size: 0.82rem; }
.src-empty {
  color: var(--text-secondary);
  font-size: 0.84rem;
  line-height: 1.55;
  text-align: center;
}
.src-shimmer { display: flex; flex-direction: column; gap: 0.65rem; padding: 0.25rem 0; }
.src-shimmer-row { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.75rem; border-radius: 8px; background: rgba(15, 77, 74, 0.04); }
.src-shimmer-row .skeleton-bar:first-child { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }
.src-shimmer-row .skeleton-bar:last-child { flex: 1; height: 10px; }
.src-shimmer-btn { margin-top: 0.35rem; }
.src-shimmer-btn .skeleton-bar { width: 100%; height: 36px; border-radius: 8px; }

/* GitHub repo cards */
.src-checkbox-summary {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.src-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.src-check-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--border-subtle);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.src-check-item:hover {
  border-color: rgba(15, 77, 74, 0.08);
  background: var(--border-subtle);
}
.src-check-item.is-selected {
  border-color: rgba(34,197,94,0.15);
  background: rgba(34,197,94,0.03);
}
/* Hidden native checkbox */
.src-check-input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
/* Custom toggle switch */
.src-check-toggle {
  position: relative;
  width: 32px; height: 18px; flex-shrink: 0;
  background: rgba(15, 77, 74, 0.08);
  border-radius: 9px;
  transition: background 0.2s;
  cursor: pointer;
}
.src-check-toggle::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.2s, background 0.15s;
}
.src-check-item.is-selected .src-check-toggle {
  background: rgba(34,197,94,0.35);
}
.src-check-item.is-selected .src-check-toggle::after {
  transform: translateX(14px);
  background: #4ade80;
}
/* Repo icon */
.src-check-repo-icon {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--border-subtle); color: var(--text-muted);
  flex-shrink: 0;
}
.src-check-item.is-selected .src-check-repo-icon {
  color: rgba(34,197,94,0.6); background: rgba(34,197,94,0.06);
}
.src-check-copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  flex: 1;
}
.src-check-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  word-break: break-word;
}
.src-check-meta {
  font-size: 0.7rem;
  color: rgba(15, 77, 74, 0.2);
}
/* External link arrow */
.src-check-link {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  color: var(--border);
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
  text-decoration: none;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.src-check-link:hover {
  color: var(--text-secondary);
  background: var(--border-subtle);
}

/* GitHub manage link */
.src-gh-manage-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.76rem; color: var(--text-muted); text-decoration: none;
  margin-top: 0.65rem; transition: color 0.15s;
}
.src-gh-manage-link:hover { color: var(--text-secondary); text-decoration: underline; }
.canvas-body h3 {
  font-size: 1.1rem; font-weight: 700; margin-bottom: 0.35rem; color: var(--text); letter-spacing: -0.01em;
}
.canvas-body > p:first-of-type {
  color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 1.25rem; line-height: 1.5;
}
.canvas-body p { color: var(--text); font-size: 0.85rem; margin-bottom: 1rem; }
.canvas-source-rows {
  display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.6rem;
}
.canvas-source-row {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem;
  border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 10px;
  background: var(--bg-card); transition: border-color 0.15s, box-shadow 0.15s;
}
.canvas-source-row:hover { border-color: rgba(34, 197, 94, 0.5); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.canvas-source-row-icon { display: flex; align-items: center; color: var(--text-secondary); }
.canvas-source-row-icon svg { width: 18px; height: 18px; }
.canvas-source-row-name { flex: 1; font-size: 0.88rem; font-weight: 500; color: var(--text); }
.canvas-source-badge {
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem; border-radius: 999px;
  background: rgba(34, 197, 94, 0.12); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.25);
  flex-shrink: 0;
}
.canvas-source-row-type {
  font-size: 0.72rem; color: var(--text-secondary); text-transform: capitalize;
  padding: 0.15rem 0.5rem; background: var(--border-subtle); border-radius: 4px;
}

/* Canvas secrets */
.canvas-secret-row {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem;
  border: 1px solid var(--border); border-radius: 10px; margin-bottom: 0.6rem;
  background: var(--bg-card); transition: border-color 0.15s;
}
.canvas-secret-row:hover { border-color: var(--border-accent); }
.canvas-secret-key { font-family: var(--font-mono); font-size: 0.84rem; font-weight: 500; color: var(--text); flex: 1; }
.canvas-secret-val { font-size: 0.84rem; color: var(--text-muted); letter-spacing: 0.18em; }
.canvas-secret-del {
  border: none; background: transparent; color: var(--text-muted); cursor: pointer;
  padding: 0.3rem; display: flex; align-items: center; border-radius: 4px; transition: all 0.15s;
}
.canvas-secret-del:hover { color: #e55; background: rgba(229,85,85,0.1); }
.canvas-secret-add { display: flex; gap: 0.5rem; margin-top: 1rem; align-items: center; }
.canvas-secret-add input {
  flex: 1; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-elevated); color: var(--text); font-size: 0.84rem; font-family: var(--font-sans);
  outline: none; transition: border-color 0.15s;
}
.canvas-secret-add input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,70,229,0.15); }
.canvas-secret-add button {
  padding: 0.6rem 1rem; border: none; border-radius: 8px;
  background: var(--accent); color: var(--accent-text); font-size: 0.84rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
}
.canvas-secret-add button:hover { filter: brightness(1.1); }

/* Canvas overview */
.canvas-overview { max-width: 720px; }
.canvas-overview .markdown-body { font-size: 0.9rem; line-height: 1.7; }
.canvas-overview-section { margin-top: 1.1rem; }
.canvas-overview-section h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 0.55rem;
}
.canvas-overview-note {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  padding: 0.8rem 0.9rem;
  margin-bottom: 0.65rem;
}
.canvas-overview-note:last-child { margin-bottom: 0; }
.canvas-overview-note-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
}
.canvas-overview-note-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}
.canvas-overview-note-updated {
  color: var(--text-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}
.canvas-overview-note-body {
  margin: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: rgba(0,0,0,0.22);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.77rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.canvas-overview-note-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}
.canvas-overview-note-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  font-size: 0.68rem;
  color: var(--text-secondary);
  background: rgba(15, 77, 74, 0.04);
}
.canvas-overview-deployment-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  padding: 0.75rem 0.85rem;
}
.canvas-overview-deployment-card.is-warning {
  border-color: rgba(245, 166, 35, 0.45);
}
.canvas-overview-deployment-url-row {
  margin-bottom: 0.5rem;
}
.canvas-overview-deployment-link {
  color: #64d9ff;
  text-decoration: none;
  font-weight: 600;
  word-break: break-all;
}
.canvas-overview-deployment-link:hover {
  text-decoration: underline;
}
.canvas-overview-deployment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.canvas-overview-deployment-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  font-size: 0.68rem;
  color: var(--text-secondary);
  background: var(--border-subtle);
}
.canvas-overview-deployment-msg {
  margin: 0 0 0.45rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

/* Canvas automations */
.canvas-automations { max-width: 900px; }
.canvas-automation-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  padding: 1rem 1.1rem;
}
.canvas-automation-card.is-disabled {
  border-style: dashed;
  opacity: 0.92;
}
.canvas-automation-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.45rem;
}
.canvas-automation-card-title { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.canvas-automation-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.canvas-automation-switch input { accent-color: var(--accent); }
.canvas-automation-repo-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}
.canvas-automation-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  min-width: 72px;
}
.canvas-automation-repo-select {
  min-width: 320px;
  max-width: 100%;
  flex: 1;
}
.canvas-automation-sentence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--text);
}
.canvas-automation-input {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  font-size: 0.8rem;
  min-height: 34px;
}
.canvas-automation-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(74,124,201,0.15);
}
.canvas-automation-branch {
  min-width: 140px;
  font-family: var(--font-mono);
}
.canvas-automation-note {
  margin-top: 0.7rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.canvas-automation-runs-wrap { margin-top: 1rem; }
.canvas-automation-runs-title {
  font-size: 0.74rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.2rem;
}
.canvas-automation-empty {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin: 0.35rem 0 0;
}
.canvas-run-item {
  display: flex;
  align-items: flex-start;
  gap: 0.72rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border-subtle);
}
.canvas-run-item:last-child { border-bottom: none; }
.canvas-run-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0.42rem;
  background: var(--text-muted);
  flex-shrink: 0;
}
.canvas-run-dot.is-success { background: #4ade80; }
.canvas-run-dot.is-failure { background: #fb7185; }
.canvas-run-dot.is-neutral { background: var(--text-muted); }
.canvas-run-body { flex: 1; min-width: 0; }
.canvas-run-main {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  justify-content: space-between;
}
.canvas-run-title {
  font-size: 0.84rem;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.canvas-run-status {
  font-size: 0.7rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 77, 74, 0.1);
  color: var(--text);
  flex-shrink: 0;
}
.canvas-run-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.canvas-run-meta a {
  color: var(--accent-text);
  text-decoration: none;
}
.canvas-run-meta a:hover { text-decoration: underline; }
.canvas-run-autofix {
  margin-top: 0.35rem;
  font-size: 0.75rem;
}
.canvas-run-autofix-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent-text);
  text-decoration: none;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: rgba(79,70,229,0.08);
  border: 1px solid rgba(79,70,229,0.18);
  transition: background 0.15s, border-color 0.15s;
}
.canvas-run-autofix-link:hover {
  background: rgba(79,70,229,0.15);
  border-color: rgba(79,70,229,0.3);
  text-decoration: none;
}
.canvas-run-autofix-link--status {
  color: var(--text);
  background: var(--border-subtle);
  border-color: var(--border-subtle);
}
.canvas-run-autofix-link--status:hover {
  background: var(--border-subtle);
  border-color: var(--border);
}
.canvas-run-autofix-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}
.canvas-run-autofix-badge.is-open {
  background: rgba(46,160,67,0.15);
  color: #3fb950;
}
.canvas-run-autofix-badge.is-merged {
  background: rgba(130,80,223,0.15);
  color: #a371f7;
}
.canvas-run-autofix-badge.is-closed {
  background: rgba(218,54,51,0.15);
  color: #f85149;
}
.canvas-run-autofix-badge.is-pending {
  background: rgba(47,129,247,0.15);
  color: #79c0ff;
}
.canvas-run-autofix-badge.is-failed {
  background: rgba(248,81,73,0.16);
  color: #ff938a;
}
.canvas-run-autofix-badge.is-neutral {
  background: var(--border-subtle);
  color: var(--text-secondary);
}
.canvas-run-autofix-spinner {
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 999px;
  border: 2px solid rgba(121,192,255,0.22);
  border-top-color: #79c0ff;
  display: inline-block;
  animation: canvasAutofixSpin 0.85s linear infinite;
}
.canvas-run-autofix-status-text {
  color: var(--text);
}
.canvas-run-autofix-watch {
  margin-left: 0.25rem;
  color: var(--accent-text);
  text-decoration: none;
  font-weight: 600;
}
.canvas-run-autofix-watch:hover {
  text-decoration: underline;
}
@keyframes canvasAutofixSpin {
  to { transform: rotate(360deg); }
}
/* Canvas settings */
.canvas-settings-field { margin-bottom: 1rem; }
.canvas-settings-field label { display: block; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.35rem; font-weight: 500; }
.canvas-settings-input {
  width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-elevated); color: var(--text); font-size: 0.84rem; font-family: var(--font-sans);
  outline: none; transition: border-color 0.15s; box-sizing: border-box;
}
.canvas-settings-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,70,229,0.15); }
.canvas-settings-textarea { min-height: 80px; resize: vertical; }
.canvas-settings-save {
  margin-top: 0.75rem; padding: 0.55rem 1.1rem; border: none; border-radius: 8px;
  background: var(--accent); color: var(--accent-text); font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: filter 0.15s;
}
.canvas-settings-save:hover { filter: brightness(1.1); }

/* ── Danger Zone ── */
.danger-zone {
  margin-top: 2rem; padding: 1.25rem 1.4rem; border-radius: 12px;
  border: 1px solid #ef4444; background: rgba(239,68,68,0.04);
}
.danger-zone h3 { color: #ef4444; font-size: 0.95rem; font-weight: 600; margin: 0 0 0.5rem; }
.danger-zone-desc { color: var(--text-muted); font-size: 0.82rem; line-height: 1.45; margin: 0 0 0.75rem; }
.danger-zone-btn {
  padding: 0.5rem 1rem; border: none; border-radius: 8px;
  background: #ef4444; color: var(--text); font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: filter 0.15s;
}
.danger-zone-btn:hover { filter: brightness(1.1); }
.danger-zone-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }

/* ── Canvas Usage tab ── */
.canvas-usage-panel { max-width: 640px; }
.canvas-usage-meter {
  padding: 1rem 1.15rem; border-radius: 12px; border: 1px solid var(--border);
  background: rgba(15, 77, 74, 0.04); margin-bottom: 1.25rem;
}
.canvas-usage-meter.is-premium {
  border-color: rgba(103, 232, 249, 0.25); background: rgba(103, 232, 249, 0.06);
}
.canvas-usage-meter.is-blocked {
  border-color: rgba(248, 113, 113, 0.35); background: rgba(127, 29, 29, 0.15);
}
.canvas-usage-meter-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.55rem;
}
.canvas-usage-meter-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
}
.canvas-usage-meter-value { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.canvas-usage-meter-bar {
  height: 8px; border-radius: 999px; background: var(--border-subtle); overflow: hidden;
}
.canvas-usage-meter-bar span {
  display: block; width: 0; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-teal) 0%, var(--accent) 100%); transition: width 0.3s ease;
}
.canvas-usage-meter.is-blocked .canvas-usage-meter-bar span {
  background: linear-gradient(90deg, #fb7185 0%, #f97316 100%);
}
.canvas-usage-meter-foot {
  display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; gap: 0.5rem;
}
.canvas-usage-meter-remaining { font-size: 0.76rem; font-weight: 600; color: var(--text-secondary); }
.canvas-usage-meter-blocked { font-size: 0.76rem; font-weight: 600; color: #fb7185; }
.canvas-usage-meter-period { font-size: 0.72rem; color: var(--text-muted); }

.canvas-usage-section { margin-top: 1rem; }
.canvas-usage-section h4 {
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); margin-bottom: 0.6rem; font-weight: 600;
}
.canvas-usage-events { display: flex; flex-direction: column; gap: 0; }
.canvas-usage-event {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--border-subtle);
}
.canvas-usage-event:last-child { border-bottom: none; }
.canvas-usage-event-left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.canvas-usage-event-right { display: flex; align-items: center; gap: 0.65rem; flex-shrink: 0; }
.canvas-usage-event-tool {
  font-size: 0.8rem; font-weight: 500; color: var(--text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
.canvas-usage-event-tokens { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.canvas-usage-event-cost { font-size: 0.8rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.canvas-usage-event-time { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; min-width: 50px; text-align: right; }
.canvas-usage-empty { color: var(--text-muted); font-size: 0.84rem; }

/* ── Canvas Billing tab ── */
.canvas-billing-panel { max-width: 640px; }
.canvas-billing-plan-card {
  padding: 1rem 1.15rem; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-card); margin-bottom: 1.25rem;
}
.canvas-billing-plan-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.canvas-billing-plan-info { display: flex; align-items: baseline; gap: 0.5rem; }
.canvas-billing-plan-name { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.canvas-billing-plan-price { font-size: 0.84rem; color: var(--text-muted); font-weight: 500; }
.canvas-billing-badge {
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.18rem 0.55rem; border-radius: 999px; flex-shrink: 0;
  background: var(--border-subtle); color: var(--text-muted);
  border: 1px solid rgba(15, 77, 74, 0.08);
}
.canvas-billing-badge-active {
  background: rgba(34, 197, 94, 0.12); color: #4ade80; border-color: rgba(34, 197, 94, 0.25);
}
.canvas-billing-badge-trial {
  background: var(--accent-dim); color: var(--accent); border-color: var(--border-accent);
}
.canvas-billing-badge-pastdue {
  background: rgba(248, 113, 113, 0.12); color: #fb7185; border-color: rgba(248, 113, 113, 0.25);
}
.canvas-billing-credits {
  margin-top: 0.55rem; font-size: 0.78rem; color: var(--text-muted);
}
.canvas-billing-actions {
  display: flex; gap: 0.6rem; margin-top: 0.25rem; flex-wrap: wrap;
}
.canvas-billing-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  padding: 0.55rem 1.1rem; border-radius: 8px; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: filter 0.15s, background 0.15s; text-decoration: none;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
}
.canvas-billing-btn:hover { filter: brightness(1.15); background: var(--border-subtle); }
.canvas-billing-btn-primary {
  background: var(--accent); color: var(--accent-text); border-color: var(--accent);
}
.canvas-billing-btn-primary:hover { filter: brightness(1.1); }

.canvas-add-cards { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.25rem; }
.canvas-add-btn {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.85rem;
  border: 1px dashed var(--border); border-radius: 8px; background: transparent;
  color: var(--text-secondary); font-size: 0.8rem; cursor: pointer; transition: all 0.15s;
}
.canvas-add-btn:hover { border-color: var(--accent); color: var(--text); background: rgba(79,70,229,0.1); }
.canvas-add-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Route content rendered inline inside editor area */
.route-inline {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding: 2rem 2.5rem;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-secondary) 100%);
}

.route-shell {
  max-width: 100%;
  margin: 0;
}

.route-shell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.route-shell-title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.route-shell-subtitle {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.route-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.route-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.route-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem;
  background: var(--bg-card);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.route-card:hover {
  border-color: var(--border-accent);
  box-shadow: 0 0 20px rgba(74, 124, 201, 0.1), var(--shadow-md);
  transform: translateY(-2px);
}
.route-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.route-card:hover::before {
  opacity: 0.6;
}

.route-card h3 {
  font-size: 0.95rem;
  margin-bottom: 0.45rem;
}

.route-card p {
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.45;
}

.route-card-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}
.route-card-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent-text);
  flex-shrink: 0;
}
.route-card-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  margin-left: auto;
  flex-shrink: 0;
}

.route-link-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.route-link {
  color: var(--link);
  text-decoration: none;
  font-size: 0.82rem;
}

.route-link:hover {
  color: var(--link-hover);
}

/* ── Settings Tabs ── */
.settings-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--border);
}
.settings-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.6rem 0.9rem;
  text-decoration: none;
  text-transform: capitalize;
  transition: color 0.15s, border-color 0.15s;
  cursor: pointer;
}
.settings-tab:hover { color: var(--text); }
.settings-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.settings-tab svg { opacity: 0.6; }
.settings-tab.active svg { opacity: 1; }

/* ── Settings Body ── */
.settings-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.settings-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  padding: 1.2rem;
}
.settings-section-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.2rem;
}
.settings-section-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0 0 1rem;
}
.settings-field { margin-bottom: 0.8rem; }
.settings-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}
.settings-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text);
  padding: 0.55rem 0.65rem;
  font-size: 0.85rem;
  font-family: inherit;
  transition: border-color 0.15s;
}
.settings-input:focus {
  outline: none;
  border-color: var(--accent);
}
.settings-textarea {
  min-height: 80px;
  resize: vertical;
}
.settings-knowledge-area { min-height: 200px; }
.settings-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.settings-save-btn:hover { background: var(--accent-hover); }
.settings-danger-btn { background: rgba(157, 54, 54, 0.92); }
.settings-danger-btn:hover { background: rgba(184, 66, 66, 0.95); }
.settings-empty {
  color: var(--text-secondary);
  font-size: 0.82rem;
}

/* Sources grid in settings */
.settings-sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.7rem;
}
.settings-source-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.settings-source-card:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(29,52,97,0.08);
}
.settings-source-card:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.settings-source-card-name {
  font-size: 0.85rem;
  font-weight: 600;
}
.settings-source-card-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* Source rows (connected sources list) */
.settings-source-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  margin-bottom: 0.4rem;
}
.settings-source-row-icon { opacity: 0.7; flex-shrink: 0; }
.settings-source-row-name { flex: 1; font-size: 0.82rem; font-weight: 500; }
.settings-source-row-type {
  font-size: 0.72rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Secrets */
.settings-secrets-list { margin-bottom: 0.8rem; }
.settings-secret-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  margin-bottom: 0.35rem;
}
.settings-secret-row-key {
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
  color: var(--text);
}
.settings-secret-row-val {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-left: auto;
}
.settings-secret-add {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}
.settings-secret-key { max-width: 200px; }
.settings-secret-val { flex: 1; }

/* ── Dashboard Home (Lovable-style greeting + input) ── */
.dash-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: min(18vh, 140px);
  text-align: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 3rem;
}
.dash-home-greeting {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 0.4rem;
  color: var(--text);
}
.dash-home-plan-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}
.dash-home-plan-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.dash-home-usage {
  width: 100%;
  max-width: 640px;
  margin-top: 0.95rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.dash-home-usage.is-premium {
  border-color: var(--border-accent);
  background: var(--accent-dim);
}
.dash-home-usage.is-blocked {
  border-color: rgba(220, 38, 38, 0.35);
  background: var(--error-dim);
}
.dash-home-usage-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}
.dash-home-usage-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dash-home-usage-amount {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}
.dash-home-usage-bar {
  height: 9px;
  border-radius: 999px;
  background: rgba(15, 77, 74, 0.06);
  overflow: hidden;
}
.dash-home-usage-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-teal) 0%, var(--accent) 100%);
  transition: width 0.2s ease;
}
.dash-home-usage.is-blocked .dash-home-usage-bar span {
  background: linear-gradient(90deg, #fb7185 0%, #f97316 100%);
}
.dash-home-usage-detail {
  margin-top: 0.5rem;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text);
}
.dash-home-usage-caption {
  margin-top: 0.25rem;
  font-size: 0.76rem;
  color: var(--text-muted);
}
.dash-home-upgrade-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-accent);
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.dash-home-upgrade-btn:hover {
  border-color: var(--accent);
  background: rgba(15, 77, 74, 0.12);
  color: var(--accent-hover);
  box-shadow: var(--shadow-sm);
}
.dash-home-upgrade-btn svg {
  flex-shrink: 0;
}
/* Chat card (Lovable-style) */
.dash-home-chat-card {
  width: 100%;
  max-width: 640px;
  margin-top: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: visible;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.dash-home-chat-card:focus-within {
  border-color: rgba(15, 77, 74, 0.1);
  box-shadow: 0 4px 24px rgba(15, 41, 38, 0.08);
}
.dash-home-textarea {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.9rem;
  font-family: var(--font-sans);
  padding: 1rem 1rem 0.5rem;
  resize: none;
  outline: none;
  min-height: 80px;
  line-height: 1.5;
}
.dash-home-textarea::placeholder {
  color: var(--text-muted);
}
.dash-home-chat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.6rem;
}
.dash-home-chat-left,
.dash-home-chat-right {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.dash-home-tool-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.dash-home-tool-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.dash-home-send {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--accent-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.dash-home-send:hover {
  background: var(--accent-hover);
}

/* ── Home suggestion chips ── */
.dash-home-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
  justify-content: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.dash-home-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.dash-home-chip:hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
  border-color: var(--border-accent);
}
.dash-home-chip svg {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  opacity: 0.45;
}
.dash-home-chip:hover svg {
  opacity: 0.7;
}

/* ── Home mode toggle (Plan/Agent) – mirrors .chat-mode-toggle ── */
.dash-home-mode-toggle {
  display: flex;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2px;
  gap: 1px;
}
.dash-home-mode-btn {
  padding: 0.2rem 0.6rem;
  border: none;
  border-radius: var(--radius-xl);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.02em;
}
.dash-home-mode-btn:hover {
  color: var(--text-secondary);
}
.dash-home-mode-btn.active {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-sm);
}

/* ── Home project selector ── */
.dash-home-project-selector {
  position: relative;
}
.dash-home-project-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  transition: all 0.15s ease;
  white-space: nowrap;
  max-width: 200px;
}
.dash-home-project-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border-accent);
}
.dash-home-project-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-home-project-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  margin-left: 0.1rem;
}
.dash-home-project-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  padding: 0.35rem;
  z-index: 100;
}
.dash-home-project-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.78rem;
  transition: background 0.12s, color 0.12s;
}
.dash-home-project-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.dash-home-project-item.active {
  background: var(--accent-dim);
  color: var(--text);
}
.dash-home-project-item span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-home-project-divider {
  height: 1px;
  background: var(--border);
  margin: 0.3rem 0;
}
.dash-home-project-new {
  color: var(--text-muted);
}
.dash-home-project-new:hover {
  color: var(--text);
}

/* ── Home recent projects ── */
.dash-home-recents {
  width: 100%;
  max-width: 1100px;
  margin-top: 2.5rem;
  text-align: left;
}
.dash-home-recents-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.dash-home-recents-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dash-home-recents-all {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.dash-home-recents-all:hover {
  color: var(--text-secondary);
}
.dash-home-recents-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.dash-home-recent-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dash-home-recent-card:hover {
  border-color: var(--border-accent);
  box-shadow: 0 0 16px rgba(74, 124, 201, 0.08), var(--shadow-md);
  transform: translateY(-2px);
}
.dash-home-recent-thumb {
  height: 140px;
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-subtle);
}
.dash-home-recent-letter {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: #1a3055;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text);
}
.dash-home-recent-info {
  padding: 0.6rem 0.75rem;
}
.dash-home-recent-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-home-recent-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* ── Pricing Route (inside dashboard) ── */
.pricing-route {
  padding: 2rem 2.5rem;
  max-width: 1080px;
  margin: 0 auto;
}
.pricing-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}
.pricing-header-left {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pricing-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-teal);
}
.pricing-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent);
  line-height: 1.15;
  max-width: 28rem;
}
.pricing-subtitle {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  line-height: 1.5;
  max-width: 32rem;
}
.pricing-plan-pill {
  border: 1px solid var(--border-accent);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  color: var(--accent);
  background: var(--accent-dim);
  font-weight: 600;
  white-space: nowrap;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.pricing-grid-individual {
  max-width: 820px;
  margin: 0 auto;
}
.pricing-grid-tiers {
  grid-template-columns: repeat(3, 1fr);
  max-width: none;
  margin: 0;
}
.pricing-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  padding: 1.5rem 1.35rem 1.35rem;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.pricing-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-accent);
  box-shadow: var(--shadow-md);
}
.pricing-card-popular {
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-md);
}
.pricing-card-popular:hover {
  box-shadow: var(--shadow-lg);
}
.pricing-card-enterprise {
  border-color: var(--border-accent);
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--accent-dim) 120%);
}
.pricing-price-custom {
  font-size: 1.65rem;
  letter-spacing: -0.02em;
}
.pricing-tag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 999px;
  padding: 4px 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pricing-plan-name {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--accent);
}
.pricing-price {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.pricing-price-period {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--text-muted);
}
.pricing-desc {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.45;
}
.pricing-urgency {
  margin: 0 0 14px;
  color: var(--accent-teal);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
}
.pricing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 0.86rem;
  flex: 1;
}
.pricing-list li::before {
  content: "\2713";
  color: var(--accent-teal);
  margin-right: 8px;
  font-weight: 700;
}
.pricing-cta {
  margin-top: 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--accent);
  background: var(--bg-card);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 11px 14px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.pricing-cta:hover {
  transform: translateY(-1px);
  border-color: var(--border-accent);
  background: var(--bg-hover);
  box-shadow: var(--shadow-sm);
}
.pricing-cta:active {
  transform: translateY(0);
}
.pricing-cta-primary {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}
.pricing-cta-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-text);
  box-shadow: 0 4px 16px var(--accent-glow);
}
.pricing-cta[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.pricing-cta-enterprise {
  margin-top: 12px;
}
.pricing-contact-placeholder {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pricing-contact-note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted);
}
.pricing-contact-fields {
  display: grid;
  gap: 8px;
}
.pricing-contact-input,
.pricing-contact-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 9px 11px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-secondary);
  background: var(--bg-elevated);
}
.pricing-contact-textarea {
  resize: vertical;
  min-height: 72px;
}
.pricing-contact-input:disabled,
.pricing-contact-textarea:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
@media (max-width: 1020px) {
  .pricing-grid-tiers { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .pricing-grid { grid-template-columns: 1fr; }
}
.pricing-card-skeleton {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 1.4rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  min-height: 380px;
}
@media (max-width: 700px) {
  .pricing-route { padding: 1.25rem 1rem; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-header { flex-wrap: wrap; }
}

/* ── Projects Grid (Lovable-style) ── */
.projects-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.projects-header-left {
  display: flex;
  flex-direction: column;
}
.projects-title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.projects-subtitle {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}
.projects-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.projects-search {
  width: 220px;
  padding: 0.45rem 0.7rem 0.45rem 2rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.projects-search:focus {
  border-color: rgba(29, 52, 97, 0.5);
  box-shadow: 0 0 0 2px rgba(29, 52, 97, 0.12);
}
.projects-search-wrap {
  position: relative;
}
.projects-search-wrap svg {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.projects-new-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.projects-new-btn:hover {
  background: var(--accent-hover);
}

/* Project card (Lovable-style) */
.project-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.project-card:hover {
  border-color: var(--border-accent);
  box-shadow: 0 0 20px rgba(74, 124, 201, 0.08), var(--shadow-md);
  transform: translateY(-2px);
}
.project-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.project-card:hover::before {
  opacity: 0.5;
}
.project-card-thumb {
  height: 140px;
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-subtle);
}
.project-card-thumb-letter {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: #1a3055;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text);
}
.project-card-body {
  padding: 1rem 1.1rem;
}
.project-card-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-card-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.project-card-ws {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* New project "+" card */
.project-card-new {
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-muted);
  gap: 0.5rem;
}
.project-card-new:hover {
  border-color: var(--border-accent);
  color: var(--text-secondary);
  background: var(--bg-card);
}
.project-card-new svg {
  opacity: 0.5;
}
.project-card-new:hover svg {
  opacity: 0.8;
}
.project-card-new span {
  font-size: 0.82rem;
  font-weight: 500;
}

/* Skeleton loading card (matches .project-card dimensions) */
.project-card-skeleton {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  overflow: hidden;
  pointer-events: none;
}
.project-card-skeleton .skeleton-thumb {
  height: 140px;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-subtle);
}
.project-card-skeleton .skeleton-thumb-circle {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: skeletonCardShimmer 1.5s ease-in-out infinite;
}
.project-card-skeleton .skeleton-body {
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.project-card-skeleton .skeleton-line {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: skeletonCardShimmer 1.5s ease-in-out infinite;
}
.project-card-skeleton .skeleton-line.w-70 { width: 55%; }
.project-card-skeleton .skeleton-line.w-45 { width: 35%; }
.project-card-skeleton .skeleton-line.w-55 { width: 40%; }
.project-card-skeleton:nth-child(2) .skeleton-thumb-circle,
.project-card-skeleton:nth-child(2) .skeleton-line { animation-delay: 0.15s; }
.project-card-skeleton:nth-child(3) .skeleton-thumb-circle,
.project-card-skeleton:nth-child(3) .skeleton-line { animation-delay: 0.3s; }
@keyframes skeletonCardShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Recents section (sidebar) ── */
.sidebar-recents {
  padding: 0.3rem 0.6rem 0.5rem;
}
.sidebar-recents-title {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
  padding: 0 0.3rem;
}

/* ── App Grid ── */
.app {
  display: grid;
  position: relative;
  --col-1-width: var(--left-width);
  --col-2-width: 1fr;
  --col-3-width: var(--right-width);
  grid-template-columns: var(--col-1-width) var(--col-2-width) var(--col-3-width);
  grid-template-rows: 1fr;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}
.app.chat-expanded .panel-hidden-expanded {
  display: none !important;
}
.app.chat-expanded .col-divider.divider-hidden-expanded {
  display: none;
}

/* ── Expanded mode: 2-column layout inside chat sidebar ── */
.app.chat-expanded .sidebar-right {
  display: grid;
  --exp-right-width: 260px;
  grid-template-columns: 1fr var(--exp-right-width);
  grid-template-rows: auto auto 1fr;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
.app.chat-expanded .chat-header {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
}
.app.chat-expanded .chat-tabs-bar {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  overflow: visible;
  z-index: 10;
}
.app.chat-expanded .chat-container {
  grid-column: 1;
  grid-row: 3;
  min-width: 0;
  overflow: hidden;
}

/* ── Expanded side panels ── */
.expanded-side-panel {
  display: none;
}
.app.chat-expanded .expanded-side-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-color: var(--border);
}
.app.chat-expanded .expanded-history-panel {
  display: none !important;
}
.app.chat-expanded .expanded-diffs-panel {
  border-left: 1px solid var(--border);
  grid-column: 2;
  grid-row: 1 / -1;
  min-width: 200px;
}
.app.chat-expanded #exp-divider-left {
  display: none !important;
}
.app.chat-expanded .repo-list {
  max-height: 50vh;
}


/* ── Expanded panel drag handles ── */
.exp-drag-handle {
  display: none;
  align-items: center;
  color: var(--text-muted);
  opacity: 0.4;
  cursor: grab;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.exp-drag-handle:hover { opacity: 0.8; }
.exp-drag-handle:active { cursor: grabbing; }
.app.chat-expanded .exp-drag-handle { display: inline-flex; }

/* ── Expanded inner resize dividers ── */
.exp-divider {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 20;
  background: transparent;
  transition: background 0.15s;
}
.exp-divider:hover,
.exp-divider.active {
  background: var(--accent);
  opacity: 0.35;
}
.app.chat-expanded .exp-divider { display: block; }
.app.chat-expanded .expanded-panel-header {
  cursor: grab;
}
.app.chat-expanded .expanded-panel-header:active {
  cursor: grabbing;
}
.expanded-panel-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.75rem 0.85rem 0.5rem;
  flex-shrink: 0;
}
.expanded-history-list,
.expanded-diffs-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 0.5rem 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.expanded-history-list::-webkit-scrollbar,
.expanded-diffs-list::-webkit-scrollbar {
  display: none;
}
.expanded-panel-empty {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0.75rem 0.4rem;
  text-align: center;
  line-height: 1.5;
}

/* ── Repo picker in commits panel ── */
.commits-repo-pick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.commits-repo-pick:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.commits-repo-pick-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  opacity: 0.6;
}
.commits-repo-pick-icon svg { width: 100%; height: 100%; }
.commits-repo-pick-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Activity items in expanded panel ── */

/* ── Info icon in panel header ── */
.commits-info-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: var(--text-muted);
  cursor: help;
  position: relative;
  vertical-align: middle;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.commits-info-icon:hover { opacity: 1; }
.commits-info-icon::after {
  content: attr(title);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.62rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.45;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  width: 180px;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 100;
}
.commits-info-icon:hover::after { opacity: 1; }

/* ── Commit items in expanded panel ── */
.commit-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0.5rem 0.65rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 0.3rem;
  cursor: pointer;
}
.commit-item:hover {
  border-color: var(--border);
  background: var(--bg-hover);
}
.commit-item.selected {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.commit-item-top {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.commit-sha {
  font-size: 0.7rem;
  font-family: var(--font-mono);
  color: var(--accent-text);
  flex-shrink: 0;
}
.commit-message {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.commit-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--text);
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
  text-decoration: none;
}
.commit-item:hover .commit-link { opacity: 0.85; }
.commit-link:hover { color: var(--accent-text); opacity: 1; }
.commit-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.commit-avatar {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ================================================================
   TOP BAR
   ================================================================ */
.topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  background: rgba(15, 77, 74, 0.06);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-text);
  border: 1px solid var(--border-accent);
  box-shadow: var(--shadow-sm);
}
.logo-icon svg {
  width: 18px;
  height: 18px;
}

.logo {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* ── Top bar action buttons ── */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.topbar-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
  white-space: nowrap;
}
.topbar-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-accent);
  color: var(--text);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.topbar-btn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.topbar-btn-dot.connected {
  background: var(--success);
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
}
/* Spinner state for dots while fetching data after connect */
@keyframes dotSpin {
  to { transform: rotate(360deg); }
}
.topbar-btn-dot.loading {
  width: 10px;
  height: 10px;
  background: transparent;
  border: 2px solid rgba(74, 124, 201, 0.25);
  border-top-color: var(--accent);
  animation: dotSpin 0.65s linear infinite;
  box-shadow: none;
}

.topbar-btn-icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.topbar-btn-label {
  font-size: 0.8125rem;
}

/* Connected state */
.topbar-btn.is-connected {
  border-color: rgba(52, 211, 153, 0.2);
  background: rgba(52, 211, 153, 0.06);
}
.topbar-btn.is-connected:hover {
  border-color: rgba(96, 165, 250, 0.3);
  background: rgba(96, 165, 250, 0.08);
  box-shadow: 0 0 16px rgba(96, 165, 250, 0.15);
}
.topbar-btn.is-connected:hover .topbar-btn-label {
  color: rgb(96, 165, 250);
}
.topbar-btn.is-connected:hover .topbar-btn-dot {
  background: var(--success);
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
}

.topbar-btn-upgrade {
  border-color: var(--border-accent);
  background: var(--accent-dim);
  color: var(--accent);
}
.topbar-btn-upgrade:hover {
  border-color: var(--accent);
  background: rgba(15, 77, 74, 0.12);
  color: var(--accent-hover);
  box-shadow: var(--shadow-sm);
}
#dot-upgrade {
  background: var(--accent-teal);
  box-shadow: 0 0 8px var(--accent-glow);
}

.plan-chip {
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.plan-chip.is-premium {
  border-color: var(--border-accent);
  background: var(--accent-dim);
  color: var(--accent);
}
.usage-chip {
  margin-top: 0.65rem;
  padding: 0.72rem 0.78rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--border-subtle);
}
.usage-chip.is-premium {
  border-color: var(--border-accent);
  background: var(--accent-dim);
}
.usage-chip.is-blocked {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(127, 29, 29, 0.22);
}
.usage-chip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.usage-chip-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.usage-chip-value {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}
.usage-chip-bar {
  margin-top: 0.48rem;
  height: 7px;
  border-radius: 999px;
  background: rgba(15, 77, 74, 0.06);
  overflow: hidden;
}
.usage-chip-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-teal) 0%, var(--accent) 100%);
  transition: width 0.2s ease;
}
.usage-chip.is-blocked .usage-chip-bar span {
  background: linear-gradient(90deg, #fb7185 0%, #f97316 100%);
}
.usage-chip-detail {
  margin-top: 0.42rem;
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.topbar-project {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.45rem 0.3rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
}

.topbar-project-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.topbar-project-picker {
  min-width: 190px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.8rem;
}

/* ── Generic button ── */
.btn {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: all 0.15s ease;
}
.btn:hover {
  background: var(--bg-hover);
  border-color: rgba(15, 77, 74, 0.08);
}

.btn-send {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-send:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 0 16px var(--accent-glow);
}
.btn-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-icon {
  padding: 0.35rem 0.5rem;
  font-size: 1rem;
  line-height: 1;
  min-width: auto;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}
.btn-icon:hover {
  background: var(--bg-hover);
  color: var(--text);
}

/* ================================================================
   LEFT SIDEBAR
   ================================================================ */
.sidebar-left {
  grid-row: 1;
  background: var(--bg-secondary);
  overflow-y: auto;
  scrollbar-width: none;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 200px;
}
.sidebar-left::-webkit-scrollbar {
  display: none;
}

/* ── Sidebar Brand ── */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem 0.75rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-brand .logo-icon {
  width: 32px;
  height: 32px;
  background: var(--accent);
  color: var(--accent-text);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.sidebar-brand .logo-icon svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
}
.sidebar-brand .logo {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.03em;
}

/* ── Workspace Switcher (Lovable-style) ── */
.ws-switcher {
  position: relative;
  padding: 0.3rem 0.55rem;
  flex-shrink: 0;
}
.ws-switcher-trigger {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.15s ease;
  text-align: left;
}
.ws-switcher-trigger:hover {
  background: var(--bg-hover);
}
.ws-switcher-trigger.open {
  border-color: rgba(15, 77, 74, 0.08);
  background: var(--bg-card);
}
.ws-switcher-avatar {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.68rem;
  flex-shrink: 0;
}
.ws-switcher-ws-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  font-size: 0.82rem;
}
.ws-switcher-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  margin-left: auto;
}
.ws-switcher-trigger.open .ws-switcher-chevron {
  transform: rotate(180deg);
}

/* ── Switcher Popover (Lovable-style) ── */
.ws-switcher-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0.55rem;
  right: 0.55rem;
  max-height: 450px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 500;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: wsPopoverIn 0.15s ease-out;
}
@keyframes wsPopoverIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Active workspace details panel */
.ws-popover-active {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}
.ws-popover-active-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.ws-popover-active-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.ws-popover-active-info {
  min-width: 0;
  flex: 1;
}
.ws-popover-active-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-popover-active-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}
.ws-popover-active-actions {
  display: flex;
  gap: 0.35rem;
}
.ws-popover-active-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.5rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  transition: all 0.15s ease;
}
.ws-popover-active-btn:hover {
  background: var(--accent-dim);
  color: var(--accent);
}
/* Divider label */
.ws-popover-divider-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  padding: 0.55rem 0.75rem 0.25rem;
}
.ws-popover-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.3rem 0;
  scrollbar-width: none;
}
.ws-popover-body::-webkit-scrollbar { display: none; }

.ws-popover-group {
  padding: 0.2rem 0;
}
.ws-popover-group + .ws-popover-group {
  border-top: 1px solid var(--border);
}
.ws-popover-group-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.ws-group-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.ws-group-dot.inactive {
  background: var(--text-muted);
}
.ws-popover-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem 0.45rem 1.2rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.12s ease;
}
.ws-popover-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.ws-popover-item.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-left: 2px solid var(--accent);
  padding-left: calc(1.2rem - 2px);
}
.ws-popover-item.active .ws-popover-item-name {
  color: var(--accent);
  font-weight: 600;
}
.ws-popover-item-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-text);
  flex-shrink: 0;
}
.ws-popover-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.ws-popover-item-badge {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  flex-shrink: 0;
}
.ws-popover-item-check {
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0;
}
.ws-popover-item.active .ws-popover-item-check {
  opacity: 1;
}
.ws-popover-footer {
  border-top: 1px solid var(--border);
  padding: 0.4rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.ws-popover-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.45rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}
.ws-popover-action:hover {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}
.ws-popover-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* ── Sidebar Section Label ── */
.sidebar-section-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.55rem 0.85rem 0.15rem;
  flex-shrink: 0;
}

/* ── Sidebar Navigation ── */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.4rem 0.55rem;
  flex-shrink: 0;
}
.sidebar-nav:first-of-type {
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}
.sidebar-nav-projects {
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.48rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.12s ease;
}
.sidebar-nav-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.sidebar-nav-item.active {
  background: var(--accent-dim);
  color: var(--text);
}
.sidebar-nav-item.active .sidebar-nav-icon {
  color: var(--text);
}
.sidebar-nav-icon {
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: color 0.12s;
}
.sidebar-nav-chevron {
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}
.sidebar-nav-item.expanded .sidebar-nav-chevron {
  transform: rotate(180deg);
}

/* ── Sidebar Resources (collapsible) ── */
.sidebar-resources {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 0 0.85rem 0.5rem;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.sidebar-resources::-webkit-scrollbar { display: none; }
.sidebar-resources.collapsed {
  max-height: 0 !important;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  flex: 0;
}

/* ── Sidebar Connections ── */
.sidebar-connections {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0.5rem 0.55rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-conn-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.55rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  transition: all 0.15s ease;
  width: 100%;
  text-align: left;
}
.sidebar-conn-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.sidebar-conn-btn.is-connected {
  color: var(--text-secondary);
  background: rgba(52, 211, 153, 0.06);
}
.sidebar-conn-btn.is-connected:hover {
  background: rgba(96, 165, 250, 0.08);
}
.sidebar-conn-btn .topbar-btn-dot {
  margin-left: auto;
}
.sidebar-conn-btn .topbar-btn-icon {
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── Sidebar Login (logged out state) ── */
.sidebar-login {
  margin-top: auto;
  padding: 0.75rem 0.85rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.sidebar-login-btn:hover { background: var(--accent-hover); }
.sidebar-login-btn svg { flex-shrink: 0; }

/* ── Sidebar Phone Login ── */
.sidebar-login-divider {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.75rem 0 0.7rem;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sidebar-login-divider::before,
.sidebar-login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.sidebar-login-divider span {
  white-space: nowrap;
}

.sidebar-phone-login {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.sidebar-phone-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.sidebar-phone-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0.5rem 0.65rem;
  background: var(--bg-secondary);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-family: var(--font-sans);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.sidebar-phone-input::placeholder {
  color: var(--text-muted);
}
.sidebar-phone-input:focus {
  outline: none;
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.sidebar-phone-input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.sidebar-phone-otp {
  text-align: center;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}

.sidebar-phone-btn {
  flex-shrink: 0;
  padding: 0.5rem 0.68rem;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.sidebar-phone-btn:hover {
  background: var(--accent-hover);
}
.sidebar-phone-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.sidebar-phone-btn-secondary {
  background: var(--accent-dim);
  color: var(--text);
  border: 1px solid var(--border-accent);
}
.sidebar-phone-btn-secondary:hover {
  background: var(--bg-hover);
}

.sidebar-phone-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1rem;
}
.sidebar-phone-link {
  padding: 0;
  background: none;
  border: none;
  color: #8fb3ff;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}
.sidebar-phone-link:hover {
  color: #bfd3ff;
}
.sidebar-phone-link:disabled {
  color: var(--text-muted);
  opacity: 0.7;
  cursor: not-allowed;
}
.sidebar-phone-meta-text {
  flex: 1;
  min-width: 0;
  text-align: right;
  color: var(--text-muted);
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-phone-feedback {
  margin-top: 0.1rem;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(42, 74, 127, 0.25);
  background: rgba(29, 52, 97, 0.12);
  color: var(--text-secondary);
  font-size: 0.76rem;
  line-height: 1.4;
}
.sidebar-phone-feedback.is-error {
  background: var(--error-dim);
  border-color: rgba(248, 113, 113, 0.3);
  color: var(--error);
}
.sidebar-phone-feedback.is-success {
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.25);
  color: #86efac;
}

/* ── Sidebar User (logged in state) ── */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
  flex-shrink: 0;
}
.sidebar-user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-user-name {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-user-logout {
  padding: 0.3rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.sidebar-user-logout:hover {
  background: var(--error-dim);
  color: var(--error);
}

/* Mobile menu button (hidden on desktop) */
.mobile-menu-btn {
  display: none;
}

/* ── Create Workspace/Project Modal ── */
.ws-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10, 10, 20, 0.7);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: azFadeIn 0.15s ease-out;
}
.ws-modal {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px 24px; width: 380px; max-width: 92vw;
  box-shadow: var(--shadow-lg); position: relative;
  animation: azSlideUp 0.2s ease-out;
}
.ws-modal-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  color: var(--text-muted); font-size: 1.3rem; cursor: pointer; padding: 4px;
  line-height: 1; transition: color 0.15s;
}
.ws-modal-close:hover { color: var(--text); }
.ws-modal-title { font-size: 1rem; font-weight: 600; margin-bottom: 16px; color: var(--text); }
.ws-modal-label {
  display: block; font-size: 0.72rem; font-weight: 500; color: var(--text-secondary);
  margin-bottom: 5px; margin-top: 12px; text-transform: uppercase; letter-spacing: 0.04em;
}
.ws-modal-label:first-of-type { margin-top: 0; }
.ws-modal-input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 0.85rem;
  background: var(--bg-secondary); color: var(--text);
  font-family: var(--font-sans); transition: border-color 0.15s;
}
.ws-modal-input::placeholder { color: var(--text-muted); }
.ws-modal-input:focus { outline: none; border-color: var(--accent-hover); box-shadow: 0 0 0 3px var(--accent-dim); }
.ws-modal-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 9px 18px; border-radius: var(--radius-sm); border: none;
  background: var(--accent); color: var(--accent-text); font-weight: 600; font-size: 0.85rem;
  font-family: var(--font-sans); cursor: pointer; margin-top: 18px;
  transition: background 0.15s, transform 0.1s;
}
.ws-modal-submit:hover { background: var(--accent-hover); }
.ws-modal-submit:active { transform: scale(0.985); }
.ws-modal-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.ws-modal-spinner {
  display: none; width: 14px; height: 14px;
  border: 2px solid rgba(15, 77, 74, 0.2); border-top-color: var(--text);
  border-radius: 50%; animation: azSpin 0.6s linear infinite;
}
.ws-modal-submit.loading .ws-modal-spinner { display: block; }
.ws-modal-error {
  margin-top: 8px; padding: 7px 10px; border-radius: var(--radius-sm);
  background: var(--error-dim); border: 1px solid rgba(248,113,113,0.3);
  color: var(--error); font-size: 0.8rem;
}

.sidebar-section {
  margin-bottom: 1.25rem;
}
.sidebar-section h2 {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 0.6rem 0.25rem;
  font-weight: 600;
}

.azure-resources-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.azure-resources-section .azure-resource-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: none;
}
.azure-resources-section .azure-resource-list::-webkit-scrollbar {
  display: none;
}
.expanded-history-list .azure-resource-item {
  margin-bottom: 0.3rem;
  overflow: hidden;
  min-width: 0;
}
.expanded-history-list .azure-resource-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expanded-history-list .azure-resource-meta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── Recent Azure Resources in sidebar ── */
.sidebar-recent-azure-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.sidebar-recent-azure-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 0;
  scrollbar-width: none;
}
.sidebar-recent-azure-list::-webkit-scrollbar { display: none; }
.sidebar-recent-azure-list .azure-resource-item { margin-bottom: 0.3rem; }
.sidebar-recent-azure-list .azure-resource-item {
  overflow: hidden;
  min-width: 0;
}
.sidebar-recent-azure-list .azure-resource-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-recent-azure-list .azure-resource-meta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── Repo list ── */
.repo-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 11rem;
  overflow-y: auto;
  scrollbar-width: none;
}
.repo-list::-webkit-scrollbar {
  display: none;
}

/* ── Sidebar icons ── */
.sidebar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}
.sidebar-icon svg {
  width: 16px;
  height: 16px;
}
.sidebar-icon-gh { color: var(--text); opacity: 0.9; }
.azure-resource-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.azure-resource-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--text);
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
  text-decoration: none;
}
.azure-resource-item:hover .azure-resource-link { opacity: 0.85; }
.azure-resource-link:hover { color: var(--accent-text); opacity: 1; }

.repo-item {
  padding: 0.6rem 0.75rem;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--border-subtle);
  transition: all 0.15s ease;
}
.repo-item:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.repo-item .repo-name {
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s;
}
.repo-item .repo-name:hover {
  color: var(--accent-text);
}
/* (file-tree styles removed — sidebar uses Azure resource list instead) */

/* ── Repo selected state ── */
.repo-item.selected {
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* ── Azure resource list ── */
.azure-resource-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.azure-resource-item {
  padding: 0.5rem 0.65rem;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border: 1px solid var(--border-subtle);
  transition: border-color 0.15s;
  cursor: pointer;
}
.azure-resource-item:hover {
  border-color: var(--border);
  background: var(--bg-hover);
}
.azure-resource-item.selected {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.azure-resource-name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.8rem;
}
.azure-resource-meta {
  color: var(--text-muted);
  font-size: 0.7rem;
  display: flex;
  gap: 0.5rem;
}
.azure-resource-type {
  color: var(--text-secondary);
  font-weight: 500;
}
.azure-resource-location {
  color: var(--text-muted);
}

/* ── Skeleton loading placeholders ── */
@keyframes skeletonShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-item {
  padding: 0.5rem 0.65rem;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border: 1px solid var(--border-subtle);
}
.skeleton-bar {
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-hover) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
}
.skeleton-bar.w-60 { width: 60%; }
.skeleton-bar.w-40 { width: 40%; }
.skeleton-bar.w-80 { width: 80%; }

/* ── Textarea shimmer overlay (for textarea loading states) ── */
.textarea-shimmer-wrap { position: relative; }
.textarea-shimmer-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  padding: 0.6rem 0.75rem; pointer-events: none; transition: opacity 0.2s ease;
}
.textarea-shimmer-wrap.shimmer-loaded .textarea-shimmer-overlay { opacity: 0; }

/* ── Plan shimmer placeholder (shown while file is being built) ── */
.plan-shimmer-placeholder {
  padding: 2rem 2.5rem;
  max-width: 720px;
}
.plan-shimmer-placeholder .skeleton-bar {
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-hover) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
}
.plan-shimmer-title .skeleton-bar {
  height: 18px;
}
.plan-shimmer-section .skeleton-bar {
  height: 14px;
  opacity: 0.7;
}

/* ================================================================
   RESOURCE GROUP CANVAS
   ================================================================ */

/* Override editor-body constraints when canvas is active */
.editor-body.rg-canvas-view {
  max-width: none;
  padding: 0;
  height: 100%;
  line-height: normal;
}

/* Canvas container */
.rg-canvas {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary);
  overflow: hidden;
}

/* Fixed header */
.rg-canvas-header {
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  background: var(--bg-primary);
  z-index: 5;
}
.rg-canvas-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.2rem;
}
.rg-canvas-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Scrollable viewport */
.rg-canvas-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  background-color: var(--bg-primary);
  background-image:
    linear-gradient(rgba(124,108,240,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,108,240,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  cursor: grab;
}
.rg-canvas-viewport.is-panning {
  cursor: grabbing;
}

/* Surface holds all positioned nodes */
.rg-canvas-surface {
  position: relative;
  min-height: 100%;
}

/* ── SVG connection layer ── */
.rg-canvas-svg {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}
.rg-conn-glow {
  fill: none;
  stroke: rgba(74, 124, 201, 0.07);
  stroke-width: 8;
}
.rg-conn-path {
  fill: none;
  stroke: rgba(74, 124, 201, 0.3);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.rg-conn-flow {
  fill: none;
  stroke: rgba(74, 124, 201, 0.55);
  stroke-width: 1.5;
  stroke-dasharray: 4 12;
  stroke-linecap: round;
  animation: connFlow 2s linear infinite;
}
@keyframes connFlow {
  from { stroke-dashoffset: 16; }
  to { stroke-dashoffset: 0; }
}

/* ── Resource node card (glassmorphism) ── */
.rg-node {
  position: absolute;
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(36, 38, 64, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.22),
    0 0 0 1px var(--border-subtle) inset;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
  user-select: none;
  touch-action: none;
  animation: nodeEnter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  z-index: 1;
}
@keyframes nodeEnter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.rg-node:hover {
  border-color: rgba(74, 124, 201, 0.35);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(74, 124, 201, 0.06),
    0 0 0 1px rgba(74, 124, 201, 0.12) inset;
  z-index: 2;
}

.rg-node-selected {
  border-color: var(--accent) !important;
  box-shadow:
    0 0 0 2px var(--accent-glow),
    0 8px 28px rgba(0, 0, 0, 0.3),
    0 0 32px rgba(74, 124, 201, 0.1) !important;
  z-index: 3;
}

.rg-node-dragging {
  cursor: grabbing !important;
  z-index: 100 !important;
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(74, 124, 201, 0.12) !important;
  transform: scale(1.03) !important;
  transition: box-shadow 0.1s, transform 0.1s !important;
}

/* Accent left edge */
.rg-node-accent {
  width: 4px;
  flex-shrink: 0;
}

/* Node body */
.rg-node-body {
  flex: 1;
  padding: 0.65rem 0.8rem;
  min-width: 0;
}

/* Top row: icon + info + status */
.rg-node-top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.rg-node-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border-subtle);
  border-radius: 7px;
  padding: 4px;
}
.rg-node-icon svg {
  width: 22px;
  height: 22px;
}
.rg-node-info {
  flex: 1;
  min-width: 0;
}
.rg-node-name {
  color: var(--text);
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.rg-node-type {
  color: var(--text-muted);
  font-size: 0.67rem;
  margin-top: 2px;
}

/* Status indicator dot */
.rg-node-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-muted);
}
.rg-node-status.rg-status-ok {
  background: var(--success);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.45);
}
.rg-node-status.rg-status-err {
  background: var(--error);
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.45);
  animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(248, 113, 113, 0.4); }
  50% { box-shadow: 0 0 14px rgba(248, 113, 113, 0.7); }
}

/* Detail pills */
.rg-node-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}
.rg-node-pill {
  font-size: 0.62rem;
  color: var(--text-secondary);
  background: var(--border-subtle);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Skeleton loading ── */
.skel-bar {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg,
    var(--bg-elevated) 25%,
    rgba(74, 124, 201, 0.08) 50%,
    var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.8s ease-in-out infinite;
}
.skel-bar-sm { height: 8px; }
.skel-bar.w-60 { width: 60px; }
.skel-bar.w-80 { width: 80px; }
.skel-bar.w-100 { width: 100px; }
.skel-bar.w-120 { width: 120px; }
.skel-bar.w-160 { width: 160px; }
.skel-bar.w-200 { width: 200px; }
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel-circle {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
  background: linear-gradient(90deg,
    var(--bg-elevated) 25%,
    rgba(74, 124, 201, 0.08) 50%,
    var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.8s ease-in-out infinite;
}
.skel-accent {
  background: linear-gradient(180deg,
    var(--bg-elevated) 25%,
    rgba(74, 124, 201, 0.1) 50%,
    var(--bg-elevated) 75%) !important;
  background-size: 100% 200% !important;
  animation: skeletonShimmerV 1.8s ease-in-out infinite !important;
}
@keyframes skeletonShimmerV {
  0% { background-position: 0 200%; }
  100% { background-position: 0 -200%; }
}
.skel-connection {
  stroke: var(--bg-elevated);
  stroke-width: 2;
  stroke-dasharray: 6 4;
  animation: skelConnPulse 2s ease-in-out infinite;
}
@keyframes skelConnPulse {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.4; }
}
.rg-node-skel {
  animation: skelNodePulse 2s ease-in-out infinite !important;
  cursor: default !important;
}
@keyframes skelNodePulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.85; }
}
.rg-node-skel .rg-node-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}
.rg-node-skel .skel-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

/* ── RG Canvas sub-tabs ── */
.rg-subtab-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 1.25rem;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
  min-height: 34px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.rg-subtab-bar::-webkit-scrollbar {
  display: none;
}

.rg-subtab {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  max-width: 160px;
  flex-shrink: 0;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  border-bottom: none;
  position: relative;
  user-select: none;
}
.rg-subtab:hover {
  background: var(--bg-card);
  color: var(--text-secondary);
}
.rg-subtab.active {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border-subtle);
}
.rg-subtab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--bg-card);
}

.rg-subtab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.6;
}
.rg-subtab-icon svg {
  width: 14px;
  height: 14px;
}
.rg-subtab.active .rg-subtab-icon {
  opacity: 0.9;
}

.rg-subtab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.rg-subtab-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
  opacity: 0;
  transition: all 0.12s ease;
}
.rg-subtab:hover .rg-subtab-close,
.rg-subtab.active .rg-subtab-close {
  opacity: 0.6;
}
.rg-subtab-close:hover {
  opacity: 1 !important;
  background: rgba(15, 77, 74, 0.08);
  color: var(--text);
}

/* ── Resource detail panel ── */
.rg-detail-panel {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.rg-detail-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(36, 38, 64, 0.6);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.rg-detail-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid;
}
.rg-detail-icon svg {
  width: 24px;
  height: 24px;
}

.rg-detail-header-info {
  flex: 1;
  min-width: 0;
}

.rg-detail-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  word-break: break-all;
}

.rg-detail-type {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.rg-detail-section {
  background: rgba(36, 38, 64, 0.4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  padding: 1rem 1.25rem;
}

.rg-detail-section-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.rg-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1.5rem;
}

.rg-detail-prop {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.rg-detail-prop-key {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 500;
}

.rg-detail-prop-val {
  font-size: 0.82rem;
  color: var(--text);
  word-break: break-all;
}

.rg-detail-refs {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.rg-detail-ref {
  padding: 0.35rem 0.6rem;
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.rg-detail-id {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  word-break: break-all;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .rg-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Right-click context menu ── */
.ctx-menu {
  position: fixed;
  z-index: 9999;
  min-width: 180px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(15, 41, 38, 0.12);
  padding: 4px 0;
  animation: ctxMenuIn 0.12s ease-out;
}
@keyframes ctxMenuIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text);
  transition: background 0.1s;
}
.ctx-menu-item:hover {
  background: var(--accent-dim);
  color: var(--accent-hover);
}
.ctx-menu-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
}
.ctx-menu-item:hover .ctx-menu-icon {
  color: var(--accent-text);
}
.ctx-menu-icon svg {
  width: 14px;
  height: 14px;
}
.ctx-menu-label {
  flex: 1;
}

/* ── Metrics cards ── */
.rg-detail-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}
.rg-metric-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
}
.rg-metric-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.rg-metric-name {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rg-metric-value {
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--mono);
}
.rg-metric-spark {
  margin-top: 0.25rem;
}
.rg-metric-spark .sparkline-svg {
  width: 100%;
  height: 40px;
  display: block;
}

/* ── Activity log timeline ── */
.rg-detail-activity {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  max-height: 320px;
  overflow-y: auto;
}
.rg-activity-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.4rem;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}
.rg-activity-entry:hover {
  background: var(--bg-secondary);
}
.rg-activity-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}
.rg-activity-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-muted);
}
.rg-activity-dot.rg-activity-success {
  background: var(--success);
}
.rg-activity-dot.rg-activity-error {
  background: var(--error);
}
.rg-activity-info {
  min-width: 0;
}
.rg-activity-op {
  font-size: 0.8rem;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rg-activity-caller {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.rg-activity-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 0.1rem;
}
.rg-activity-status {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
}
.rg-activity-status.rg-activity-success {
  color: var(--success);
}
.rg-activity-status.rg-activity-error {
  color: var(--error);
}
.rg-activity-time {
  font-size: 0.65rem;
  color: var(--text-muted);
}

/* Empty state for metrics/activity */
.rg-detail-empty {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.5rem 0;
}
.rg-detail-metrics-loading,
.rg-detail-activity-loading {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (max-width: 600px) {
  .rg-detail-metrics {
    grid-template-columns: 1fr;
  }
  .rg-activity-caller {
    max-width: 120px;
  }
}

/* ── @context tags (above chat input) ── */
.context-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.4rem 0.85rem 0;
}
.context-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.4rem 0.15rem 0.3rem;
  border-radius: 999px;
  background: rgba(15, 77, 74, 0.06);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.65rem;
  font-weight: 600;
  font-family: var(--mono);
  white-space: nowrap;
}
.context-tag-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.85;
}
.context-tag-icon svg {
  width: 14px;
  height: 14px;
}
.context-tag-name {
  color: var(--text);
}
.context-tag-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.65rem;
  cursor: pointer;
  padding: 0;
  margin-left: 0.05rem;
  transition: color 0.12s, background 0.12s;
}
.context-tag-close:hover {
  background: var(--border);
  color: var(--text);
}

/* ── Provider context strip (above chat input) ── */
.provider-context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.4rem 0.85rem 0;
}
.provider-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  font-family: var(--mono);
  white-space: nowrap;
  line-height: 1.4;
  cursor: default;
  transition: opacity 0.15s;
}
.provider-pill.connected {
  background: rgba(124, 77, 255, 0.10);
  border: 1px solid var(--text-muted);
  color: var(--text);
}
.provider-pill.disconnected {
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted, #888);
  opacity: 0.55;
}
.provider-pill-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.provider-pill-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.provider-pill.connected .provider-pill-dot {
  background: #fff;
}
.provider-pill.disconnected .provider-pill-dot {
  background: var(--text-muted, #888);
}
.provider-pill-label {
  font-size: 0.65rem;
}
.provider-pill-detail {
  font-size: 0.6rem;
  font-weight: 500;
  opacity: 0.7;
  margin-left: 0.1rem;
}

/* ── @ mention dropdown ── */
.mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 4px;
  box-shadow: 0 -4px 16px rgba(15, 41, 38, 0.12);
  z-index: 100;
  padding: 4px;
}
.mention-dropdown.dropdown-down {
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: 4px;
  box-shadow: 0 4px 16px rgba(15, 41, 38, 0.12);
}
.mention-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--text);
  transition: background 0.1s;
}
.mention-item:hover,
.mention-item.active {
  background: var(--accent-dim);
}
.mention-item-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mention-item-icon svg {
  width: 14px;
  height: 14px;
}
.mention-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-item-detail {
  font-size: 0.68rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.mention-item-separator {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 2px 0;
}

/* ── Inline @mention badge (reuses .context-tag base) ── */
.inline-mention {
  vertical-align: middle;
  margin: 0 1px;
  cursor: default;
  padding: 0.1rem 0.45rem 0.1rem 0.35rem;
  line-height: 1.2;
}

/* ================================================================
   EDITOR (center)
   ================================================================ */
.editor-main {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  overflow: hidden;
  background: var(--bg-secondary);
}

/* Dashboard (route-mode): top bar with menu — visible only on small screens (see mobile block) */
.editor-mobile-toolbar {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-secondary);
}
.editor-mobile-toolbar-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}

.editor-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── VS Code–style tab bar ── */
.editor-tabs-bar {
  display: flex;
  align-items: stretch;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  min-height: 36px;
  flex-shrink: 0;
}
.editor-tabs {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;          /* Firefox */
}
.editor-tabs::-webkit-scrollbar {
  display: none;                  /* Chrome / Safari */
}
.editor-tab-terminal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
.editor-tab-terminal-btn:hover {
  color: var(--accent-text);
  background: rgba(74, 124, 201, 0.08);
}

.editor-tab {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.85rem;
  height: 36px;
  font-size: 0.78rem;
  font-family: var(--mono);
  color: var(--text-muted);
  cursor: pointer;
  border-right: 1px solid var(--border);
  background: transparent;
  position: relative;
  white-space: nowrap;
  user-select: none;
  transition: color 0.12s, background 0.12s;
  flex-shrink: 0;
}
.editor-tab:hover {
  color: var(--text-secondary);
  background: var(--bg-hover);
}
.editor-tab.active {
  color: var(--text);
  background: var(--bg-primary);
}
/* Active indicator bar at top */
.editor-tab.active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 0 0 2px 2px;
}
/* When active, erase the bottom border so tab merges with content */
.editor-tab.active::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--bg-primary);
  z-index: 1;
}

.editor-tab-icon {
  font-size: 0.85em;
  opacity: 0.65;
  flex-shrink: 0;
}
.editor-tab.active .editor-tab-icon {
  opacity: 0.85;
}

.editor-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.editor-tab-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
  font-family: var(--font-sans);
  line-height: 1;
}
.editor-tab:hover .editor-tab-close,
.editor-tab.active .editor-tab-close {
  opacity: 1;
}
.editor-tab-close:hover {
  background: rgba(15, 77, 74, 0.08);
  color: var(--text);
}

/* ── Breadcrumb path bar under tabs ── */
.editor-breadcrumb {
  padding: 0.25rem 1rem;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.7rem;
  font-family: var(--mono);
  color: var(--text-muted);
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.editor-breadcrumb:empty {
  display: none;
}

.editor-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 1.25rem;
  position: relative;
}
/* Remove padding when showing route view (route-inline has its own) */
.editor-content:has(.route-inline) {
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Remove padding when preview tab is active — iframe needs full bleed */
.editor-content:has(.preview-body) {
  padding: 0;
  overflow: hidden;
}

/* ── Terminal tab in editor ── */
.terminal-container {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  padding: 4px;
  background: var(--bg-primary);
  overflow: hidden;
  display: none;
}
.terminal-container .xterm {
  height: 100%;
}
.terminal-container .xterm-viewport {
  overflow-y: auto !important;
}

/* ── Inline terminal (embedded in chat tool cards) ── */
.inline-terminal {
  border-radius: 6px;
  overflow: hidden;
  background: #1a1b2e;
  margin-top: 6px;
}
.inline-terminal .xterm {
  padding: 4px;
}
.inline-terminal .xterm-viewport {
  overflow-y: auto !important;
}

.editor-placeholder {
  color: var(--text-muted);
  text-align: center;
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.editor-placeholder-icon {
  color: var(--text-muted);
  opacity: 0.3;
}
.editor-placeholder p {
  font-size: 0.9rem;
  margin: 0;
}

.editor-body {
  max-width: 100%;
  margin: 0;
  line-height: 1.7;
}
.editor-body pre {
  background: var(--bg-card);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: 0.85rem;
  border: 1px solid var(--border-subtle);
}
.editor-body code {
  font-family: var(--mono);
  font-size: 0.88em;
}
.editor-body pre code {
  background: none;
  padding: 0;
}
/* Override highlight.js background to match app theme */
.editor-body pre code.hljs,
.message-body .message-text pre code.hljs {
  background: var(--bg-card);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
}
/* Full-width layout for code file view */
.editor-body.code-view {
  max-width: 100%;
}
/* CSS-counter line numbers for code files */
.editor-body.code-view pre code.hljs {
  counter-reset: line;
  padding-left: 3.5em;
}
.editor-body.code-view pre code.hljs .line::before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  width: 2.5em;
  margin-left: -3.5em;
  margin-right: 1em;
  text-align: right;
  color: var(--text-muted);
  opacity: 0.5;
  user-select: none;
  -webkit-user-select: none;
}
.editor-body h1, .editor-body h2, .editor-body h3 {
  margin-top: 1.25em;
  margin-bottom: 0.5em;
  font-weight: 600;
}
.editor-body ul, .editor-body ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}
.editor-body p {
  margin: 0.75em 0;
}
.editor-body a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--link-underline);
}
.editor-body a:hover {
  color: var(--link-hover);
  text-decoration-color: var(--link);
}
.editor-body blockquote {
  border-left: 3px solid var(--accent-dim);
  margin: 0.5em 0;
  padding-left: 1em;
  color: var(--text-muted);
}

/* ================================================================
   RIGHT SIDEBAR: CHAT
   ================================================================ */
.sidebar-right {
  grid-row: 1;
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  min-width: 360px;
  overflow: hidden;
  position: relative;
}

/* ── Column dividers (resize handles between panels) ── */
.col-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 20;
  transition: background 0.15s ease;
}
.col-divider:hover {
  background: var(--accent);
  opacity: 0.5;
}
.col-divider:active {
  background: var(--accent);
  opacity: 0.7;
}

/* While dragging, prevent text selection and iframe pointer capture */
body.is-resizing {
  cursor: col-resize !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
body.is-resizing * {
  cursor: col-resize !important;
}
body.is-resizing iframe {
  pointer-events: none !important;
}

/* ── Panel drag handles ── */
.panel-drag-handle {
  cursor: grab;
  padding: 0 6px;
  color: var(--text-muted);
  opacity: 0.35;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.panel-drag-handle:hover {
  opacity: 0.8;
}
.panel-drag-handle:active {
  cursor: grabbing;
}

/* ── Panel drag feedback ── */
.panel-dragging {
  opacity: 0.5;
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}
.panel-drop-target {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--accent-dim) !important;
}

/* ── Panel borders (set dynamically by JS) ── */
.panel-border-right {
  border-right: 1px solid var(--border);
}
.panel-border-left {
  border-left: 1px solid var(--border);
}

.chat-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  height: var(--chat-header-height);
  border-bottom: 1px solid var(--border);
  background: rgba(15, 77, 74, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  z-index: 10;
}
.chat-header-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.chat-header-right {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.chat-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}
.chat-tab-expand,
.chat-tab-collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.chat-tab-expand:hover,
.chat-tab-collapse:hover {
  background: var(--bg-card);
  color: var(--text);
}
.app.chat-expanded .chat-tab-expand { display: none; }
.app.chat-expanded .chat-tab-collapse { display: flex; }
.app:not(.chat-expanded) .chat-tab-collapse { display: none; }

/* ── Mode toggle (pill segmented control) ── */
.chat-mode-toggle {
  display: flex;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2px;
  gap: 1px;
  margin-left: auto;
}
.chat-mode-btn {
  padding: 0.2rem 0.6rem;
  border: none;
  border-radius: var(--radius-xl);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.02em;
}
.chat-mode-btn:hover {
  color: var(--text-secondary);
}
.chat-mode-btn.active {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-sm);
}

/* ── Chat history bar ── */
/* History icon button – sits in .chat-tabs-bar next to + */
.chat-tab-history {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  margin-left: 2px;
}
.chat-tab-history:hover {
  background: var(--bg-card);
  color: var(--text);
}
.chat-history-dropdown {
  position: absolute;
  top: 100%;
  right: 0.5rem;
  left: auto;
  width: 320px;
  max-width: calc(100% - 1rem);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  max-height: 320px;
  overflow-y: auto;
  z-index: 100;
}
.chat-history-list {
  padding: 0.35rem;
}
.chat-history-empty {
  padding: 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.chat-history-item {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.6rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  margin-bottom: 0.35rem;
}
.chat-history-item:not(.chat-history-item-skeleton):nth-child(odd) {
  border-left: 3px solid var(--accent-dim);
}
.chat-history-item:not(.chat-history-item-skeleton):nth-child(even) {
  border-left: 3px solid rgba(74, 124, 201, 0.06);
}
.chat-history-item.chat-history-item-skeleton {
  cursor: default;
  pointer-events: none;
  align-items: flex-start;
}
.chat-history-item.chat-history-item-skeleton:hover {
  background: transparent;
}
.chat-history-item.chat-history-item-skeleton .chat-history-text {
  gap: 0.3rem;
}
/* Title skeleton: match .chat-history-title font-size 0.8rem */
.chat-history-item.chat-history-item-skeleton .skeleton-bar.skeleton-title {
  height: 0.8rem;
  border-radius: 3px;
}
/* Preview skeleton: match .chat-history-preview font-size 0.7rem */
.chat-history-item.chat-history-item-skeleton .skeleton-bar.skeleton-preview {
  height: 0.7rem;
  border-radius: 3px;
}
/* Time skeleton: match .chat-history-time font-size 0.7rem */
.chat-history-item.chat-history-item-skeleton .skeleton-bar.skeleton-time {
  height: 0.7rem;
  width: 100%;
  border-radius: 3px;
}
.chat-history-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-history-item:hover {
  background: rgba(74, 124, 201, 0.06);
  border-color: var(--border-accent);
}
.chat-history-title {
  font-size: 0.8rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-history-preview {
  font-size: 0.7rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-history-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 1px;
}
.chat-history-time.chat-history-time-skeleton {
  width: 44px;
  margin-top: 0.2rem;
}
.chat-history-delete {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 0.2rem;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.chat-history-item:hover .chat-history-delete {
  opacity: 1;
}
.chat-history-delete:hover {
  color: var(--error, #f87171);
}
.chat-history-item.is-running {
  border-left: 3px solid var(--accent) !important;
  background: rgba(79,70,229,0.06);
}
.chat-history-running-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-text);
  margin-top: 0.2rem;
}
.chat-history-running-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-text);
  animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── Chat tab bar ── */
.chat-tabs-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.3rem 0.5rem 0;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  min-height: 36px;
  overflow: visible;
  position: relative;
}
.chat-tabs-scroll {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chat-tabs-scroll::-webkit-scrollbar {
  display: none;
}
.chat-tab {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  max-width: 170px;
  min-width: 0;
  flex-shrink: 0;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  border-bottom: none;
  position: relative;
  user-select: none;
}
.chat-tab:hover {
  background: var(--bg-card);
  color: var(--text-secondary);
}
.chat-tab.active {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
}
.chat-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--bg-card);
}
.chat-tab-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  display: none;
}
.chat-tab-dot.running {
  display: block;
  background: var(--accent);
  animation: planningPulse 1.2s ease-in-out infinite;
}
.chat-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.chat-tab-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
  opacity: 0;
  transition: all 0.12s ease;
}
.chat-tab:hover .chat-tab-close,
.chat-tab.active .chat-tab-close {
  opacity: 0.6;
}
.chat-tab-close:hover {
  opacity: 1 !important;
  background: rgba(15, 77, 74, 0.08);
  color: var(--text);
}
.chat-tab-new {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: all 0.15s ease;
  margin-left: 2px;
}
.chat-tab-new:hover {
  background: var(--bg-card);
  color: var(--text);
}

/* ── Branch selector ── */
.branch-selector {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.branch-selector-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.45rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.7rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  max-width: 120px;
  white-space: nowrap;
}
.branch-selector-btn:hover {
  border-color: var(--border);
  color: var(--text);
}
.branch-selector-name {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}
.branch-selector-chevron {
  flex-shrink: 0;
  opacity: 0.5;
}
.branch-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-width: 180px;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.branch-dropdown.dropdown-up {
  top: auto;
  bottom: calc(100% + 4px);
}
.branch-dropdown-info {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  font-size: 0.65rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  line-height: 1.3;
}
.branch-dropdown-info svg { flex-shrink: 0; margin-top: 1px; opacity: 0.6; }
.branch-dropdown-list { padding: 0.25rem 0; }
.branch-dropdown-item {
  padding: 0.35rem 0.6rem;
  font-size: 0.72rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.branch-dropdown-item:hover { background: var(--bg-hover); color: var(--text); }
.branch-dropdown-item.active { color: var(--text); font-weight: 500; }
.branch-dropdown-item.active::before {
  content: "\2713";
  font-size: 0.6rem;
  width: 0.8rem;
}
.branch-dropdown-item:not(.active)::before {
  content: "";
  width: 0.8rem;
}

.chat-sidebar .chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.65rem;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chat-sidebar .chat-container::-webkit-scrollbar {
  display: none;
}

.chat-messages-wrapper {
  flex: 9;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chat-messages-wrapper::-webkit-scrollbar {
  display: none;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 0.5rem;
  width: 100%;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* IE/Edge */
}
.chat-messages::-webkit-scrollbar {
  display: none;                    /* Chrome / Safari */
}
.chat-messages.active {
  display: flex;
}

/* ── Messages ── */
.message {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 100%;
  animation: messageIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes messageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* No avatars */
.message .message-avatar { display: none; }

/* Base message body — full-width, no bubble */
.message .message-body {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  border-radius: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.35rem 0;
}

/* User message: styled block, sticky at top */
.message.user {
  flex-direction: row;
  margin-top: 1.25rem;
  padding-top: 0;
  border-top: none;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-secondary);
}
.message.user:first-child {
  margin-top: 0;
}
.message.user .message-body {
  background: var(--accent-dim);
  border: 1px solid var(--border-accent);
  border-radius: 10px;
  padding: 0.55rem 0.85rem;
  color: var(--text);
  flex: 0 1 auto;
  max-width: 85%;
  max-height: 200px;
  overflow-y: auto;
}
.message.user .message-text {
  white-space: pre-wrap;
}

/* Agent: full-brightness text, no border, no background */
.message.agent .message-body {
  background: none;
  border: none;
  padding: 0.5rem 0.85rem;
}

.message-body .message-text {
  word-break: break-word;
}
/* Streaming text – no special white-space override;
   markdown is rendered incrementally via scheduleStreamingRender,
   so normal HTML flow produces consistent formatting. */
.message-body .message-text.message-text-streaming {
  /* keep same styling as final render */
}
/* Space between tool cards and the final answer text */
.message-body .tool-call + .message-text,
.message-body .tool-call ~ .message-text {
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-subtle);
}
/* Remove the separator when there's no text content */
.message-body .message-text:empty {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
/* Spacing between consecutive tool call cards */
.tool-call + .tool-call {
  margin-top: 0.35rem;
}

.message-body .message-text code {
  font-family: var(--mono);
  font-size: 0.82em;
  background: rgba(15, 77, 74, 0.06);
  padding: 0.15em 0.35em;
  border-radius: 3px;
  color: var(--text);
}
.message-body .message-text pre {
  background: #0d0d14;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.79rem;
  margin: 0.5em 0;
  border: 1px solid var(--border-subtle);
}
.message-body .message-text pre code {
  background: none;
  padding: 0;
}
.message-body .message-text h1,
.message-body .message-text h2,
.message-body .message-text h3 {
  margin: 0.6em 0 0.35em 0;
  font-size: 1em;
  font-weight: 600;
}
.message-body .message-text ul,
.message-body .message-text ol {
  margin: 0.4em 0;
  padding-left: 1.4em;
}
.message-body .message-text p {
  margin: 0.5em 0;
}
.message-body .message-text blockquote {
  border-left: 3px solid var(--border);
  margin: 0.4em 0;
  padding-left: 0.75em;
  color: var(--text);
}
.message-body .message-text a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--link-underline);
}
.message-body .message-text a:hover {
  color: var(--link-hover);
  text-decoration-color: var(--link);
}

/* ── Table styling for markdown tables ── */
.message-body .message-text table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5em 0;
  font-size: 0.84rem;
}
.message-body .message-text th,
.message-body .message-text td {
  padding: 0.4rem 0.65rem;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}
.message-body .message-text th {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Tool call cards ── */
.tool-call {
  margin-top: 0.6rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(13, 13, 20, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: none;
}
.tool-call.tool-call-mcp {
  border-color: rgba(103, 232, 249, 0.35);
  background: rgba(9, 32, 40, 0.32);
  box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.08);
}
.tool-call.tool-call-mcp .tool-call-header {
  background: rgba(13, 45, 56, 0.72);
  color: #b8f7ff;
  border-bottom-color: rgba(103, 232, 249, 0.2);
}
.tool-call.tool-call-mcp .tool-call-header:hover {
  background: rgba(18, 56, 68, 0.82);
}
.tool-call.tool-call-mcp .tool-call-body {
  color: #c9eef5;
}

/* ── Azure CLI tool card ── */
.tool-call.tool-call-az {
  border-color: rgba(0, 120, 212, 0.4);
  background: linear-gradient(135deg, rgba(0, 30, 60, 0.45) 0%, rgba(0, 60, 120, 0.18) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 120, 212, 0.1),
    0 2px 8px rgba(0, 78, 152, 0.08);
}
.tool-call.tool-call-az .tool-call-header {
  background: linear-gradient(135deg, rgba(0, 50, 100, 0.75) 0%, rgba(0, 90, 170, 0.45) 100%);
  color: #a0d4ff;
  border-bottom-color: rgba(0, 120, 212, 0.25);
  gap: 0.5rem;
}
.tool-call.tool-call-az .tool-call-header:hover {
  background: linear-gradient(135deg, rgba(0, 60, 115, 0.85) 0%, rgba(0, 100, 185, 0.55) 100%);
}
.tool-call.tool-call-az .tool-call-body {
  color: #c0ddf5;
}
.tool-call.tool-call-az .tool-call-header::before {
  color: rgba(0, 150, 255, 0.6);
}
.tool-call.tool-call-az.tool-running .tool-call-header::after {
  border-color: rgba(0, 150, 255, 0.4);
  border-top-color: #3ba6ff;
}
.tool-call.tool-call-az.tool-done .tool-call-header::after {
  color: #4ac26b;
}

/* Azure logo in header */
.tool-az-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.tool-az-logo svg {
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 1px 2px rgba(0, 120, 212, 0.3));
}

/* Azure CLI badge */
.tool-az-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 120, 212, 0.5);
  background: rgba(0, 120, 212, 0.18);
  color: #7ec8ff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Azure CLI command field (terminal-style) */
.tool-az-command-field {
  display: flex;
  align-items: flex-start;
  background: rgba(15, 41, 38, 0.12);
  border: 1px solid rgba(0, 120, 212, 0.2);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.45;
  margin-bottom: 0.5rem;
}
.tool-az-prompt {
  color: #3ba6ff;
  font-weight: 700;
  user-select: none;
  flex-shrink: 0;
}
.tool-az-command {
  color: #e0ecf8;
  word-break: break-all;
}

/* ── Terminal tool card (read_only / mutating) ── */
.tool-call.tool-call-terminal {
  border-color: rgba(56, 189, 248, 0.3);
  background: linear-gradient(135deg, rgba(12, 25, 40, 0.5) 0%, rgba(18, 40, 58, 0.2) 100%);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.08), 0 2px 8px rgba(20, 80, 120, 0.06);
}
.tool-call.tool-call-terminal .tool-call-header {
  background: linear-gradient(135deg, rgba(15, 32, 48, 0.8) 0%, rgba(22, 50, 68, 0.5) 100%);
  color: #7dd3fc;
  border-bottom-color: rgba(56, 189, 248, 0.2);
  gap: 0.5rem;
}
.tool-call.tool-call-terminal .tool-call-header:hover {
  background: linear-gradient(135deg, rgba(20, 40, 56, 0.88) 0%, rgba(28, 58, 76, 0.6) 100%);
}
.tool-call.tool-call-terminal .tool-call-body {
  color: #cdd9e5;
}
.tool-call.tool-call-terminal .tool-call-header::before {
  color: rgba(56, 200, 248, 0.5);
}
.tool-call.tool-call-terminal.tool-running .tool-call-header::after {
  border-color: rgba(56, 189, 248, 0.3);
  border-top-color: #38bdf8;
}
.tool-call.tool-call-terminal.tool-done .tool-call-header::after {
  color: #4ac26b;
}
/* Mutating terminal — amber tint */
.tool-call.tool-call-terminal-mut {
  border-color: rgba(210, 153, 34, 0.25);
  background: linear-gradient(135deg, rgba(35, 28, 15, 0.55) 0%, rgba(45, 35, 20, 0.25) 100%);
}
.tool-call.tool-call-terminal-mut .tool-call-header {
  background: linear-gradient(135deg, rgba(45, 35, 18, 0.8) 0%, rgba(55, 42, 25, 0.5) 100%);
  color: #e3c07a;
  border-bottom-color: rgba(210, 153, 34, 0.2);
}
.tool-call.tool-call-terminal-mut .tool-call-header:hover {
  background: linear-gradient(135deg, rgba(55, 42, 22, 0.88) 0%, rgba(65, 50, 30, 0.6) 100%);
}
.tool-call.tool-call-terminal-mut .tool-call-header::before {
  color: rgba(210, 170, 60, 0.5);
}
.tool-call.tool-call-terminal-mut.tool-running .tool-call-header::after {
  border-color: rgba(210, 153, 34, 0.3);
  border-top-color: #d29922;
}
.tool-call.tool-call-terminal-mut.tool-done .tool-call-header::after {
  color: #4ac26b;
}
/* Terminal icon in header */
.tool-terminal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #7dd3fc;
  line-height: 1;
}
.tool-terminal-icon svg {
  display: block;
}
.tool-call-terminal-mut .tool-terminal-icon {
  color: #d29922;
}
/* Terminal command field */
.tool-terminal-command-field {
  display: flex;
  align-items: flex-start;
  background: rgba(15, 41, 38, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.15);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.45;
  margin-bottom: 0.5rem;
}
.tool-call-terminal-mut .tool-terminal-command-field {
  border-color: rgba(210, 153, 34, 0.15);
}
.tool-terminal-prompt {
  color: #7dd3fc;
  font-weight: 700;
  user-select: none;
  flex-shrink: 0;
}
.tool-call-terminal-mut .tool-terminal-prompt {
  color: #d29922;
}
.tool-terminal-cmd {
  color: #e0e6ed;
  word-break: break-all;
}

/* ── Search tool card (grep / glob) ── */
.tool-call.tool-call-search {
  border-color: rgba(163, 113, 247, 0.3);
  background: linear-gradient(135deg, rgba(30, 18, 50, 0.5) 0%, rgba(45, 25, 70, 0.2) 100%);
  box-shadow: inset 0 0 0 1px rgba(163, 113, 247, 0.08), 0 2px 8px rgba(80, 40, 140, 0.06);
}
.tool-call.tool-call-search .tool-call-header {
  background: linear-gradient(135deg, rgba(40, 22, 65, 0.8) 0%, rgba(55, 30, 85, 0.5) 100%);
  color: #d4b5ff;
  border-bottom-color: rgba(163, 113, 247, 0.2);
  gap: 0.5rem;
}
.tool-call.tool-call-search .tool-call-header:hover {
  background: linear-gradient(135deg, rgba(48, 28, 75, 0.88) 0%, rgba(63, 38, 95, 0.6) 100%);
}
.tool-call.tool-call-search .tool-call-body {
  color: #d4c8ef;
}
.tool-call.tool-call-search .tool-call-header::before {
  color: rgba(163, 130, 247, 0.5);
}
.tool-call.tool-call-search.tool-running .tool-call-header::after {
  border-color: rgba(163, 113, 247, 0.3);
  border-top-color: #a371f7;
}
.tool-call.tool-call-search.tool-done .tool-call-header::after {
  color: #4ac26b;
}
.tool-search-header-icon {
  flex-shrink: 0;
  font-size: 0.72rem;
  line-height: 1;
}
.tool-search-pattern-field {
  display: flex;
  align-items: flex-start;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(163, 113, 247, 0.18);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.45;
  margin-bottom: 0.5rem;
}
.tool-search-icon {
  flex-shrink: 0;
  user-select: none;
  font-size: 0.8rem;
  line-height: 1;
}
.tool-search-pattern {
  color: #e8d5ff;
  word-break: break-all;
  font-weight: 600;
}

/* ── Preview tool card ── */
.tool-call.tool-call-preview {
  border-color: rgba(63, 185, 80, 0.3);
  background: linear-gradient(135deg, rgba(15, 35, 20, 0.5) 0%, rgba(20, 50, 28, 0.2) 100%);
  box-shadow: inset 0 0 0 1px rgba(63, 185, 80, 0.08), 0 2px 8px rgba(30, 100, 40, 0.06);
}
.tool-call.tool-call-preview .tool-call-header {
  background: linear-gradient(135deg, rgba(20, 42, 25, 0.8) 0%, rgba(28, 60, 35, 0.5) 100%);
  color: #7ee787;
  border-bottom-color: rgba(63, 185, 80, 0.2);
  gap: 0.5rem;
}
.tool-call.tool-call-preview .tool-call-header:hover {
  background: linear-gradient(135deg, rgba(25, 50, 30, 0.88) 0%, rgba(35, 68, 42, 0.6) 100%);
}
.tool-call.tool-call-preview .tool-call-header::before {
  color: rgba(63, 200, 80, 0.5);
}
.tool-call.tool-call-preview.tool-running .tool-call-header::after {
  border-color: rgba(63, 185, 80, 0.3);
  border-top-color: #3fb950;
}
.tool-call.tool-call-preview.tool-done .tool-call-header::after {
  color: #4ac26b;
}
.tool-preview-header-icon {
  flex-shrink: 0;
  font-size: 0.72rem;
  line-height: 1;
}
.tool-preview-url-field {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.55rem;
  background: rgba(15, 41, 38, 0.1);
  border: 1px solid rgba(63, 185, 80, 0.15);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.78rem;
}
.tool-preview-icon {
  flex-shrink: 0;
  font-size: 0.8rem;
  user-select: none;
}
.tool-preview-link {
  color: #7ee787;
  text-decoration: underline;
  word-break: break-all;
}
.tool-preview-link:hover {
  color: #56d364;
}
.tool-preview-link-unsafe {
  color: var(--text-muted);
  word-break: break-all;
  text-decoration: none;
}

/* ── File editor tool card ── */
.tool-call.tool-call-file-editor {
  border-color: rgba(240, 136, 62, 0.3);
  background: linear-gradient(135deg, rgba(40, 25, 12, 0.5) 0%, rgba(55, 35, 18, 0.2) 100%);
  box-shadow: inset 0 0 0 1px rgba(240, 136, 62, 0.08), 0 2px 8px rgba(120, 60, 20, 0.06);
}
.tool-call.tool-call-file-editor .tool-call-header {
  background: linear-gradient(135deg, rgba(50, 30, 15, 0.8) 0%, rgba(65, 40, 22, 0.5) 100%);
  color: #f0a868;
  border-bottom-color: rgba(240, 136, 62, 0.2);
  gap: 0.5rem;
}
.tool-call.tool-call-file-editor .tool-call-header:hover {
  background: linear-gradient(135deg, rgba(60, 38, 18, 0.88) 0%, rgba(75, 48, 28, 0.6) 100%);
}
.tool-call.tool-call-file-editor .tool-call-body {
  color: #e8d0b8;
}
.tool-call.tool-call-file-editor .tool-call-header::before {
  color: rgba(240, 150, 80, 0.5);
}
.tool-call.tool-call-file-editor.tool-running .tool-call-header::after {
  border-color: rgba(240, 136, 62, 0.3);
  border-top-color: #f0883e;
}
.tool-call.tool-call-file-editor.tool-done .tool-call-header::after {
  color: #4ac26b;
}
.tool-file-editor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #f0a868;
  line-height: 1;
}
.tool-file-editor-icon svg {
  display: block;
}
/* File editor diff border tint */
.tool-call.tool-call-file-editor .tool-diff {
  border-color: rgba(240, 136, 62, 0.18);
}

/* ── Inline diff viewer (file_editor str_replace) ── */
.tool-diff {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin: 0.2rem 0 0 0;
  padding: 0.3rem 0;
  max-height: 200px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.tool-diff-line {
  display: flex;
  padding: 0 0.55rem;
  min-height: 1.3em;
}
.tool-diff-line-del {
  background: rgba(248, 81, 73, 0.1);
}
.tool-diff-line-del .tool-diff-prefix,
.tool-diff-line-del .tool-diff-text {
  color: #f85149;
}
.tool-diff-line-add {
  background: rgba(63, 185, 80, 0.12);
}
.tool-diff-line-add .tool-diff-prefix,
.tool-diff-line-add .tool-diff-text {
  color: #3fb950;
}
.tool-diff-line-ctx .tool-diff-prefix,
.tool-diff-line-ctx .tool-diff-text {
  color: var(--text-muted);
}
.tool-diff-line-sep {
  color: var(--text-muted);
  opacity: 0.5;
  font-size: 0.65rem;
  padding: 0 0.55rem;
  user-select: none;
}
.tool-diff-prefix {
  user-select: none;
  width: 1.2em;
  flex-shrink: 0;
  text-align: center;
  font-weight: 700;
}
.tool-diff-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.tool-call-header {
  padding: 0.4rem 0.7rem;
  background: rgba(15, 77, 74, 0.06);
  font-size: 0.72rem;
  font-family: var(--mono);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.12s;
}
.tool-call-header-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-mcp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.35rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(103, 232, 249, 0.45);
  background: rgba(103, 232, 249, 0.14);
  color: #b8f7ff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
}
.tool-call-header:hover {
  background: rgba(30, 31, 48, 0.8);
}
.tool-call-header::before {
  content: "\25B6";
  font-size: 0.55rem;
  transition: transform 0.2s ease;
  color: var(--text-muted);
  flex-shrink: 0;
}
.tool-call.collapsed .tool-call-header::before {
  transform: rotate(90deg);
}

/* ── Loading spinner ── */
@keyframes toolSpin {
  to { transform: rotate(360deg); }
}
.tool-call.tool-running .tool-call-header::after {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: toolSpin 0.7s linear infinite;
  margin-left: auto;
  flex-shrink: 0;
}
.tool-call.tool-done .tool-call-header::after {
  content: "\2713";
  margin-left: auto;
  flex-shrink: 0;
  color: var(--success);
  font-size: 0.7rem;
  font-weight: 700;
}
.tool-call.tool-call-error .tool-call-header::after {
  content: "\2717";
  margin-left: auto;
  flex-shrink: 0;
  color: var(--error);
  font-size: 0.7rem;
  font-weight: 700;
}

.tool-call-body {
  padding: 0.7rem 0.8rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
  line-height: 1.5;
  color: var(--text-secondary);
}
.tool-call-body-structured .tool-field {
  margin-bottom: 0.5rem;
}
.tool-call-body-structured .tool-field:last-child,
.tool-call-body-structured .tool-result:last-child {
  margin-bottom: 0;
}
.tool-call-body-structured .tool-label {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
  display: block;
}
.tool-call-body-structured .tool-field .tool-label {
  display: inline;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.74rem;
  margin-bottom: 0;
}
.tool-call-body-structured .tool-value {
  color: var(--text-secondary);
  font-size: 0.78rem;
}
.tool-call-body-structured .tool-field-block {
  margin-top: 0.5rem;
}
.tool-call-body-structured .tool-field-block pre.tool-value {
  background: var(--bg-primary);
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-sm);
  margin: 0.2rem 0 0 0;
  font-size: 0.74rem;
  max-height: 140px;
  overflow-y: auto;
  white-space: pre-wrap;
  border: 1px solid var(--border);
}
.tool-call-body-structured .tool-field-summary {
  color: var(--text-muted);
  font-size: 0.78rem;
  padding-bottom: 0.4rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}
.tool-call-body-structured .tool-result {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}
.tool-call-body-structured .tool-result pre.tool-value {
  margin-top: 0.25rem;
  background: var(--bg-primary);
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  border: 1px solid var(--border);
}
.plan-file-link {
  color: var(--accent, #58a6ff);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.78rem;
}
.plan-file-link:hover {
  opacity: 0.8;
}
.plan-updated-banner {
  margin: 6px 0 4px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--surface-2, #1c2333);
  font-size: 0.85em;
  color: var(--text-secondary, #8b949e);
  display: flex;
  align-items: center;
  gap: 4px;
}
.plan-banner-link {
  color: var(--accent, #58a6ff);
  text-decoration: underline;
  cursor: pointer;
}
.plan-banner-link:hover {
  opacity: 0.8;
}

/* ── Inline plan preview card (in chat) ── */
.plan-preview-card {
  margin: 10px 0;
  border: 1px solid var(--border, #30363d);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-1, #161b22);
}
.plan-preview-card.plan-generating {
  opacity: 0.8;
}
.plan-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #30363d);
  font-size: 0.85em;
  font-weight: 600;
  color: var(--fg, #c9d1d9);
}
.plan-preview-body {
  position: relative;
  max-height: 260px;
  overflow-y: auto;
  padding: 10px 14px;
  font-size: 0.85em;
  line-height: 1.55;
  color: var(--text);
}
.plan-preview-body h1,
.plan-preview-body h2,
.plan-preview-body h3 {
  margin-top: 0.4em;
  margin-bottom: 0.3em;
  font-size: 1em;
}
.plan-preview-link {
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
  font-weight: 400;
  font-size: 0.85em;
  display: inline-flex;
  align-items: center;
}
.plan-preview-link:hover {
  color: var(--text);
}

.tool-call.collapsed .tool-call-body {
  display: none;
}
.tool-call.tool-call-error {
  border-color: rgba(248, 113, 113, 0.3);
}
.tool-call.tool-call-error .tool-call-header {
  color: var(--error);
  background: var(--error-dim);
}
.tool-call.tool-call-step .tool-call-header {
  color: var(--text-muted);
}

/* ── Clarification / Ask-User card ── */
.clarification-card {
  margin-top: 0.75rem;
  border: 1px solid rgba(29, 52, 97, 0.6);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(29, 52, 97, 0.15) 0%, rgba(20, 40, 80, 0.08) 100%);
  animation: clarifyIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow:
    0 0 0 1px rgba(29, 52, 97, 0.12),
    0 4px 20px rgba(0, 0, 0, 0.15);
}
@keyframes clarifyIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.clarification-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  background: linear-gradient(135deg, rgba(29, 52, 97, 0.3) 0%, rgba(20, 40, 80, 0.15) 100%);
  border-bottom: 1px solid rgba(29, 52, 97, 0.3);
}
.clarification-card-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--text);
  flex-shrink: 0;
  box-shadow: 0 2px 6px var(--accent-glow);
}
.clarification-card-title {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: #7aadff;
  letter-spacing: -0.01em;
}

.clarification-card-body {
  padding: 0.85rem;
}
.clarification-question {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 0.5rem;
}
.clarification-question > p:first-child { margin-top: 0; }
.clarification-question > p:last-child  { margin-bottom: 0; }
.clarification-reason {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 0.75rem;
  padding-left: 0.6rem;
  border-left: 2px solid rgba(42, 74, 127, 0.5);
}
.clarification-reason > p:first-child { margin-top: 0; }
.clarification-reason > p:last-child  { margin-bottom: 0; }

/* Option buttons */
.clarification-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.clarification-opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  text-align: left;
  width: 100%;
}
.clarification-opt::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  transition: all 0.15s ease;
  background: transparent;
}
.clarification-opt:hover {
  background: var(--accent-dim);
  border-color: rgba(42, 74, 127, 0.6);
  transform: translateX(2px);
}
.clarification-opt:hover::before {
  border-color: #5a8fd4;
  background: var(--border-accent);
  box-shadow: 0 0 6px var(--accent-glow);
}
.clarification-opt:active {
  transform: translateX(2px) scale(0.99);
}
.clarification-opt.selected {
  background: rgba(29, 52, 97, 0.3);
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 1px var(--border-accent);
}
.clarification-opt.selected::before {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  box-shadow: inset 0 0 0 3px rgba(15, 77, 74, 0.08), 0 0 6px var(--accent-glow);
}

/* Divider between options and text input */
.clarification-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.65rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.clarification-divider::before,
.clarification-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Custom text input area */
.clarification-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.15);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.clarification-input-wrap:focus-within {
  border-color: rgba(42, 74, 127, 0.6);
  box-shadow: 0 0 0 2px rgba(29, 52, 97, 0.2);
}
.clarification-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  padding: 0.35rem 0.45rem;
}
.clarification-input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}
.clarification-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-text);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  font-size: 0.75rem;
}
.clarification-send:hover {
  background: var(--accent-hover);
  box-shadow: 0 2px 8px rgba(29, 52, 97, 0.5);
}
.clarification-send:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

/* ── Task tracker card (approval-card style) ── */
.task-tracker-card {
  margin-top: 0.6rem;
  border: 1px solid rgba(74, 124, 201, 0.25);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(74, 124, 201, 0.03);
  animation: messageIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.task-tracker-card.tool-running {
  border-color: rgba(74, 124, 201, 0.20);
}
.task-tracker-card.task-tracker-complete {
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.03);
}

/* Header bar */
.task-tracker-card-header {
  padding: 0.45rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-hover);
  background: rgba(74, 124, 201, 0.06);
  border-bottom: 1px solid rgba(74, 124, 201, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.task-tracker-complete .task-tracker-card-header {
  color: var(--success);
  background: rgba(52, 211, 153, 0.06);
  border-bottom-color: rgba(52, 211, 153, 0.15);
}
.task-tracker-count {
  font-family: var(--mono);
  font-size: 0.72rem;
  opacity: 0.8;
}

/* Progress bar */
.task-tracker-bar {
  display: flex;
  height: 3px;
  background: var(--border-subtle);
  overflow: hidden;
}
.task-tracker-bar-done {
  background: var(--success);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.task-tracker-bar-active {
  background: var(--accent);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  animation: taskPulse 1.5s ease-in-out infinite;
}
@keyframes taskPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Task rows */
.task-tracker-row {
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.15s ease;
}
.task-tracker-row:last-child {
  border-bottom: none;
}
.task-tracker-row:hover {
  background: var(--bg-secondary);
}

/* Status badge */
.task-badge {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  margin-top: 1px;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  background: transparent;
}
.task-status-done .task-badge {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.4);
  color: var(--success);
}
.task-status-in_progress .task-badge {
  background: rgba(74, 124, 201, 0.15);
  border-color: rgba(74, 124, 201, 0.4);
  color: var(--accent-hover);
  animation: taskPulse 1.5s ease-in-out infinite;
}
.task-status-todo .task-badge {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
  font-size: 0.55rem;
}

/* Task info */
.task-info {
  flex: 1;
  min-width: 0;
}
.task-title {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-secondary);
}
.task-status-done .task-title {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(176, 173, 192, 0.3);
}
.task-status-in_progress .task-title {
  color: var(--text);
  font-weight: 600;
}
.task-notes {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
  line-height: 1.35;
  word-break: break-word;
}

/* Status label (right side) */
.task-status-label {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  margin-top: 2px;
}
.task-status-done .task-status-label {
  color: var(--success);
  background: rgba(52, 211, 153, 0.1);
}
.task-status-in_progress .task-status-label {
  color: var(--accent-hover);
  background: rgba(74, 124, 201, 0.1);
}
.task-status-todo .task-status-label {
  color: var(--text-muted);
  background: var(--border-subtle);
}

/* ── Extended Thinking card ── */
.thinking-card {
  margin-top: 0.5rem;
  border: 1px solid rgba(168, 130, 255, 0.25);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(28, 18, 48, 0.45) 0%, rgba(38, 24, 62, 0.18) 100%);
  box-shadow: inset 0 0 0 1px rgba(168, 130, 255, 0.06);
  animation: messageIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.thinking-card-header {
  padding: 0.45rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(135deg, rgba(34, 22, 56, 0.7) 0%, rgba(44, 30, 68, 0.4) 100%);
  border-bottom: 1px solid rgba(168, 130, 255, 0.12);
  transition: background 0.15s ease;
}
.thinking-card-header:hover {
  background: linear-gradient(135deg, rgba(42, 28, 64, 0.8) 0%, rgba(52, 36, 76, 0.5) 100%);
}
.thinking-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(168, 130, 255, 0.7);
}
.thinking-card-icon svg { display: block; }
.thinking-card-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(168, 130, 255, 0.85);
  letter-spacing: 0.02em;
}
.thinking-card-header::before {
  content: "\25BC";
  font-size: 0.5rem;
  color: rgba(168, 130, 255, 0.4);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.thinking-card.collapsed .thinking-card-header::before {
  transform: rotate(-90deg);
}
.thinking-card-body {
  padding: 0.6rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(200, 185, 225, 0.8);
  max-height: 300px;
  overflow-y: auto;
}
.thinking-card-body p { margin: 0 0 0.4rem 0; }
.thinking-card-body p:last-child { margin-bottom: 0; }
.thinking-card.collapsed .thinking-card-body {
  display: none;
}
.thinking-card-streaming {
  border-color: rgba(168, 130, 255, 0.35);
}
.thinking-card-streaming .thinking-card-label::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(168, 130, 255, 0.6);
  margin-left: 0.4rem;
  animation: taskPulse 1.5s ease-in-out infinite;
  vertical-align: middle;
}

/* Chat expanded overrides */
.app.chat-expanded .chat-messages {
  max-width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
/* Expanded mode: input at bottom stays full-width (no floating card) */

/* ── Chat status & input ── */
.chat-status {
  min-height: 1.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0.2rem 0 0.2rem 1.2rem;
  flex-shrink: 0;
}

.chat-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  flex-shrink: 0;
  position: relative;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  margin: 0.35rem;
}
.chat-input-wrap.drag-over {
  border-color: var(--accent);
  background: rgba(124, 77, 255, 0.06);
}
.chat-input-wrap #chat-input {
  border: none;
  background: transparent;
  padding: 0.75rem 0.85rem 0.5rem;
  font-size: 0.9rem;
  color: var(--text);
  font-family: var(--font-sans);
  width: 100%;
  min-height: 28px;
  max-height: 200px;
  outline: none;
  line-height: 1.5;
  overflow-y: auto;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
}
.chat-input-wrap #chat-input[contenteditable="false"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.chat-input-wrap #chat-input:empty:before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}
/* Allow inline-mention spans inside the contenteditable input */
.chat-input-wrap #chat-input .inline-mention {
  -webkit-user-modify: read-only;
  user-modify: read-only;
}
.chat-input-row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.35rem 0.5rem;
}
/* ── Attach button ── */
.btn-attach {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0.4rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}
.btn-attach:hover { color: var(--text); }
/* ── Attachments preview strip ── */
.chat-attachments {
  display: none;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem 0;
}
.chat-attachments.has-items { display: flex; }
.chat-attachment-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.chat-attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat-attachment-thumb .remove-attach {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  color: var(--text);
  border: none;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}
.chat-attachment-thumb .remove-attach:hover {
  background: #e53935;
}
/* ── Image thumbnails in messages ── */
.message-images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.message-images img {
  max-width: 200px;
  max-height: 150px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  cursor: pointer;
  object-fit: cover;
}
.message-images img:hover {
  border-color: var(--accent);
}
/* #chat-input base styles are in .chat-input-wrap #chat-input above */

/* ── Empty state ── */
.empty-state {
  color: var(--text-muted);
  text-align: center;
  padding: 1.5rem;
  font-size: 0.85rem;
}

/* Message skeleton: reuses real .message layout */
.chat-message-skeleton-wrap {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.message.message-skeleton {
  animation: none;
  opacity: 1;
  position: static;
  z-index: auto;
}
.message.message-skeleton.user {
  /* Keep the top margin for spacing like real messages, but disable sticky */
  position: static;
}
.message.message-skeleton .message-body {
  pointer-events: none;
}
/* User skeleton body: match real user bubble width */
.message.message-skeleton.user .message-body {
  width: 75%;
  max-width: 85%;
}
/* Agent skeleton body: full-width like real agent messages */
.message.message-skeleton.agent .message-body {
  flex: 1;
  width: 100%;
}
.message.message-skeleton .message-text {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.message.message-skeleton .skeleton-bar {
  height: 0.835rem;
  border-radius: 3px;
}
/* Skeleton tool card: mimics collapsed tool-call header */
.skeleton-tool-card {
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  margin-bottom: 0.5rem;
}
.skeleton-tool-card .skeleton-bar {
  height: 0.78rem;
}

.chat-readonly-banner {
  border: 1px solid rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.1);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  margin: 0.5rem 0.75rem 0.25rem;
  color: var(--text);
}
.chat-readonly-title {
  font-size: 0.8rem;
  font-weight: 600;
}
.chat-readonly-preview {
  margin-top: 0.25rem;
  font-size: 0.76rem;
  color: var(--text-muted);
  white-space: pre-wrap;
}
.chat-readonly-time {
  margin-top: 0.2rem;
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* ── Initial state: sidebar mode — input near top ── */
.chat-container.chat-initial {
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  padding-bottom: 18vh;
}
.chat-container.chat-initial .chat-messages-wrapper {
  display: none;
}
.chat-container.chat-initial .chat-status {
  display: none;
}
.chat-container.chat-initial .chat-input-wrap {
  border-top: none;
  width: 100%;
  max-width: 520px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  overflow: visible;
  box-shadow: 0 4px 20px rgba(15, 41, 38, 0.08);
  margin: 0;
}
.chat-container.chat-initial #chat-input {
  min-height: 72px;
}
.chat-container.chat-initial #chat-input:focus {
  box-shadow: none;
}

/* ── Expanded (full view): center the welcome + input ── */
.app.chat-expanded .chat-container.chat-initial {
  justify-content: center;
  padding: 2rem 2rem;
  padding-bottom: 12vh;
}
.app.chat-expanded .chat-container.chat-initial .chat-input-wrap {
  max-width: 640px;
}

/* ── Welcome section ── */
.chat-welcome {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  text-align: center;
  width: 100%;
  max-width: 520px;
}
.chat-container.chat-initial .chat-welcome {
  display: flex;
}
.chat-welcome-logo {
  margin-bottom: 0.25rem;
}
.chat-welcome-logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--accent);
  color: var(--accent-text);
  border: 1px solid var(--border-accent);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.chat-welcome-logo-icon::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(15, 77, 74, 0.1) 45%,
    var(--border) 50%,
    rgba(15, 77, 74, 0.1) 55%,
    transparent 60%
  );
  animation: logoIconShimmer 3s ease-in-out infinite;
}
@keyframes logoIconShimmer {
  0%   { transform: translateX(-100%) rotate(25deg); }
  100% { transform: translateX(100%) rotate(25deg); }
}
.chat-welcome-logo-icon svg {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 6px var(--border));
  position: relative;
  z-index: 1;
}
.chat-welcome-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
  letter-spacing: -0.01em;
}

/* ── Recent chats (pill chips below input in welcome state) ── */
.recent-chats {
  display: none;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.5rem 0 0;
  justify-content: center;
  width: 100%;
  max-width: 700px;
}
.app.chat-expanded .chat-container.chat-initial .recent-chats {
  display: flex;
}
.recent-chat-card {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem 0.2rem 0.4rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  font-size: 0.68rem;
  color: var(--text-secondary);
  white-space: nowrap;
  max-width: none;
}
.recent-chat-card:hover {
  background: var(--bg-elevated);
  border-color: var(--border-accent);
  color: var(--text);
}
.recent-chat-card-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--text-muted);
}
.recent-chat-card-icon svg {
  width: 10px;
  height: 10px;
}
.recent-chat-card-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-chat-card-title {
  font-size: inherit;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-chat-card-preview,
.recent-chat-card-time {
  display: none;
}
.login-prompt {
  text-align: center;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}
.login-prompt a {
  color: var(--accent, #4a7cc9);
  cursor: pointer;
  text-decoration: underline;
}

/* ── Scrollbar styling ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(15, 77, 74, 0.06);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border);
}

/* ── Approval card ── */
.approval-card {
  margin-top: 0.6rem;
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(251, 191, 36, 0.04);
  animation: messageIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.approval-card-header {
  padding: 0.45rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warning);
  background: rgba(251, 191, 36, 0.06);
  border-bottom: 1px solid rgba(251, 191, 36, 0.15);
}
.approval-action {
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}
.approval-action:last-child {
  border-bottom: none;
}
.approval-action-info {
  flex: 1;
  min-width: 0;
}
.approval-action-tool {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.approval-action-summary {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
  word-break: break-word;
}
.approval-action-btns {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}
.approval-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.15s ease;
  padding: 0;
  font-family: var(--font-sans);
}
.approval-btn-approve:hover {
  background: var(--success-dim);
  border-color: rgba(52, 211, 153, 0.3);
  color: var(--success);
}
.approval-btn-approve-window {
  width: 34px;
  letter-spacing: -0.04em;
  font-size: 0.78rem;
}
.approval-btn-approve-window:hover {
  background: rgba(103, 232, 249, 0.12);
  border-color: rgba(103, 232, 249, 0.35);
  color: var(--cyan);
}
.approval-btn-reject:hover {
  background: var(--error-dim);
  border-color: rgba(248, 113, 113, 0.3);
  color: var(--error);
}
.approval-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.approval-card.approved {
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.04);
}
.approval-card.approved .approval-card-header {
  color: var(--success);
  background: rgba(52, 211, 153, 0.06);
  border-bottom-color: rgba(52, 211, 153, 0.15);
}
.approval-card.rejected {
  border-color: rgba(248, 113, 113, 0.2);
  background: rgba(248, 113, 113, 0.04);
}
.approval-card.rejected .approval-card-header {
  color: var(--error);
  background: rgba(248, 113, 113, 0.06);
  border-bottom-color: rgba(248, 113, 113, 0.15);
}

/* ── Planning shimmer (inline text) ── */
.planning-shimmer {
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--border) 0%,
    var(--text-muted) 40%,
    var(--text) 50%,
    var(--text-muted) 60%,
    var(--border) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmerSlide 2s ease-in-out infinite;
}
@keyframes shimmerSlide {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@keyframes planningFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes planningPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* ── Cancel button ── */
.btn-send.btn-cancel {
  background: #e53935;
  border-color: #e53935;
}
.btn-send.btn-cancel:hover {
  background: #c62828;
  border-color: #c62828;
}

/* ── Topbar user info ── */
.topbar-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.6rem;
  border-left: 1px solid var(--border);
  margin-left: 0.3rem;
}
.topbar-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
}
.topbar-user-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.topbar-btn-logout {
  padding: 0.35rem 0.5rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar-btn-logout:hover {
  background: var(--error-dim);
  border-color: rgba(248, 113, 113, 0.3);
  color: var(--error);
}

/* ── Selection ── */
::selection {
  background: var(--accent-glow);
  color: var(--text);
}

/* ── Azure Tenant Modal ── */
.az-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10, 10, 20, 0.7);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: azFadeIn 0.15s ease-out;
}
@keyframes azFadeIn { from { opacity: 0; } to { opacity: 1; } }
.az-modal {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px 28px; width: 420px; max-width: 92vw;
  box-shadow: var(--shadow-lg); position: relative;
  animation: azSlideUp 0.2s ease-out;
}
@keyframes azSlideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.az-modal-close {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  color: var(--text-muted); font-size: 1.4rem; cursor: pointer; padding: 4px;
  line-height: 1; transition: color 0.15s;
}
.az-modal-close:hover { color: var(--text); }
.az-modal-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.az-modal-sub { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 16px; }
.az-modal-sub strong { color: var(--text); font-weight: 500; }
.az-modal-reason {
  font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5;
  margin-bottom: 18px; padding: 10px 14px;
  background: rgba(30, 40, 70, 0.5); border-radius: 8px;
  border-left: 3px solid #3b5998;
}
.az-modal-label {
  display: block; font-size: 0.75rem; font-weight: 500; color: var(--text-secondary);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em;
}
.az-modal-input {
  width: 100%; padding: 10px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 0.88rem;
  background: var(--bg-secondary); color: var(--text);
  font-family: var(--font-sans); transition: border-color 0.15s;
}
.az-modal-input::placeholder { color: var(--text-muted); }
.az-modal-input:focus { outline: none; border-color: #3b5998; box-shadow: 0 0 0 3px rgba(59,89,152,0.15); }
.az-modal-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 20px; border-radius: var(--radius-sm); border: none;
  background: #2c4a7c; color: var(--text); font-weight: 600; font-size: 0.88rem;
  font-family: var(--font-sans); cursor: pointer; margin-top: 14px;
  transition: background 0.15s, transform 0.1s;
}
.az-modal-btn:hover { background: #3b5998; }
.az-modal-btn:active { transform: scale(0.985); }
.az-modal-btn:disabled { background: #1e3256; cursor: not-allowed; opacity: 0.7; }
.az-modal-spinner {
  display: none; width: 15px; height: 15px;
  border: 2px solid rgba(15, 77, 74, 0.2); border-top-color: var(--text);
  border-radius: 50%; animation: azSpin 0.6s linear infinite;
}
.az-modal-btn.loading .az-modal-spinner { display: block; }
.az-modal-btn.loading #az-modal-btn-text { opacity: 0.7; }
@keyframes azSpin { to { transform: rotate(360deg); } }
.az-modal-error {
  margin-top: 10px; padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--error-dim); border: 1px solid rgba(248,113,113,0.3);
  color: var(--error); font-size: 0.82rem;
}
.az-modal-help {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 0.8rem; color: var(--text-secondary); line-height: 1.6;
}
.az-modal-help a { color: var(--link); text-decoration: none; }
.az-modal-help a:hover { text-decoration: underline; color: var(--link-hover); }
.az-modal-help code {
  background: var(--border-subtle); padding: 1px 5px; border-radius: 3px;
  font-size: 0.78rem; font-family: var(--mono);
}

/* ── Mobile Screen Warning Popup ── */
.mobile-warning-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(10, 10, 20, 0.8);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: azFadeIn 0.15s ease-out;
}
.mobile-warning {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 36px 28px; width: 340px; max-width: 88vw;
  box-shadow: var(--shadow-lg); text-align: center;
  animation: azSlideUp 0.2s ease-out;
}
.mobile-warning-icon {
  color: var(--accent-cyan, #67e8f9); margin-bottom: 16px;
}
.mobile-warning-title {
  font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 10px;
}
.mobile-warning-text {
  font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 22px;
}
.mobile-warning-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 32px; border-radius: var(--radius-sm); border: none;
  background: #2c4a7c; color: var(--text); font-weight: 600; font-size: 0.88rem;
  font-family: var(--font-sans); cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.mobile-warning-btn:hover { background: #3b5998; }
.mobile-warning-btn:active { transform: scale(0.985); }

/* ================================================================
   MOBILE RESPONSIVE (max-width: 768px)
   ================================================================ */
@media (max-width: 768px) {

  /* ── Grid: single column; chat-only shell hides center editor (dashboard/project keep it) ── */
  .app,
  .app.chat-expanded,
  .app.project-mode {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr;
  }

  .app:not(.route-mode):not(.project-mode) .editor-main {
    display: none;
  }

  /* ── Dashboard + project: show main/canvas panel on small screens ── */
  .app.route-mode .editor-main,
  .app.project-mode .editor-main {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
  }

  .app.route-mode .editor-main {
    grid-column: 1;
    grid-row: 1;
  }

  .app.route-mode .editor-mobile-toolbar {
    display: flex;
    padding-top: max(0.45rem, env(safe-area-inset-top, 0px));
  }

  /* ── Project: chat ~full first screen; canvas (Sources, Files, …) below — page scrolls ── */
  body:has(.app.project-mode) {
    overflow-y: auto;
    overflow-x: hidden;
  }
  .app.project-mode {
    grid-template-rows: minmax(92dvh, auto) auto !important;
    height: auto;
    min-height: 100dvh;
    max-height: none;
    overflow: visible;
  }
  /* !important beats stray inline grid-column from applyPanelOrder (chat was column 3) */
  .app.project-mode .sidebar-right {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 0;
    width: 100% !important;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid var(--border);
    align-self: stretch;
  }
  .app.project-mode .editor-main {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-height: min(52dvh, 480px);
  }

  /* Play opens Preview; canvas tabs still show Preview next to Sources */
  .app.project-mode .project-header-preview-btn {
    display: inline-flex;
  }
  .app.project-mode .chat-header-left {
    gap: 0.35rem;
    min-width: 0;
  }
  .app.project-mode .project-header-name {
    max-width: min(120px, 28vw);
  }

  /* Hamburger opens resources drawer on phones (overrides desktop project-mode hide) */
  .app.project-mode #btn-mobile-menu {
    display: flex !important;
  }

  .app.project-mode .chat-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  /* Project menu: fixed + getBoundingClientRect() mis-anchors inside overflow/stacking (menu at bottom of screen) */
  .app.project-mode .chat-header,
  .app.project-mode .chat-header-left {
    overflow: visible;
  }
  .app.project-mode .project-dropdown {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: auto;
    width: max-content;
    min-width: min(200px, 92vw);
    max-width: min(92vw, 280px);
  }

  .route-inline {
    padding: 1rem 1rem;
  }
  .dash-home-greeting {
    font-size: 1.35rem;
  }
  .dash-home-textarea {
    font-size: 1rem;
  }
  .dash-home-chat-toolbar {
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .route-grid {
    grid-template-columns: 1fr;
  }
  .canvas-cards {
    grid-template-columns: 1fr;
  }

  .col-divider,
  .project-divider,
  .panel-drag-handle {
    display: none !important;
  }

  #btn-chat-expand {
    display: none;
  }

  /* Chat sidebar: remove left border, take full area */
  .sidebar-right {
    border-left: none;
  }

  /* ── Left sidebar: slide-in drawer ── */
  .sidebar-left {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    z-index: 200;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: none;
    overflow-y: auto;
  }
  .sidebar-left.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
  }

  /* Backdrop overlay when sidebar drawer is open */
  .mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 199;
  }
  .mobile-backdrop.visible {
    display: block;
  }

  /* Show mobile menu button in chat header */
  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
  }
  .mobile-menu-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
  }

  /* Topbar actions: tighter gap, icon-only buttons */
  .topbar-actions {
    gap: 0.35rem;
  }
  .plan-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.68rem;
  }

  .topbar-btn-label {
    display: none;
  }
  .topbar-btn-upgrade .topbar-btn-label {
    display: inline;
    font-size: 0.72rem;
  }
  .topbar-btn {
    padding: 0.5rem;
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
  }

  /* Hide username text, keep avatar */
  .topbar-user-name {
    display: none;
  }
  .topbar-user {
    gap: 0.35rem;
  }

  /* Logout button: touch target */
  .topbar-btn-logout {
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* ── Chat: full-width optimizations ── */
  .chat-container {
    padding: 0.5rem;
  }

  /* Chat input: prevent iOS zoom, comfortable touch sizing */
  #chat-input {
    font-size: 1rem;
    min-height: 52px;
    padding: 0.85rem;
  }

  .chat-input-wrap {
    margin: 0.25rem;
    border-radius: var(--radius-md);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Send button: 44px touch target */
  .btn-send {
    width: 44px;
    height: 44px;
  }

  /* Attach button: touch-friendly */
  .btn-attach {
    min-width: 44px;
    min-height: 44px;
  }

  /* Mode toggle: slightly larger */
  .chat-mode-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
  }

  .chat-input-row {
    padding: 0.4rem 0.5rem;
  }

  /* Welcome / initial state: full width input */
  .chat-container.chat-initial {
    padding: 1.25rem 0.75rem;
  }
  .app.chat-expanded .chat-container.chat-initial {
    padding: 1.25rem 0.75rem;
  }
  .chat-container.chat-initial .chat-input-wrap {
    max-width: 100%;
  }
  .app.chat-expanded .chat-container.chat-initial .chat-input-wrap {
    max-width: 100%;
  }

  .chat-welcome-title {
    font-size: 1.1rem;
  }

  /* Chat tabs: touch-friendly sizes */
  .chat-tab {
    padding: 0.4rem 0.65rem;
    font-size: 0.75rem;
  }
  .chat-tab-close {
    width: 22px;
    height: 22px;
    opacity: 0.6;
  }
  .chat-tab-new,
  .chat-tab-history {
    width: 32px;
    height: 32px;
  }
  .branch-selector { display: none !important; }

  /* Message images: constrain to viewport */
  .message-images img {
    max-width: 100%;
    max-height: 200px;
  }

  /* Tool call cards: prevent overflow */
  .tool-call-body {
    max-height: 240px;
    font-size: 0.74rem;
  }

  /* Approval buttons: touch targets */
  .approval-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  /* ── Azure modal: tighter padding, prevent iOS zoom ── */
  .az-modal {
    padding: 24px 20px;
  }
  .az-modal-input {
    font-size: 1rem;
  }

  /* Recents grid: stack on small screens */
  .dash-home-recents-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Small-screen banner ── */
.small-screen-banner {
  display: none;
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
  color: #1a1a2e;
  text-align: center;
  padding: 8px 40px 8px 16px;
  font-size: 13px;
  font-weight: 500;
  position: relative;
  z-index: 9999;
  line-height: 1.4;
}
.small-screen-banner .banner-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #1a1a2e;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0.7;
}
.small-screen-banner .banner-close:hover { opacity: 1; }
/* Banner retired — layout is responsive; keep element hidden if present in HTML */
.small-screen-banner { display: none !important; }

/* ── Add Repository Picker Modal ── */
.repo-picker-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10, 10, 20, 0.7);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: azFadeIn 0.15s ease-out;
}
.repo-picker-modal {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 0; width: 440px; max-width: 92vw;
  box-shadow: var(--shadow-lg); position: relative;
  animation: azSlideUp 0.2s ease-out;
  display: flex; flex-direction: column;
  max-height: 70vh;
}
.repo-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px 0;
}
.repo-picker-title {
  font-size: 1rem; font-weight: 600; color: var(--text);
}
.repo-picker-close {
  background: none; border: none;
  color: var(--text-muted); font-size: 1.3rem; cursor: pointer;
  padding: 4px; line-height: 1; transition: color 0.15s;
}
.repo-picker-close:hover { color: var(--text); }
.repo-picker-search-wrap {
  padding: 14px 22px 10px;
}
.repo-picker-search {
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 0.83rem; background: var(--bg-secondary); color: var(--text);
  font-family: var(--font-sans); transition: border-color 0.15s;
}
.repo-picker-search::placeholder { color: var(--text-muted); }
.repo-picker-search:focus { outline: none; border-color: var(--accent-hover); box-shadow: 0 0 0 3px var(--accent-dim); }
.repo-picker-list {
  flex: 1; overflow-y: auto; padding: 0 10px 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.repo-picker-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.7rem; border-radius: 8px;
  cursor: pointer; transition: background 0.12s;
  border: none; background: transparent; width: 100%;
  text-align: left; font-family: var(--font-sans); color: var(--text);
}
.repo-picker-item:hover { background: var(--border-subtle); }
.repo-picker-item[disabled] {
  opacity: 0.4; cursor: not-allowed; pointer-events: none;
}
.repo-picker-item-icon {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--border-subtle); color: var(--text-muted);
  flex-shrink: 0;
}
.repo-picker-item-name {
  font-size: 0.82rem; font-weight: 500; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.repo-picker-item-meta {
  font-size: 0.68rem; color: rgba(15, 77, 74, 0.2); flex-shrink: 0;
}
.repo-picker-empty {
  padding: 20px 22px; text-align: center;
  color: var(--text-muted); font-size: 0.82rem;
}
.repo-picker-footer {
  padding: 10px 22px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px solid var(--border-subtle);
}
.repo-picker-footer-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.74rem; color: var(--text-muted); text-decoration: none;
  transition: color 0.15s;
}
.repo-picker-footer-link:hover { color: var(--text-secondary); text-decoration: underline; }
.repo-picker-refresh {
  background: none; border: 1px solid rgba(15, 77, 74, 0.08);
  border-radius: var(--radius-sm); padding: 4px 10px;
  font-size: 0.72rem; color: var(--text-muted); cursor: pointer;
  font-family: var(--font-sans); transition: color 0.15s, border-color 0.15s;
}
.repo-picker-refresh:hover { color: var(--text); border-color: var(--border); }

/* ── Selected Repo Rows (replaces checkbox list) ── */
.src-selected-list {
  display: flex; flex-direction: column; gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.src-selected-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.7rem; border-radius: 10px;
  border: 1px solid rgba(34,197,94,0.15);
  background: rgba(34,197,94,0.03);
}
.src-selected-row .src-check-repo-icon {
  color: rgba(34,197,94,0.6); background: rgba(34,197,94,0.06);
}
.src-selected-row .src-check-copy { flex: 1; min-width: 0; }
.src-remove-btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  color: var(--border); background: transparent; border: none;
  cursor: pointer; transition: color 0.15s, background 0.15s;
  flex-shrink: 0; padding: 0;
}
.src-remove-btn:hover {
  color: rgba(248,113,113,0.8); background: rgba(248,113,113,0.1);
}
.src-add-repo-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 8px 16px; border-radius: var(--radius-sm); border: 1px dashed var(--accent);
  background: var(--accent-dim); color: var(--accent); font-size: 0.82rem;
  font-weight: 600; font-family: var(--font-sans); cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  width: 100%; justify-content: center;
}
.src-add-repo-btn:hover {
  border-color: var(--accent-hover); color: var(--accent-text);
  background: var(--accent);
}
.src-selected-summary {
  font-size: 0.74rem; color: var(--text-muted); margin-bottom: 0.5rem;
}

/* ── Files tab layout ── */
.files-empty-state {
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px; width: 100%; max-width: 880px; margin: 0 auto;
}
.files-sandbox-empty {
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: 14px; padding: 18px 16px; display: flex;
  align-items: center; justify-content: space-between; gap: 16px;
}