/* ── CSS Custom Properties ──────────────────────────────────────────────── */
/* ── Light theme (default) ────────────────────────── */
:root {
  --bg-base:       #F8FAFC;
  --bg-surface:    #FFFFFF;
  --bg-elevated:   #FFFFFF;
  --bg-hover:      #F1F5F9;
  --bg-subtle:     #F8FAFC;

  --border:        #E2E8F0;
  --border-strong: #CBD5E1;

  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-tertiary:  #94A3B8;
  --text-inverse:   #FFFFFF;
  --text-link:      #2563EB;

  --accent:        #2563EB;
  --accent-hover:  #1D4ED8;
  --accent-subtle: #DBEAFE;
  --accent-text:   #1E40AF;

  --status-active:  #16A34A;
  --status-paused:  #D97706;
  --status-done:    #2563EB;
  --status-failed:  #DC2626;
  --status-pending: #94A3B8;

  --status-active-bg:  #F0FDF4;
  --status-paused-bg:  #FFFBEB;
  --status-done-bg:    #EFF6FF;
  --status-failed-bg:  #FEF2F2;

  --sidebar-bg:        #F8FAFC;
  --sidebar-border:    #E2E8F0;
  --nav-active-bg:     #EFF6FF;
  --nav-active-color:  #1D4ED8;
  --nav-hover-bg:      #F1F5F9;
  --nav-color:         #475569;

  --input-bg:      #FFFFFF;
  --input-border:  #CBD5E1;
  --input-focus:   #2563EB;

  --code-bg:    #F1F5F9;
  --code-color: #0F172A;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.06);

  /* ── Process graph node state backgrounds ── */
  --graph-bg:              #F8FAFC;
  --graph-dot-pattern:     rgba(100, 116, 139, 0.15);
  --graph-edge:            #CBD5E1;
  --graph-edge-label:      #64748B;
  --graph-edge-outline:    #F8FAFC;
  --graph-node-current-bg: #DBEAFE;
  --graph-node-running-bg: #DBEAFE;
  --graph-node-done-bg:    #F0FDF4;
  --graph-node-failed-bg:  #FEF2F2;
}

/* ── Dark theme ───────────────────────────────────── */
[data-theme="dark"] {
  --bg-base:       #0F172A;
  --bg-surface:    #1E293B;
  --bg-elevated:   #263548;
  --bg-hover:      #334155;
  --bg-subtle:     #1A2640;

  --border:        #334155;
  --border-strong: #475569;

  --text-primary:   #F1F5F9;
  --text-secondary: #94A3B8;
  --text-tertiary:  #64748B;
  --text-inverse:   #0F172A;
  --text-link:      #60A5FA;

  --accent:        #3B82F6;
  --accent-hover:  #60A5FA;
  --accent-subtle: #1E3A5F;
  --accent-text:   #93C5FD;

  --status-active:  #22C55E;
  --status-paused:  #F59E0B;
  --status-done:    #3B82F6;
  --status-failed:  #EF4444;
  --status-pending: #64748B;

  --status-active-bg:  #052E16;
  --status-paused-bg:  #1C1405;
  --status-done-bg:    #0F1E3D;
  --status-failed-bg:  #1F0A0A;

  --sidebar-bg:        #0F172A;
  --sidebar-border:    #1E293B;
  --nav-active-bg:     #1E3A5F;
  --nav-active-color:  #60A5FA;
  --nav-hover-bg:      #1E293B;
  --nav-color:         #94A3B8;

  --input-bg:      #1E293B;
  --input-border:  #334155;
  --input-focus:   #3B82F6;

  --code-bg:    #1E293B;
  --code-color: #F1F5F9;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);

  /* ── Process graph node state backgrounds ── */
  --graph-bg:              #0F172A;
  --graph-dot-pattern:     rgba(90, 120, 160, 0.18);
  --graph-edge:            #475569;
  --graph-edge-label:      #94A3B8;
  --graph-edge-outline:    #0F172A;
  --graph-node-current-bg: #1E3A5F;
  --graph-node-running-bg: #1E3A5F;
  --graph-node-done-bg:    #052E16;
  --graph-node-failed-bg:  #1F0A0A;
}

/* ── Reset & Base ──────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: -apple-system, 'Segoe UI', sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hidden { display: none !important; }

/* ── Root layout ──────────────────────────────────────────────────────── */
#layout {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
#sidebar {
  width: 240px;
  min-width: 240px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#sidebar-top {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-logo {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}

/* ── Sidebar navigation ─────────────────────────────────────────────── */
#sidebar-nav {
  padding: 10px 8px 4px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-btn {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--nav-color);
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.nav-btn:hover { background: var(--nav-hover-bg); color: var(--text-primary); }
.nav-btn.active { background: var(--nav-active-bg); color: var(--nav-active-color); font-weight: 600; }
/* Legacy section: visually deprioritised but still functional */
.nav-btn.legacy { opacity: 0.6; }
.nav-btn.legacy:hover { opacity: 1; }
.nav-btn.legacy.active { opacity: 1; }
/* ── Sidebar sections (collapsible groups) ──────────────────────────── */
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sidebar-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-tertiary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.1s;
}
.sidebar-section-header:hover { color: var(--text-secondary); }
.sidebar-section-arrow {
  font-size: 0.65rem;
  transition: transform 0.2s;
  color: var(--text-tertiary);
}
.sidebar-section--collapsed .sidebar-section-arrow { transform: rotate(-90deg); }
.sidebar-section-items {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  max-height: 200px;
  transition: max-height 0.2s ease;
}
.sidebar-section--collapsed .sidebar-section-items { max-height: 0; }

/* Section label — plain text or clickable button variant */
.sidebar-section-label {
  padding: 8px 12px 4px;
  color: var(--text-tertiary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sidebar-section-label--btn {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.1s;
}
.sidebar-section-label--btn:hover { color: var(--text-secondary); }
body.cases-workspace .sidebar-section-label--btn { color: var(--accent); }

/* Pipelines type list — always visible when section is shown */
#pipelines-type-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* Pipelines section: always visible for admins (hidden class removed by updateAdminUI) */
/* The type list and + button are only shown when in cases workspace */
#sidebar-section-pipelines { display: none; }
#sidebar-section-pipelines:not(.hidden) { display: flex; }
/* Type list and new-button only shown in cases workspace */
#sidebar-section-pipelines #pipelines-type-nav,
#sidebar-section-pipelines .sidebar-new-pipeline-btn {
  display: none;
}
body.cases-workspace #sidebar-section-pipelines #pipelines-type-nav,
body.cases-workspace #sidebar-section-pipelines .sidebar-new-pipeline-btn {
  display: flex;
  flex-direction: column;
}

/* "+ Новый" button inside pipelines section */
.sidebar-new-pipeline-btn {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--text-tertiary);
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  margin-top: 2px;
  transition: color 0.12s, background 0.12s;
}
.sidebar-new-pipeline-btn:hover { color: var(--accent); background: var(--bg-surface); }

/* Pipeline type item (dynamic) */
.sidebar-pipeline-item {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--nav-color);
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.sidebar-pipeline-item:hover { background: var(--nav-hover-bg); color: var(--text-secondary); }
.sidebar-pipeline-item.active { background: var(--nav-active-bg); color: var(--nav-active-color); font-weight: 600; }

/* Empty state for empty pipelines list */
.sidebar-pipelines-empty {
  padding: 6px 12px;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  font-style: italic;
}

.nav-sub-btn {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--nav-color);
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.nav-sub-btn:hover { background: var(--nav-hover-bg); color: var(--text-secondary); }
.nav-sub-btn.active { background: var(--nav-active-bg); color: var(--nav-active-color); font-weight: 600; }

/* ── Sidebar: conversation list (tools only) ───────────────────────── */
#sidebar-convs {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}
body.tools-workspace #sidebar-convs { display: flex; }

#sidebar-convs-header {
  padding: 10px 10px 6px;
  flex-shrink: 0;
}
#new-conv-btn {
  width: 100%;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 0.75rem;
  padding: 7px 10px;
  cursor: pointer;
  text-align: left;
}
#new-conv-btn:hover { background: var(--border); color: var(--text-primary); }
#conv-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px 8px;
}
.conv-item {
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--nav-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.conv-item:hover { background: var(--nav-hover-bg); color: var(--text-secondary); }
.conv-item.active { background: var(--nav-active-bg); color: var(--text-primary); }
.conv-item .conv-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-tertiary); flex-shrink: 0; }
.conv-item.active .conv-dot { background: var(--accent); }

/* ── Sidebar: bottom zone ────────────────────────────────────────────── */
#sidebar-bottom {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#conn-badge {
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text-tertiary);
  transition: all 0.3s;
  display: block;
  margin-bottom: 4px;
}
#conn-badge.connected { background: var(--status-active-bg); color: var(--status-active); }
#password-link {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--nav-color);
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
#password-link:hover { background: var(--bg-hover); color: var(--text-secondary); }
#admin-link {
  display: block;
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--accent);
  font-size: 0.8rem;
  text-decoration: none;
  transition: background 0.1s;
}
#admin-link:hover { background: var(--nav-active-bg); }
#theme-toggle {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--text-tertiary);
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
#theme-toggle:hover { background: var(--bg-hover); color: var(--text-secondary); }

/* Sidebar overlay (mobile only) */
#sidebar-overlay { display: none; }

/* ── Main content area ────────────────────────────────────────────────── */
main {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
}

/* ── Mobile top bar (desktop: hidden) ─────────────────────────────────── */
#mobile-bar {
  display: none;
  align-items: center;
  padding: 0 12px;
  height: 44px;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-shrink: 0;
}
#sidebar-toggle {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
#sidebar-toggle:hover { color: var(--text-primary); background: var(--border); }
#mobile-section-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}
#conn-badge-mobile {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  margin-left: auto;
}

/* ── App sections ─────────────────────────────────────────────────────── */
.app-section {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
/* Body class controls which section is visible */
body.tasks-workspace #section-workspace { display: flex; }
body.tools-workspace #section-tools { display: flex; }
body.memory-workspace #section-memory { display: flex; }
body.cases-workspace  #section-cases  { display: flex; }

/* ── Section header ────────────────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
  gap: 12px;
}
.section-header h2 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.section-header-text { min-width: 0; }
#chat-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
#chat-subtitle { font-size: 0.74rem; color: var(--nav-color); margin-top: 2px; }
.section-header-actions { display: flex; gap: 8px; align-items: center; }
#assistant-reconcile-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--status-active-bg);
  background: var(--nav-active-bg);
  color: var(--accent);
  cursor: pointer;
  font-size: 0.78rem;
}
#assistant-reconcile-btn:hover { background: var(--bg-hover); }
#pipeline-new-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--accent-subtle);
  background: var(--nav-active-bg);
  color: var(--accent);
  cursor: pointer;
  font-size: 0.78rem;
}
#pipeline-new-btn:hover { background: var(--bg-hover); }

/* ── Section: Workspace (Assistant + GTD) ─────────────────────────────── */
#section-workspace { overflow: hidden; }
#assistant-shell {
  flex: 1;
  min-height: 0;
  display: none;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
  gap: 16px;
  padding: 16px 20px 18px;
  overflow: hidden;
}
body.tasks-workspace #assistant-shell { display: grid; }
#assistant-shell.assistant-compact {
  grid-template-columns: 1fr;
}
#assistant-shell.assistant-compact #assistant-main {
  max-width: 860px;
  margin: 0 auto;
}
#assistant-shell.assistant-compact #assistant-panels,
#assistant-shell.assistant-compact #assistant-detail {
  display: none;
}
#assistant-shell.assistant-operational #assistant-feed {
  min-height: 180px;
}
#assistant-main,
#assistant-panels {
  min-height: 0;
}
#assistant-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#assistant-feed {
  flex: 1;
  min-height: 240px;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#assistant-feed:empty::before {
  content: 'Сюда можно скинуть мысль, задачу, заметку или идею проекта.';
  color: var(--text-tertiary);
  font-size: 0.88rem;
  line-height: 1.5;
}
.assistant-entry {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--bg-hover);
}
.assistant-entry.user {
  background: var(--status-active-bg);
  border-color: var(--border);
}
.assistant-entry.system {
  background: var(--bg-surface);
  border-color: var(--border);
}
.assistant-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.assistant-entry-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.assistant-entry.user .assistant-entry-label { color: var(--status-active); }
.assistant-entry.system .assistant-entry-label { color: var(--accent); }
.assistant-entry-text {
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-wrap;
}
.assistant-entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.assistant-progress {
  align-self: flex-start;
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-style: italic;
  padding: 4px 0;
  animation: pulse 1.5s ease-in-out infinite;
}
.assistant-entry-actions button {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--nav-active-bg);
  color: var(--accent);
  cursor: pointer;
  font-size: 0.76rem;
}
.assistant-entry-actions button.secondary {
  border-color: var(--status-failed-bg);
  background: var(--status-failed-bg);
  color: var(--status-failed);
}
.assistant-inline-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.assistant-inline-card {
  width: 100%;
  text-align: left;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 12px;
  cursor: pointer;
}
.assistant-inline-card:hover {
  border-color: var(--accent);
  background: var(--bg-surface);
}
.assistant-external-card { text-decoration: none; color: inherit; }
.assistant-inline-card-title { color: var(--text-primary); font-size: 0.84rem; }
.assistant-inline-card-meta { color: var(--text-secondary); font-size: 0.74rem; margin-top: 4px; }
.assistant-inline-card-snippet { color: var(--text-secondary); font-size: 0.78rem; line-height: 1.5; margin-top: 8px; }
#assistant-composer {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
#assistant-input-row {
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
#assistant-input {
  flex: 1;
  min-height: 104px;
  resize: vertical;
  max-height: 220px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 14px;
  color: var(--text-primary);
  padding: 12px 14px;
  font: inherit;
  line-height: 1.5;
  outline: none;
}
#assistant-input:focus { border-color: var(--input-focus); }
#assistant-send-btn {
  min-width: 132px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--nav-active-bg);
  color: var(--accent);
  cursor: pointer;
  font-size: 0.88rem;
}
#assistant-send-btn:hover { background: var(--bg-hover); color: var(--accent-hover); }
#assistant-send-btn:disabled { cursor: not-allowed; opacity: 0.55; }
#assistant-panels {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
.assistant-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.assistant-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.assistant-panel-header h3 { font-size: 0.92rem; color: var(--text-primary); margin-bottom: 4px; }
.assistant-panel-header p { color: var(--text-secondary); font-size: 0.77rem; line-height: 1.5; }
.assistant-panel-header button {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-secondary);
  cursor: pointer;
}
.assistant-panel-header button:hover { border-color: var(--accent); color: var(--text-primary); }
.assistant-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.assistant-controls select {
  flex: 1;
  min-width: 160px;
  background: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--input-border);
  border-radius: 10px;
  padding: 8px 10px;
}
.assistant-list { display: flex; flex-direction: column; gap: 8px; }
.assistant-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface);
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.assistant-card-title { color: var(--text-primary); font-size: 0.84rem; }
.assistant-card-meta { color: var(--text-secondary); font-size: 0.74rem; }
.assistant-card-text {
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
.assistant-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.assistant-card-actions button {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--nav-active-bg);
  color: var(--accent);
  cursor: pointer;
  font-size: 0.76rem;
}
.assistant-card-actions button.secondary {
  border-color: var(--status-failed-bg);
  background: var(--status-failed-bg);
  color: var(--status-failed);
}
.assistant-detail #assistant-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.assistant-detail {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-surface);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.assistant-detail.assistant-empty-state { border-style: dashed; color: var(--text-tertiary); }
.assistant-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.assistant-detail-kicker {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 4px;
}
.assistant-detail-header h3 { font-size: 0.96rem; color: var(--text-primary); }
.assistant-detail-body {
  color: var(--text-primary);
  font-size: 0.86rem;
  line-height: 1.65;
  white-space: pre-wrap;
}
.assistant-empty { color: var(--text-tertiary); font-size: 0.8rem; line-height: 1.5; }

