/* ═══════════════════════════════════════════════════════════════════
   Drug Discovery Agent — app styles
   Editorial palette with Playfair Display + DM Sans
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg: #F8F6F1;
  --bg-card: #FFFFFF;
  --bg-surface: #F0EDE6;
  --bg-hover: #EAE7DF;
  --bg-sidebar: #1A2E28;
  --bg-sidebar-hover: #243828;

  --text-primary: #1A1A18;
  --text-secondary: #5C5B56;
  --text-tertiary: #8E8D87;
  --text-on-dark: rgba(255,255,255,0.92);
  --text-on-dark-dim: rgba(255,255,255,0.55);

  --border: #D8D5CC;
  --border-light: #E8E5DD;

  --accent: #2E6B4F;
  --accent-bg: #E8F3ED;
  --accent-blue: #4361EE;
  --accent-purple: #6B4FA0;
  --accent-orange: #E65100;
  --accent-red: #A03040;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, sans-serif;

  --sidebar-w: 240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  height: 100vh;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ── App layout ── */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
}

/* ═══ Sidebar ═══ */
.sidebar {
  background: var(--bg-sidebar);
  color: var(--text-on-dark);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sidebar-brand {
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-brand-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: white;
  letter-spacing: -0.01em;
}
.sidebar-brand-sub {
  font-size: 11px;
  color: var(--text-on-dark-dim);
  letter-spacing: 0.3px;
  margin-top: 2px;
}

.sidebar-section {
  padding: 14px 10px 6px;
}
.sidebar-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-on-dark-dim);
  padding: 0 10px 6px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin: 1px 0;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--text-on-dark);
  cursor: pointer;
  transition: background 0.1s;
  text-decoration: none;
}
.sidebar-item:hover { background: var(--bg-sidebar-hover); }
.sidebar-item.active { background: rgba(255,255,255,0.08); font-weight: 500; }
.sidebar-item .icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; opacity: 0.8; }

.sidebar-project {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin: 1px 0;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-on-dark);
  cursor: pointer;
}
.sidebar-project:hover { background: var(--bg-sidebar-hover); }
.sidebar-project.active {
  background: rgba(255,255,255,0.12);
  font-weight: 600;
  color: white;
  position: relative;
}
.sidebar-project.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: white;
}
.sidebar-project.active .project-dot {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
}
.project-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
  transition: width 0.15s, height 0.15s, box-shadow 0.15s;
}
.project-code {
  font-size: 10px;
  color: var(--text-on-dark-dim);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  flex-shrink: 0;
}

.sidebar-user {
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-user .avatar {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { font-size: 12.5px; font-weight: 500; color: white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-role { font-size: 10.5px; color: var(--text-on-dark-dim); }

/* ═══ Main content area ═══ */
.main {
  overflow-y: auto;
  background: var(--bg);
}
.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 36px 64px;
}

/* ── Page header ── */
.page-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}
.page-breadcrumb {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.page-breadcrumb span { color: var(--text-secondary); }
.page-breadcrumb .project-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px 2px 6px;
  border-radius: 100px;
  color: white;
  letter-spacing: 0.2px;
}
.page-breadcrumb .project-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  opacity: 0.85;
}
.page-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.page-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 700px;
}
.page-header-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--text-primary);
  color: white;
}
.btn-primary:hover { background: #2a2a27; }
.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--text-tertiary); }
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ── Cards ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.card.clickable { cursor: pointer; }
.card.clickable:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border);
}

/* Clickable stat tiles (e.g. Threads tile on project Overview) — same
   hover treatment as a regular clickable card so the affordance is
   recognizable across the app. */
.stat-tile.clickable:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border);
}

/* Sectioning on the Data Sources page — separates Free vs Paid so the
   public ecosystem reads first, proprietary data sits below with a
   visual break. Header is quiet but distinct: small caps, count pill, sub. */
.ds-section { margin-bottom: 28px; }
.ds-section-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
}
.ds-section-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ds-section-count {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--bg-surface);
  padding: 1px 8px;
  border-radius: 100px;
  font-variant-numeric: tabular-nums;
}
.ds-section-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

