/* DiscussionsPage — page-specific styles (disc- prefix) */

/* ── Layout shell ─────────────────────────────────────── */
.disc-root {
  display: flex;
  height: calc(100vh - 56px);
  margin: -24px -20px;
  overflow: hidden;
}

/* ── Sidebar ──────────────────────────────────────────── */
.disc-sidebar {
  width: 280px;
  border-right: 1px solid var(--kr-border);
  background: var(--kr-bg-raised);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.disc-sidebar[data-mobile="true"] {
  position: fixed;
  inset: 0;
  z-index: var(--kr-z-modal);
  width: 100%;
  background: var(--kr-bg-surface);
}

/* ── Collapsed rail (desktop only) ───────────────────── */
.disc-sidebar-rail {
  width: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 16px;
  border-right: 1px solid var(--kr-border);
  background: var(--kr-bg-raised);
  cursor: pointer;
  color: var(--kr-text-tertiary);
  transition: background 0.15s, color 0.15s;
}
.disc-sidebar-rail:hover {
  background: var(--kr-bg-surface);
  color: var(--kr-text-primary);
}

.disc-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--kr-border-light);
}

.disc-sidebar-header-title {
  font-weight: 600;
  font-size: var(--kr-fs-md);
}

.disc-sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
}

.disc-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--kr-sp-4) 0;
}

/* ── Search filter ────────────────────────────────────── */
.disc-search-wrap {
  padding: 6px 14px 2px;
  border-bottom: 1px solid var(--kr-border-ghost);
}

.disc-search-box {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
  padding: 5px var(--kr-sp-4);
  border-radius: var(--kr-r-md);
  background: var(--kr-bg-hover);
  border: 1px solid var(--kr-border-light);
}

.disc-search-icon {
  color: var(--kr-text-ghost);
  flex-shrink: 0;
}

.disc-search-input {
  background: none;
  border: none;
  outline: none;
  color: var(--kr-text-primary);
  font-size: var(--kr-fs-sm);
  font-family: inherit;
  width: 100%;
  padding: 0;
}

.disc-search-clear {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--kr-text-dim);
  display: flex;
}

/* ── Project / group headers ──────────────────────────── */
.disc-group-header {
  font-size: var(--kr-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kr-accent-text);
  padding: 14px 14px 6px;
  margin-top: 4px;
  border-top: 1px solid var(--kr-border-ghost);
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
}

.disc-group-header[data-no-border="true"] {
  border-top: none;
}

.disc-group-btn {
  font-size: var(--kr-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kr-accent-text);
  padding: 14px 14px 6px;
  margin-top: 4px;
  border-top: 1px solid var(--kr-border-ghost);
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
  cursor: pointer;
  user-select: none;
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  font-family: inherit;
  color: inherit;
  text-align: left;
}

.disc-group-btn[data-no-border="true"] {
  border-top: none;
}

.disc-group-btn[data-variant="archive"] {
  color: var(--kr-text-tertiary);
}

/* Batch group header — slightly accented so the user immediately notices
   it's a group, not a regular discussion item. */
.disc-group-btn[data-variant="batch"] {
  color: var(--kr-accent);
  font-weight: 600;
  border-top: 1px solid rgba(var(--kr-accent-rgb), 0.08);
}

.disc-group-count {
  font-weight: 400;
  opacity: 0.5;
  margin-left: auto;
}

/* Relative timestamp shown next to the batch group label — disambiguates
   multiple batches of the same Quick Prompt (e.g. cron firing hourly).
   Kept light-weight visually so it doesn't steal attention from the status pill. */
.disc-batch-when {
  font-size: 0.85em;
  font-weight: 400;
  color: var(--kr-text-ghost);
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

/* Batch group header — flex row holding the toggle button + the trash icon.
   The trash stays hidden until the user hovers the row, so it doesn't add
   visual noise on every batch in a long list. */
.disc-batch-header {
  display: flex;
  align-items: center;
  gap: 4px;
}

.disc-batch-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 1px solid rgba(var(--kr-error-rgb), 0.2);
  border-radius: 6px;
  color: rgba(var(--kr-error-rgb), 0.5);
  cursor: pointer;
  /* Discreet by default on desktop, but visible enough that a hover or focus
     reveal isn't strictly needed. Was opacity:0 + hover-reveal — that broke
     touch devices entirely. Now: 35% always, 100% on hover/focus. */
  opacity: 0.35;
  transition: opacity 0.12s, background 0.12s, border-color 0.12s, color 0.12s;
}

.disc-batch-header:hover .disc-batch-delete,
.disc-batch-header:focus-within .disc-batch-delete,
.disc-batch-delete:focus {
  opacity: 1;
}

.disc-batch-delete:hover {
  background: rgba(var(--kr-error-rgb), 0.12);
  border-color: rgba(var(--kr-error-rgb), 0.5);
  color: var(--kr-error);
}

/* ── Retry batch button — same shape as delete, accent-coloured ─── */
.disc-batch-retry {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 13px;
  line-height: 1;
  background: transparent;
  border: 1px solid rgba(var(--kr-accent-rgb), 0.2);
  border-radius: 6px;
  color: rgba(var(--kr-accent-rgb), 0.55);
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.12s, background 0.12s, border-color 0.12s, color 0.12s;
}

.disc-batch-header:hover .disc-batch-retry,
.disc-batch-header:focus-within .disc-batch-retry,
.disc-batch-retry:focus {
  opacity: 1;
}

.disc-batch-retry:hover {
  background: rgba(var(--kr-accent-rgb), 0.12);
  border-color: rgba(var(--kr-accent-rgb), 0.5);
  color: var(--kr-accent);
}

/* Touch devices have no hover state — keep the icon visible so users can
   tap it. The 35% default already does this on desktop too, so this is
   mostly a safety net for explicit touch detection. */
@media (hover: none) {
  .disc-batch-delete {
    opacity: 0.6;
  }
}

/* Clickable pastille linking a batch group back to its spawning workflow run.
   Lives on its own row under the batch folder header so users notice it
   without it stealing focus from the folder's status pill. */
.disc-batch-parent-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  margin-top: 2px;
  margin-bottom: 4px;
  background: rgba(var(--kr-accent-rgb), 0.06);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.18);
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(var(--kr-accent-rgb), 0.75);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.disc-batch-parent-pill:hover {
  background: rgba(var(--kr-accent-rgb), 0.14);
  border-color: rgba(var(--kr-accent-rgb), 0.38);
  color: var(--kr-accent-ink);
}

/* Live status pill on the batch group header (⏳ 7/12, ✓ 12/12). */
.disc-group-count[data-batch-status="running"] {
  color: var(--kr-warning);
  opacity: 1;
  font-variant-numeric: tabular-nums;
}
.disc-group-count[data-batch-status="done"] {
  color: var(--kr-success);
  opacity: 1;
  font-variant-numeric: tabular-nums;
}

/* Batch children wrapper — tree-view indent + left border so the
   contained discussions visually read as "inside" the 📦 group,
   not as siblings of the loose discussions below. */
.disc-batch-wrap {
  margin-bottom: 4px;
}
.disc-batch-children {
  margin-left: 24px;
  padding-left: 8px;
  border-left: 2px solid rgba(var(--kr-accent-rgb), 0.12);
  /* Slight breathing room so the tree-line doesn't touch the items. */
  padding-top: 2px;
  padding-bottom: 4px;
  /* Subtle background tint for the batch area — optional but helps the
     eye notice the boundary at a glance. */
  background: rgba(var(--kr-accent-rgb), 0.015);
  border-radius: 0 0 var(--kr-r-sm) 0;
}

.disc-chevron {
  transition: transform 0.15s;
}

.disc-chevron[data-expanded="true"] {
  transform: rotate(90deg);
}

/* ── Org group header ─────────────────────────────────── */
.disc-org-header {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
  padding: 6px 12px;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--kr-border-ghost);
  font-family: inherit;
  cursor: pointer;
  font-size: var(--kr-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  user-select: none;
}

/* ── Swipeable discussion item ────────────────────────── */
/* `content-visibility: auto` lets the browser skip layout/paint for
 * off-screen disc rows. With 500+ discussions in the sidebar this
 * cuts initial render and scroll cost dramatically (Chromium / Firefox
 * implement it; Safari falls back to default rendering). The `contain-
 * intrinsic-size` hint keeps the scrollbar height stable so the user
 * doesn't see jumpy scroll position on first visit. Must match the
 * actual rendered height (~52 px for `.disc-item` with title + meta). */
.disc-swipe-wrap {
  position: relative;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto 52px;
}

.disc-swipe-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.disc-swipe-label {
  font-size: var(--kr-fs-sm);
  font-weight: 700;
  color: var(--kr-text-on-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.disc-item {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-4);
  width: 100%;
  padding: 8px 14px 8px 22px;
  border: none;
  border-left: 2px solid transparent;
  color: var(--kr-text-tertiary);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  touch-action: pan-y;
  user-select: none;
  position: relative;
  z-index: 1;
  background: var(--kr-bg-raised);
}

.disc-item[data-active="true"] {
  background: rgba(var(--kr-accent-rgb), 0.18);
  border-left-color: var(--kr-accent);
  color: var(--kr-text-primary);
  font-weight: 500;
}

.disc-item-content {
  flex: 1;
  min-width: 0;
}

.disc-item-title {
  font-size: var(--kr-fs-base);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  /* The title TEXT truncates, but the badge + pin star must NOT clip.
     We use a nested <span> for the text (see below) and keep the flex
     row itself overflow-visible so pills/icons stay fully rendered. */
  min-width: 0; /* allow flex child to shrink */
}

.disc-item-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.disc-item-meta {
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ⏹ Stop button inline on a disc that's currently Running. Appears next
   to the spinner in the meta row. Compact so it fits without stealing
   focus from the title. */
.disc-item-stop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(var(--kr-error-rgb), 0.35);
  border-radius: 3px;
  color: var(--kr-error);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.disc-item-stop-btn:hover {
  background: rgba(var(--kr-error-rgb), 0.15);
  border-color: rgba(var(--kr-error-rgb), 0.6);
}

/* Relative time in the sidebar meta row — slightly dimmer so it doesn't
   compete with the message count, and italic to read as metadata. */
.disc-item-relative-time {
  color: var(--kr-text-tertiary);
  font-style: italic;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Pin/star button in the chat header — always visible, toggles on click.
   Outline star when not pinned, filled yellow when pinned. */
.disc-pin-header-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--kr-r-sm);
  transition: background 0.15s;
}
.disc-pin-header-btn:hover {
  background: rgba(var(--kr-warning-rgb), 0.12);
}

/* ── QP chain picker (visible during streaming) ─────────── */
.disc-chain-qp-btn {
  background: rgba(var(--kr-accent-rgb), 0.1);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.3);
  border-radius: var(--kr-r-md);
  color: var(--kr-accent);
  cursor: pointer;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  transition: background 0.15s;
}
.disc-chain-qp-btn:hover {
  background: rgba(var(--kr-accent-rgb), 0.2);
}