/* ── Deck (Threads OS v1) ───────────────────────────────────────────── */
.deck-count {
  float: right;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 0.72rem;
  text-align: center;
}
.nav-sub-btn.active .deck-count {
  background: var(--nav-active-bg);
  color: var(--nav-active-color);
}
#assistant-shell.deck-shell {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 16px;
  padding: 18px 20px;
  background:
    radial-gradient(circle at 20% 0%, rgba(77, 163, 255, 0.08), transparent 28%),
    radial-gradient(circle at 90% 12%, rgba(123, 200, 123, 0.07), transparent 30%),
    var(--bg-base);
}
#deck-main,
#deck-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#deck-side {
  overflow-y: auto;
}
.deck-notion-status {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.82rem;
  line-height: 1.45;
}
.deck-notion-status strong {
  display: block;
  color: var(--text-primary);
  font-weight: 600;
}
.deck-notion-status small {
  display: block;
  color: var(--text-secondary);
  margin-top: 2px;
}
.deck-notion-dot {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--text-tertiary);
  box-shadow: 0 0 0 4px rgba(120,120,120,0.12);
  flex: 0 0 auto;
}
.deck-notion-status--connected .deck-notion-dot {
  background: var(--status-active);
  box-shadow: 0 0 0 4px rgba(74,222,128,0.14);
}
.deck-notion-status--needs_config .deck-notion-dot {
  background: var(--status-paused);
  box-shadow: 0 0 0 4px rgba(245,158,11,0.14);
}
.deck-notion-status--unavailable .deck-notion-dot,
.deck-notion-status--error .deck-notion-dot {
  background: var(--status-failed);
  box-shadow: 0 0 0 4px rgba(239,68,68,0.14);
}
.deck-panel {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-surface);
  padding: 16px;
  box-shadow: var(--shadow-md);
}
.deck-kicker {
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
#deck-view-title {
  color: var(--text-primary);
  font-size: 1.35rem;
  margin-bottom: 6px;
}
#deck-view-subtitle {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.55;
}
.deck-create-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px auto;
  gap: 10px;
  margin-bottom: 10px;
}
.deck-create-grid input,
.deck-create-grid select,
#deck-create-summary {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 9px 10px;
}
#deck-create-summary {
  width: 100%;
  resize: vertical;
}
#deck-create-submit,
#deck-new-thread-btn {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--nav-active-bg);
  color: var(--accent);
}
#deck-create-submit:hover,
#deck-new-thread-btn:hover {
  background: var(--bg-hover);
}
.deck-thread-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}
.deck-thread-card {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-surface);
  padding: 14px;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.deck-thread-card:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
  transform: translateY(-1px);
}
div.deck-thread-card:hover {
  transform: none;
}
.deck-thread-title {
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 650;
}
.deck-thread-meta {
  color: var(--text-secondary);
  font-size: 0.75rem;
  margin-top: 5px;
}
.deck-thread-summary {
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.5;
  margin-top: 10px;
}
.deck-thread-next {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  background: var(--bg-elevated);
  color: var(--status-active);
  font-size: 0.78rem;
  line-height: 1.45;
}
.deck-thread-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.deck-thread-actions button {
  border: 1px solid var(--border);
  background: var(--nav-active-bg);
  color: var(--accent);
  border-radius: 999px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 0.78rem;
}
.deck-thread-actions button:hover {
  background: var(--bg-hover);
}
.deck-thread-actions button.danger {
  border-color: var(--status-failed-bg);
  background: var(--status-failed-bg);
  color: var(--status-failed);
}
.deck-view-note,
.deck-thread-group {
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 0.84rem;
  line-height: 1.5;
}
.deck-thread-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
}
.deck-thread-group strong {
  color: var(--text-primary);
}
.deck-panel-title {
  color: var(--text-primary);
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.deck-overview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.deck-overview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg-base);
  color: var(--text-primary);
  border-radius: 12px;
  padding: 10px 12px;
}
.deck-overview-row strong {
  color: var(--accent);
}
.deck-muted,
.deck-empty {
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.55;
}
.deck-empty {
  border: 1px dashed var(--border);
  border-radius: 16px;
  padding: 18px;
}
.deck-selected-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.deck-selected-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.deck-selected-row span {
  color: var(--text-secondary);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.deck-selected-row strong {
  color: var(--text-primary);
  font-size: 0.86rem;
  line-height: 1.45;
}
.deck-conversation-panel {
  min-height: 320px;
  display: flex;
  flex-direction: column;
}
.deck-conversation-messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px 2px 12px;
}
.deck-conversation-empty {
  color: var(--text-secondary);
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 16px;
}
.deck-message {
  max-width: min(680px, 86%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 11px 13px;
  background: var(--bg-surface);
}
.deck-message-user {
  align-self: flex-end;
  border-color: var(--status-active-bg);
  background: var(--status-active-bg);
}
.deck-message-assistant {
  align-self: flex-start;
}
.deck-message-role {
  color: var(--accent);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.deck-message-content {
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.deck-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 12px;
}
.deck-composer textarea {
  min-height: 48px;
  resize: vertical;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  border-radius: 14px;
  padding: 12px;
}
.deck-composer button,
.deck-drawer-actions button,
#deck-drawer-close {
  border: 1px solid var(--border);
  background: var(--nav-active-bg);
  color: var(--accent);
  border-radius: 12px;
  padding: 9px 12px;
}
.deck-composer button:disabled,
.deck-drawer-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.deck-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
}
.deck-thread-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 80;
  width: min(520px, 100vw);
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-left: 1px solid var(--border);
  background: var(--bg-surface);
  box-shadow: -28px 0 80px rgba(0,0,0,0.45);
  transform: translateX(105%);
  transition: transform .18s ease;
}
.deck-thread-drawer.open {
  transform: translateX(0);
}
.deck-drawer-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}
#deck-drawer-title {
  color: var(--text-primary);
  font-size: 1.25rem;
  line-height: 1.25;
}
.deck-drawer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.deck-drawer-meta span {
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 0.74rem;
}
.deck-drawer-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.deck-drawer-tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 7px 10px;
}
.deck-drawer-tab.active {
  color: var(--accent);
  border-color: var(--border);
  background: var(--nav-active-bg);
}
.deck-drawer-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.deck-drawer-row,
.deck-drawer-message {
  border: 1px solid var(--border);
  background: var(--bg-hover);
  border-radius: 14px;
  padding: 12px;
}
.deck-drawer-row span,
.deck-drawer-message strong {
  display: block;
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.deck-drawer-row p,
.deck-drawer-message p {
  color: var(--text-primary);
  line-height: 1.55;
}
.deck-notion-link-form {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  border-radius: 14px;
  padding: 12px;
}
.deck-notion-link-form input {
  width: 100%;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 9px 10px;
  font: inherit;
}
.deck-notion-link-form button {
  justify-self: start;
  border: 1px solid var(--border);
  background: var(--nav-active-bg);
  color: var(--accent);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
}
.deck-notion-link-list {
  display: grid;
  gap: 8px;
}
.deck-notion-link-card {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  border-radius: 14px;
  padding: 12px;
  color: var(--text-primary);
  text-decoration: none;
}
.deck-notion-link-card:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}
.deck-notion-link-card span {
  color: var(--text-secondary);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}
.deck-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.deck-palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: min(12vh, 96px) 18px 18px;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(5px);
}
.deck-palette-overlay[hidden] { display: none; }
.deck-palette {
  width: min(720px, 100%);
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg-surface);
  box-shadow: 0 28px 90px rgba(0,0,0,0.55);
  padding: 18px;
}
.deck-palette-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.deck-palette-header h3 {
  color: var(--text-primary);
  font-size: 1.15rem;
}
#deck-palette-close {
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-secondary);
  border-radius: 12px;
  padding: 8px 12px;
}
#deck-palette-input {
  width: 100%;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
  border-radius: 15px;
  padding: 13px 14px;
  outline: none;
}
#deck-palette-input:focus {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(79,179,92,0.12);
}
.deck-palette-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(56vh, 520px);
  overflow-y: auto;
  margin-top: 14px;
}
.deck-palette-result {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  border-radius: 15px;
  padding: 12px;
}
.deck-palette-result:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}
.deck-palette-result strong {
  display: block;
  color: var(--text-primary);
  margin-bottom: 5px;
}
.deck-palette-result span {
  display: block;
  color: var(--text-secondary);
  font-size: 0.76rem;
}
.deck-palette-result p {
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.45;
  margin-top: 8px;
}
.deck-palette-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
#deck-palette-summary {
  border: 1px solid var(--border);
  background: var(--nav-active-bg);
  color: var(--accent);
  border-radius: 12px;
  padding: 9px 12px;
}
#deck-palette-summary[hidden] { display: none; }

/* ── Section: Tools — chat messages & input ───────────────────────────── */
#section-tools { overflow: hidden; }
#development-env-row {
  display: none;
  gap: 8px;
  margin: 0 20px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: var(--bg-surface);
}
body.tools-workspace.task-tool-active #development-env-row {
  display: flex !important;
  flex-direction: column;
}
#development-env-header { display: flex; flex-direction: column; gap: 4px; }
#development-env-title { font-size: 0.76rem; font-weight: 600; color: var(--text-primary); }
#development-env-status { font-size: 0.72rem; line-height: 1.4; color: var(--text-secondary); }
#development-env-controls { display: flex; gap: 8px; }
#development-env-select,
#development-env-preview,
#development-env-refresh {
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
}
#development-env-select { flex: 1 1 auto; min-width: 0; padding: 0 12px; }
#development-env-refresh { padding: 0 12px; cursor: pointer; }
#development-env-preview { align-items: center; padding: 0 12px; text-decoration: none; white-space: nowrap; display: flex; }

#messages {
  flex: 1; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
#messages:empty::before {
  content: 'Задайте вопрос совету...';
  color: var(--text-tertiary); font-size: 0.9rem; align-self: center; margin-top: 40px;
}
.msg-user {
  align-self: flex-end; max-width: 65%;
  background: var(--nav-active-bg); padding: 10px 14px;
  border-radius: 12px 12px 2px 12px;
  font-size: 0.9rem; line-height: 1.5; word-break: break-word;
}
.msg-section { align-self: flex-start; max-width: 78%; }
.msg-section .role-label {
  font-size: 0.68rem; color: var(--text-tertiary); margin-bottom: 4px; padding-left: 4px;
  cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px;
}
.msg-section .role-label::after { content: '▾'; font-size: 0.6rem; color: var(--text-tertiary); }
.msg-section.collapsed .role-label::after { content: '▸'; }
.msg-section .role-name { text-transform: uppercase; letter-spacing: 0.08em; }
.msg-section .model-name { color: var(--text-tertiary); margin-left: 6px; }
.msg-section .context-budget {
  font-size: 0.63rem; color: var(--text-tertiary);
  margin: 0 0 6px 4px; text-transform: uppercase; letter-spacing: 0.08em;
}
.msg-section .context-budget-detail {
  color: var(--text-tertiary); margin-left: 6px; text-transform: none; letter-spacing: 0;
}
.msg-section .bubble {
  background: var(--bg-surface); border: 1px solid var(--border); border-left: 3px solid var(--border);
  padding: 12px 16px; border-radius: 2px 10px 10px 10px;
  font-size: 0.88rem; line-height: 1.65; word-break: break-word;
  transition: max-height 0.2s ease, padding 0.2s ease, opacity 0.2s;
}
/* Markdown rendered inside bubbles */
.bubble .md-p  { margin: 0 0 0.6em; }
.bubble .md-p:last-child { margin-bottom: 0; }
.bubble .md-h  { font-size: 0.95em; font-weight: 600; margin: 0.8em 0 0.3em; color: var(--text-secondary); }
.bubble .md-ul,.bubble .md-ol { margin: 0.2em 0 0.6em 1.2em; padding: 0; }
.bubble .md-ul li,.bubble .md-ol li { margin-bottom: 0.25em; }
.bubble code { background: var(--code-bg); padding: 1px 5px; border-radius: 3px; font-size: 0.85em; font-family: monospace; }
.msg-section.collapsed .bubble { display: none; }
.msg-section.analyst .bubble    { border-left-color: var(--accent); }
.msg-section.critic .bubble     { border-left-color: var(--status-failed); }
.msg-section.synthesis .bubble  { border-left-color: var(--status-active); border-left-width: 4px; }
.msg-section.assistant .bubble  { border-left-color: var(--text-tertiary); }
.msg-section.researcher .bubble { border-left-color: var(--status-paused); font-size: 0.8rem; color: var(--text-secondary); }
.msg-progress {
  align-self: flex-start; font-size: 0.82rem; color: var(--text-secondary); font-style: italic; padding: 4px 0;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.6} 50%{opacity:1} }