/* ── Stat tiles ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.stat-tile {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.stat-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ── Tabs ── */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 18px;
}
.tab {
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s;
}
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--text-primary); border-bottom-color: var(--text-primary); }
.tab-count {
  font-size: 11px;
  background: var(--bg-surface);
  padding: 1px 6px;
  border-radius: 100px;
  margin-left: 4px;
  color: var(--text-tertiary);
}

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.badge-native    { background: #E3F2FD; color: #1565C0; }
.badge-augmented { background: #F3E5F5; color: #6A1B9A; }
.badge-wet       { background: #FFF3E0; color: #E65100; }
.badge-unreg     { background: #E8F5E9; color: #2E7D32; }
.badge-trans     { background: #FFF3E0; color: #E65100; }
.badge-reg       { background: #E3F2FD; color: #1565C0; }
.badge-ready     { background: #E8F5E9; color: #2E7D32; }
.badge-beta            { background: #FFF3E0; color: #E65100; }
.badge-planned         { background: #F0EDE6; color: #8E8D87; }
.badge-in-development  { background: #FFF3E0; color: #9A6300; }
.badge-mvp             { background: #1A1A18; color: #fff; }

/* Skill card visual hierarchy: MVP skill pops, in-development skills muted */
.skill-card.skill-mvp {
  border-color: var(--text-primary);
  border-width: 1.5px;
  box-shadow: 0 2px 12px rgba(26,26,24,0.08);
}
.skill-card.skill-in-development {
  opacity: 0.55;
  filter: grayscale(0.3);
  background: var(--bg-surface);
}
.skill-card.skill-in-development:hover {
  opacity: 0.85;
  filter: grayscale(0.1);
}
.skill-card.skill-in-development .skill-produces {
  background: rgba(212, 163, 64, 0.06);
  border-left-color: var(--border);
}
.badge-private   { background: #F0EDE6; color: #5C5B56; }
.badge-shared    { background: #E8F3ED; color: #2E6B4F; }
.badge-complete  { background: #E8F5E9; color: #2E7D32; }
.badge-progress  { background: #FFF9ED; color: #9A7520; }
.badge-draft     { background: #F0EDE6; color: #8E8D87; }
/* Data source pricing — free for public APIs, paid for proprietary/licensed.
   Free reads as a positive signal (green) to make the public ecosystem
   pop in the UI; paid is a quiet neutral so it doesn't dominate. */
.badge-free      { background: #E8F5E9; color: #2E7D32; font-weight: 700; }
.badge-paid      { background: #F0EDE6; color: #5C5B56; }
/* Surface "this source has been queried in this project" — emerald with
   a subtle dot to read as a live status, not a static label. */
.badge-in-use    { background: #DEF2E5; color: #1F6042; font-weight: 700; }

/* Data source card: usage line + accent rail when actively queried in
   the project. Reads as "this is wired up and being used" at a glance. */
.ds-card-used { border-left: 3px solid #2E6B4F; }
.ds-usage-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-secondary);
  padding: 6px 0 4px;
  margin: 4px 0 8px;
  border-top: 1px dashed var(--border-light);
}
.ds-usage-line.muted {
  color: var(--text-tertiary);
  font-style: italic;
}
.ds-usage-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2E6B4F;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(46, 107, 79, 0.18);
}

/* ── Avatars ── */
.avatar {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.avatar-sm { width: 22px; height: 22px; font-size: 9.5px; border-radius: 5px; }
.avatar-lg { width: 40px; height: 40px; font-size: 14px; border-radius: 8px; }
img.avatar-img { object-fit: cover; background: var(--bg-surface); display: inline-block; }
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar { border: 2px solid var(--bg-card); margin-left: -6px; }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ── Pipeline view ── */
.pipeline-container {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  margin-bottom: 24px;
  overflow-x: auto;
}
.pipeline-track {
  display: flex;
  gap: 2px;
  align-items: stretch;
  min-width: 900px;
}
.phase-col {
  flex: 1;
  min-width: 120px;
  border-radius: var(--radius-md);
  padding: 14px 12px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  border: 2px solid transparent;
}
.phase-col:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.phase-col.active { border-color: var(--text-primary); }
.phase-col.complete { opacity: 0.75; }
.phase-col.future { opacity: 0.55; }

.phase-col-num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.6);
  margin-bottom: 8px;
}
.phase-col-tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 4px;
  opacity: 0.7;
}
.phase-col-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.phase-col-meta {
  font-size: 10.5px;
  margin-bottom: 2px;
  line-height: 1.4;
  opacity: 0.8;
}
.phase-col-meta strong { font-weight: 600; }

.phase-col-skills {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.phase-col-skill-count {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Phase chevron separators */
.phase-arrow {
  display: flex;
  align-items: center;
  padding: 0 4px;
  color: var(--text-tertiary);
  font-size: 14px;
  flex-shrink: 0;
}

/* ── Skill cards ── */
.skill-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  transition: box-shadow 0.15s, border-color 0.15s;
  cursor: pointer;
}
.skill-card:hover { box-shadow: var(--shadow-sm); border-color: var(--border); }
.skill-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.skill-card-name {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
  line-height: 1.3;
}
.skill-card-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
}
.skill-produces {
  background: #FFFBEF;
  border-left: 3px solid #D4A340;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.skill-produces-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #9A7520;
}
.skill-produces-text {
  font-size: 12.5px;
  color: var(--text-primary);
  line-height: 1.45;
  font-weight: 500;
}
.skill-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-tertiary);
}
.skill-card-meta > div { display: flex; align-items: center; gap: 4px; }
.skill-confidence {
  display: flex;
  align-items: center;
  gap: 6px;
}
.conf-bar {
  width: 60px;
  height: 4px;
  background: var(--bg-surface);
  border-radius: 2px;
  overflow: hidden;
}
.conf-bar-fill {
  height: 100%;
  border-radius: 2px;
}

/* ── Thread list ── */
.thread-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  position: relative;
}
.thread-row:hover { box-shadow: var(--shadow-sm); border-color: var(--border); }
.thread-delete-btn {
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px 6px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  border-radius: 4px;
  line-height: 1;
}
.thread-row:hover .thread-delete-btn { opacity: 0.5; }
.thread-delete-btn:hover { opacity: 1 !important; color: #A03040; background: rgba(160, 48, 64, 0.08); }

/* Thinking indicator — small amber pill that signals "the agent is still
   working" with a pulsing dot and cycling whimsical text. Used in the chat
   live state, streaming-thread page, and tool sandbox. */
.thinking-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background: #FFF9ED;
  border: 1px solid #FAE6B0;
  border-radius: 100px;
  font-size: 12.5px;
  color: #9A7520;
  font-weight: 500;
  letter-spacing: 0.1px;
}
.thinking-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D4A340;
  flex-shrink: 0;
  animation: thinking-pulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(212, 163, 64, 0.55);
}
@keyframes thinking-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(212, 163, 64, 0.55);
  }
  50% {
    transform: scale(1.18);
    box-shadow: 0 0 0 6px rgba(212, 163, 64, 0);
  }
}
.thinking-pill .label {
  white-space: nowrap;
  /* fade transition between phrases — JS swaps the text and toggles a class */
  transition: opacity 0.18s ease;
}
/* Thread → skill chip on the thread detail header.
   When a thread is tagged with a skill (`skill_id` set), this chip appears
   directly below the title to make the skill association obvious — clearer
   than burying it in the small meta line. Clickable: opens the skill detail
   page. The leading ✦ icon and trailing ↗ arrow communicate "links to a
   skill page." */
/* Composer mode toggle: 💬 Chat vs ✎ Revise artifact.
   Only shown when the thread has a working artifact to revise. The active
   mode determines whether Enter routes to the chat endpoint or the revise
   endpoint. */
.composer-mode-toggle .mode-btn {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.12s;
  border-radius: 0;
}
.composer-mode-toggle .mode-btn:first-child {
  border-radius: 100px 0 0 100px;
  border-right-width: 0;
}
.composer-mode-toggle .mode-btn:last-child {
  border-radius: 0 100px 100px 0;
}
.composer-mode-toggle .mode-btn:hover { color: var(--text-primary); }
.composer-mode-toggle .mode-btn.active {
  background: #1A2E28;
  color: white;
  border-color: #1A2E28;
}
/* Tint the input when in revise mode to make the mode shift unmistakable */
.chat-input-bar.revise-mode .chat-input {
  background: #FFF9ED;
  border-color: #FAE6B0;
}

/* ─── Cursor/Lovable-style split layout for skill-tagged threads ─────
   Working artifact on the left (the canvas), chat history + composer on
   the right (the assistant). Each pane scrolls independently. Below
   ~1100px we collapse back to a stacked layout. */
.thread-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  gap: 18px;
  /* Fill available vertical space in the .main scroll container.
     The .page wrapper has padding so we offset by that for a clean fit. */
  height: calc(100vh - 160px);
  min-height: 540px;
}
.thread-artifact-pane {
  overflow-y: auto;
  padding-right: 6px;
  min-width: 0;  /* lets long content respect the grid column */
}

/* Sticky artifact toolbar: actions stay reachable as the body scrolls.
   For sticky to use .thread-artifact-pane as its scroll context, no
   intermediate element can have overflow other than `visible` or `clip`.
   The standalone artifact wrapper ships with `overflow: hidden` (for
   rounded-corner clipping) — we override to `clip` inside the artifact
   pane so the rounded corners still clip but sticky escapes the box. */
.thread-artifact-pane [data-artifact-id] {
  overflow: clip !important;
}
.artifact-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  /* Distinct header strip: warmer tone than the body, hairline accent
     bar on top, soft drop shadow below so it visibly "floats" over the
     scrolling content without being heavy. (Sticky elements form their
     own positioning context, so the ::before accent strip below works.) */
  background: linear-gradient(180deg, #F4F0E6 0%, #EFEAE0 100%) !important;
  border-bottom: 1px solid #D8D3C4 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 6px 16px -10px rgba(46, 35, 10, 0.18);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
}
.artifact-toolbar::before {
  /* Thin accent strip at the very top of the toolbar — gives it a
     "label/tab" feel and helps it pop visually. */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #2E6B4F 0%, #4BA15F 50%, #2E6B4F 100%);
  opacity: 0.9;
}
/* Promote the artifact title typography inside the toolbar — uses the
   display font (Playfair Display) with a slightly larger weight, since
   the working artifact is the project's primary work product. */
.artifact-toolbar > div > div > div:first-child {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.thread-chat-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Cooler-grey tint sets it apart from the warm "paper" of the artifact
     pane — visual signal that this is a transcript, not a document. */
  background: #ECEDEA;
  border: 1px solid #D8D9D5;
  border-radius: 10px;
  overflow: hidden;
}
.thread-chat-pane-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  /* Same cool tone as the pane, just slightly darker so the header is
     a defined strip without breaking the cohesive transcript feel */
  background: #E2E3DF;
  border-bottom: 1px solid #D0D2CD;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.thread-chat-pane-header .dot-thread {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2E6B4F;
}
.thread-chat-pane-header .label {
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.thread-chat-pane-header .meta {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: 10.5px;
  letter-spacing: 0.2px;
}

/* Expand/contract button in the chat-pane header. Labeled with text
   ("⤢ Expand" / "⤡ Contract") instead of just a glyph so it's
   discoverable for the MVP — users shouldn't have to hover to learn
   what it does. */
.chat-expand-btn {
  background: white;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 8px;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  /* Override the chat-pane-header's uppercase + tracking so the button
     renders as a normal pill, not all-caps. */
  text-transform: none;
}
.chat-expand-btn:hover {
  color: var(--text-primary);
  border-color: var(--border);
  background: var(--bg-surface);
}

/* When expanded, the chat pane floats as a centered overlay above the
   artifact. The artifact stays visible (dimmed) so the user can still
   reference it while iterating in chat. Click the backdrop or press
   Escape to contract. */
.thread-split.chat-expanded {
  /* Collapse to a single artifact column so the grid doesn't reserve
     an empty slot where the chat used to live. */
  grid-template-columns: minmax(0, 1fr);
}
.chat-pane-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 18, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 90;
  cursor: pointer;
  animation: chat-backdrop-fade 0.18s ease-out;
}
@keyframes chat-backdrop-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.thread-chat-pane.expanded {
  position: fixed;
  /* Centered-ish, biased right so it feels like it grew from the side rail.
     Bottom and top inset gives breathing room around the edges. */
  top: 6vh;
  right: 5vw;
  bottom: 6vh;
  left: max(34vw, 380px);
  z-index: 100;
  border-radius: 14px;
  box-shadow: 0 30px 80px -10px rgba(20, 20, 18, 0.30),
              0 12px 28px -6px rgba(20, 20, 18, 0.15);
  animation: chat-expand-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes chat-expand-in {
  from {
    transform: translateX(40px) scale(0.97);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}
/* When expanded, the header gets a clearer "modal" feel */
.thread-chat-pane.expanded .thread-chat-pane-header {
  padding: 12px 16px;
}
/* On narrow screens, expanded mode goes near-full-width */
@media (max-width: 1100px) {
  .thread-chat-pane.expanded {
    top: 4vh;
    bottom: 4vh;
    left: 4vw;
    right: 4vw;
  }
}
.thread-messages-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 10px 10px;
  min-height: 0;
}
.thread-chat-pane .chat-input-bar {
  border-top: 1px solid var(--border-light);
  background: white;
}

/* ─── Chat-pane typography overrides ────────────────────────────
   Inside the chat pane, agent replies render as a *transcript*, not as
   a document. Override the artifact's display typography with denser,
   sans-serif, smaller text so it reads visually distinct from the
   working artifact in the left pane. */
.thread-chat-pane .chat-message {
  font-size: 12.5px;
}
.thread-chat-pane .chat-message .bubble {
  font-size: 12.5px;
  line-height: 1.5;
}
.thread-chat-pane .skill-body-rendered,
.thread-chat-pane .rendered-view {
  font-size: 12.5px;
  line-height: 1.5;
  /* drop the display-font fallback that normally cascades from .page */
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
}
.thread-chat-pane .rendered-view h1,
.thread-chat-pane .rendered-view h2,
.thread-chat-pane .rendered-view h3,
.thread-chat-pane .rendered-view h4,
.thread-chat-pane .rendered-view h5 {
  font-family: inherit !important;        /* no Playfair Display in chat */
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 12px 0 4px;
  color: var(--text-primary);
}
.thread-chat-pane .rendered-view h1 { font-size: 14px;   }
.thread-chat-pane .rendered-view h2 { font-size: 13px;   }
.thread-chat-pane .rendered-view h3 { font-size: 12.5px; }
.thread-chat-pane .rendered-view h4,
.thread-chat-pane .rendered-view h5 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-tertiary); }
.thread-chat-pane .rendered-view p,
.thread-chat-pane .rendered-view li {
  margin: 4px 0;
}
.thread-chat-pane .rendered-view ul,
.thread-chat-pane .rendered-view ol {
  padding-left: 18px;
  margin: 6px 0;
}
.thread-chat-pane .rendered-view code {
  font-size: 11px;
  padding: 1px 5px;
}
.thread-chat-pane .rendered-view pre {
  font-size: 11px;
  padding: 8px 10px;
  margin: 6px 0;
}
.thread-chat-pane .rendered-view blockquote {
  margin: 6px 0;
  padding: 4px 10px;
  font-size: 12px;
}
.thread-chat-pane .rendered-view hr {
  margin: 10px 0;
}
/* Compact the run bubble's audit-log header inside chat too */
.thread-chat-pane .audit-log > summary {
  font-size: 11.5px;
  padding: 10px 14px !important;
}
.thread-chat-pane .chat-message-author {
  font-size: 11px;
  color: var(--text-tertiary);
}
/* Cap the rendered area's left/right padding inside chat so messages
   don't take the full panel width — keeps the conversational feel */
.thread-chat-pane .skill-body-rendered {
  padding: 12px 14px !important;
}
/* Stack on narrow screens — split makes no sense without horizontal room */
@media (max-width: 1100px) {
  .thread-split {
    display: block;
    height: auto;
  }
  .thread-artifact-pane {
    margin-bottom: 18px;
  }
  .thread-chat-pane {
    height: 70vh;
  }
}

/* ─── Pending revision (Accept/Reject diff overlay) ─────────────
   When a Revise turn lands, the artifact pane shows the proposed change
   inline as a diff over the current content. The banner pinned at top
   gives the user a clear Accept/Reject choice; until accepted, the
   underlying artifact in the DB is untouched. */
.pending-revision-card {
  background: var(--bg-card);
  border: 1px solid #FAE6B0;
  border-radius: 10px;
  /* `clip` instead of `hidden` so the sticky banner inside escapes the
     box and references the .thread-artifact-pane scroll context. */
  overflow: clip;
  box-shadow: 0 0 0 3px rgba(212, 163, 64, 0.10);
}
.pending-banner {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: rgba(255, 249, 237, 0.94);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid #FAE6B0;
}
.pending-banner-text {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: #5C4720;
  line-height: 1.4;
}
.pending-banner-text strong {
  color: #9A7520;
  font-weight: 700;
  margin-right: 8px;
}
.pending-banner-instr {
  color: var(--text-secondary);
  font-style: italic;
}
.pending-banner-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.diff-legend {
  display: flex;
  gap: 14px;
  padding: 8px 18px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-light);
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.2px;
}
.diff-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.swatch-add    { background: #DBF0E0; border: 1px solid #9CD2A8; }
.swatch-remove { background: #F8DDDF; border: 1px solid #E2A6A8; }

/* Diff blocks rendered inside the proposed-revision card. Same blocks are
   neutral (rendered as normal markdown). Adds get a soft green tint with
   a green left rail. Removes get a soft red tint, strikethrough text. */
.diff-block { padding: 0 6px; border-radius: 4px; margin: 2px 0; }
.diff-block.diff-same {
  /* Render normally — no visual distinction */
}
.diff-block.diff-add {
  background: rgba(70, 156, 90, 0.08);
  border-left: 3px solid #4BA15F;
  padding: 2px 12px;
}
.diff-block.diff-remove {
  background: rgba(180, 60, 70, 0.06);
  border-left: 3px solid #C25A65;
  padding: 2px 12px;
  color: var(--text-tertiary);
  text-decoration: line-through;
  text-decoration-color: rgba(180, 60, 70, 0.5);
}
.diff-block.diff-remove a,
.diff-block.diff-remove strong,
.diff-block.diff-remove em {
  color: inherit;
  text-decoration: line-through;
}

/* Amber pulse for the "Pending revision" header dot — same animation as
   the thinking pill so the workflow link reads visually. */
.working-artifact-label .dot.pending {
  background: #D4A340;
  animation: thinking-pulse 1.6s ease-in-out infinite;
}

/* ─── Knowledge Base: file uploads ────────────────────────────── */
.kb-dropzone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 28px 18px;
  text-align: center;
  background: var(--bg-card);
  margin-bottom: 18px;
  transition: border-color 0.15s, background 0.15s;
}
.kb-dropzone.dragging {
  border-color: var(--accent, #2E6B4F);
  background: rgba(46, 107, 79, 0.06);
}
.kb-dropzone-icon {
  font-size: 30px;
  margin-bottom: 6px;
  opacity: 0.7;
}
.kb-dropzone-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.kb-dropzone-sub {
  font-size: 12px;
  color: var(--text-tertiary);
}
.kb-dropzone-sub a {
  color: var(--accent, #2E6B4F);
  text-decoration: underline;
  font-weight: 500;
}
.kb-file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kb-file-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  align-items: center;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.kb-file-row:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.kb-file-row.uploading {
  opacity: 0.6;
  background: var(--bg-surface);
}
.kb-file-icon {
  font-size: 22px;
  text-align: center;
}
.kb-file-name {
  font-weight: 500;
  font-size: 13.5px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kb-file-meta {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.kb-file-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Search input above the dropzone */
.kb-search-row {
  margin: 4px 0 12px;
}
.kb-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 6px 12px;
  transition: border-color 0.12s;
}
.kb-search-box:focus-within {
  border-color: var(--accent, #2E6B4F);
  box-shadow: 0 0 0 3px rgba(46, 107, 79, 0.10);
}
.kb-search-icon {
  font-size: 14px;
  color: var(--text-tertiary);
}
.kb-search-box input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--text-primary);
}
.kb-search-clear {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  border-radius: 4px;
  line-height: 1;
}
.kb-search-clear:hover { color: var(--text-primary); background: var(--bg-surface); }

/* Tag cloud + chips */
.kb-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.kb-tag-chip {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 100px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.kb-tag-chip:hover {
  background: white;
  border-color: var(--border-light);
  color: var(--text-primary);
}
.kb-tag-chip.active {
  background: var(--accent, #2E6B4F);
  color: white;
}
.kb-tag-chip .count {
  font-size: 10.5px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.kb-tag-chip.active .count { opacity: 0.85; }

/* Active filter banner */
.kb-active-filter {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-surface);
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.kb-active-filter a {
  color: var(--accent, #2E6B4F);
  text-decoration: underline;
}

/* Per-row tags display + edit */
.kb-file-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  align-items: center;
}
.kb-file-tag {
  font-size: 10.5px;
  padding: 1px 7px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 100px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.kb-file-tag:hover {
  background: white;
  color: var(--accent, #2E6B4F);
}
.kb-file-tag-edit {
  font-size: 10.5px;
  padding: 1px 7px;
  background: transparent;
  border: 1px dashed var(--border-light);
  border-radius: 100px;
  color: var(--text-tertiary);
  cursor: pointer;
  font-family: inherit;
}
.kb-file-tag-edit:hover {
  color: var(--text-primary);
  border-style: solid;
}

/* "To build next" roadmap box on the Files tab. Collapsible callout that
   communicates the trajectory of file/knowledge features without dominating
   the page. Subtle warm-paper background sets it apart from the file list
   below; an amber accent strip on the left signals "in-progress / planned". */
.kb-roadmap-box {
  margin-bottom: 22px;
  background: #FAF6E9;
  border: 1px solid #E9DEC1;
  border-left: 3px solid #D4A340;
  border-radius: 10px;
  overflow: hidden;
}
.kb-roadmap-box > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.kb-roadmap-box > summary::-webkit-details-marker { display: none; }
.kb-roadmap-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.kb-roadmap-title {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #5C4720;
}
.kb-roadmap-sub {
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-style: italic;
}
.kb-roadmap-chevron {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-tertiary);
  transition: transform 0.15s;
}
.kb-roadmap-box[open] .kb-roadmap-chevron {
  transform: rotate(180deg);
}
.kb-roadmap-body {
  padding: 4px 18px 18px;
  border-top: 1px solid #E9DEC1;
  background: #FDFBF1;
}
.kb-roadmap-lead {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 14px 0 16px;
}
.kb-roadmap-item {
  padding: 8px 0;
  border-top: 1px dashed #EDE3CB;
}
.kb-roadmap-item:first-of-type { border-top: none; padding-top: 0; }
.kb-roadmap-item-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kb-roadmap-item-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
  padding-left: 22px;
}
.kb-roadmap-item-desc code {
  font-size: 11px;
  background: white;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid #E9DEC1;
}
.kb-roadmap-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 100px;
  background: var(--bg-surface);
  color: var(--text-tertiary);
}
.kb-roadmap-tag.next {
  background: #2E6B4F;
  color: white;
}

/* Extraction status pills (inline next to filename) */
.kb-extract-pill {
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 100px;
  background: var(--bg-surface);
  color: var(--text-tertiary);
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.kb-extract-pill.failed {
  background: #FAEAED;
  color: #A03040;
}

/* Working artifact label — quiet header above the rendered card. */
.working-artifact-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.working-artifact-label .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D4A340;
  box-shadow: 0 0 0 2px rgba(212, 163, 64, 0.18);
}

/* Inline thread-focus link — sits in the meta line. No pill background;
   just an accent-colored link with a subtle hover underline. The leading
   ✦ communicates "this is the skill that drives the thread" without
   needing a separate label. */
.thread-focus-inline {
  color: var(--accent, #2E6B4F);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s;
}
.thread-focus-inline:hover {
  border-bottom-color: var(--accent, #2E6B4F);
}
/* Inline mini-badge for the skill's aiClass (native/augmented). Smaller
   and less prominent than full .badge so it doesn't overpower the chip. */
.badge-mini {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 100px;
  line-height: 1.4;
  flex-shrink: 0;
}
.badge-mini-native    { background: #E3F2FD; color: #1565C0; }
.badge-mini-augmented { background: #F0EBF8; color: #6B4FA0; }

.thinking-pill .timer {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  color: #B8893E;
  letter-spacing: 0.2px;
  padding-left: 4px;
  border-left: 1px solid rgba(184, 137, 62, 0.25);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Pipeline step → skill detail link.
   The skill name on each pipeline step row is a link to the skill's
   description page. Default state is subtle (no underline) so it doesn't
   compete with the Run button; on hover the underline + accent color
   make the affordance obvious. The trailing ↗ glyph signals "opens a
   page" without adding a separate button. */
.pipeline-skill-link {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 3px;
  padding: 1px 2px;
  transition: color 0.12s;
}
.pipeline-skill-link:hover {
  color: var(--accent, #2E6B4F);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pipeline-skill-arrow {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 400;
  transition: color 0.12s, transform 0.12s;
  display: inline-block;
}
.pipeline-skill-link:hover .pipeline-skill-arrow {
  color: var(--accent, #2E6B4F);
  transform: translate(1px, -1px);
}
.thread-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.thread-title { font-weight: 600; font-size: 14px; }
.thread-preview {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.thread-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}
.thread-meta > span { display: flex; align-items: center; gap: 3px; }

/* ── Thread/chat detail ── */
.thread-detail {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: calc(100vh - 80px);
  gap: 0;
}
.thread-messages {
  overflow-y: auto;
  padding: 20px 0;
}
.chat-message {
  margin-bottom: 18px;
}
.chat-message.user .bubble {
  background: var(--text-primary);
  color: white;
  padding: 10px 14px;
  border-radius: 12px 12px 2px 12px;
  display: inline-block;
  max-width: 700px;        /* user bubbles are short; cap so they don't sprawl */
  float: right;
  font-size: 13.5px;
}
.chat-message.user::after { content: ''; display: block; clear: both; }
.chat-message.agent .bubble {
  background: var(--bg-card);
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
}
.chat-message-author {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.feed-strip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0;
}
.feed-step {
  padding: 6px 10px;
  background: var(--bg-surface);
  border-left: 3px solid var(--text-tertiary);
  border-radius: 4px;
  font-size: 11.5px;
  color: var(--text-secondary);
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.feed-step.tool  { border-left-color: var(--accent-blue); }
.feed-step.result { border-left-color: var(--accent); }

/* Chat input bar */
.chat-input-bar {
  border-top: 1px solid var(--border-light);
  padding: 12px 0;
  background: var(--bg);
  position: sticky;
  bottom: 0;
}
.chat-input {
  display: flex;
  gap: 8px;
  background: var(--bg-card);
  padding: 4px 4px 4px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  align-items: center;
}
.chat-input input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  padding: 8px 0;
}

/* ── Artifact cards ── */
.artifact-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.artifact-card:hover { box-shadow: var(--shadow-sm); }
.artifact-type-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.artifact-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 8px;
}
.artifact-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pin-icon { color: #D4A340; }

/* ── Phase jump bar (Skill library quick-links) ── */
.phase-jump-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}
.phase-jump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--phase-bg);
  color: var(--phase-color);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.005em;
  border: 1.5px solid transparent;
  transition: transform 0.1s, border-color 0.15s, box-shadow 0.15s;
}
.phase-jump:hover {
  transform: translateY(-1px);
  border-color: var(--phase-color);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.phase-jump.disabled {
  opacity: 0.4;
  filter: grayscale(0.4);
  cursor: default;
}
.phase-jump.disabled:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}
.phase-jump-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
}
.phase-jump-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13.5px;
}
.phase-jump-count {
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(255,255,255,0.7);
  color: var(--phase-color);
  padding: 1px 7px;
  border-radius: 100px;
  font-variant-numeric: tabular-nums;
}

/* ── Citation chips (inline in dossier markdown) ── */
.citation {
  display: inline-block;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 1px 6px;
  border-radius: 4px;
  text-decoration: none;
  margin: 0 1px;
  vertical-align: 1px;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 0.1s, box-shadow 0.1s;
  cursor: pointer;
}
.citation:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.citation-pmid     { background: #E3F2FD; color: #0D47A1; border-color: #BBDEFB; }
.citation-uniprot  { background: #F3E5F5; color: #4A148C; border-color: #E1BEE7; }
.citation-chembl   { background: #FFF3E0; color: #BF360C; border-color: #FFE0B2; }
.citation-ot       { background: #E8F3ED; color: #1B5E20; border-color: #C8E6C9; }
.citation-otd      { background: #E8F3ED; color: #1B5E20; border-color: #C8E6C9; }
.citation-gwas     { background: #FFF8E1; color: #856404; border-color: #FFE082; }
.citation-missing  { background: #F0EDE6; color: #8E8D87; border-color: var(--border); cursor: help; }

/* ── Citation hover popover ── */
#citation-popover {
  position: fixed;
  z-index: 1000;
  max-width: 360px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08);
  font-size: 12.5px;
  line-height: 1.5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}
#citation-popover.visible { opacity: 1; }
#citation-popover .pop-type {
  display: inline-block;
  font-family: 'SF Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-surface);
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
#citation-popover .pop-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.35;
}
#citation-popover .pop-snippet {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
#citation-popover .pop-link {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 8px;
  border-top: 1px solid var(--border-light);
  padding-top: 6px;
  font-family: 'SF Mono', monospace;
  word-break: break-all;
}

/* ── Example prompts (tool detail page) ── */
/* Single card containing all prompts as rows separated by hairline borders. */
.example-prompt-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  background: transparent;
  transition: background 0.1s;
}
.example-prompt-row:hover {
  background: var(--bg-surface);
}

/* ── Evidence source cards (skill detail page) ── */
.evidence-source {
  background: var(--bg-card);
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  border-left-width: 3px;
  transition: box-shadow 0.15s, transform 0.15s;
}
.evidence-source:hover {
  box-shadow: var(--shadow-sm);
  transform: translateX(1px);
}

/* ── Sidebar bottom area (switcher + user pinned) ── */
.sidebar-bottom {
  margin-top: auto;
  flex-shrink: 0;
}

/* ── Project switcher dropdown ── */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Skill body rendering ── */
.skill-body-rendered .rendered-view h1 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  margin-top: 4px;
}
.skill-body-rendered .rendered-view h2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--accent);
  margin: 24px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
}
.skill-body-rendered .rendered-view h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 18px 0 8px;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.skill-body-rendered .rendered-view p {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.skill-body-rendered .rendered-view strong { color: var(--text-primary); font-weight: 600; }
.skill-body-rendered .rendered-view ul, .skill-body-rendered .rendered-view ol {
  margin: 6px 0 12px 20px;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.7;
}
.skill-body-rendered .rendered-view li { margin-bottom: 3px; }
.skill-body-rendered .rendered-view li::marker { color: var(--text-tertiary); }
.skill-body-rendered .rendered-view code {
  background: var(--bg-surface);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11.5px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--text-primary);
}
.skill-body-rendered .rendered-view pre {
  background: var(--bg-surface);
  padding: 12px 14px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 10px 0;
  font-size: 11.5px;
  line-height: 1.55;
  border: 1px solid var(--border-light);
}
.skill-body-rendered .rendered-view pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
  color: var(--text-secondary);
}
.skill-body-rendered .rendered-view table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
  margin: 10px 0;
}
.skill-body-rendered .rendered-view th, .skill-body-rendered .rendered-view td {
  border: 1px solid var(--border-light);
  padding: 6px 10px;
  text-align: left;
}
.skill-body-rendered .rendered-view th { background: var(--bg-surface); font-weight: 600; font-size: 11.5px; }
.skill-body-rendered .rendered-view blockquote {
  border-left: 3px solid var(--border);
  padding-left: 14px;
  margin: 10px 0;
  color: var(--text-tertiary);
  font-style: italic;
  font-size: 13px;
}
.skill-body-rendered .rendered-view hr {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 20px 0;
}

/* The tab buttons inside the skill detail use .tab class — override for inline context */
.skill-body-rendered + * { margin-top: 0; }

/* ── Empty states ── */
.empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-secondary);
}
.empty-icon {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.3;
}
.empty-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.empty-sub {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 360px;
  margin: 0 auto;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .page { padding: 20px; }
  .page-title { font-size: 22px; }
}