/* Popover: anchored above + right of the ⚡ trigger. `disc-mention-popover`
   used to double as the container, but its styles (light-text-on-dark +
   no hover feedback) left items visually flat — and, because
   `.disc-mention-item` has no `:hover`, hovering gave zero affordance, so
   a hovered name on a sibling bright element could read as "white on
   white". Dedicated classes below fix layout, contrast, and hover. */
.disc-qp-picker {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  left: auto;
  min-width: 280px;
  max-width: 360px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--kr-bg-elevated);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.25);
  border-radius: var(--kr-r-md);
  box-shadow: var(--kr-shadow-lg);
  padding: 4px;
  z-index: 10;
}
.disc-qp-picker-header {
  padding: 6px 10px 4px;
  font-size: var(--kr-fs-2xs);
  font-weight: 600;
  color: var(--kr-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--kr-border-light);
  margin-bottom: 4px;
}
.disc-qp-picker-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--kr-r-sm);
  background: transparent;
  color: var(--kr-text-primary);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.12s;
}
.disc-qp-picker-item:hover,
.disc-qp-picker-item:focus-visible {
  background: rgba(var(--kr-accent-rgb), 0.14);
  outline: none;
}
.disc-qp-picker-icon {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.2;
  width: 20px;
  text-align: center;
}
.disc-qp-picker-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.disc-qp-picker-name {
  font-weight: 600;
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.disc-qp-picker-desc {
  font-size: var(--kr-fs-2xs);
  color: var(--kr-text-tertiary);
  line-height: 1.35;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Badge for the currently queued QP — click to cancel. */
.disc-queued-qp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--kr-r-sm);
  background: rgba(var(--kr-accent-rgb), 0.12);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.35);
  color: var(--kr-accent);
  font-size: var(--kr-fs-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  animation: disc-queued-pulse 1.5s ease-in-out infinite;
}
.disc-queued-qp-badge:hover {
  background: rgba(var(--kr-error-rgb), 0.15);
  border-color: rgba(var(--kr-error-rgb), 0.4);
  color: var(--kr-error-soft);
}

@keyframes disc-queued-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--kr-accent-rgb), 0.3); }
  50%  { box-shadow: 0 0 0 3px rgba(var(--kr-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--kr-accent-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .disc-queued-qp-badge { animation: none; }
}

.disc-unseen-badge {
  background: var(--kr-accent);
  color: var(--kr-bg-base);
  font-size: 8px;
  font-weight: 800;
  border-radius: 6px;
  padding: 1px 5px;
  min-width: 14px;
  text-align: center;
  flex-shrink: 0;
}

/* Unseen badge on collapsed GROUP headers — same accent pill style as the
   per-discussion badge above but positioned after the count. Lets users
   spot "which group has unread messages" without expanding everything. */
.disc-group-unseen {
  background: var(--kr-accent);
  color: var(--kr-bg-base);
  font-size: 8px;
  font-weight: 800;
  border-radius: 6px;
  padding: 1px 5px;
  min-width: 14px;
  text-align: center;
  flex-shrink: 0;
  margin-left: 4px;
  animation: disc-group-unseen-pulse 2s ease-in-out 1;
}

@keyframes disc-group-unseen-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--kr-accent-rgb), 0.5); }
  50%  { box-shadow: 0 0 0 4px rgba(var(--kr-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--kr-accent-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .disc-group-unseen { animation: none; }
}

/* ── Contacts ─────────────────────────────────────────── */
.disc-contacts-meta {
  font-weight: 400;
  opacity: 0.5;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.disc-contact-add-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--kr-text-tertiary);
  padding: 0;
  display: flex;
  align-items: center;
}

.disc-contact-add-form {
  padding: 4px 14px 8px 28px;
  display: flex;
  gap: 4px;
}

.disc-contact-add-input {
  flex: 1;
  background: var(--kr-bg-hover);
  border: 1px solid var(--kr-border-medium);
  border-radius: var(--kr-r-sm);
  padding: 4px 8px;
  color: var(--kr-text-on-dark);
  font-size: var(--kr-fs-sm);
  outline: none;
  font-family: monospace;
}

.disc-contact-add-submit {
  background: rgba(var(--kr-accent-rgb), 0.1);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.2);
  border-radius: var(--kr-r-sm);
  color: var(--kr-accent);
  cursor: pointer;
  padding: 4px 8px;
  font-size: var(--kr-fs-sm);
}

.disc-contact-row {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-4);
  padding: 6px 14px 6px 28px;
  font-size: var(--kr-fs-base);
  color: var(--kr-text-secondary);
  cursor: default;
}

.disc-contact-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--kr-bg-selected);
}

.disc-contact-dot[data-online="true"] {
  background: var(--kr-success);
  box-shadow: 0 0 4px rgba(var(--kr-success-rgb), 0.4);
}

.disc-ws-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.disc-ws-dot[data-connected="true"] {
  background: var(--kr-success);
}

.disc-ws-dot[data-connected="false"] {
  background: var(--kr-error-soft);
}

.disc-contact-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.disc-contact-initials {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(var(--kr-accent-rgb), 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 700;
  color: var(--kr-accent);
  flex-shrink: 0;
}

.disc-contact-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.disc-contact-pending {
  font-size: var(--kr-fs-2xs);
  color: var(--kr-warning);
  padding: 1px 5px;
  border-radius: var(--kr-r-xs);
  background: rgba(var(--kr-warning-rgb), 0.1);
}

.disc-contact-offline {
  font-size: var(--kr-fs-2xs);
  color: var(--kr-text-ghost);
}

.disc-contact-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--kr-text-ghost);
  padding: 0;
  display: flex;
  align-items: center;
}

/* ── Empty state ──────────────────────────────────────── */
.disc-empty {
  padding: var(--kr-sp-10);
  text-align: center;
  color: var(--kr-text-faint);
  font-size: var(--kr-fs-base);
  white-space: pre-line;
}

/* ── Chat area ────────────────────────────────────────── */
.disc-chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--kr-bg-base);
  /* Positioning context for the floating "↓ New content" pill which
     appears when the user is scrolled up while new content arrives. */
  position: relative;
}

.disc-chat-header {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-6);
  padding: 14px 20px;
  border-bottom: 1px solid var(--kr-border);
  background: var(--kr-bg-surface);
  flex-shrink: 0;
}

.disc-chat-header-info {
  flex: 1;
}

.disc-chat-header-title {
  font-weight: 600;
  font-size: var(--kr-fs-lg);
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
}

/* Introspection-tools call counter pill — sits in the title row, blue
 * tint to distinguish it from the orange/yellow "active task" badges. */
.disc-introspection-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--kr-fs-xs);
  font-weight: 600;
  background: rgba(var(--kr-info-rgb), 0.12);
  color: var(--kr-info);
  border: 1px solid rgba(var(--kr-info-rgb), 0.25);
  flex-shrink: 0;
  cursor: help;
}

/* 0.8.5 — short disc-id pill in ChatHeader. Click → copy full UUID
 * to clipboard. Neutral ghost colour so it doesn't compete with the
 * introspection pill or title — but mono font for the id readability. */
.disc-id-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--kr-font-mono, ui-monospace, monospace);
  font-weight: 500;
  background: var(--kr-bg-subtle);
  color: var(--kr-text-ghost);
  border: 1px solid var(--kr-border-ghost);
  flex-shrink: 0;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.disc-id-pill:hover {
  color: var(--kr-text-primary);
  border-color: var(--kr-accent-border);
  background: var(--kr-accent-bg);
}
.disc-id-pill:focus-visible {
  outline: 2px solid var(--kr-accent);
  outline-offset: 1px;
}

/* Inline notice rendered under a popover section when the active
 * agent doesn't support a feature surfaced by that section (e.g. the
 * summary-strategy section warns Vibe / Ollama users that the
 * introspection tools won't fire). Subtle warning tint, not a hard
 * block — the user can still pick the option, they just see what
 * they're trading off. */
.disc-popover-note {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: var(--kr-r-sm);
  font-size: var(--kr-fs-xs);
  line-height: 1.35;
  background: rgba(var(--kr-warning-rgb), 0.10);
  color: var(--kr-warning);
  border: 1px solid rgba(var(--kr-warning-rgb), 0.25);
}

.disc-chat-header-sub {
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-secondary);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.disc-chat-header-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.disc-title-input {
  background: var(--kr-bg-hover-strong);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.3);
  border-radius: var(--kr-r-sm);
  padding: 2px 6px;
  color: var(--kr-text-primary);
  font-size: var(--kr-fs-lg);
  font-weight: 600;
  font-family: inherit;
  width: 260px;
}

/* ── Agent switch popover ─────────────────────────────── */
.disc-agent-switch-btn {
  background: none;
  border: none;
  padding: 1px 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--kr-fs-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.disc-agent-switch-btn:disabled {
  cursor: default;
  opacity: 0.5;
}

.disc-agent-switch-popover {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  z-index: 20;
  background: var(--kr-bg-input);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.2);
  border-radius: var(--kr-r-lg);
  overflow: hidden;
  box-shadow: var(--kr-shadow-lg);
  min-width: 160px;
}

.disc-agent-switch-item {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-4);
  width: 100%;
  padding: 8px 12px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--kr-fs-sm);
  text-align: left;
}

.disc-agent-switch-item[data-current="true"] {
  background: rgba(var(--kr-accent-rgb), 0.08);
  color: var(--kr-accent);
  opacity: 0.5;
}