.iter-label {
  align-self: flex-start; font-size: 0.7rem; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* Pipeline / clarifier / router banners */
.pipeline-banner {
  align-self: flex-start; max-width: 78%;
  background: var(--bg-surface); border: 1px solid var(--border); border-left: 3px solid var(--text-tertiary);
  padding: 7px 12px; border-radius: 2px 10px 10px 10px;
  font-size: 0.72rem; color: var(--text-secondary); line-height: 1.6;
}
.pipeline-banner .p-label {
  font-size: 0.63rem; color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 3px;
}
.clarifier-banner {
  align-self: flex-start; max-width: 78%;
  background: var(--status-active-bg); border: 1px solid var(--border); border-left: 3px solid var(--status-active);
  padding: 12px 16px; border-radius: 2px 10px 10px 10px; margin: 0;
}
.clarifier-banner .q-label {
  font-size: 0.65rem; color: var(--status-active); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 6px;
}
.clarifier-banner .q-text { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; white-space: pre-wrap; }
.router-banner {
  align-self: flex-start; max-width: 78%;
  background: var(--nav-active-bg); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  padding: 12px 16px; border-radius: 2px 10px 10px 10px;
}
.router-banner .r-label { font-size: 0.65rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.router-banner .r-mode { font-size: 0.88rem; color: var(--text-primary); font-weight: 600; }
.router-banner .r-reason { font-size: 0.78rem; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }
#mode-confirm-bar {
  display: none; gap: 6px; flex-wrap: wrap; padding: 10px 20px;
  background: var(--bg-hover); border-top: 1px solid var(--border); flex-shrink: 0;
}
#mode-confirm-bar.visible { display: flex; align-items: center; }
.confirm-btn {
  padding: 5px 14px; border-radius: 6px; border: 1px solid var(--border);
  background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 0.78rem; transition: all 0.15s;
}
.confirm-btn:hover { border-color: var(--accent); color: var(--accent); }
.confirm-btn.primary { border-color: var(--status-active); color: var(--status-active); background: var(--status-active-bg); }
.dev-actions-banner {
  align-self: flex-start; max-width: 78%;
  background: var(--bg-surface); border: 1px solid var(--border); border-left: 3px solid var(--status-paused);
  padding: 12px 16px; border-radius: 2px 10px 10px 10px;
}
.dev-actions-text { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }
.dev-actions-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

#skip-btn {
  display: none; width: 42px; height: 42px; background: var(--bg-hover); color: var(--text-secondary); border: none;
  border-radius: 8px; cursor: pointer; font-size: 0.75rem; flex-shrink: 0; transition: background 0.15s;
}
#skip-btn.visible { display: block; }
#skip-btn:hover { background: var(--border); color: var(--text-primary); }

/* Input area */
#input-area { padding: 14px 20px; background: var(--bg-hover); border-top: 1px solid var(--border); flex-shrink: 0; }
#mode-bar { display: flex; gap: 6px; margin-bottom: 10px; }
.mode-btn {
  padding: 4px 12px; border-radius: 99px; border: 1px solid var(--border);
  background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 0.78rem; transition: all 0.15s;
}
.mode-btn:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.mode-btn.active { border-color: var(--accent); color: var(--accent); background: var(--nav-active-bg); }
#input-row { display: flex; gap: 8px; align-items: flex-end; }
#query-input {
  flex: 1; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 8px;
  padding: 10px 14px; color: var(--text-primary); font-size: 0.9rem; resize: none;
  min-height: 42px; max-height: 140px; line-height: 1.5; outline: none;
  font-family: inherit; transition: border-color 0.15s;
}
#query-input:focus { border-color: var(--input-focus); }
#send-btn {
  width: 42px; height: 42px; background: var(--accent); color: #fff; border: none;
  border-radius: 8px; cursor: pointer; font-size: 1.1rem; flex-shrink: 0; transition: background 0.15s;
}
#send-btn:hover { background: var(--accent-hover); }
#send-btn:disabled { background: var(--bg-hover); color: var(--text-tertiary); cursor: not-allowed; }
#feedback-row {
  display: none; align-items: center; gap: 10px; padding: 6px 0 0;
  font-size: 0.78rem; color: var(--text-tertiary);
}
.fb-btn {
  background: none; border: 1px solid var(--border); color: var(--text-tertiary);
  padding: 2px 10px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; transition: all 0.15s;
}
.fb-btn:hover:not(:disabled) { border-color: var(--text-secondary); color: var(--text-secondary); }
.fb-btn.selected { border-color: var(--accent); color: var(--accent); }
.fb-btn:disabled { cursor: default; opacity: 0.5; }

/* ── Section: Memory ──────────────────────────────────────────────────── */
#section-memory { overflow: hidden; }
.section-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Add panel */
#ctx-add-panel { display: none; }
#ctx-add-panel.open { display: block; }
.ctx-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 4px;
}
.ctx-add-form select,
.ctx-add-form input,
.ctx-add-form textarea {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  color: var(--text-primary);
  padding: 8px 10px;
  font-size: 0.84rem;
  font-family: inherit;
  outline: none;
}
.ctx-add-form input:focus,
.ctx-add-form textarea:focus,
.ctx-add-form select:focus { border-color: var(--input-focus); }
.ctx-add-form textarea { resize: vertical; min-height: 80px; }
#ctx-add-save {
  align-self: flex-start;
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--nav-active-bg);
  color: var(--accent);
  cursor: pointer;
  font-size: 0.82rem;
}
#ctx-add-save:hover { background: var(--bg-hover); }

/* Memory items */
#ctx-list,
#ctx-review-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ctx-empty {
  font-size: 0.82rem;
  color: var(--text-tertiary);
  line-height: 1.5;
  padding: 8px 0;
}
#ctx-review-empty { font-size: 0.82rem; color: var(--text-tertiary); padding: 8px 0; }
.ctx-item,
.ctx-pending-item {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ctx-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ctx-zone-badge {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  white-space: nowrap;
}
.ctx-zone-badge.personal { background: var(--status-active-bg); color: var(--status-active); }
.ctx-zone-badge.work     { background: var(--nav-active-bg); color: var(--accent); }
.ctx-zone-badge.system   { background: var(--status-paused-bg); color: var(--status-paused); }
.ctx-key {
  font-size: 0.82rem;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ctx-pending-source {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.ctx-item-actions { display: flex; gap: 6px; margin-left: auto; }
.ctx-btn {
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.74rem;
  cursor: pointer;
}
.ctx-btn:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.ctx-btn.del { border-color: var(--status-failed-bg); color: var(--status-failed); }
.ctx-btn.del:hover { background: var(--status-failed-bg); color: var(--status-failed); }
.ctx-preview {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.ctx-edit,
.ctx-pending-edit {
  display: none;
  flex-direction: column;
  gap: 8px;
}
.ctx-edit.open,
.ctx-pending-edit.open { display: flex; }
.ctx-textarea {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  color: var(--text-primary);
  padding: 8px 10px;
  font-size: 0.82rem;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
  outline: none;
}
.ctx-textarea:focus { border-color: var(--input-focus); }
.ctx-select {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  color: var(--text-primary);
  padding: 6px 10px;
  font-size: 0.82rem;
  outline: none;
}
.ctx-select:focus { border-color: var(--input-focus); }
.ctx-edit-actions,
.ctx-pending-actions {
  display: flex;
  gap: 8px;
}
.ctx-save-btn,
.ctx-approve-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--nav-active-bg);
  color: var(--accent);
  cursor: pointer;
  font-size: 0.78rem;
}
.ctx-save-btn:hover,
.ctx-approve-btn:hover { background: var(--bg-hover); }
.ctx-cancel-btn,
.ctx-archive-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.78rem;
}
.ctx-cancel-btn:hover,
.ctx-archive-btn:hover { border-color: var(--text-secondary); color: var(--text-primary); }

/* ── Admin shell ──────────────────────────────────────────────────────── */
.admin-body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-base);
}
#admin-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#admin-nav {
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  flex-shrink: 0;
}
#admin-nav-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 10px;
  border-bottom: 1px solid var(--border);
}
#admin-nav-title { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); flex: 1; letter-spacing: 0.03em; }
#admin-conn-badge {
  font-size: 0.68rem; padding: 2px 7px; border-radius: 8px;
  background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap;
}
#admin-conn-badge.ok   { background: var(--status-active-bg); border-color: var(--border); color: var(--status-active); }
#admin-conn-badge.fail { background: var(--status-failed-bg); border-color: var(--border); color: var(--status-failed); }
#admin-nav-links {
  flex: 1; display: flex; flex-direction: column; padding: 10px 10px; gap: 2px;
}
.admin-nav-item {
  display: block; width: 100%; background: transparent; border: none; border-radius: 8px;
  padding: 9px 12px; color: var(--nav-color); font-size: 0.84rem; text-align: left;
  cursor: pointer; transition: background 0.1s, color 0.1s;
}
.admin-nav-item:hover { background: var(--nav-hover-bg); color: var(--text-primary); }
.admin-nav-item.active { background: var(--nav-active-bg); color: var(--nav-active-color); font-weight: 600; }
#admin-nav-footer { padding: 12px 16px; border-top: 1px solid var(--border); }
#admin-chat-link { font-size: 0.8rem; color: var(--text-tertiary); text-decoration: none; }
#admin-chat-link:hover { color: var(--text-secondary); }
#admin-main { overflow-y: auto; background: var(--bg-base); }
.admin-section { display: none; padding: 24px 28px; max-width: 1100px; }
.admin-section.active { display: block; }
.admin-section-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap;
}
.admin-section-head h2 { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); flex: 1; margin: 0; }
.admin-section-head-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Utility buttons */
.btn-sm {
  padding: 6px 12px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--bg-surface); color: var(--text-secondary); font-size: 0.8rem; cursor: pointer;
  transition: border-color 0.15s, color 0.15s; white-space: nowrap;
}
.btn-sm:hover { border-color: var(--accent); color: var(--text-primary); }
.btn-sm.btn-warn { border-color: var(--status-paused-bg); color: var(--status-paused); }
.btn-sm.btn-warn:hover { border-color: var(--status-paused); color: var(--status-paused); }
.select-sm {
  padding: 6px 10px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--bg-surface); color: var(--text-secondary); font-size: 0.8rem; cursor: pointer;
}
.admin-note { color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; margin-bottom: 12px; }
.admin-conversations-list { display: flex; flex-direction: column; gap: 8px; }
.admin-users-list { display: flex; flex-direction: column; gap: 8px; }
.admin-conversation-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface);
}
.admin-conversation-main { min-width: 0; }
.admin-conversation-title { color: var(--text-primary); font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-conversation-meta { color: var(--text-secondary); font-size: 0.74rem; margin-top: 3px; }
.admin-delete-btn { border: 1px solid var(--status-failed-bg); background: var(--status-failed-bg); color: var(--status-failed); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.admin-delete-btn:hover { background: var(--status-failed-bg); color: var(--status-failed); }
.admin-error { color: var(--status-failed); font-size: 0.86rem; }
.admin-user-create,
.admin-settings-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.admin-user-create input,
.admin-settings-row input {
  min-width: 180px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-primary);
}
.admin-user-create label,
.admin-settings-row label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 0.85rem; }
.admin-user-create button { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--nav-active-bg); color: var(--accent); cursor: pointer; }
.admin-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.admin-pager { display: flex; align-items: center; gap: 8px; }
.admin-pager button { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; }
.admin-tags-text { width: 100%; background: var(--input-bg); color: var(--text-primary); border: 1px solid var(--input-border); border-radius: 10px; padding: 10px 12px; }
.admin-dev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.admin-dev-card { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface); padding: 12px; }
.admin-dev-card h3 { color: var(--text-primary); font-size: 0.9rem; margin-bottom: 10px; }
.admin-dev-card select { min-width: 180px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-primary); }
.admin-dev-list { display: flex; flex-direction: column; gap: 8px; }
.admin-dev-record { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-hover); padding: 10px 11px; }
.admin-dev-record-title { color: var(--text-primary); font-size: 0.84rem; }
.admin-dev-record-meta { color: var(--text-secondary); font-size: 0.73rem; margin-top: 4px; }
.admin-dev-record-body { color: var(--text-secondary); font-size: 0.78rem; line-height: 1.5; margin-top: 8px; word-break: break-word; }

/* ── Prompts ──────────────────────────────────────────────────────────── */
.prompt-item { margin-bottom: 14px; }
.prompt-item label { display: block; font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 4px; letter-spacing: 0.04em; }
.prompt-item textarea { width: 100%; background: var(--input-bg); color: var(--text-secondary); border: 1px solid var(--input-border); border-radius: 4px; padding: 6px 8px; font-size: 0.72rem; font-family: monospace; resize: vertical; min-height: 80px; box-sizing: border-box; }
.prompt-item textarea:focus { border-color: var(--input-focus); outline: none; }
.prompt-save-btn { font-size: 0.7rem; padding: 3px 10px; background: none; border: 1px solid var(--border); color: var(--text-secondary); border-radius: 4px; cursor: pointer; margin-top: 4px; }
.prompt-save-btn:hover { border-color: var(--accent); color: var(--accent); }
.prompt-save-btn.saved { border-color: var(--status-active); color: var(--status-active); }