.disc-agent-switch-item[data-current="false"] {
  background: transparent;
  color: var(--kr-text-primary);
}

/* ── Worktree badge ───────────────────────────────────── */
.disc-worktree-badge {
  font-size: var(--kr-fs-xs);
  padding: 1px 6px;
  border-radius: var(--kr-r-md);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.disc-worktree-badge[data-locked="true"] {
  background: rgba(var(--kr-info-rgb), 0.1);
  color: var(--kr-info);
  border: 1px solid rgba(var(--kr-info-rgb), 0.2);
}

.disc-worktree-badge[data-locked="false"] {
  background: rgba(var(--kr-warning-rgb), 0.1);
  color: var(--kr-warning-soft);
  border: 1px solid rgba(var(--kr-warning-rgb), 0.2);
}

.disc-worktree-lock-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  opacity: 0.7;
}

/* ── Profile / skill / directive badges in header ─────── */
.disc-header-profile-badge {
  font-size: var(--kr-fs-xs);
  padding: 1px 6px;
  border-radius: var(--kr-r-lg);
}

.disc-header-skill-badge {
  padding: 1px 7px;
  border-radius: var(--kr-r-lg);
  font-size: var(--kr-fs-2xs);
  font-weight: 600;
  background: rgba(var(--kr-accent-rgb), 0.08);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.2);
  color: rgba(var(--kr-accent-rgb), 0.7);
}

.disc-header-directive-badge {
  font-size: var(--kr-fs-2xs);
  padding: 1px 6px;
  border-radius: var(--kr-r-md);
  background: rgba(var(--kr-warning-amber-rgb), 0.08);
  color: rgba(var(--kr-warning-amber-rgb), 0.6);
  border: 1px solid rgba(var(--kr-warning-amber-rgb), 0.15);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.disc-separator {
  color: var(--kr-text-ghost);
}

/* ── Clickable header badges — inline info popover ─────
 *
 * Each profile/skill/directive badge is wrapped in `.disc-badge-wrap`
 * (position: relative) so the popover can anchor to it with
 * position: absolute. Clicking the badge toggles the popover.
 * Click-outside and Escape close it (handled in ChatHeader.tsx).
 */
.disc-badge-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.disc-header-profile-badge,
.disc-header-skill-badge,
.disc-header-directive-badge {
  /* these elements are now <button> — reset default browser styling */
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.disc-header-profile-badge:hover,
.disc-header-skill-badge:hover,
.disc-header-directive-badge:hover {
  filter: brightness(1.2);
}

.disc-badge-info-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--kr-z-sticky);
  min-width: 280px;
  max-width: 380px;
  padding: 12px 14px;
  background: var(--kr-bg-surface);
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-r-md);
  box-shadow: var(--kr-shadow-popover);
  color: var(--kr-text-primary);
  font-size: var(--kr-fs-sm);
  /* Prevent the popover from being clipped by disc-chat-header overflow. */
  pointer-events: auto;
  white-space: normal;
  line-height: 1.45;
}
.disc-badge-info-header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.disc-badge-info-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--kr-bg-hover-strong);
  font-size: 16px;
  flex-shrink: 0;
}
.disc-badge-info-title {
  font-weight: 600;
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-primary);
}
.disc-badge-info-subtitle {
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-tertiary);
  margin-top: 2px;
}
.disc-badge-info-kind {
  font-size: var(--kr-fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--kr-text-tertiary);
  margin-bottom: 6px;
  font-weight: 600;
}
.disc-badge-info-body {
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-secondary);
  line-height: 1.5;
  max-height: 180px;
  overflow-y: auto;
  padding: 8px;
  background: var(--kr-bg-hover);
  border-radius: var(--kr-r-sm);
  border: 1px solid var(--kr-border-ghost);
}
.disc-badge-info-footer {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--kr-fs-2xs);
  color: var(--kr-text-tertiary);
}
.disc-badge-info-pill {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(var(--kr-accent-rgb), 0.08);
  color: rgba(var(--kr-accent-rgb), 0.7);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.2);
  font-weight: 600;
}

/* ── MCP popover ──────────────────────────────────────── */
.disc-mcp-popover {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  z-index: var(--kr-z-modal);
  background: var(--kr-bg-elevated);
  border: 1px solid rgba(var(--kr-cyan-rgb), 0.2);
  border-radius: var(--kr-r-lg);
  padding: 8px 0;
  min-width: 220px;
  box-shadow: var(--kr-shadow-lg);
}

.disc-mcp-header {
  padding: 4px 12px 6px;
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-faint);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.disc-mcp-header-count {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

.disc-mcp-search-wrap {
  padding: 0 8px 6px;
}

.disc-mcp-search {
  width: 100%;
  padding: 4px 8px;
  font-size: var(--kr-fs-sm);
  background: var(--kr-bg-hover-strong);
  border: 1px solid var(--kr-border-medium);
  border-radius: var(--kr-r-sm);
  color: var(--kr-text-primary);
  outline: none;
  box-sizing: border-box;
}

.disc-mcp-api-notice {
  padding: 3px 12px 6px;
  font-size: var(--kr-fs-xs);
  color: var(--kr-warning-amber);
  display: flex;
  align-items: center;
  gap: 4px;
}

.disc-mcp-list {
  max-height: 200px;
  overflow-y: auto;
}

.disc-mcp-item {
  padding: 3px 12px;
  font-size: var(--kr-fs-sm);
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
}

.disc-mcp-item-name {
  font-size: var(--kr-fs-2xs);
  color: var(--kr-text-ghost);
  margin-left: auto;
}

.disc-mcp-incompatible {
  font-size: 8px;
  color: var(--kr-error);
  font-style: italic;
}

.disc-mcp-empty {
  padding: 4px 12px;
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-muted);
}

/* ── Profile editor popover ───────────────────────────── */
.disc-profile-popover {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  z-index: var(--kr-z-modal);
  background: var(--kr-bg-elevated);
  border: 1px solid rgba(var(--kr-purple-rgb), 0.2);
  border-radius: var(--kr-r-lg);
  padding: 10px;
  min-width: 240px;
  max-width: 320px;
  box-shadow: var(--kr-shadow-lg);
}

.disc-popover-section {
  margin-bottom: var(--kr-sp-4);
}

.disc-popover-label {
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-faint);
  font-weight: 600;
  margin-bottom: 4px;
}

.disc-popover-select {
  width: 100%;
  padding: 4px 6px;
  border-radius: var(--kr-r-md);
  font-size: var(--kr-fs-sm);
  font-family: inherit;
  background: var(--kr-bg-input);
  border: 1px solid var(--kr-border-medium);
  color: var(--kr-text-primary);
}

/* ── Toggle pill (profile/skill/directive/tier in popovers) */
.disc-toggle-pill {
  padding: 2px 7px;
  border-radius: var(--kr-r-lg);
  font-size: var(--kr-fs-xs);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s;
}

.disc-toggle-pill[data-active="true"][data-color="accent"] {
  border: 1px solid rgba(var(--kr-accent-rgb), 0.3);
  background: rgba(var(--kr-accent-rgb), 0.08);
  color: var(--kr-accent);
}

.disc-toggle-pill[data-active="false"][data-color="accent"] {
  border: 1px solid var(--kr-border);
  background: transparent;
  color: var(--kr-text-muted);
}

.disc-toggle-pill[data-active="true"][data-color="warning"] {
  border: 1px solid rgba(var(--kr-warning-amber-rgb), 0.3);
  background: rgba(var(--kr-warning-amber-rgb), 0.08);
  color: var(--kr-warning-soft);
}

.disc-toggle-pill[data-active="false"][data-color="warning"] {
  border: 1px solid var(--kr-border);
  background: transparent;
  color: var(--kr-text-muted);
}

.disc-toggle-pill[data-active="true"][data-color="purple"] {
  border: 1px solid rgba(var(--kr-purple-rgb), 0.4);
  background: rgba(var(--kr-purple-rgb), 0.1);
  color: var(--kr-purple-soft);
}

.disc-toggle-pill[data-active="false"][data-color="purple"] {
  border: 1px solid var(--kr-border);
  background: transparent;
  color: var(--kr-text-muted);
}

/* tier pills (active only — depends on tier value) */
.disc-toggle-pill[data-active="true"][data-tier="economy"] {
  border: 1px solid var(--kr-border-heavy);
  background: var(--kr-bg-hover-strong);
  color: var(--kr-success);
}

.disc-toggle-pill[data-active="true"][data-tier="default"] {
  border: 1px solid var(--kr-border-heavy);
  background: var(--kr-bg-hover-strong);
  color: var(--kr-text-primary);
}

.disc-toggle-pill[data-active="true"][data-tier="reasoning"] {
  border: 1px solid var(--kr-border-heavy);
  background: var(--kr-bg-hover-strong);
  color: var(--kr-warning-amber);
}

.disc-toggle-pill[data-active="false"][data-tier] {
  border: 1px solid var(--kr-border);
  background: transparent;
  color: var(--kr-text-muted);
}

/* ── Agent notice banners (Vibe, Kiro) ────────────────── */
.disc-agent-notice {
  padding: 6px 16px;
  font-size: var(--kr-fs-xs);
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
}

.disc-agent-notice[data-agent="Vibe"] {
  color: rgba(var(--kr-warning-amber-rgb), 0.8);
  background: rgba(var(--kr-warning-amber-rgb), 0.06);
  border-bottom: 1px solid rgba(var(--kr-warning-amber-rgb), 0.12);
}

.disc-agent-notice[data-agent="Kiro"] {
  color: rgba(var(--kr-purple-rgb), 0.6);
  background: rgba(var(--kr-purple-rgb), 0.04);
  border-bottom: 1px solid rgba(var(--kr-purple-rgb), 0.08);
}

.disc-agent-notice a {
  color: rgba(var(--kr-purple-rgb), 0.8);
  text-decoration: underline;
}

/* ── Messages area ────────────────────────────────────── */
.disc-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 10px;
}

/* Streaming chunk renderer — uses MarkdownContent so headings/code/tables
   appear progressively, not just at the end of the stream. */
.disc-streaming-md {
  font-size: var(--kr-fs-sm);
  line-height: 1.5;
}

/* Floating jump-to-bottom pill shown when the user has scrolled up while
   new content is arriving. Positioned over the messages container, just
   above the ChatInput. */
.disc-jump-to-bottom {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: var(--kr-accent);
  color: var(--kr-bg-base);
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: var(--kr-fs-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--kr-shadow-md);
  transition: transform 0.15s, box-shadow 0.15s;
}
.disc-jump-to-bottom:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: var(--kr-shadow-md);
}

/* ── Persistent scroll-top / scroll-bottom arrows ─────────
 * Vertical stack in the bottom-right of the messages container, just
 * above the composer. Each arrow is a circular FAB; we use plain
 * Unicode arrows (↑ ↓) so we don't need an extra Lucide import. */
.disc-scroll-jump-stack {
  position: absolute;
  right: 16px;
  bottom: 90px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none; /* let clicks pass through the gap to the messages */
}

.disc-scroll-jump-btn {
  pointer-events: auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--kr-border);
  background: var(--kr-bg-surface);
  color: var(--kr-text-secondary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--kr-shadow-sm);
  transition: transform 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
  /* Touch-friendly hitbox without inflating the visible button —
   * the tap target is 44 × 44 via padding-box on coarse pointers. */
}

@media (pointer: coarse) {
  .disc-scroll-jump-btn { min-width: 44px; min-height: 44px; }
}

.disc-scroll-jump-btn:hover {
  transform: translateY(-1px);
  background: var(--kr-bg-elevated);
  color: var(--kr-accent);
  box-shadow: var(--kr-shadow-md);
}

/* Highlight the down arrow when there's unseen content below. The pill
 * pattern above is still rendered alongside; the arrow gives an icon-
 * only fallback when the user dismissed the pill or when the badge
 * status changes during scroll. */
.disc-scroll-jump-btn[data-has-new="true"] {
  background: var(--kr-accent);
  color: var(--kr-bg-base);
  border-color: transparent;
}

.disc-messages-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.disc-messages-git-row {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Message rows and bubbles ─────────────────────────── */
/* `content-visibility: auto` lets the browser skip layout/paint for
 * messages that are off-screen. Markdown parsing still happens (React's
 * memo guards that), but the DOM-level cost of laying out 200+ message
 * bubbles drops dramatically on long discussions. `contain-intrinsic-size`
 * gives the scrollbar a stable height so the user doesn't see jumpy
 * scroll position when scrolling fast. ~120 px matches the typical
 * 2-3 line bubble + meta. Browsers without support fall back to default
 * rendering. Issue #29 (slow long discussion) traced 60 % of the
 * scroll-jank to layout cost on un-virtualized message lists. */
.disc-msg-row {
  display: flex;
  margin-bottom: 12px;
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
}

.disc-msg-row[data-role="user"] {
  justify-content: flex-end;
}

.disc-msg-row[data-role="agent"],
.disc-msg-row[data-role="system"] {
  justify-content: flex-start;
}

.disc-msg-bubble {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--kr-text-primary);
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.disc-msg-bubble[data-role="user"] {
  background: rgba(var(--kr-accent-rgb), 0.12);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.22);
  box-shadow: var(--kr-shadow-sm);
}

.disc-msg-bubble[data-role="agent"] {
  background: var(--kr-bg-surface);
  border: 1px solid var(--kr-border-strong);
  box-shadow: var(--kr-shadow-sm);
}

.disc-msg-bubble[data-role="system"][data-variant="summary"] {
  border-color: rgba(var(--kr-success-rgb), 0.3);
  background: rgba(var(--kr-success-rgb), 0.06);
}

.disc-msg-bubble[data-role="system"][data-variant="error"] {
  border-color: rgba(var(--kr-error-rgb), 0.3);
  background: rgba(var(--kr-error-rgb), 0.06);
}

.disc-msg-agent-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--kr-fs-xs);
  font-weight: 600;
  margin-bottom: 4px;
}

.disc-msg-time {
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-tertiary);
  margin-top: 4px;
  text-align: right;
}

.disc-msg-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.disc-msg-footer-right {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
}

.disc-msg-time-row {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
}

.disc-msg-token-count {
  color: var(--kr-text-ghost);
  font-size: var(--kr-fs-2xs);
}

.disc-msg-auth-mode {
  font-size: var(--kr-fs-2xs);
}

.disc-msg-auth-mode[data-mode="override"] {
  color: rgba(var(--kr-accent-rgb), 0.3);
}

.disc-msg-auth-mode[data-mode="local"] {
  color: var(--kr-text-ghost);
}

.disc-msg-duration {
  color: var(--kr-text-ghost);
  font-size: var(--kr-fs-2xs);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* ── Author info in user message ──────────────────────── */
.disc-msg-author {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
  margin-bottom: 4px;
}

.disc-msg-author-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.disc-msg-author-initials {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(var(--kr-accent-rgb), 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: var(--kr-accent);
}

.disc-msg-author-name {
  font-size: var(--kr-fs-xs);
  font-weight: 600;
  color: rgba(var(--kr-accent-rgb), 0.6);
}

/* ── Streaming bubble ─────────────────────────────────── */
.disc-streaming-pre {
  font-size: var(--kr-fs-md);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  margin: 0;
  color: var(--kr-text-primary);
}

.disc-streaming-waiting {
  font-size: var(--kr-fs-base);
  color: var(--kr-text-secondary);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
}

.disc-streaming-elapsed {
  font-size: var(--kr-fs-2xs);
  color: var(--kr-text-faint);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.disc-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kr-accent);
  animation: pulse 2s ease-in-out infinite;
}

/* ── Agent logs panel ─────────────────────────────────── */
.disc-logs-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-dim);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}

.disc-logs-panel {
  margin-top: 4px;
  padding: 6px 8px;
  border-radius: var(--kr-r-md);
  background: var(--kr-bg-code);
  max-height: 150px;
  overflow-y: auto;
  font-family: var(--kr-font-mono);
  font-size: var(--kr-fs-xs);
  line-height: 1.6;
  color: var(--kr-text-muted);
}

.disc-streaming-log-hint {
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-faint);
  margin-left: 4px;
}

/* ── Orchestration / debate ───────────────────────────── */
.disc-orch-stream-agent {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--kr-fs-xs);
  font-weight: 600;
  margin-bottom: 4px;
}

.disc-orch-round {
  font-size: var(--kr-fs-2xs);
  color: var(--kr-text-ghost);
  margin-left: 4px;
}

.disc-orch-thinking {
  font-size: var(--kr-fs-base);
  color: var(--kr-text-muted);
  font-style: italic;
}

/* ── CTA banners (briefing, validation, bootstrap) ────── */
.disc-cta-banner {
  margin: 12px 16px;
  padding: 12px 16px;
  border-radius: var(--kr-r-xl);
}

.disc-cta-banner[data-variant="accent"] {
  background: rgba(var(--kr-accent-rgb), 0.06);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.15);
}

.disc-cta-banner[data-variant="warning"] {
  background: rgba(var(--kr-warning-rgb), 0.06);
  border: 1px solid rgba(var(--kr-warning-rgb), 0.15);
}

.disc-cta-banner[data-variant="info"] {
  background: rgba(var(--kr-info-rgb), 0.06);
  border: 1px solid rgba(var(--kr-info-rgb), 0.15);
}

.disc-cta-text {
  font-size: var(--kr-fs-base);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
}

.disc-cta-text[data-variant="accent"] {
  color: rgba(var(--kr-accent-rgb), 0.8);
}

.disc-cta-text[data-variant="warning"] {
  color: rgba(var(--kr-warning-rgb), 0.8);
}

.disc-cta-text[data-variant="info"] {
  color: rgba(var(--kr-info-rgb), 0.8);
}

.disc-cta-btn {
  padding: 8px 16px;
  border-radius: var(--kr-r-lg);
  border: none;
  font-weight: 700;
  font-size: var(--kr-fs-base);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
}

.disc-cta-btn[data-variant="accent"] {
  background: var(--kr-accent);
  color: var(--kr-bg-base);
}

.disc-cta-btn[data-variant="warning"] {
  background: rgba(var(--kr-warning-rgb), 0.2);
  color: var(--kr-warning-amber);
}

.disc-cta-btn[data-variant="info"] {
  background: var(--kr-info);
  color: var(--kr-bg-base);
}

/* ── Disabled agent banner ────────────────────────────── */
.disc-agent-disabled-banner {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-4);
  padding: 8px 20px;
  background: rgba(var(--kr-warning-rgb), 0.04);
  border-top: 1px solid rgba(var(--kr-warning-rgb), 0.1);
}

.disc-agent-disabled-text {
  font-size: var(--kr-fs-sm);
  color: rgba(var(--kr-warning-rgb), 0.7);
  line-height: 1.4;
}