/* ── Metrics ──────────────────────────────────────────────────────────── */
.metrics-section h3 { font-size: 0.72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.metrics-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.metrics-table th { text-align: left; padding: 5px 8px; color: var(--text-tertiary); border-bottom: 1px solid var(--border); font-weight: normal; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; }
.metrics-table td { padding: 5px 8px; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.metrics-table tr:last-child td { border-bottom: none; }
.metrics-table td:first-child { color: var(--text-primary); }
.metrics-empty { font-size: 0.75rem; color: var(--text-tertiary); padding: 8px 0; }

/* ── Clarifier questionnaire ──────────────────────────────────────────── */
#clarifier-form { background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin: 8px 0; }
.clf-question { margin-bottom: 8px; }
.clf-question label { display: block; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 3px; }
.clf-question .clf-hint { font-size: 0.68rem; color: var(--text-tertiary); margin-bottom: 3px; }
.clf-question input { width: 100%; background: var(--bg-base); color: var(--text-secondary); border: 1px solid var(--input-border); border-radius: 4px; padding: 5px 8px; font-size: 0.78rem; box-sizing: border-box; }
.clf-question input:focus { border-color: var(--input-focus); outline: none; }
#clarifier-submit { font-size: 0.78rem; padding: 5px 14px; background: var(--nav-active-bg); border: 1px solid var(--accent); color: var(--accent); border-radius: 4px; cursor: pointer; margin-top: 4px; }
#clarifier-submit:hover { background: var(--bg-hover); }

/* ── Modal ────────────────────────────────────────────────────────────── */
#modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  z-index: 100; align-items: center; justify-content: center; padding: 20px;
}
#modal-overlay.open { display: flex; }
#modal {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px;
  width: 100%; max-width: 720px; max-height: 85vh;
  display: flex; flex-direction: column; overflow: hidden;
}
#modal-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 10px; }
#modal-title { font-size: 0.88rem; color: var(--text-secondary); flex: 1; line-height: 1.4; }
#modal-close { background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0 2px; flex-shrink: 0; transition: color 0.15s; }
#modal-close:hover { color: var(--text-primary); }
#modal-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.conv-user { align-self: flex-end; max-width: 70%; background: var(--nav-active-bg); padding: 10px 14px; border-radius: 12px 12px 2px 12px; font-size: 0.88rem; line-height: 1.5; word-break: break-word; }
.conv-section { align-self: flex-start; max-width: 90%; }
.conv-section .role-label { font-size: 0.68rem; margin-bottom: 4px; padding-left: 4px; }
.conv-section .role-name { text-transform: uppercase; letter-spacing: 0.08em; }
.conv-section .model-name { margin-left: 6px; color: var(--text-tertiary); }
.conv-section .context-budget { font-size: 0.63rem; color: var(--text-tertiary); margin: 0 0 6px 4px; text-transform: uppercase; letter-spacing: 0.08em; }
.conv-section .context-budget-detail { color: var(--text-tertiary); margin-left: 6px; text-transform: none; letter-spacing: 0; }
.conv-section .bubble { background: var(--bg-surface); border: 1px solid var(--border); border-left: 3px solid var(--border); padding: 12px 16px; border-radius: 2px 10px 10px 10px; font-size: 0.85rem; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.conv-section.analyst .bubble   { border-left-color: var(--accent); }
.conv-section.critic .bubble    { border-left-color: var(--status-failed); }
.conv-section.synthesis .bubble { border-left-color: var(--status-active); border-left-width: 4px; }
.conv-section.assistant .bubble { border-left-color: var(--text-tertiary); }
.conv-meta { font-size: 0.65rem; color: var(--text-tertiary); padding-left: 4px; margin-top: 2px; }
.modal-loading { font-size: 0.8rem; color: var(--text-tertiary); font-style: italic; align-self: center; padding: 20px; }
#modal-footer { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-shrink: 0; font-size: 0.78rem; color: var(--text-tertiary); }

/* ── New pipeline form (inside modal) ────────────────────────────────── */
.pipeline-new-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pipeline-new-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.pipeline-new-select,
.pipeline-new-query {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 7px;
  color: var(--text-primary);
  font-size: 0.84rem;
  padding: 8px 10px;
  box-sizing: border-box;
  resize: vertical;
}
.pipeline-new-select:focus,
.pipeline-new-query:focus { outline: none; border-color: var(--input-focus); }
.pipeline-new-submit {
  align-self: flex-end;
  padding: 7px 18px;
  background: var(--accent-subtle);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font-size: 0.82rem;
  cursor: pointer;
}
.pipeline-new-submit:hover { background: var(--nav-active-bg); }
.pipeline-new-submit:disabled { opacity: 0.5; cursor: default; }
.pipeline-new-error { font-size: 0.78rem; color: var(--status-failed); min-height: 1em; }

/* ── Scrollbar ────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

/* ── Login overlay ────────────────────────────────────────────────────── */
#login-overlay {
  display: none; position: fixed; inset: 0;
  background: var(--bg-base); z-index: 1000;
  align-items: center; justify-content: center;
}
#login-overlay.open { display: flex; }
#login-box {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 32px 36px; width: 320px; display: flex; flex-direction: column; gap: 14px;
}
#login-box h2 { font-size: 1rem; font-weight: 600; color: var(--text-primary); text-align: center; }
#login-error { font-size: 0.78rem; color: var(--status-failed); text-align: center; min-height: 1em; }
#login-box input {
  background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 6px;
  color: var(--text-primary); padding: 8px 12px; font-size: 0.85rem; outline: none; width: 100%;
}
#login-box input:focus { border-color: var(--input-focus); }
#login-submit {
  background: var(--accent-subtle); color: var(--accent); border: 1px solid var(--accent);
  border-radius: 6px; padding: 9px; font-size: 0.85rem; cursor: pointer; font-weight: 600;
}
#login-submit:hover { background: var(--nav-active-bg); }
#login-submit:disabled { opacity: 0.5; cursor: default; }

/* ── Password overlay ─────────────────────────────────────────────────── */
#password-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.7); z-index: 1001;
  align-items: center; justify-content: center; padding: 20px;
}
#password-overlay.open { display: flex; }
#password-box {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 28px 32px; width: 360px; display: flex; flex-direction: column; gap: 12px;
}
#password-box h2 { font-size: 1rem; font-weight: 600; color: var(--text-primary); text-align: center; }
#password-error { font-size: 0.78rem; color: var(--status-failed); text-align: center; min-height: 1em; }
#password-box input {
  background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 6px;
  color: var(--text-primary); padding: 8px 12px; font-size: 0.85rem; outline: none; width: 100%;
}
#password-box input:focus { border-color: var(--input-focus); }
#password-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
#password-cancel,
#password-submit { border-radius: 6px; padding: 9px 14px; font-size: 0.85rem; cursor: pointer; }
#password-cancel { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
#password-submit { background: var(--accent-subtle); color: var(--accent); border: 1px solid var(--accent); font-weight: 600; }
#password-submit:disabled { opacity: 0.5; cursor: default; }

/* ── Cases admin section ──────────────────────────────────────────────── */
.admin-cases-list { display: flex; flex-direction: column; gap: 8px; }
.admin-case-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-surface); cursor: pointer; transition: border-color 0.15s;
}
.admin-case-row:hover { border-color: var(--accent); }
.admin-case-row-left { min-width: 0; }
.admin-case-id { font-size: 0.72rem; color: var(--text-tertiary); font-family: monospace; }
.admin-case-meta { font-size: 0.8rem; color: var(--text-secondary); margin-top: 2px; }
.admin-case-badge {
  font-size: 0.72rem; padding: 2px 8px; border-radius: 10px; white-space: nowrap; font-weight: 600;
}
.admin-case-badge.active  { background: var(--status-active-bg);  color: var(--status-active); }
.admin-case-badge.paused  { background: var(--status-paused-bg);  color: var(--status-paused); }
.admin-case-badge.done    { background: var(--status-done-bg);    color: var(--status-done); }
.admin-case-badge.failed  { background: var(--status-failed-bg);  color: var(--status-failed); }
.admin-case-detail { margin-top: 8px; }
#admin-case-detail-back {
  background: transparent; border: 1px solid var(--border); color: var(--text-secondary);
  border-radius: 6px; padding: 6px 12px; font-size: 0.82rem; cursor: pointer; margin-bottom: 14px;
}
#admin-case-detail-back:hover { color: var(--text-primary); border-color: var(--border-strong); }
.admin-case-detail-section { margin-bottom: 18px; }
.admin-case-detail-section h4 { font-size: 0.78rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.admin-case-artifact {
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-base); margin-bottom: 6px;
}
.admin-case-artifact-type { font-size: 0.72rem; color: var(--text-link); font-family: monospace; margin-bottom: 4px; }
.admin-case-artifact-text { font-size: 0.82rem; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; }
.admin-case-event-row {
  display: flex; gap: 10px; align-items: flex-start; font-size: 0.78rem; color: var(--text-secondary);
  padding: 4px 0; border-bottom: 1px solid var(--border);
}
.admin-case-event-row:last-child { border-bottom: none; }
.admin-case-event-time { color: var(--text-tertiary); white-space: nowrap; }
.admin-case-event-desc { color: var(--text-primary); }

/* ── KB admin section ─────────────────────────────────────────────────── */
.admin-kb-list { display: flex; flex-direction: column; gap: 8px; }
.admin-kb-row {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg-surface); cursor: pointer; transition: border-color 0.15s;
}
.admin-kb-row:hover { border-color: var(--accent); }
.admin-kb-level { font-size: 0.7rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.admin-kb-level.L0 { background: var(--status-done-bg); color: var(--status-done); border: 1px solid var(--border); }
.admin-kb-level.L1 { background: var(--status-active-bg); color: var(--status-active); border: 1px solid var(--border); }
.admin-kb-level.L2 { background: var(--status-paused-bg); color: var(--status-paused); border: 1px solid var(--border); }
.admin-kb-level.L3 { background: var(--accent-subtle); color: var(--accent-text); border: 1px solid var(--border); }
.admin-kb-title { font-size: 0.84rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.admin-kb-meta { font-size: 0.72rem; color: var(--text-tertiary); white-space: nowrap; }
.admin-kb-actions { display: flex; gap: 6px; }
.admin-kb-detail { margin-top: 8px; }
#admin-kb-detail-back {
  background: transparent; border: 1px solid var(--border); color: var(--text-secondary);
  border-radius: 6px; padding: 6px 12px; font-size: 0.82rem; cursor: pointer; margin-bottom: 16px;
}
#admin-kb-detail-back:hover { color: var(--text-primary); border-color: var(--border-strong); }
.admin-kb-detail-body { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-base); padding: 18px 22px; }
.admin-kb-detail-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.admin-kb-detail-title { font-size: 0.96rem; font-weight: 600; color: var(--text-primary); flex: 1; }
.admin-kb-detail-meta { font-size: 0.74rem; color: var(--text-tertiary); margin-bottom: 14px; line-height: 1.6; }
.admin-kb-detail-content { font-size: 0.84rem; color: var(--text-primary); line-height: 1.7; white-space: pre-wrap; word-break: break-word; }

/* ── Pending approvals ────────────────────────────────────────────────── */
.admin-pending-actions { display: flex; gap: 6px; flex-shrink: 0; }
.admin-pending-btn {
  border-radius: 6px; padding: 5px 12px; font-size: 0.78rem;
  cursor: pointer; border: 1px solid transparent; font-weight: 600;
}
.admin-pending-btn.approve { background: var(--status-active-bg); color: var(--status-active); border-color: var(--status-active); }
.admin-pending-btn.approve:hover { filter: brightness(0.88); }
.admin-pending-btn.reject  { background: var(--status-failed-bg); color: var(--status-failed); border-color: var(--status-failed); }
.admin-pending-btn.reject:hover  { filter: brightness(0.88); }