/* ── Structured agent questions form (0.3.5) ─────────── */
.agent-question-form {
  margin: 12px 16px;
  padding: 12px 16px;
  border-radius: var(--kr-r-xl);
  background: rgba(var(--kr-info-rgb), 0.06);
  border: 1px solid rgba(var(--kr-info-rgb), 0.15);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agent-question-form-hint {
  font-size: var(--kr-fs-sm);
  color: rgba(var(--kr-info-rgb), 0.85);
  margin: 0;
}

.agent-question-form-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agent-question-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.agent-question-form-label {
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-muted);
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.agent-question-form-label code {
  background: rgba(var(--kr-info-rgb), 0.12);
  color: var(--kr-info);
  padding: 1px 6px;
  border-radius: var(--kr-r-sm);
  font-size: var(--kr-fs-xs);
}

.agent-question-form-input {
  padding: 6px 10px;
  border-radius: var(--kr-r-md);
  border: 1px solid var(--kr-border);
  background: var(--kr-bg-base);
  color: var(--kr-text-primary);
  font-family: inherit;
  font-size: var(--kr-fs-base);
}

.agent-question-form-submit {
  align-self: flex-end;
  padding: 6px 14px;
  border-radius: var(--kr-r-lg);
  border: none;
  background: var(--kr-info);
  color: var(--kr-bg-base);
  font-weight: 700;
  font-size: var(--kr-fs-sm);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.agent-question-form-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.agent-question-form-shortcut {
  font-size: 9px;
  font-weight: 400;
  opacity: 0.5;
  margin-left: 4px;
}

/* ── Input / composer ─────────────────────────────────── */
.disc-composer-wrap {
  padding: 10px 16px 12px;
  border-top: 1px solid var(--kr-border);
  background: var(--kr-bg-surface);
  flex-shrink: 0;
}

.disc-composer-wrap[data-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

.disc-composer {
  position: relative;
  background: var(--kr-bg-hover);
  border: 1px solid var(--kr-border);
  border-radius: 12px;
  transition: border-color 0.2s;
}

.disc-composer[data-recording="true"] {
  border-color: rgba(var(--kr-error-rgb), 0.3);
}

.disc-composer-textarea {
  width: 100%;
  padding: 12px 14px 4px;
  background: transparent;
  border: none;
  border-radius: 12px 12px 0 0;
  color: var(--kr-text-primary);
  font-size: var(--kr-fs-md);
  font-family: inherit;
  resize: none;
  min-height: 42px;
  max-height: 160px;
  line-height: 1.4;
  outline: none;
}

.disc-composer-toolbar {
  display: flex;
  align-items: center;
  padding: 4px 8px 8px;
  gap: 2px;
}

.disc-composer-toolbar[data-mobile="true"] {
  padding: 4px 4px 8px;
  flex-wrap: wrap;
}

.disc-composer-left {
  display: flex;
  align-items: center;
  gap: 2px;
}

.disc-composer-hint {
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-ghost);
  margin-right: 4px;
  user-select: none;
}

/* ── Toolbar icon buttons (composer + general) ────────── */
.disc-tool-btn {
  background: transparent;
  border: none;
  border-radius: var(--kr-r-md);
  padding: 6px 7px;
  cursor: pointer;
  color: var(--kr-text-dim);
  display: flex;
  align-items: center;
  transition: color 0.15s, background 0.15s;
}

/* Touch / coarse pointer: bump to a 44 × 44 hitbox so the toolbar row
 * (TTS, debate, attach, voice…) meets WCAG 2.5.5. Desktop keeps the
 * compact 6 px padding so the toolbar doesn't grow unnecessarily. */
@media (pointer: coarse) {
  .disc-tool-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    justify-content: center;
  }
}

.disc-tool-btn[data-active="true"][data-color="red"] {
  background: rgba(var(--kr-error-rgb), 0.15);
  color: var(--kr-error);
}

.disc-tool-btn[data-active="true"][data-color="accent"] {
  background: rgba(var(--kr-accent-rgb), 0.12);
  color: var(--kr-accent);
}

.disc-tool-btn[data-active="true"][data-color="purple"] {
  background: rgba(var(--kr-purple-rgb), 0.12);
  color: var(--kr-purple);
}

/* ── Send / stop buttons ──────────────────────────────── */
.disc-stop-btn {
  background: rgba(var(--kr-error-rgb), 0.15);
  border: 1px solid rgba(var(--kr-error-rgb), 0.3);
  border-radius: var(--kr-r-lg);
  padding: 6px 10px;
  cursor: pointer;
  color: var(--kr-error);
  display: flex;
  align-items: center;
}

.disc-send-btn {
  border-radius: var(--kr-r-lg);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  transition: all 0.15s;
}

.disc-send-btn[data-active="true"] {
  background: rgba(var(--kr-accent-rgb), 0.15);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.25);
  cursor: pointer;
  color: var(--kr-accent);
}

.disc-send-btn[data-active="false"] {
  background: transparent;
  border: 1px solid var(--kr-border-light);
  cursor: default;
  color: var(--kr-text-ghost);
}

/* ── Context files (attach) ────────────────────────────── */
.disc-context-files {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 8px 0;
}

.disc-context-file-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: var(--kr-r-sm);
  background: var(--kr-bg-hover-strong);
  border: 1px solid var(--kr-border-light);
  font-size: var(--kr-fs-2xs);
  color: var(--kr-text-muted);
  max-width: 160px;
}

.disc-context-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.disc-context-file-remove {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 1px;
  color: var(--kr-text-faint);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.disc-context-file-remove:hover {
  color: var(--kr-error);
}

.disc-attach-btn {
  border-radius: var(--kr-r-lg);
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: 1px solid var(--kr-border-light);
  cursor: pointer;
  color: var(--kr-text-muted);
  transition: all 0.15s;
  position: relative;
}

.disc-attach-btn:hover {
  color: var(--kr-accent);
  border-color: rgba(var(--kr-accent-rgb), 0.25);
}

.disc-composer-dragover {
  outline: 2px dashed var(--kr-accent) !important;
  outline-offset: -2px;
  background: rgba(var(--kr-accent-rgb), 0.03) !important;
}

.disc-context-file-image {
  border-color: rgba(var(--kr-accent-rgb), 0.2);
  background: rgba(var(--kr-accent-rgb), 0.05);
}

.disc-new-files-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.disc-new-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--kr-r-sm);
  border: 1px dashed var(--kr-border-medium);
  background: transparent;
  color: var(--kr-text-muted);
  cursor: pointer;
  font-size: var(--kr-fs-xs);
  font-family: inherit;
  transition: all 0.15s;
}

.disc-new-attach-btn:hover {
  border-color: var(--kr-accent);
  color: var(--kr-accent);
}

.disc-new-files-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.disc-attach-count {
  font-size: 9px;
  background: var(--kr-accent);
  color: var(--kr-bg-base);
  border-radius: 6px;
  min-width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* ── Mention autocomplete ─────────────────────────────── */
.disc-mention-popover {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  background: var(--kr-bg-input);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.2);
  border-radius: var(--kr-r-lg);
  overflow: hidden;
  box-shadow: var(--kr-shadow-lg);
  min-width: 180px;
  z-index: 10;
}

.disc-mention-item {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-4);
  width: 100%;
  padding: 8px 12px;
  border: none;
  cursor: pointer;
  color: var(--kr-text-primary);
  font-family: inherit;
  font-size: var(--kr-fs-base);
  text-align: left;
}

.disc-mention-item[data-highlighted="true"] {
  background: rgba(var(--kr-accent-rgb), 0.1);
}

.disc-mention-item[data-highlighted="false"] {
  background: transparent;
}

/* Emoji variant of the autocomplete popover: taller list (20 items) + a
   wider glyph column so multi-codepoint emoji render at a readable size. */
.disc-emoji-popover {
  max-height: 220px;
  overflow-y: auto;
  min-width: 220px;
}

.disc-emoji-glyph {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* ── Worktree error banner ────────────────────────────── */
.disc-worktree-error {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-4);
  padding: 8px 12px;
  margin: 4px 8px 0;
  background: rgba(var(--kr-error-rgb), 0.1);
  border: 1px solid rgba(var(--kr-error-rgb), 0.3);
  border-radius: var(--kr-r-lg);
  font-size: var(--kr-fs-sm);
  color: var(--kr-error-soft);
}

.disc-worktree-retry-btn {
  background: rgba(var(--kr-error-rgb), 0.15);
  border: 1px solid rgba(var(--kr-error-rgb), 0.3);
  border-radius: var(--kr-r-md);
  padding: 4px 10px;
  cursor: pointer;
  color: var(--kr-error-soft);
  font-size: var(--kr-fs-xs);
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}

.disc-worktree-dismiss-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--kr-text-dim);
  display: flex;
  flex-shrink: 0;
}

/* ── Draft restored indicator ────────────────────────── */
/* Small discreet hint above the textarea when a saved draft was loaded.
   Visual weight kept deliberately low — this is informational, not alerting. */
.disc-draft-restored {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin: 2px 8px 6px;
  border-radius: var(--kr-r-md);
  background: rgba(var(--kr-border-strong), 0.08);
  border: 1px solid rgba(var(--kr-border-strong), 0.16);
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-dim);
}

.disc-draft-restored-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.disc-draft-restored-dismiss {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--kr-text-dim);
  display: flex;
  flex-shrink: 0;
  border-radius: var(--kr-r-sm);
}

.disc-draft-restored-dismiss:hover {
  color: var(--kr-text-primary);
  background: rgba(var(--kr-border-strong), 0.15);
}

/* ── Voice / recording banners ────────────────────────── */
.disc-voice-countdown {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin-bottom: 8px;
  border-radius: var(--kr-r-lg);
  background: rgba(var(--kr-accent-rgb), 0.06);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.15);
}

.disc-voice-countdown-number {
  font-size: 20px;
  font-weight: 800;
  color: var(--kr-accent);
  font-variant-numeric: tabular-nums;
  min-width: 24px;
  text-align: center;
}

.disc-voice-countdown-text {
  font-size: var(--kr-fs-base);
  color: rgba(var(--kr-accent-rgb), 0.6);
  flex: 1;
}

.disc-recording-banner {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-4);
  padding: 6px 12px;
  margin-bottom: 8px;
  border-radius: var(--kr-r-lg);
  background: rgba(var(--kr-error-rgb), 0.08);
  border: 1px solid rgba(var(--kr-error-rgb), 0.2);
}

.disc-recording-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kr-error);
  animation: pulse 1.5s ease-in-out infinite;
}

.disc-recording-text {
  font-size: var(--kr-fs-base);
  color: var(--kr-error-soft);
  flex: 1;
}

.disc-recording-cancel-btn {
  background: var(--kr-bg-hover-strong);
  border: 1px solid var(--kr-border-medium);
  border-radius: var(--kr-r-md);
  padding: 4px 10px;
  cursor: pointer;
  color: var(--kr-text-tertiary);
  font-size: var(--kr-fs-sm);
  font-family: inherit;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.disc-recording-stop-btn {
  background: rgba(var(--kr-error-rgb), 0.15);
  border: 1px solid rgba(var(--kr-error-rgb), 0.3);
  border-radius: var(--kr-r-md);
  padding: 4px 10px;
  cursor: pointer;
  color: var(--kr-error);
  font-size: var(--kr-fs-sm);
  font-family: inherit;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.disc-transcribing-banner {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-4);
  padding: 6px 12px;
  margin-bottom: 8px;
  border-radius: var(--kr-r-lg);
  background: rgba(var(--kr-accent-rgb), 0.04);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.1);
}

.disc-transcribing-text {
  font-size: var(--kr-fs-base);
  color: rgba(var(--kr-accent-rgb), 0.7);
}