/* ── Mobile (≤900px) ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #mobile-bar { display: flex; }

  #sidebar {
    position: fixed;
    top: 44px;
    left: 0;
    bottom: 0;
    width: min(84vw, 320px);
    min-width: 0;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 18px 0 32px rgba(0,0,0,0.35);
  }
  body.sidebar-open #sidebar { transform: translateX(0); }

  #sidebar-overlay {
    display: block;
    position: fixed;
    inset: 44px 0 0 0;
    background: rgba(0,0,0,0.45);
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  body.sidebar-open #sidebar-overlay { opacity: 1; pointer-events: auto; }

  #assistant-shell {
    grid-template-columns: 1fr;
    padding: 12px 14px 14px;
  }
  #assistant-shell.deck-shell {
    grid-template-columns: 1fr;
    padding: 12px 14px 14px;
  }
  .deck-create-grid {
    grid-template-columns: 1fr;
  }
  .deck-composer {
    grid-template-columns: 1fr;
  }
  .deck-message {
    max-width: 100%;
  }
  .deck-thread-drawer {
    width: 100vw;
    padding: 18px 14px;
  }
  .deck-drawer-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .deck-palette-overlay {
    padding: 56px 10px 10px;
  }
  .deck-palette {
    border-radius: 18px;
    padding: 14px;
  }
  #assistant-shell.assistant-compact #assistant-main { max-width: none; }
  #assistant-reconcile-btn { width: 100%; }
  #assistant-panels { overflow: visible; }
  #assistant-feed { min-height: 180px; }
  #assistant-composer { flex-direction: column; align-items: stretch; }
  #assistant-input-row { flex-direction: column; align-items: stretch; }
  #assistant-send-btn { width: 100%; min-width: 0; }

  #development-env-row { margin: 0 14px; flex-direction: column; align-items: stretch; }
  #development-env-controls { flex-direction: column; align-items: stretch; }
  #mode-bar { flex-wrap: wrap; }
  #tasks-view-nav,
  #pipelines-type-nav { padding-left: 0; }
  .nav-sub-btn { min-height: 44px; padding: 10px 12px; font-size: 0.85rem; }
  .mode-btn { min-height: 38px; }
  #messages { padding: 14px; gap: 12px; }
  .msg-user,
  .msg-section,
  .pipeline-banner,
  .clarifier-banner,
  .router-banner,
  .dev-actions-banner { max-width: 100%; }
  #input-area { padding: 12px 14px; }
  #input-row { align-items: stretch; }
  .assistant-card-actions button,
  .assistant-entry-actions button { min-height: 40px; }
  .assistant-detail #assistant-detail-actions { display: grid; grid-template-columns: 1fr 1fr; }
  #send-btn, #skip-btn { width: 44px; height: auto; min-height: 44px; }
  #query-input { min-height: 44px; }

  /* Section header on mobile */
  .section-header { padding: 10px 14px; }

  /* Admin: sidebar becomes horizontal scrollable tab bar */
  #admin-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  #admin-nav { flex-direction: row; border-right: none; border-bottom: 1px solid #222; overflow-x: auto; overflow-y: hidden; }
  #admin-nav-header { display: none; }
  #admin-nav-links { flex-direction: row; padding: 8px 10px; gap: 4px; flex-wrap: nowrap; white-space: nowrap; }
  .admin-nav-item { padding: 7px 12px; border-radius: 20px; font-size: 0.8rem; white-space: nowrap; }
  #admin-nav-footer { display: none; }
  .admin-section { padding: 16px; }
  .admin-section-head { flex-direction: column; align-items: stretch; }
  .admin-section-head h2 { font-size: 0.96rem; }
  .admin-section-head-controls { flex-wrap: wrap; }
  .admin-toolbar, .admin-pager, .admin-user-create, .admin-settings-row { flex-direction: column; align-items: stretch; }
  .admin-dev-grid { grid-template-columns: 1fr; }
  .admin-user-create input, .admin-settings-row input, .admin-dev-card select { min-width: 0; width: 100%; }
  .admin-conversation-item { align-items: stretch; flex-direction: column; }
  .admin-kb-row { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
  .admin-kb-actions { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  #assistant-shell { padding: 10px 12px 12px; gap: 12px; }
  #assistant-feed, .assistant-panel, #assistant-detail { border-radius: 14px; }
  .assistant-controls { flex-direction: column; align-items: stretch; }
  .assistant-controls select { width: 100%; }
  .assistant-entry-actions, .assistant-card-actions, .assistant-detail #assistant-detail-actions { display: grid; grid-template-columns: 1fr; }
  #assistant-send-btn { min-height: 46px; }
  #assistant-input { min-height: 96px; }
  .section-body { padding: 14px; }
}

@media (max-width: 430px) {
  #messages { padding: 10px; gap: 8px; }
  #input-area { padding: 8px 10px; }
  #mode-bar { margin-bottom: 6px; }
  .mode-btn { min-height: 40px; padding: 4px 8px; font-size: 0.72rem; }
  .confirm-btn { min-height: 44px; width: 100%; }
  .dev-actions-row { flex-direction: column; }
  .dev-actions-banner { max-width: 100%; }
  #send-btn, #skip-btn { width: 40px; min-height: 40px; }
  #query-input { min-height: 40px; font-size: 0.84rem; }
}

/* ── Cases section ─────────────────────────────────────────────────────────── */
#cases-filters {
  display: flex; gap: 6px; padding: 10px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.cases-filter-btn {
  background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-secondary); padding: 4px 12px;
  border-radius: 20px; font-size: 0.8rem; cursor: pointer; transition: all 0.15s;
}
.cases-filter-btn:hover { border-color: var(--border-strong); color: var(--text-secondary); }
.cases-filter-btn.active { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); }

#cases-list {
  flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 8px;
}
#cases-detail {
  flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px;
}

/* Case card (list view) */
.case-card {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 16px; cursor: pointer; transition: border-color 0.15s;
  display: flex; flex-direction: column; gap: 8px;
}
.case-card:hover { border-color: var(--border-strong); }
.case-card.case-card-gate { border-color: var(--status-paused); }
.case-card-header { display: flex; align-items: center; gap: 8px; }
.case-type-badge {
  font-size: 0.72rem; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary);
  padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}
.case-card-title { flex: 1; font-size: 0.88rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-card-date  { font-size: 0.75rem; color: var(--text-tertiary); }

/* Status badges */
.case-status-badge { font-size: 0.72rem; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.case-status-active  { background: var(--status-active-bg); color: var(--status-active); border: 1px solid var(--status-active); }
.case-status-paused  { background: var(--status-paused-bg); color: var(--status-paused); border: 1px solid var(--status-paused); }
.case-status-done    { background: var(--status-done-bg); color: var(--status-done); border: 1px solid var(--status-done); }
.case-status-failed  { background: var(--status-failed-bg); color: var(--status-failed); border: 1px solid var(--status-failed); }

/* Priority badges (U1) */
.case-status-badge--priority-low    { background: var(--bg-surface); color: var(--text-tertiary); border: 1px solid var(--border); }
.case-status-badge--priority-normal { background: var(--status-done-bg); color: var(--status-done); border: 1px solid var(--status-done); }
.case-status-badge--priority-high   { background: var(--status-paused-bg); color: var(--status-paused); border: 1px solid var(--status-paused); }

/* Workflow + priority chips in case detail header (U1) */
.case-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.case-chip {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.case-chip--workflow {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.case-chip--priority {
  font-size: 0.7rem;
}

/* Duration label inside hero (U1) */
.case-status-duration {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 1px;
}

/* Avatar initials in transition timeline (U1) */
.case-avatar-initials {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0;
  z-index: 1;
}
.case-transition-item--manual .case-avatar-initials {
  border-color: var(--status-paused);
  color: var(--status-paused);
  background: var(--status-paused-bg);
}

/* Mini stage dots (card) */
.case-card-stages { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.case-stage-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-hover); border: 1px solid var(--border-strong);
}
.case-stage-dot.done    { background: var(--status-active); border-color: var(--status-active); }
.case-stage-dot.current { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-subtle); }
.case-stage-dot.gate    { border-style: dashed; }
.case-stage-sep { width: 10px; height: 1px; background: var(--bg-hover); flex-shrink: 0; }
.case-gate-label { font-size: 0.72rem; color: var(--status-paused); margin-left: 6px; }

/* Workflow graph (detail view) */
.case-workflow-graph {
  display: flex; align-items: flex-start; gap: 0; padding: 16px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; overflow-x: auto;
}
.wf-node { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 70px; flex-shrink: 0; }
.wf-dot {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 0.75rem; font-weight: 600; flex-shrink: 0;
  border: 2px solid var(--border); background: var(--bg-elevated); color: var(--text-tertiary);
}
.wf-dot-done    { background: var(--status-active-bg); border-color: var(--status-active); color: var(--status-active); }
.wf-dot-current { background: var(--status-done-bg); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.wf-dot-pending { background: var(--bg-surface); border-color: var(--border); color: var(--text-tertiary); }
.wf-dot-gate.wf-dot-current { border-color: var(--status-paused); color: var(--status-paused); background: var(--status-paused-bg); box-shadow: 0 0 0 3px var(--status-paused-bg); }
.wf-dot-gate.wf-dot-pending { border-style: dashed; }
.wf-label { font-size: 0.7rem; color: var(--text-tertiary); text-align: center; max-width: 70px; word-break: break-word; }
.wf-node .wf-dot-current + .wf-label { color: var(--text-secondary); }
.wf-line { flex: 1; height: 2px; align-self: center; min-width: 16px; margin-bottom: 22px; flex-shrink: 0; }
.wf-line-done    { background: var(--status-active); }
.wf-line-pending { background: var(--bg-hover); }

/* Run button */
.case-run-btn {
  display: block; width: 100%; padding: 9px 16px;
  background: var(--status-active-bg); color: var(--status-active);
  border: 1px solid var(--status-active); border-radius: 8px;
  font-size: 0.88rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
}
.case-run-btn:hover:not(:disabled) { filter: brightness(0.88); }
.case-run-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Human actor submit form ─────────────────────────────────────────────── */
.case-submit-form {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.case-submit-form-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.case-submit-textarea {
  width: 100%;
  min-height: 96px;
  padding: 8px 10px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.88rem;
  line-height: 1.5;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
}
.case-submit-textarea:focus { outline: none; border-color: var(--input-focus); }
.case-submit-files-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.case-submit-files-input { font-size: 0.8rem; color: var(--text-secondary); }
.case-submit-btn {
  align-self: flex-start;
  padding: 8px 18px;
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 7px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.case-submit-btn:hover:not(:disabled) { background: var(--nav-active-bg); }
.case-submit-btn:disabled { opacity: 0.5; cursor: default; }
.case-submit-error { font-size: 0.8rem; color: var(--status-failed); }

/* ── U3: Collapsible human form ──────────────────────────────────────────── */
.case-submit-toggle-wrap { display: flex; flex-direction: column; gap: 8px; }
.case-submit-toggle-btn {
  align-self: flex-start;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.case-submit-toggle-btn:hover { background: var(--bg-hover); }
.case-submit-toggle-btn--open { border-color: var(--accent); color: var(--accent); }
.case-submit-form-wrap { display: flex; flex-direction: column; }
.case-submit-form-wrap[hidden] { display: none; }

/* ── U3: Overview in-progress block ─────────────────────────────────────── */
.case-overview-inprogress {
  padding: 16px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.case-overview-stage-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.case-overview-actor-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.case-overview-actor-badge--ai    { background: var(--accent-subtle); color: var(--accent); border: 1px solid var(--accent); }
.case-overview-actor-badge--human { background: var(--status-paused-bg); color: var(--status-paused); border: 1px solid var(--status-paused); }
.case-overview-stage-name { font-weight: 600; font-size: 1rem; color: var(--text-primary); }
.case-overview-status-line { color: var(--text-secondary); font-size: 0.84rem; }
.case-overview-cta-btn {
  align-self: flex-start;
  padding: 9px 20px;
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 7px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.case-overview-cta-btn:hover { background: var(--nav-active-bg); }
.case-overview-artifacts-hint { font-size: 0.78rem; color: var(--text-tertiary); }

/* ── U3: Advanced (manual transition) collapse ───────────────────────────── */
.case-advanced-details { margin-top: 4px; }
.case-advanced-summary {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 4px 0;
  transition: color 0.12s;
}
.case-advanced-summary::-webkit-details-marker { display: none; }
.case-advanced-summary::before { content: '▸ '; font-size: 0.7rem; }
.case-advanced-details[open] .case-advanced-summary::before { content: '▾ '; }
.case-advanced-summary:hover { color: var(--text-secondary); }

/* ── U5: Case Cockpit ────────────────────────────────────────────────────── */
@keyframes cockpitFlash {
  0%   { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
  100% { border-color: var(--border); box-shadow: none; }
}
.case-cockpit-action {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 2px;
}
.case-cockpit-action--flash {
  animation: cockpitFlash 1.2s ease-out forwards;
}
.cockpit-action-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cockpit-action-icon { font-size: 1.4rem; flex-shrink: 0; }
.cockpit-action-stage {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.cockpit-action-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.cockpit-action-btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.case-run-btn--running { opacity: 0.65; }

.case-cockpit-errors {
  border: 1px solid var(--status-failed);
  background: var(--status-failed-bg);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cockpit-errors-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--status-failed);
}
.cockpit-error-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.cockpit-error-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.cockpit-error-info strong {
  font-size: 0.82rem;
  color: var(--text-primary);
}
.cockpit-error-text {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
  word-break: break-word;
}
.cockpit-error-restart {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid var(--status-failed);
  background: transparent;
  color: var(--status-failed);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.12s;
}
.cockpit-error-restart:hover { background: var(--status-failed-bg); }

.case-cockpit-result {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cockpit-result-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.cockpit-result-preview {
  font-size: 0.86rem;
  color: var(--text-primary);
  line-height: 1.65;
  overflow: hidden;
}
.cockpit-result-expand {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-link);
  font-size: 0.78rem;
  padding: 3px 10px;
  cursor: pointer;
}
.cockpit-result-expand:hover { background: var(--bg-hover); }
.case-cockpit-result--fail {
  border-color: var(--status-failed);
  background: var(--status-failed-bg);
}
.cockpit-result-verdict {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  align-self: flex-start;
}
.cockpit-result-verdict--fail {
  background: var(--status-failed-bg);
  color: var(--status-failed);
  border: 1px solid var(--status-failed);
}
.cockpit-result-verdict--pass {
  background: var(--status-active-bg);
  color: var(--status-active);
  border: 1px solid var(--status-active);
}

.case-cockpit-progress {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cockpit-progress-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.cockpit-progress-steps {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.cockpit-step { display: flex; align-items: center; gap: 4px; }
.cockpit-step-icon { font-size: 0.85em; }
.cockpit-step--done    .cockpit-step-icon { color: var(--status-active); }
.cockpit-step--failed  .cockpit-step-icon { color: var(--status-failed); }
.cockpit-step--current .cockpit-step-icon { color: var(--accent); }
.cockpit-step--pending .cockpit-step-icon { color: var(--text-tertiary); }
.cockpit-step-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cockpit-step--current .cockpit-step-label { color: var(--accent); font-weight: 600; }
.cockpit-step-sep { color: var(--border-strong); font-size: 0.7rem; }

.cockpit-advanced {
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
}
.cockpit-advanced-summary {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 4px 0;
  transition: color 0.12s;
}
.cockpit-advanced-summary::-webkit-details-marker { display: none; }
.cockpit-advanced-summary::before { content: '▸ '; font-size: 0.7rem; }
.cockpit-advanced[open] .cockpit-advanced-summary::before { content: '▾ '; }
.cockpit-advanced-summary:hover { color: var(--text-secondary); }

/* ── U10-B: Stage cards in Overview ─────────────────────────────────────── */
.cockpit-stage-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cockpit-stage-cards-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  padding-bottom: 2px;
}
.cockpit-stage-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cockpit-stage-card--fail {
  border-color: var(--status-failed);
  background: var(--status-failed-bg);
}
.cockpit-stage-card--pass {
  border-color: var(--status-active);
  background: var(--status-active-bg);
}
.cockpit-stage-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cockpit-stage-card-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}
.cockpit-stage-card-ts {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.cockpit-stage-card-preview {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow: hidden;
}
.cockpit-stage-card-preview p { margin: 0 0 6px; }
.cockpit-stage-card-preview h1,
.cockpit-stage-card-preview h2,
.cockpit-stage-card-preview h3 { font-size: 0.92rem; margin: 0 0 4px; color: var(--text-primary); }

/* ── D1/A2: Structured execution plan card ───────────────────────────────── */
.case-execution-plan-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.case-execution-plan-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.case-execution-plan-title {
  color: var(--text-primary);
  font-size: 0.86rem;
  font-weight: 700;
}
.case-execution-plan-mode {
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  font-size: 0.72rem;
  padding: 3px 8px;
  white-space: nowrap;
}
.case-execution-plan-mode--iterative {
  border-color: var(--accent);
  color: var(--accent);
}
.case-execution-plan-reason {
  border-left: 2px solid var(--border-strong);
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.case-execution-plan-reason span,
.case-execution-plan-list-title {
  color: var(--text-tertiary);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.case-execution-plan-reason p {
  color: var(--text-secondary);
  font-size: 0.84rem;
  margin: 0;
}
.case-execution-plan-chunks {
  display: grid;
  gap: 8px;
}
.case-execution-plan-chunk {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}
.case-execution-plan-chunk--current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.case-execution-plan-chunk--done {
  border-color: var(--status-active);
  background: var(--status-active-bg);
}
.case-execution-plan-chunk--failed {
  border-color: var(--status-failed);
  background: var(--status-failed-bg);
}
.case-execution-plan-chunk-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.case-execution-plan-chunk-header strong {
  color: var(--text-primary);
  font-size: 0.84rem;
}
.case-execution-plan-chunk-status {
  color: var(--text-tertiary);
  font-size: 0.7rem;
  white-space: nowrap;
}
.case-execution-plan-chunk-status--current { color: var(--accent); }
.case-execution-plan-chunk-status--done { color: var(--status-active); }
.case-execution-plan-chunk-status--failed { color: var(--status-failed); }
.case-execution-plan-chunk-meta,
.case-execution-plan-empty {
  color: var(--text-secondary);
  font-size: 0.76rem;
  margin-top: 6px;
  overflow-wrap: anywhere;
}

/* ── U10-B: Brief section (collapsed task text) ──────────────────────────── */
.cockpit-brief {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
}
.cockpit-brief-summary {
  font-size: 0.78rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 8px 14px;
  transition: color 0.12s;
  background: var(--bg-subtle);
}
.cockpit-brief-summary::-webkit-details-marker { display: none; }
.cockpit-brief-summary::before { content: '▸ '; font-size: 0.7rem; }
.cockpit-brief[open] .cockpit-brief-summary::before { content: '▾ '; }
.cockpit-brief-summary:hover { color: var(--text-primary); }
.cockpit-brief-body {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── U10-B: Interactive pipeline viz ─────────────────────────────────────── */
.case-pipeline-viz--interactive .pipeline-node {
  cursor: pointer;
  transition: opacity 0.15s;
}
.case-pipeline-viz--interactive .pipeline-node:hover {
  opacity: 0.8;
}

/* ── U10-B: VERDICT:FAIL error item variant ──────────────────────────────── */
.cockpit-error-item--verdict {
  border-left: 3px solid var(--status-failed);
  padding-left: 10px;
}

/* ── U3: Transition history "show all" button ────────────────────────────── */
.case-transition-more-btn {
  display: block;
  margin-top: 6px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.case-transition-more-btn:hover { color: var(--accent-hover); text-decoration: underline; }

.case-rerun-btn {
  display: block; width: 100%; margin-top: 10px;
  padding: 8px 16px;
  background: var(--bg-surface); color: var(--text-secondary);
  border: 1px solid var(--border-strong); border-radius: 7px;
  font-size: 0.84rem; cursor: pointer;
  transition: background 0.15s;
}
.case-rerun-btn:hover:not(:disabled) { background: var(--bg-elevated); color: var(--text-primary); }
.case-rerun-btn:disabled { opacity: 0.5; cursor: default; }

/* Gate actions */
.case-gate-actions {
  background: var(--status-paused-bg); border: 1px solid var(--status-paused); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.case-gate-actions-label { font-size: 0.82rem; color: var(--status-paused); font-weight: 500; }
.case-gate-actions-btns  { display: flex; gap: 8px; }
.btn-gate-approve {
  padding: 8px 18px; border-radius: 8px; cursor: pointer; font-size: 0.85rem; font-weight: 500;
  background: var(--status-active-bg); color: var(--status-active); border: 1px solid var(--status-active); transition: opacity 0.15s;
}
.btn-gate-approve:hover:not(:disabled) { opacity: 0.8; }
.btn-gate-reject {
  padding: 8px 18px; border-radius: 8px; cursor: pointer; font-size: 0.85rem; font-weight: 500;
  background: var(--status-failed-bg); color: var(--status-failed); border: 1px solid var(--status-failed); transition: opacity 0.15s;
}
.btn-gate-reject:hover:not(:disabled) { opacity: 0.8; }
.btn-gate-approve:disabled, .btn-gate-reject:disabled { opacity: 0.4; cursor: not-allowed; }

/* Case detail sections */
.case-detail-title-row { display: flex; align-items: center; gap: 10px; }
.case-detail-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0; flex: 1; }
.cases-back-btn {
  background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 0.85rem; padding: 0 0 4px;
  text-align: left; width: fit-content;
}
.cases-back-btn:hover { color: var(--text-secondary); }

.case-section { display: flex; flex-direction: column; gap: 8px; }
.case-section-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); }

/* Case detail v2 */
#cases-detail .case-detail-card {
  cursor: default;
  gap: 16px;
  padding: 18px;
}
.case-detail-v2-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.case-detail-v2-title-wrap { min-width: 0; flex: 1; }
.case-detail-v2-meta {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
}
.case-detail-v2-task { margin-bottom: 0; }
.case-detail-surface {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 16px;
  align-items: start;
}
.case-detail-main,
.case-detail-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.case-detail-sidebar {
  position: sticky;
  top: 12px;
}
.case-side-panel {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.case-side-panel-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.case-status-hero {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.case-status-hero-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.case-status-hero-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.case-status-hero-info strong {
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.case-status-hero-info span {
  color: var(--text-secondary);
  font-size: 0.8rem;
}
.case-status-facts {
  display: grid;
  grid-template-columns: minmax(84px, auto) 1fr;
  gap: 8px 12px;
  margin: 14px 0 0;
  font-size: 0.8rem;
}
.case-status-facts dt {
  color: var(--text-tertiary);
}
.case-status-facts dd {
  color: var(--text-primary);
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}
.case-next-step {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.case-next-step-label {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.case-next-step-value {
  color: var(--text-primary);
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.case-transition-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.case-transition-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  position: relative;
  padding: 0 0 14px;
  align-items: start;
}
.case-transition-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.case-transition-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--bg-base);
  margin-top: 2px;
  z-index: 1;
}
.case-transition-item--done .case-transition-dot { border-color: var(--status-active); background: var(--status-active-bg); }
.case-transition-item--running .case-transition-dot { border-color: var(--accent); background: var(--accent-subtle); }
.case-transition-item--failed .case-transition-dot { border-color: var(--status-failed); background: var(--status-failed-bg); }
.case-transition-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.case-transition-body strong {
  color: var(--text-primary);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}
.case-transition-body span,
.case-transition-empty {
  color: var(--text-tertiary);
  font-size: 0.76rem;
}
.case-side-panel-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.case-result-block,
.case-history {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.case-result-block {
  background: var(--status-active-bg);
  border-color: var(--status-active);
}
.case-result-empty,
.case-history-empty {
  color: var(--text-tertiary);
  font-size: 0.85rem;
}
.case-message-content {
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.case-message-content-preview {
  max-height: 180px;
  overflow: auto;
  padding: 8px 10px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.markdown-body {
  white-space: normal;
}
.markdown-body p { margin: 0 0 0.8em; }
.markdown-body p:last-child { margin-bottom: 0; }
.markdown-body pre {
  overflow-x: auto;
  padding: 10px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.case-artifacts-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.case-history-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
}
.case-history-item--running { border-color: var(--accent); }
.case-history-item--done { border-color: var(--status-active); }
.case-history-item--failed { border-color: var(--status-failed); }
.case-history-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.case-history-item-header strong {
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.case-history-status {
  color: var(--text-secondary);
  font-size: 0.78rem;
  white-space: nowrap;
}
.case-message-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.case-message-preview-label {
  color: var(--text-secondary);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.case-stage-running {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 0.85rem;
}
.case-stage-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent-subtle);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: caseSpin 0.9s linear infinite;
}
@keyframes caseSpin {
  to { transform: rotate(360deg); }
}
.case-history-error {
  color: var(--status-failed);
  font-size: 0.84rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.case-graph-details {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-base);
  overflow: hidden;
}
.case-graph-details summary {
  cursor: pointer;
  padding: 10px 12px;
  color: var(--text-secondary);
  font-size: 0.82rem;
}
.case-graph-details .case-workflow-graph {
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
}

/* Artifact cards */
.case-artifact {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.case-artifact-header {
  padding: 8px 12px; font-size: 0.78rem; color: var(--text-tertiary); cursor: pointer; user-select: none;
  display: flex; justify-content: space-between; align-items: center;
}
.case-artifact-header::after { content: '▼'; font-size: 0.6rem; color: var(--border-strong); }
.case-artifact.collapsed .case-artifact-header::after { content: '▶'; }
.case-artifact-body { padding: 10px 14px; font-size: 0.85rem; color: var(--text-primary); line-height: 1.6; }
.case-artifact.collapsed .case-artifact-body { display: none; }
.case-artifact--file,
.case-artifact--link,
.case-artifact--pr,
.case-artifact--commit,
.case-artifact--generic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  color: var(--text-primary);
  font-size: 0.84rem;
}
.case-artifact--file { border-color: var(--status-done); background: var(--status-done-bg); }
.case-artifact--link { border-color: var(--status-active); background: var(--status-active-bg); }
.case-artifact--pr { border-color: var(--accent); background: var(--accent-subtle); }
.case-artifact--commit { border-color: var(--status-paused); background: var(--status-paused-bg); }
.case-artifact-file-name { flex: 1; min-width: 120px; overflow-wrap: anywhere; }
.case-artifact button,
.case-artifact a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  color: var(--status-active);
  background: var(--status-active-bg);
  border: 1px solid var(--status-active);
  border-radius: 999px;
  padding: 4px 10px;
  text-decoration: none;
  cursor: pointer;
}
.case-artifact a:hover,
.case-artifact button:hover { filter: brightness(0.88); }
.case-file-modal-content {
  width: 100%;
  max-width: 100%;
}

/* Event log */
.case-event-row { font-size: 0.78rem; color: var(--text-tertiary); padding: 3px 0; border-bottom: 1px solid var(--border); }
.case-event-row:last-child { border-bottom: none; }
.case-parent-link { font-size: 0.78rem; margin-bottom: 10px; }
.case-parent-link a { color: var(--text-link); text-decoration: none; }
.case-parent-link a:hover { text-decoration: underline; }

/* ── Case detail: query/task description block ───────────────────────────── */
.case-detail-query {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.case-detail-query-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.case-detail-query-text {
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Case detail: stage timeline ─────────────────────────────────────────── */
.case-stage-timeline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.case-stage-block {
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.case-stage-block.done    { border-color: var(--status-active); }
.case-stage-block.current { border-color: var(--accent); }
.case-stage-block.pending { border-color: var(--border); opacity: 0.7; }

.case-stage-block-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: default;
}
.case-stage-block.done    .case-stage-block-header { background: var(--status-active-bg); color: var(--status-active); }
.case-stage-block.current .case-stage-block-header { background: var(--accent-subtle); color: var(--accent); }
.case-stage-block.pending .case-stage-block-header { background: var(--bg-base); color: var(--text-tertiary); }

.case-stage-block-icon { font-size: 0.8rem; flex-shrink: 0; }
.case-stage-block-name { flex: 1; }
.case-stage-block-count {
  font-size: 0.72rem;
  font-weight: 400;
  background: var(--bg-hover);
  color: var(--text-secondary);
  padding: 1px 6px;
  border-radius: 10px;
}

.case-stage-block-empty {
  padding: 6px 12px 8px;
  font-size: 0.78rem;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Events inside a stage block */
.case-stage-event { padding: 4px 12px 4px; border-top: 1px solid var(--border); }

/* Artifacts inside a stage block — remove extra margin, inherit border */
.case-stage-block .case-artifact {
  border-radius: 0;
  border-top: 1px solid var(--border);
  border-left: none;
  border-right: none;
  border-bottom: none;
}
.case-stage-block .case-artifact:last-child { border-bottom: none; }

/* ── AI output artifacts (per-stage council role outputs) ────────────────── */
.case-artifact.ai-output .case-artifact-header {
  color: var(--text-link);
  font-size: 0.78rem;
  font-weight: 500;
}
.case-artifact.ai-output .case-artifact-body {
  border-top: 1px solid var(--border);
  padding: 8px 12px;
  font-size: 0.85rem;
  line-height: 1.55;
}
/* Researcher output: slightly different accent */
.case-artifact.ai-output[data-role="researcher"] .case-artifact-header { color: var(--status-active); }

/* ── Manual stage transition control ─────────────────────────────────────── */
.case-manual-transition {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 10px 0;
  padding: 10px 12px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.case-manual-transition-label {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.case-manual-transition-select,
.case-manual-transition-reason {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 0.82rem;
}
.case-manual-transition-select { min-width: 140px; }
.case-manual-transition-reason { flex: 1; min-width: 120px; }
.case-manual-transition-btn {
  background: var(--status-active-bg);
  border: 1px solid var(--status-active);
  color: var(--status-active);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s;
}
.case-manual-transition-btn:hover   { filter: brightness(0.88); }
.case-manual-transition-btn:disabled { opacity: 0.5; cursor: default; }
.case-manual-transition-btn.backward {
  background: var(--status-paused-bg);
  border-color: var(--status-paused);
  color: var(--status-paused);
}
.case-manual-transition-btn.backward:hover { filter: brightness(0.88); }
.case-manual-transition-btn.to-done {
  background: var(--status-done-bg);
  border-color: var(--status-done);
  color: var(--status-done);
}
.case-manual-transition-hint {
  width: 100%;
  font-size: 0.7rem;
  color: var(--text-tertiary);
  font-style: italic;
  margin-top: 2px;
}
/* Manual transition events in the timeline */
.case-event-row.manual { color: var(--status-paused); }

/* Empty / loading states */
.cases-empty, .cases-loading, .cases-error {
  text-align: center; color: var(--text-tertiary); padding: 40px 20px; font-size: 0.88rem;
}

/* ── F2: Pipeline visualisation ───────────────────────────────────────── */
.case-pipeline-viz {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 14px 0 10px;
  overflow-x: auto;
}
.pipeline-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 60px;
  flex-shrink: 0;
}
.pipeline-node-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--bg-surface);
  flex-shrink: 0;
}
.pipeline-node-label {
  font-size: 0.68rem;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.2;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pipeline-node--done .pipeline-node-dot    { background: var(--status-active-bg); border-color: var(--status-active); }
.pipeline-node--done .pipeline-node-label  { color: var(--status-active); }
.pipeline-node--current .pipeline-node-dot {
  background: var(--accent-subtle);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}
.pipeline-node--current .pipeline-node-label { color: var(--accent); font-weight: 600; }
.pipeline-node--running .pipeline-node-dot {
  background: var(--accent-subtle);
  border-color: var(--accent);
  animation: pipeline-pulse 1.4s ease-in-out infinite;
}
.pipeline-node--running .pipeline-node-label { color: var(--accent); }
.pipeline-node--failed .pipeline-node-dot   { background: var(--status-failed-bg); border-color: var(--status-failed); }
.pipeline-node--failed .pipeline-node-label { color: var(--status-failed); }
@keyframes pipeline-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,158,255,0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(74,158,255,0); }
}
.pipeline-connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  align-self: 21px; /* vertically centred with dot */
  margin-top: 6px; /* align with dot centre */
  min-width: 10px;
  max-width: 30px;
}

/* ── F2: Case detail tabs ─────────────────────────────────────────────── */
.case-configure-link {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  text-decoration: none;
  white-space: nowrap;
  margin-left: auto;
}
.case-configure-link:hover { color: var(--text-link); }

.case-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin: 8px 0 0;
}
.case-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 6px 12px;
  margin-bottom: -1px;
}
.case-tab:hover { color: var(--text-secondary); }
.case-tab--active { color: var(--text-primary); border-bottom-color: var(--accent); }

.case-tab-panel { padding-top: 10px; }
.case-tab-panel--hidden { display: none; }

/* ── U2: Case process graph ──────────────────────────────────────────────── */
.case-process-tab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 12px;
  align-items: start;
}
.case-process-graph-host { min-width: 0; }
.case-process-graph {
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    radial-gradient(circle at 1px 1px, var(--graph-dot-pattern) 1px, transparent 0) 0 0 / 20px 20px,
    var(--graph-bg);
  overflow: auto;
  min-height: 240px;
}
.case-process-canvas {
  position: relative;
  min-width: 100%;
}
.case-process-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.case-process-edge {
  fill: none;
  stroke: var(--graph-edge);
  stroke-width: 2;
}
.case-process-edge--approval {
  stroke: var(--status-paused);
  stroke-dasharray: 7 5;
}
.case-process-edge-label {
  fill: var(--graph-edge-label);
  font-size: 11px;
  paint-order: stroke;
  stroke: var(--graph-edge-outline);
  stroke-width: 4px;
}
.case-process-node {
  position: absolute;
  width: 190px;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}
.case-process-node:hover,
.case-process-node--selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 10px 26px rgba(0, 0, 0, 0.28);
}
.case-process-node--current { border-color: var(--accent); background: var(--graph-node-current-bg); }
.case-process-node--running { border-color: var(--accent); background: var(--graph-node-running-bg); animation: pipeline-pulse 1.4s ease-in-out infinite; }
.case-process-node--done    { border-color: var(--status-active); background: var(--graph-node-done-bg); }
.case-process-node--failed  { border-color: var(--status-failed); background: var(--graph-node-failed-bg); }
.case-process-node-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
}
.case-process-node-meta {
  font-size: 0.72rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.case-process-drawer {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-base);
  padding: 14px;
  position: sticky;
  top: 12px;
}
.case-process-drawer[hidden] { display: none; }
.case-process-drawer-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.case-process-drawer-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.case-process-drawer-title {
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 700;
}
.case-process-drawer-actor,
.case-process-empty {
  color: var(--text-secondary);
  font-size: 0.8rem;
}
.case-process-executions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.case-process-execution {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-base);
  padding: 10px;
}
.case-process-execution--done    { border-color: var(--status-active); }
.case-process-execution--failed  { border-color: var(--status-failed); }
.case-process-execution--running { border-color: var(--accent); }
.case-process-execution-line {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.case-exec-index {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.case-exec-status-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.case-exec-status-badge--pending  { background: var(--bg-hover);         color: var(--status-pending); border-color: var(--border); }
.case-exec-status-badge--running  { background: var(--accent-subtle);    color: var(--accent);         border-color: var(--accent); }
.case-exec-status-badge--done     { background: var(--status-active-bg); color: var(--status-active);  border-color: var(--status-active); }
.case-exec-status-badge--failed   { background: var(--status-failed-bg); color: var(--status-failed);  border-color: var(--status-failed); }
.case-exec-meta {
  font-size: 0.72rem;
  color: var(--text-tertiary);
}
.case-process-message-details {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 8px;
}
.case-process-message-details summary {
  color: var(--accent);
  cursor: pointer;
  font-size: 0.76rem;
  margin-bottom: 6px;
}
.case-process-message-details .case-message-preview-label {
  display: none;
}
.case-process-msg-preview {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 6px;
}
.case-process-expand-btn {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: none;
  color: var(--accent);
  font-size: 0.72rem;
  cursor: pointer;
}
.case-process-expand-btn:hover { background: var(--accent-subtle); }
.case-process-msg-full {
  font-size: 0.82rem;
  color: var(--text-primary);
  line-height: 1.5;
  word-break: break-word;
  margin-top: 6px;
}
.case-process-msg-full.markdown-body {
  font-size: 0.82rem;
}
.case-process-error {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--status-failed-bg);
  border: 1px solid var(--status-failed);
  border-radius: 6px;
  color: var(--status-failed);
  font-size: 0.78rem;
  word-break: break-word;
}
.case-process-rerun-btn {
  align-self: flex-start;
  background: var(--status-active-bg);
  border: 1px solid var(--status-active);
  color: var(--status-active);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 0.82rem;
}
.case-process-rerun-btn:hover { opacity: 0.85; }
.case-process-rerun-btn:disabled { opacity: 0.55; cursor: default; }

/* ── F2: Artifacts tab list ───────────────────────────────────────────── */
.case-artifacts-tab-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.case-artifacts-tab-sort {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  padding: 3px 6px;
}
.case-artifacts-tab-empty {
  color: var(--text-tertiary);
  font-size: 0.85rem;
  padding: 12px 0;
}
.case-artifacts-tab-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.case-artifact-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.case-artifact-row:last-child { border-bottom: none; }
.case-artifact-row-icon { font-size: 0.85rem; flex-shrink: 0; margin-top: 1px; }
.case-artifact-row-info { min-width: 0; }
.case-artifact-row-name { font-size: 0.83rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-artifact-row-meta { font-size: 0.72rem; color: var(--text-tertiary); margin-top: 2px; }
.case-artifact-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.case-artifact-row-tag {
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--bg-hover);
  font-size: 0.68rem;
  padding: 2px 7px;
}

@media (max-width: 600px) {
  #cases-list,
  #cases-detail {
    padding: 12px;
  }
  #cases-detail .case-detail-card {
    padding: 14px;
  }
  .case-detail-v2-header,
  .case-detail-surface,
  .case-history-item-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .case-detail-v2-header,
  .case-history-item-header {
    align-items: flex-start;
  }
  .case-detail-sidebar {
    position: static;
  }
  .case-status-badge,
  .case-history-status {
    white-space: normal;
  }
  .case-status-facts {
    grid-template-columns: 1fr;
  }
  .case-status-facts dd {
    text-align: left;
  }
  .case-process-tab {
    grid-template-columns: 1fr;
  }
  .case-process-graph {
    min-height: 260px;
  }
  .case-process-drawer {
    position: static;
  }
  .case-artifact--file,
  .case-artifact--link,
  .case-artifact--pr,
  .case-artifact--commit,
  .case-artifact--generic {
    align-items: stretch;
  }
  .case-artifact button,
  .case-artifact a {
    min-height: 44px;
    justify-content: center;
  }
}

/* ── Workflow Editor (M4) ──────────────────────────────────────────────────── */
.wf-editor-wrap {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 8px;
}

.wf-editor-list {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wf-list-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: var(--text-primary);
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}
.wf-list-item:hover  { background: var(--bg-elevated); }
.wf-list-item.active { background: var(--accent-subtle); border-color: var(--accent); }

.wf-editor-form {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wf-form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.wf-form-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  flex: 1;
  min-width: 140px;
}

.wf-form-hint {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.4;
}

.wf-form-input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 4px;
  color: var(--text-primary);
  padding: 6px 10px;
  font-size: 13px;
  width: 100%;
}
.wf-form-input:read-only { opacity: 0.6; cursor: default; }

.wf-form-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wf-form-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wf-editor-stage,
.wf-editor-transition {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.wf-editor-stage.selected,
.wf-editor-transition.selected {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.wf-stage-id,
.wf-stage-name {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 3px;
  color: var(--text-primary);
  padding: 5px 8px;
  font-size: 12px;
}
.wf-stage-id   { width: 130px; }
.wf-stage-name { flex: 1; min-width: 100px; }
.wf-stage-actor-hint {
  color: var(--text-tertiary);
  font-size: 11px;
  min-width: 160px;
  flex: 1;
}

.wf-actor-select,
.wf-trigger-select,
.wf-trans-from,
.wf-trans-to {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 3px;
  color: var(--text-primary);
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
}
.wf-actor-select   { min-width: 160px; }
.wf-trigger-select { min-width: 180px; }
.wf-trans-from,
.wf-trans-to       { min-width: 110px; }

.wf-trans-label {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.wf-del-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.wf-del-btn:hover { color: var(--status-failed); background: var(--status-failed-bg); }

.wf-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wf-status {
  font-size: 12px;
  color: var(--text-secondary);
}
.wf-status.success { color: var(--status-active); }
.wf-status.error { color: var(--status-failed); }
.wf-status.warning { color: var(--status-paused); }
.wf-status:empty { display: none; }

/* Role Library (PE2) */
.roles-library {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.roles-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.roles-search {
  max-width: 360px;
}
.roles-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.roles-filter.active {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent-subtle);
}
.roles-library-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(360px, 1.3fr);
  gap: 16px;
  align-items: start;
}
.roles-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.role-card {
  width: 100%;
  min-height: 118px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.role-card:hover,
.role-card.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.role-card-top,
.role-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.role-card-name {
  font-weight: 700;
  color: var(--text-primary);
}
.role-card-desc {
  display: block;
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.35;
}
.role-card-meta {
  display: block;
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 0.75rem;
}
.role-badge {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--status-active);
  background: var(--status-active-bg);
  color: var(--status-active);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.roles-detail {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-surface);
  padding: 16px;
  min-width: 0;
}
.role-detail-kicker {
  color: var(--accent-text);
  font-size: 0.78rem;
  margin-bottom: 4px;
}
.role-detail-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.15rem;
}
.role-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  margin: 16px -16px 16px;
  padding: 0 16px;
  overflow-x: auto;
}
.role-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  padding: 10px 2px;
  cursor: pointer;
}
.role-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.role-tab-panel {
  min-height: 260px;
}
.role-chip-row,
.role-tool-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.role-tool-chip {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.78rem;
}
.role-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.role-contracts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.role-contract-column {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-base);
  padding: 12px;
  min-width: 0;
}
.role-contract-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.role-contract-head strong {
  display: block;
  color: var(--text-primary);
}
.role-contract-list {
  display: grid;
  gap: 10px;
}
.role-contract-entry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: var(--bg-surface);
}
.role-contract-check {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 0.8rem;
}
.role-contract-description {
  grid-column: 1 / -1;
}
.role-contract-remove {
  justify-self: start;
}
.role-tool-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface);
}
.role-tool-card strong,
.role-usage-item strong {
  display: block;
  color: var(--text-primary);
}
.role-tool-card small,
.role-usage-item small {
  display: block;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.35;
}
.role-usage-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.role-usage-layout h4 {
  margin: 0 0 10px;
  color: var(--text-primary);
}
.role-usage-stages,
.role-usage-runs {
  display: grid;
  gap: 8px;
}
.role-usage-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-base);
  padding: 10px;
}
.roles-empty {
  color: var(--text-secondary);
  padding: 14px;
}
.role-actions {
  margin-top: 14px;
}

.wf-trans-label-input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 3px;
  color: var(--text-primary);
  padding: 5px 8px;
  font-size: 12px;
  width: 120px;
}