.disc-voice-cancel-btn {
  background: var(--kr-bg-hover-strong);
  border: 1px solid var(--kr-border-medium);
  border-radius: var(--kr-r-md);
  padding: 3px 10px;
  cursor: pointer;
  color: var(--kr-text-tertiary);
  font-size: var(--kr-fs-sm);
  font-family: inherit;
}

/* ── New discussion overlay ───────────────────────────── */
.disc-new-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.disc-new-card {
  width: 420px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: var(--kr-sp-10);
  border-radius: var(--kr-r-2xl);
  background: var(--kr-bg-surface);
  border: 1px solid var(--kr-border-medium);
}

.disc-new-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.disc-new-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--kr-text-primary);
}

.disc-new-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.disc-form-label {
  display: block;
  font-size: var(--kr-fs-sm);
  font-weight: 600;
  color: var(--kr-text-tertiary);
  margin-bottom: 4px;
  margin-top: 8px;
}

.disc-form-label[data-size="xs"] {
  font-size: var(--kr-fs-xs);
}

.disc-select-styled {
  width: 100%;
  padding: 9px 12px;
  background: var(--kr-bg-input);
  border: 1px solid var(--kr-border-strong);
  border-radius: var(--kr-r-lg);
  color: var(--kr-text-primary);
  font-size: var(--kr-fs-md);
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

.disc-select-styled[data-locked="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.disc-input-styled {
  width: 100%;
  padding: 9px 12px;
  background: var(--kr-bg-input);
  border: 1px solid var(--kr-border-strong);
  border-radius: var(--kr-r-lg);
  color: var(--kr-text-primary);
  font-size: var(--kr-fs-md);
  font-family: inherit;
  box-sizing: border-box;
}

.disc-input-styled[data-locked="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.disc-textarea-styled {
  width: 100%;
  padding: 10px 12px;
  background: var(--kr-bg-input);
  border: 1px solid var(--kr-border-strong);
  border-radius: var(--kr-r-lg);
  color: var(--kr-text-primary);
  font-size: var(--kr-fs-md);
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  line-height: 1.5;
}

.disc-textarea-styled[data-locked="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Restricted agent warning ─────────────────────────── */
.disc-restricted-warn {
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: var(--kr-r-md);
  background: rgba(var(--kr-warning-rgb), 0.06);
  border: 1px solid rgba(var(--kr-warning-rgb), 0.12);
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
}

.disc-restricted-warn-text {
  font-size: var(--kr-fs-xs);
  color: rgba(var(--kr-warning-rgb), 0.7);
  line-height: 1.4;
}

/* ── Workspace mode toggle ────────────────────────────── */
.disc-workspace-toggle {
  display: flex;
  gap: var(--kr-sp-3);
}

.disc-workspace-btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: var(--kr-r-lg);
  font-size: var(--kr-fs-sm);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
  transition: all 0.15s;
}

.disc-workspace-btn[data-active="true"][data-mode="direct"] {
  border: 1px solid var(--kr-border-heavy);
  background: var(--kr-bg-hover-strong);
  color: var(--kr-text-primary);
}

.disc-workspace-btn[data-active="false"][data-mode="direct"] {
  border: 1px solid var(--kr-border-light);
  background: var(--kr-bg-subtle);
  color: var(--kr-text-faint);
}

.disc-workspace-btn[data-active="true"][data-mode="isolated"] {
  border: 1px solid rgba(var(--kr-info-rgb), 0.4);
  background: rgba(var(--kr-info-rgb), 0.08);
  color: var(--kr-info);
}

.disc-workspace-btn[data-active="false"][data-mode="isolated"] {
  border: 1px solid var(--kr-border-light);
  background: var(--kr-bg-subtle);
  color: var(--kr-text-faint);
}

.disc-workspace-btn-title {
  font-weight: 600;
}

.disc-workspace-btn-desc {
  font-size: var(--kr-fs-2xs);
  opacity: 0.6;
  margin-top: 1px;
}

.disc-workspace-branch-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
}

/* ── Advanced options ─────────────────────────────────── */
.disc-advanced-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  color: var(--kr-text-muted);
  font-size: var(--kr-fs-sm);
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 4px;
}

.disc-advanced-count {
  font-size: var(--kr-fs-2xs);
  color: var(--kr-accent);
  margin-left: 2px;
}

.disc-advanced-panel {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--kr-r-lg);
  background: var(--kr-bg-subtle);
  border: 1px solid var(--kr-border-light);
}

.disc-advanced-section {
  margin-bottom: 10px;
}

.disc-advanced-section-label {
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-faint);
  font-weight: 600;
  margin-bottom: 4px;
}

.disc-advanced-section-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 0;
  border: none;
  background: transparent;
  color: var(--kr-text-faint);
  font-size: var(--kr-fs-xs);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s;
}

.disc-advanced-section-toggle:hover {
  color: var(--kr-text-secondary);
}

.disc-advanced-count {
  font-size: 9px;
  background: rgba(var(--kr-accent-rgb), 0.15);
  color: var(--kr-accent);
  padding: 1px 5px;
  border-radius: var(--kr-r-sm);
  margin-left: auto;
}

.disc-advanced-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 0 2px 16px;
}

/* ── Model tier selector ──────────────────────────────── */
.disc-tier-btn {
  flex: 1;
  padding: 4px 6px;
  border-radius: var(--kr-r-md);
  font-size: var(--kr-fs-xs);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
}

.disc-tier-btn[data-active="true"] {
  border: 1px solid var(--kr-border-heavy);
  background: var(--kr-bg-hover-strong);
}

.disc-tier-btn[data-active="false"] {
  border: 1px solid var(--kr-border-light);
  background: transparent;
  color: var(--kr-text-faint);
}

.disc-tier-btn[data-active="true"][data-tier="economy"] { color: var(--kr-success); }
.disc-tier-btn[data-active="true"][data-tier="reasoning"] { color: var(--kr-warning-amber); }
.disc-tier-btn[data-active="true"][data-tier="default"] { color: var(--kr-text-primary); }

/* ── Chip pill (skills/profiles/directives in new disc form) */
.disc-chip {
  padding: 3px 8px;
  border-radius: 10px;
  font-size: var(--kr-fs-xs);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s;
}

.disc-chip[data-active="true"][data-color="accent"] {
  font-weight: 600;
  border: 1px solid rgba(var(--kr-accent-rgb), 0.4);
  background: rgba(var(--kr-accent-rgb), 0.1);
  color: var(--kr-accent);
}

.disc-chip[data-active="false"][data-color="accent"] {
  font-weight: 400;
  border: 1px solid var(--kr-border-medium);
  background: var(--kr-bg-hover);
  color: var(--kr-text-tertiary);
}

.disc-chip[data-active="true"][data-color="purple"] {
  font-weight: 600;
  border: 1px solid rgba(var(--kr-purple-rgb), 0.4);
  background: rgba(var(--kr-purple-rgb), 0.1);
  color: var(--kr-purple-soft);
}

.disc-chip[data-active="false"][data-color="purple"] {
  font-weight: 400;
  border: 1px solid var(--kr-border-medium);
  background: var(--kr-bg-hover);
  color: var(--kr-text-tertiary);
}

.disc-chip[data-active="true"][data-color="warning"] {
  font-weight: 600;
  border: 1px solid rgba(var(--kr-warning-amber-rgb), 0.4);
  background: rgba(var(--kr-warning-amber-rgb), 0.1);
  color: var(--kr-warning-soft);
}

.disc-chip[data-active="false"][data-color="warning"] {
  font-weight: 400;
  border: 1px solid var(--kr-border-medium);
  background: var(--kr-bg-hover);
  color: var(--kr-text-tertiary);
}

/* ── Audit prefill warning ────────────────────────────── */
.disc-audit-warn {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--kr-r-lg);
  background: rgba(var(--kr-warning-rgb), 0.06);
  border: 1px solid rgba(var(--kr-warning-rgb), 0.12);
}

.disc-audit-warn-title {
  font-size: var(--kr-fs-sm);
  color: rgba(var(--kr-warning-rgb), 0.7);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.disc-audit-warn-hint {
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-dim);
  margin: 0;
}

/* ── Create button ────────────────────────────────────── */
.disc-create-btn {
  margin-top: 16px;
  width: 100%;
  padding: 11px 16px;
  border-radius: var(--kr-r-lg);
  border: none;
  font-weight: 700;
  font-size: var(--kr-fs-md);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kr-sp-4);
  transition: all 0.15s;
}

.disc-create-btn[data-ready="true"] {
  background: var(--kr-accent);
  color: var(--kr-bg-base);
}

.disc-create-btn[data-ready="false"] {
  background: var(--kr-bg-hover-strong);
  color: var(--kr-text-ghost);
}

.disc-create-shortcut {
  font-size: var(--kr-fs-xs);
  opacity: 0.6;
  margin-left: 4px;
}

/* ── No-discussion placeholder ────────────────────────── */
.disc-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--kr-text-ghost);
}

.disc-placeholder-menu-btn {
  position: absolute;
  top: 14px;
  left: 14px;
  background: none;
  border: none;
  color: var(--kr-text-tertiary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}

/* ── Debate popover ───────────────────────────────────── */
.disc-debate-popover {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  width: 260px;
  padding: 14px;
  border-radius: var(--kr-r-xl);
  background: var(--kr-bg-input);
  border: 1px solid rgba(var(--kr-purple-rgb), 0.2);
  box-shadow: var(--kr-shadow-modal);
  z-index: 10;
}

.disc-debate-title {
  font-size: var(--kr-fs-base);
  font-weight: 700;
  color: var(--kr-purple);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
}

.disc-debate-desc {
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-muted);
  margin-bottom: 10px;
  line-height: 1.4;
}

.disc-debate-agent-label {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-4);
  padding: 6px 0;
  font-size: var(--kr-fs-base);
}

.disc-debate-agent-main {
  font-size: var(--kr-fs-2xs);
  color: var(--kr-accent);
  margin-left: auto;
}

.disc-debate-rounds-row {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-4);
  margin-top: 10px;
}

.disc-debate-rounds-label {
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-muted);
}