/* ── Transition graph (P2) ─────────────────────────────────────────────────── */
.wf-graph {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background:
    radial-gradient(circle at 1px 1px, var(--graph-dot-pattern) 1px, transparent 0) 0 0 / 18px 18px,
    var(--graph-bg);
  margin-top: 4px;
}
.wf-graph:empty { display: none; }

.wf-graph-title {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.wf-graph-empty {
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
}
.wf-svg-canvas {
  position: relative;
  min-width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    radial-gradient(circle at 1px 1px, var(--graph-dot-pattern) 1px, transparent 0) 0 0 / 20px 20px,
    var(--graph-bg);
}
.wf-svg-canvas--panning { cursor: grabbing; }
.wf-svg-viewport {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
.wf-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.wf-svg-edge {
  fill: none;
  stroke: var(--graph-edge);
  stroke-width: 2;
  pointer-events: none;
}
.wf-svg-edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 18;
  pointer-events: stroke;
  cursor: pointer;
}
.wf-svg-edge--approval {
  stroke: var(--status-paused);
  stroke-dasharray: 7 5;
}
.wf-svg-edge-group.selected .wf-svg-edge {
  stroke: var(--accent);
  stroke-width: 3;
}
.wf-svg-edge-label {
  fill: var(--graph-edge-label);
  font-size: 11px;
  paint-order: stroke;
  pointer-events: none;
  stroke: var(--graph-edge-outline);
  stroke-width: 4px;
}
.wf-svg-node {
  position: absolute;
  width: 190px;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}
.wf-svg-node:hover,
.wf-svg-node.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25), 0 12px 30px rgba(0, 0, 0, 0.15);
}
.wf-svg-node {
  touch-action: none;
}
.wf-svg-node--dragging {
  cursor: grabbing;
  opacity: 0.92;
  z-index: 4;
}
.wf-svg-node strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.wf-svg-node-actor {
  display: inline-flex;
  align-self: flex-start;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
  color: var(--text-secondary);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf-svg-controls {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
  backdrop-filter: blur(8px);
  opacity: 0.92;
}
.wf-svg-controls button {
  min-width: 30px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
}
.wf-svg-controls button:hover { border-color: var(--accent); }
.wf-svg-zoom-value {
  min-width: 44px;
  color: var(--text-secondary);
  font-size: 11px;
  text-align: center;
}
.wf-svg-minimap {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface);
  padding: 8px;
  backdrop-filter: blur(8px);
  opacity: 0.92;
}
.wf-svg-minimap-node {
  fill: var(--accent-subtle);
  stroke: var(--border-strong);
}
.wf-svg-minimap-viewport {
  fill: transparent;
  stroke: var(--accent);
  stroke-width: 1.5;
  cursor: grab;
}
.wf-graph-canvas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.wf-graph-stage-node {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface);
  padding: 12px;
  min-width: 0;
  cursor: pointer;
  text-align: left;
}
.wf-graph-stage-node.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-subtle);
}
.wf-graph-stage-marker {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--status-active-bg);
  border: 1px solid var(--status-active);
  color: var(--status-active);
  font-size: 12px;
  font-weight: 700;
}
.wf-graph-stage-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wf-graph-stage-body strong {
  color: var(--text-primary);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.wf-graph-stage-body span {
  color: var(--text-secondary);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.wf-graph-stage-edges {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.wf-graph-edge {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
}
.wf-graph-edge.selected {
  border-color: var(--status-paused);
  background: var(--status-paused-bg);
}
.wf-graph-terminal {
  color: var(--text-tertiary);
  font-size: 11px;
  padding: 4px 0 0 40px;
}

.wf-graph-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.wf-graph-row:last-child { border-bottom: none; }

.wf-graph-node {
  font-size: 12px;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
}

.wf-graph-arrow {
  color: var(--border-strong);
  font-size: 14px;
  flex-shrink: 0;
}

.wf-graph-badge {
  font-size: 10px;
  border-radius: 3px;
  padding: 2px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.wf-graph-badge--auto              { background: var(--status-active-bg); color: var(--status-active); border: 1px solid var(--border); }
.wf-graph-badge--requires_approval { background: var(--status-paused-bg); color: var(--status-paused); border: 1px solid var(--border); }

.wf-graph-label {
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
}

.wf-inspector {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-base);
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.wf-inspector-title {
  grid-column: 1 / -1;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}
.wf-inspector-empty {
  grid-column: 1 / -1;
  color: var(--text-tertiary);
  font-size: 12px;
}
.wf-inspector-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 12px;
  min-width: 0;
}

.wf-library {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 12px;
}
.wf-library-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface);
  padding: 12px;
  min-width: 0;
}
.wf-library-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}
.wf-library-head strong {
  color: var(--text-primary);
  font-size: 13px;
}
.wf-library-head span {
  color: var(--text-tertiary);
  font-size: 11px;
}
.wf-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  max-height: 360px;
  overflow: auto;
}
.wf-role-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-base);
  padding: 10px;
  min-width: 0;
}
.wf-role-card strong {
  display: block;
  color: var(--text-primary);
  font-size: 13px;
  margin-bottom: 4px;
}
.wf-role-card span {
  display: block;
  color: var(--text-secondary);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.wf-role-card p {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
  margin: 8px 0 0;
}
.wf-tool-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wf-tool-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-base);
  color: var(--text-secondary);
  font-size: 11px;
  padding: 4px 8px;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .wf-editor-wrap,
  .wf-library {
    display: flex;
    flex-direction: column;
  }
  .wf-editor-list {
    flex: none;
    width: 100%;
  }
  .roles-library-grid,
  .role-usage-layout,
  .role-contracts-grid {
    grid-template-columns: 1fr;
  }
  .roles-grid,
  .role-tool-grid,
  .role-contract-entry {
    grid-template-columns: 1fr;
  }
  .roles-search {
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .wf-svg-canvas,
  .wf-svg {
    display: none;
  }
  .wf-svg-controls,
  .wf-svg-minimap {
    display: none;
  }
  .wf-graph-canvas {
    display: grid;
  }
}