.disc-debate-round-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--kr-r-md);
  border: none;
  font-family: inherit;
  font-size: var(--kr-fs-base);
  font-weight: 700;
  cursor: pointer;
}

.disc-debate-round-btn[data-active="true"] {
  background: var(--kr-purple);
  color: var(--kr-text-on-dark);
}

.disc-debate-round-btn[data-active="false"] {
  background: var(--kr-bg-hover-strong);
  color: var(--kr-text-muted);
}

.disc-debate-section {
  margin-top: 10px;
  border-top: 1px solid var(--kr-border-light);
  padding-top: 8px;
}

.disc-debate-section-label {
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.disc-debate-chip {
  padding: 3px 8px;
  border-radius: var(--kr-r-md);
  font-family: inherit;
  font-size: var(--kr-fs-xs);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.disc-debate-chip[data-active="true"][data-color="accent"] {
  background: rgba(var(--kr-accent-rgb), 0.12);
  color: var(--kr-accent);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.2);
}

.disc-debate-chip[data-active="false"][data-color="accent"] {
  background: var(--kr-bg-hover);
  color: var(--kr-text-dim);
  border: 1px solid var(--kr-border-light);
}

.disc-debate-chip[data-active="true"][data-color="warning"] {
  background: rgba(var(--kr-warning-amber-rgb), 0.12);
  color: var(--kr-warning-soft);
  border: 1px solid rgba(var(--kr-warning-amber-rgb), 0.2);
}

.disc-debate-chip[data-active="false"][data-color="warning"] {
  background: var(--kr-bg-hover);
  color: var(--kr-text-dim);
  border: 1px solid var(--kr-border-light);
}

.disc-debate-launch-btn {
  margin-top: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--kr-r-md);
  border: none;
  font-family: inherit;
  font-size: var(--kr-fs-base);
  font-weight: 700;
  cursor: pointer;
}

.disc-debate-launch-btn[data-ready="true"] {
  background: var(--kr-purple);
  color: var(--kr-text-on-dark);
}

.disc-debate-launch-btn[data-ready="false"] {
  background: var(--kr-bg-hover-strong);
  color: var(--kr-text-ghost);
}

/* ── Shared icon button ───────────────────────────────── */
.disc-icon-btn {
  position: relative; /* anchor for .disc-icon-btn-badge overlay */
  background: none;
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-r-sm);
  padding: 4px 8px;
  color: var(--kr-text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: var(--kr-fs-sm);
}

/* ── Test mode (worktree swap) ─────────────────────────────── */

.disc-test-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin-left: 4px;
  background: rgba(var(--kr-accent-rgb), 0.12);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.3);
  border-radius: var(--kr-r-sm);
  color: var(--kr-accent);
  font-size: var(--kr-fs-2xs);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.disc-test-mode-btn:hover {
  background: rgba(var(--kr-accent-rgb), 0.22);
  border-color: rgba(var(--kr-accent-rgb), 0.5);
}
/* Inline info glyph after the label — hints "there's a tooltip with more" */
.disc-test-mode-btn-hint {
  display: inline-flex;
  align-items: center;
  opacity: 0.6;
}

/* Global banner pinned at the top of the chat area when ANY discussion is
   in test mode. Dual vocabulary: big user-friendly headline + a technical
   subline (branch, restore, worktree) for devs. */
.test-mode-banner {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
  padding: var(--kr-sp-3) var(--kr-sp-4);
  margin: var(--kr-sp-2) var(--kr-sp-3) 0;
  background: rgba(var(--kr-accent-rgb), 0.10);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.35);
  border-radius: var(--kr-r-md);
  color: var(--kr-text-primary);
  font-size: var(--kr-fs-sm);
}
.test-mode-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(var(--kr-accent-rgb), 0.20);
  color: var(--kr-accent);
}
.test-mode-banner-body { flex: 1; min-width: 0; }
.test-mode-banner-headline {
  font-weight: 600;
  margin-bottom: 2px;
}
.test-mode-banner-subline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--kr-fs-2xs);
  color: var(--kr-text-tertiary);
  flex-wrap: wrap;
}
.test-mode-banner-subline code {
  background: var(--kr-bg-scrim);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}
.test-mode-banner-sep { opacity: 0.45; }
.test-mode-banner-disc {
  font-style: italic;
  opacity: 0.75;
}
.test-mode-banner-exit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: var(--kr-accent);
  color: var(--kr-text-on-accent);
  border: none;
  border-radius: var(--kr-r-sm);
  font-weight: 600;
  font-size: var(--kr-fs-2xs);
  cursor: pointer;
  flex-shrink: 0;
}
.test-mode-banner-exit:hover:not(:disabled) { filter: brightness(1.1); }
.test-mode-banner-exit:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ── Preflight modal (blocker + remediation choices) ───────── */

.test-mode-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--kr-z-modal);
  background: var(--kr-bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--kr-sp-4);
}
.test-mode-modal {
  background: var(--kr-bg-elevated);
  border: 1px solid var(--kr-border-medium);
  border-radius: var(--kr-r-md);
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--kr-shadow-xl);
  overflow: hidden;
}
.test-mode-modal-header {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
  padding: var(--kr-sp-3) var(--kr-sp-4);
  border-bottom: 1px solid var(--kr-border-light);
}
.test-mode-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(var(--kr-warning-amber-rgb), 0.15);
  color: rgb(255, 193, 77);
  flex-shrink: 0;
}
.test-mode-modal-header h3 {
  flex: 1;
  margin: 0;
  font-size: var(--kr-fs-base);
  font-weight: 600;
  color: var(--kr-text-primary);
}
.test-mode-modal-close {
  background: none;
  border: none;
  color: var(--kr-text-tertiary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}
.test-mode-modal-close:hover { color: var(--kr-text-primary); background: var(--kr-bg-hover); }

.test-mode-modal-body {
  padding: var(--kr-sp-4);
  overflow-y: auto;
}
.test-mode-modal-explain {
  margin: 0 0 var(--kr-sp-3);
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-secondary);
  line-height: 1.5;
}
.test-mode-modal-files {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--kr-border-light);
  border-radius: var(--kr-r-sm);
  background: var(--kr-bg-scrim);
  max-height: 180px;
  overflow-y: auto;
}
.test-mode-modal-files li {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-2);
  padding: 4px 10px;
  font-size: var(--kr-fs-2xs);
  border-bottom: 1px solid var(--kr-border-ghost);
}
.test-mode-modal-files li:last-child { border-bottom: none; }
.test-mode-modal-file-status {
  background: var(--kr-bg-active);
  padding: 0 5px;
  border-radius: 3px;
  font-family: monospace;
  min-width: 24px;
  text-align: center;
  color: var(--kr-accent);
}
.test-mode-modal-file-path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kr-text-secondary);
}
.test-mode-modal-files-more {
  font-style: italic;
  color: var(--kr-text-tertiary);
  padding: 4px 10px;
}

.test-mode-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--kr-sp-2);
  padding: var(--kr-sp-3) var(--kr-sp-4);
  border-top: 1px solid var(--kr-border-light);
  background: var(--kr-bg-scrim);
  flex-wrap: wrap;
}
.test-mode-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--kr-r-sm);
  font-size: var(--kr-fs-sm);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--kr-border-medium);
  background: var(--kr-bg-hover);
  color: var(--kr-text-primary);
}
/* Primary variant MUST come before the generic hover rule, and its hover
   MUST keep the accent background explicitly — otherwise the generic
   `:hover` selector (higher specificity by pseudo-class count) overrides
   it and leaves black text on faint white ≈ invisible. */
.test-mode-modal-btn.primary {
  background: var(--kr-accent);
  color: var(--kr-text-on-accent);
  border-color: var(--kr-accent);
}
.test-mode-modal-btn.primary:hover:not(:disabled) {
  background: var(--kr-accent);
  filter: brightness(1.1);
}
.test-mode-modal-btn.ghost {
  background: transparent;
}
.test-mode-modal-btn.ghost:hover:not(:disabled) {
  background: var(--kr-bg-active);
}
.test-mode-modal-btn:disabled { opacity: 0.5; cursor: wait; }

/* Count badge overlaid on .disc-icon-btn — used by the git-panel icon to
   signal uncommitted files in an Isolated worktree. Pulses on first render
   so the user notices when an agent run left files uncommitted. */
.disc-icon-btn-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--kr-accent);
  color: var(--kr-text-on-accent);
  border: 1px solid var(--kr-bg-base);
  font-size: 9px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  pointer-events: none;
  animation: disc-icon-btn-badge-pulse 1.4s ease-out 1;
}

@keyframes disc-icon-btn-badge-pulse {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.disc-scan-btn {
  padding: 7px 14px;
  border-radius: var(--kr-r-md);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.2);
  background: rgba(var(--kr-accent-rgb), 0.05);
  color: var(--kr-accent);
  cursor: pointer;
  font-size: var(--kr-fs-base);
  font-family: inherit;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
}

/* ── Mobile sidebar open button ───────────────────────── */
.disc-mobile-sidebar-btn {
  background: rgba(var(--kr-accent-rgb), 0.08);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.2);
  border-radius: var(--kr-r-md);
  color: var(--kr-accent);
  cursor: pointer;
  /* WCAG 44×44 minimum tap target — the previous 6 px padding around
   * an 18 px icon gave ~30 × 30, well below the threshold. Tya's audit
   * (2026-05-09) flagged this as a misclick risk on touch devices. */
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Copy button in messages ──────────────────────────── */
.disc-copy-btn {
  background: none;
  border: none;
  padding: 1px 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--kr-fs-2xs);
  transition: color 0.15s;
}

.disc-copy-btn[data-copied="true"] {
  color: var(--kr-success);
}

.disc-copy-btn[data-copied="false"] {
  color: var(--kr-text-ghost);
}

/* ── TTS button in message ────────────────────────────── */
.disc-tts-btn {
  background: none;
  border: none;
  border-radius: var(--kr-r-sm);
  padding: 2px 6px;
  cursor: pointer;
  color: var(--kr-text-ghost);
  font-size: var(--kr-fs-xs);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
}

/* ── Edit message area ────────────────────────────────── */
.disc-edit-textarea {
  width: 100%;
  min-height: 60px;
  padding: 8px;
  border-radius: var(--kr-r-md);
  background: var(--kr-bg-hover-strong);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.3);
  color: var(--kr-text-primary);
  font-family: inherit;
  font-size: var(--kr-fs-base);
  resize: vertical;
}