/* ── Thread Workspace (T5) ──────────────────────────────────────────────── */
/* NOTE: intentional always-dark forest-green overlay (position: fixed; inset: 0).
   Hardcoded green palette is by design — not a light-mode regression. */
.thread-workspace {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #0b1a0e;
  overflow: hidden;
}
.thread-workspace[hidden] { display: none; }

.thread-workspace-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #1e3322;
  background: #0d1f11;
  flex-shrink: 0;
}
.thread-workspace-header button {
  background: none;
  border: none;
  color: #8bcf8b;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.thread-workspace-header button:hover { background: #1a3020; }
.thread-workspace-title-wrap { flex: 1; min-width: 0; }
.thread-workspace-title-wrap h3 {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 600;
  color: #e8f5e9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-workspace-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 20px 0;
  border-bottom: 1px solid #1e3322;
  background: #0d1f11;
  flex-shrink: 0;
}
.deck-workspace-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #8bcf8b;
  cursor: pointer;
  font-size: 13px;
  padding: 6px 14px 8px;
  opacity: 0.65;
  transition: opacity .15s, border-color .15s;
}
.deck-workspace-tab:hover { opacity: 1; }
.deck-workspace-tab.active {
  opacity: 1;
  border-bottom-color: #4caf50;
  color: #e8f5e9;
}

.thread-workspace-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.thread-workspace-body {
  padding: 20px;
  overflow-y: auto;
}
.thread-workspace-chat {
  display: flex;
  flex-direction: column;
  border-left: 1px solid #1e3322;
  overflow: hidden;
}
.thread-workspace-chat .deck-panel-title {
  padding: 12px 16px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #4a7c52;
  border-bottom: 1px solid #1e3322;
  flex-shrink: 0;
}
.thread-workspace-chat .deck-conversation-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}
.thread-workspace-chat .deck-composer {
  padding: 10px 12px;
  border-top: 1px solid #1e3322;
  flex-shrink: 0;
}
.deck-workspace-linked-case { margin-bottom: 14px; }
.deck-workspace-case-link {
  color: #4caf50;
  text-decoration: none;
  font-size: 13px;
}
.deck-workspace-case-link:hover { text-decoration: underline; }

@media (max-width: 800px) {
  .thread-workspace-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  .thread-workspace-chat {
    border-left: none;
    border-top: 1px solid #1e3322;
    max-height: 280px;
  }
}

/* ── Escalation Modal (T6) ──────────────────────────────────────────────── */
.deck-escalation-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.deck-escalation-overlay[hidden] { display: none; }
.deck-escalation-modal {
  background: #0d1f11;
  border: 1px solid #2a4d30;
  border-radius: 10px;
  width: min(540px, 94vw);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.deck-escalation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #1e3322;
}
.deck-escalation-header h3 { margin: 0; font-size: 16px; color: #e8f5e9; }
.deck-escalation-header button {
  background: none; border: none; color: #4a7c52; cursor: pointer; font-size: 18px; padding: 2px 6px;
}
.deck-escalation-body { padding: 20px; }
.deck-escalation-stage { display: flex; flex-direction: column; gap: 12px; }
.deck-escalation-stage[hidden] { display: none; }
.deck-escalation-stage label, .deck-escalation-stage-label {
  font-size: 12px; color: #4a7c52; text-transform: uppercase; letter-spacing: .06em;
}
.deck-escalation-stage select {
  background: #0f1f12; border: 1px solid #2a4d30; color: #c8e6c9;
  padding: 8px 10px; border-radius: 6px; font-size: 14px;
}
.deck-escalation-stage textarea {
  background: #0f1f12; border: 1px solid #2a4d30; color: #c8e6c9;
  padding: 10px; border-radius: 6px; font-size: 13px; line-height: 1.5; resize: vertical;
}
.deck-escalation-brief-preview {
  background: #0b1a0e; border: 1px solid #1e3322; border-radius: 6px;
  padding: 12px; font-size: 13px; color: #c8e6c9; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
.deck-escalation-stage button {
  align-self: flex-start; background: #1e4d22; border: 1px solid #2a6d2e;
  color: #c8e6c9; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.deck-escalation-stage button:hover { background: #275c2b; }
.deck-escalation-stage button:disabled { opacity: .5; cursor: not-allowed; }
.deck-escalation-confirm-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #c8e6c9; cursor: pointer;
  text-transform: none; letter-spacing: 0;
}
.deck-escalation-done-msg { font-size: 15px; color: #8bcf8b; font-weight: 500; }
.deck-escalation-case-link {
  color: #4caf50; text-decoration: none; font-size: 13px; align-self: flex-start;
}
.deck-escalation-case-link:hover { text-decoration: underline; }

/* ── PE3: Tools Library ────────────────────────────────────────────────────── */
.tools-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  height: calc(100vh - 140px);
  min-height: 400px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.tools-list {
  border-right: 1px solid var(--border);
  overflow-y: auto;
  background: var(--bg-base);
}

.tool-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.tool-list-row:hover  { background: var(--bg-hover); }
.tool-list-row.active { background: var(--accent-subtle); }

.tool-list-name {
  flex: 1;
  font-size: 13px;
  font-family: monospace;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-list-provider {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* Status dot */
.tool-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tool-status-dot--connected    { background: var(--status-active); }
.tool-status-dot--unavailable  { background: var(--status-failed); }
.tool-status-dot--needs_config { background: var(--status-paused); }

/* Detail pane */
.tools-detail {
  padding: 20px 24px;
  overflow-y: auto;
  background: var(--bg-surface);
}

.tools-detail-hint {
  color: var(--text-tertiary);
  font-size: 13px;
  margin-top: 40px;
  text-align: center;
}

.tools-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.tools-detail-title {
  flex: 1;
  font-size: 16px;
  font-family: monospace;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.tool-status-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}
.tool-status-badge--connected    { background: var(--status-active-bg);  color: var(--status-active);  border: 1px solid var(--border); }
.tool-status-badge--unavailable  { background: var(--status-failed-bg);  color: var(--status-failed);  border: 1px solid var(--border); }
.tool-status-badge--needs_config { background: var(--status-paused-bg);  color: var(--status-paused);  border: 1px solid var(--border); }

.tools-detail-meta {
  margin-bottom: 20px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.tools-meta-row {
  display: flex;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.tools-meta-row:last-child { border-bottom: none; }
.tools-meta-row.tools-meta-error .tools-meta-value { color: var(--status-failed); }

.tools-meta-label {
  width: 100px;
  flex-shrink: 0;
  color: var(--text-tertiary);
}

.tools-meta-value {
  color: var(--text-primary);
  word-break: break-word;
}

.tools-detail-section {
  margin-bottom: 20px;
}

.tools-detail-section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}

.tools-no-roles {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0;
}

.tools-role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tools-role-chip {
  font-size: 12px;
  padding: 3px 10px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-secondary);
  font-family: monospace;
}

.tools-test-btn {
  margin-right: 10px;
}

.tools-test-result {
  font-size: 12px;
  color: var(--text-tertiary);
}
.tools-test-result--fail { color: var(--status-failed); }
.tools-test-result--ok   { color: var(--status-active); }

.tools-stage-note {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 24px;
}

.tools-role-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-link);
  cursor: pointer;
  font-size: 12px;
  text-decoration: underline;
}
.tools-role-link:hover { color: var(--accent-hover); }

@media (max-width: 700px) {
  .tools-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: auto;
  }
  .tools-list {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 250px;
  }
}

/* ── T8: Create Notion page from thread ─────────────────────────────────────── */
.deck-notion-create-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
}

.deck-notion-create-btn {
  border: 1px solid var(--status-active);
  background: var(--status-active-bg);
  color: var(--status-active);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}
.deck-notion-create-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.deck-notion-create-btn:hover:not(:disabled) {
  filter: brightness(0.88);
}

.deck-notion-create-status {
  font-size: 12px;
  color: var(--text-secondary);
}