.disc-edit-actions {
  display: flex;
  gap: var(--kr-sp-3);
  justify-content: flex-end;
}

/* ── Full-access / model tier badges in message footer ── */
.disc-full-access-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--kr-fs-2xs);
  color: rgba(var(--kr-warning-rgb), 0.5);
  padding: 1px 5px;
  border-radius: var(--kr-r-sm);
  background: rgba(var(--kr-warning-rgb), 0.06);
  border: 1px solid rgba(var(--kr-warning-rgb), 0.1);
}

.disc-model-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--kr-fs-2xs);
  padding: 1px 5px;
  border-radius: var(--kr-r-sm);
}

.disc-model-tier-badge[data-tier="economy"] {
  color: rgba(var(--kr-success-rgb), 0.6);
  background: rgba(var(--kr-success-rgb), 0.06);
  border: 1px solid rgba(var(--kr-success-rgb), 0.15);
}

.disc-model-tier-badge[data-tier="reasoning"] {
  color: rgba(var(--kr-warning-amber-rgb), 0.6);
  background: rgba(var(--kr-warning-amber-rgb), 0.06);
  border: 1px solid rgba(var(--kr-warning-amber-rgb), 0.15);
}

/* ── Auth error / partial response CTAs ───────────────── */
.disc-auth-error-cta {
  display: flex;
  gap: var(--kr-sp-4);
  margin-top: var(--kr-sp-4);
  flex-wrap: wrap;
}

.disc-auth-error-hint {
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-faint);
  align-self: center;
}

/* ── Summary cache expanded ───────────────────────────── */
.disc-summary-expanded {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: var(--kr-r-md);
  background: rgba(var(--kr-success-rgb), 0.04);
  border: 1px solid rgba(var(--kr-success-rgb), 0.15);
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-secondary);
  line-height: 1.5;
  white-space: pre-wrap;
}

.disc-summary-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(var(--kr-success-rgb), 0.6);
  font-size: var(--kr-fs-xs);
  font-family: inherit;
  margin-left: 6px;
  text-decoration: underline;
}

/* ── Markdown content ─────────────────────────────────── */
.disc-md {
  font-size: var(--kr-fs-md);
  line-height: 1.55;
}

.disc-md p { margin: 4px 0; }
.disc-md h1 { font-size: 18px; font-weight: 700; margin: 12px 0 6px; color: var(--kr-text-primary); }
.disc-md h2 { font-size: 16px; font-weight: 700; margin: 10px 0 4px; color: var(--kr-text-primary); }
.disc-md h3 { font-size: 14px; font-weight: 600; margin: 8px 0 4px; color: var(--kr-text-primary); }
.disc-md ul { margin: 4px 0; padding-left: 20px; }
.disc-md ol { margin: 4px 0; padding-left: 20px; }
.disc-md li { margin: 2px 0; }
.disc-md code { background: var(--kr-bg-active); padding: 1px 5px; border-radius: 4px; font-size: 12px; font-family: monospace; }
.disc-md pre { background: var(--kr-bg-code); color: var(--kr-text-on-dark); padding: 10px 12px; border-radius: 8px; overflow-x: auto; margin: 6px 0; border: 1px solid var(--kr-border-light); --kr-accent: #c8ff00; }
.disc-md pre code, .disc-md-pre-code { background: none; padding: 0; font-size: 12px; font-family: monospace; color: var(--kr-accent); }
.disc-md table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 12px; }
.disc-md th { border: 1px solid var(--kr-border-strong); padding: 6px 10px; background: var(--kr-bg-hover); font-weight: 600; text-align: left; }
.disc-md td { border: 1px solid var(--kr-border); padding: 5px 10px; }
.disc-md blockquote { border-left: 3px solid rgba(var(--kr-accent-rgb), 0.3); margin: 6px 0; padding-left: 12px; color: var(--kr-text-secondary); }
.disc-md hr { border: none; border-top: 1px solid var(--kr-border-medium); margin: 10px 0; }
.disc-md a { color: var(--kr-accent); text-decoration: underline; }
.disc-md strong { font-weight: 700; color: var(--kr-text-primary); }

/* ── Copyable block overlay button ────────────────────── */
.disc-copyable-block-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--kr-bg-overlay);
  border: 1px solid var(--kr-border-medium);
  border-radius: var(--kr-r-sm);
  padding: 2px 6px;
  cursor: pointer;
  font-size: var(--kr-fs-2xs);
  display: flex;
  align-items: center;
  gap: 3px;
  transition: color 0.15s, opacity 0.15s;
  opacity: 0.6;
}

.disc-copyable-block-btn[data-copied="true"] {
  color: var(--kr-success);
}

.disc-copyable-block-btn[data-copied="false"] {
  color: var(--kr-text-muted);
}

/* keyframes spin + pulse defined globally in reset.css */

/* ═══════════════════════════════════════════════════════════════════════════
   Doc Preview — agent-authored HTML rendered inline in a chat bubble.
   Triggered by a ```kronn-doc-preview fence in the message markdown.
   Sandboxed iframe → safe display ; export buttons call /api/docs/* .
   ═══════════════════════════════════════════════════════════════════════════ */

.doc-preview {
  margin: var(--kr-sp-5) 0;
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-r-lg);
  background: var(--kr-bg-elevated);
  overflow: hidden;
}

.doc-preview-header {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
  padding: var(--kr-sp-3) var(--kr-sp-6);
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-muted);
  background: var(--kr-bg-hover);
  border-bottom: 1px solid var(--kr-border-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.doc-preview-iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
  background: #fff;
}

.doc-preview-actions {
  display: flex;
  gap: var(--kr-sp-3);
  padding: var(--kr-sp-4) var(--kr-sp-6);
  border-top: 1px solid var(--kr-border-light);
  background: var(--kr-bg-subtle);
}

.doc-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--kr-sp-2);
  padding: var(--kr-sp-3) var(--kr-sp-6);
  border-radius: var(--kr-r-md);
  border: 1px solid var(--kr-accent-border);
  background: rgba(var(--kr-accent-rgb), 0.08);
  color: var(--kr-accent);
  font-family: inherit;
  font-size: var(--kr-fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.doc-preview-btn:hover:not(:disabled) {
  background: rgba(var(--kr-accent-rgb), 0.14);
  border-color: var(--kr-accent);
}

.doc-preview-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.doc-preview-spinner {
  animation: spin 1s linear infinite;
}

.doc-preview-download {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
  padding: var(--kr-sp-4) var(--kr-sp-6);
  font-size: var(--kr-fs-sm);
  color: var(--kr-success);
  text-decoration: none;
  border-top: 1px solid var(--kr-border-light);
  background: rgba(var(--kr-success-rgb), 0.06);
}

.doc-preview-download:hover {
  background: rgba(var(--kr-success-rgb), 0.12);
  text-decoration: underline;
}

.doc-preview-size {
  color: var(--kr-text-muted);
  font-size: var(--kr-fs-xs);
}

.doc-preview-error {
  padding: var(--kr-sp-4) var(--kr-sp-6);
  font-size: var(--kr-fs-sm);
  color: var(--kr-error);
  background: rgba(var(--kr-error-rgb), 0.06);
  border-top: 1px solid rgba(var(--kr-error-rgb), 0.2);
  white-space: pre-wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Doc Data Export — XLSX / CSV / PPTX card.
   Triggered by a ```kronn-doc-data fence in the message markdown.
   Structured-data payloads have no HTML, so no preview iframe — just a
   compact header (format + summary) and a single export button.
   ═══════════════════════════════════════════════════════════════════════════ */

.doc-data-export {
  margin: var(--kr-sp-5) 0;
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-r-lg);
  background: var(--kr-bg-elevated);
  overflow: hidden;
}

.doc-data-export-header {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
  padding: var(--kr-sp-3) var(--kr-sp-6);
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-muted);
  background: var(--kr-bg-hover);
  border-bottom: 1px solid var(--kr-border-light);
}

.doc-data-export-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--kr-text-primary);
}

.doc-data-export-summary {
  color: var(--kr-text-muted);
}

.doc-data-export-actions {
  display: flex;
  gap: var(--kr-sp-3);
  padding: var(--kr-sp-4) var(--kr-sp-6);
  background: var(--kr-bg-subtle);
}

/* ── kronn-internal tool-call trace ────────────────────────────────
 *
 * Persisted as System messages in the disc transcript by:
 *   - `streaming.rs` post-stream MCP-tool capture (Claude Code et al)
 *   - `slash_markers.rs` resolver (Vibe / Ollama)
 *
 * Rendered as a compact badge instead of a regular system message so
 * the user recognises tool activity at a glance. The wrench icon
 * mirrors the `🔧 N` pill in ChatHeader — that pill counts the badges
 * on screen.
 */
.disc-msg-kronn-tool {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 6px 10px;
  border-radius: var(--kr-r-md);
  font-size: var(--kr-fs-xs);
  font-family: var(--kr-font-mono);
  background: rgba(var(--kr-info-rgb), 0.08);
  color: var(--kr-info);
  border: 1px dashed rgba(var(--kr-info-rgb), 0.30);
}

.disc-msg-kronn-tool-icon {
  font-size: 13px;
  margin-right: 2px;
}

.disc-msg-kronn-tool-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.disc-msg-kronn-tool-name {
  background: transparent;
  padding: 0;
  font-weight: 600;
  color: inherit;
}

.disc-msg-kronn-tool-args {
  color: var(--kr-text-muted);
  font-weight: 400;
}

.disc-msg-kronn-tool-result {
  margin-top: 4px;
  font-family: inherit;
}

.disc-msg-kronn-tool-result summary {
  cursor: pointer;
  color: var(--kr-text-muted);
  font-size: var(--kr-fs-2xs);
  user-select: none;
}

.disc-msg-kronn-tool-result pre {
  margin: 6px 0 0;
  padding: 6px 8px;
  background: rgba(var(--kr-info-rgb), 0.05);
  border-radius: var(--kr-r-sm);
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 60ch;
  font-size: var(--kr-fs-2xs);
  color: var(--kr-text-secondary);
}
