/**
 * components.css - UI Components: Buttons, Dropdowns, Messages, Modals, Voice, etc.
 * Codex Platform - CSS Module 4/4
 */

/* =============================================
   BUTTONS - BASE
   ============================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--spacing-sm) var(--spacing-lg);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  outline: none;
}

.btn-primary {
  background-color: var(--accent-primary);
  color: white;
}

.btn-primary:hover {
  background-color: var(--accent-hover);
}

.btn-primary:disabled {
  background-color: var(--text-muted);
  cursor: not-allowed;
}

.btn-secondary {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background-color: var(--bg-hover);
}

.btn-icon {
  padding: var(--spacing-sm);
  background-color: transparent;
  color: var(--text-secondary);
}

.btn-icon:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.btn-danger {
  background-color: var(--accent-error);
  color: #fff;
}

.btn-danger:hover {
  background-color: #d32f2f;
}

/* Circle Buttons */
.btn-circle {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: var(--radius-round);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.btn-circle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn-attach {
  color: var(--text-muted);
}

.btn-attach:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn-mic {
  color: var(--text-muted);
}

.btn-mic:hover {
  color: var(--text-primary);
}

.btn-send {
  background: var(--text-muted);
  color: var(--bg-primary);
}

.btn-send:hover {
  background: var(--text-primary);
}

.btn-send:disabled {
  background: var(--bg-hover);
  color: var(--text-muted);
  cursor: not-allowed;
}

.btn-send.hidden {
  display: none;
}

/* User consent gate */
/* The consent list is the whole surface now. This used to carry its own
   border, radius, background and a 36px shadow, which made it read as a
   second card bolted under the startup card rather than part of it. The
   list below already has its own border, so the outer one was drawing a
   box around a box. */
.user-consent-section {
  width: min(680px, calc(100vw - 48px));
  margin-top: 16px;
  color: var(--text-primary);
}

.user-consent-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  overflow: hidden;
}

.user-consent-item {
  position: relative;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  padding: 12px;
  background: var(--bg-secondary);
  transition: background .16s ease;
}

.user-consent-item.is-new {
  background: var(--bg-tertiary);
}

.user-consent-item:last-child {
  border-bottom: 0;
}

/* Top-aligned, not centred: once the sentence wraps to two lines, a
   vertically centred checkbox and "Required" badge drift away from the
   line they belong to. */
.user-consent-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}

.user-consent-copy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.user-consent-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-top: 0;
}

.user-consent-text-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

/* Wraps to as many lines as the sentence needs. This was
   white-space:nowrap + text-overflow:ellipsis, which cut every consent
   sentence off mid-word — and the ⓘ popover shows `description`, a
   different string, so the truncated text could not be read by any means
   in the UI. */
.user-consent-text {
  display: block;
  color: var(--text-secondary);
  line-height: 1.4;
}

.user-consent-check input {
  width: 16px;
  height: 16px;
  margin-top: 0;
}

.user-consent-required,
.user-consent-optional {
  padding: 0;
  font-size: 11px;
  font-weight: 700;
}

.user-consent-required {
  color: var(--accent-error);
}

.user-consent-optional {
  color: var(--text-muted);
}

.user-consent-info {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
  font: 800 13px/18px var(--font-family, system-ui, sans-serif);
  text-align: center;
}

.user-consent-info:hover {
  background: var(--bg-hover);
}

.user-consent-popover {
  margin: 8px 0 0 26px;
  border: 1px solid var(--text-primary);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 8px 10px;
  box-shadow: var(--shadow-lg);
}

.user-consent-popover.hidden {
  display: none;
}

.user-consent-popover-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.user-consent-popover-title {
  font-weight: 800;
  margin-bottom: 4px;
}

.user-consent-popover-close {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.user-consent-popover-text {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.user-consent-error {
  margin: 10px 0 0;
  color: var(--accent-error);
  font-weight: 700;
}

.user-consent-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 12px;
}

.user-consent-actions .btn {
  border-radius: 4px;
}

.btn-stop {
  background: var(--accent-error);
  color: white;
}

.btn-stop:hover {
  background: #d32f2f;
}

.btn-stop.hidden {
  display: none;
}

.btn-cancel {
  color: var(--text-muted);
}

.btn-cancel:hover {
  background: rgba(244, 67, 54, 0.1);
  color: var(--accent-error);
}

/* =============================================
   Composer Pill Group (segmented Send / Steer / Queue / Stop)
   I-P2.1 (Plan §2.2 / addenda §5.4). Reuses existing tokens only —
   no new colour vars. Semantics: idle => Send only (rounded);
   running => Steer | Queue | Stop contiguous segments.
   ============================================= */
.composer-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-end;
}

.composer-pill {
  height: 32px;
  min-width: 32px;
  padding: 0 6px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), background-color var(--transition-fast), opacity var(--transition-fast);
  flex-shrink: 0;
  border-radius: var(--radius-md);
}

.composer-pill:hover:not(:disabled) {
  background: var(--bg-hover);
}

.composer-pill:active:not(:disabled) {
  filter: brightness(0.92);
}

.composer-pill:disabled {
  background: transparent !important;
  color: var(--text-muted) !important;
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.composer-pill:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.composer-pill.hidden { display: none; }

/* Variants — one blue for both action icons across composer, dialog and transcript. */
.composer-pill--steer { color: var(--dcx-action); }
.composer-pill--steer:hover:not(:disabled) { background: color-mix(in srgb, var(--dcx-action) 12%, transparent); color: var(--dcx-action); }

.composer-pill--queue { color: var(--dcx-action); }
.composer-pill--queue:hover:not(:disabled) { background: color-mix(in srgb, var(--dcx-action) 12%, transparent); color: var(--dcx-action); }

.composer-pill--stop  { color: var(--dcx-danger); }
.composer-pill--stop:hover:not(:disabled)  { background: color-mix(in srgb, var(--dcx-danger) 12%, transparent); color: var(--dcx-danger); }

.composer-pill--send {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: var(--dc-accent);
  color: var(--dc-paper);
  font-size: var(--font-size-lg);
}

.composer-pill--send svg {
  width: 16px;
  height: 16px;
}

.composer-pill--send:hover:not(:disabled) {
  background: var(--accent-hover);
  color: var(--dc-paper);
}

/* =============================================
   Notification Flash (I-P2.12 + I-P2.13 shared renderer)
   ============================================= */
.notifications-root {
  position: fixed;
  top: var(--spacing-md);
  right: var(--spacing-md);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: max-content;
  pointer-events: none;
}

.notification-flash {
  pointer-events: auto;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-error);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  min-width: 280px;
  max-width: 420px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.notification-flash-body { flex: 1; }
.notification-flash-title { font-weight: 600; margin-bottom: 2px; }
.notification-flash-text  { font-size: 13px; color: var(--text-secondary); }
.notification-flash-button {
  padding: 6px 14px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--accent-primary);
  color: #ffffff;
  cursor: pointer;
  font-weight: 500;
}
.notification-flash-button:hover { filter: brightness(1.05); }

.notification-info-toast {
  pointer-events: auto;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  min-width: 240px;
  max-width: 380px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.notification-info-toast-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.notification-info-toast-text {
  font-size: 13px;
  color: var(--text-secondary);
}

.notification-pending-toast {
  display: block;
  pointer-events: auto;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  min-width: 240px;
  max-width: 380px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.notification-pending-toast-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.notification-pending-toast-text {
  font-size: 13px;
  color: var(--text-secondary);
}

/* =============================================
   Service Corpus left-nav tree and detail page
   ============================================= */
.service-corpus-header {
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.service-corpus-header h3 {
  margin: 0;
  font-size: 14px;
}

.service-corpus-header p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.service-corpus-icon-btn {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  min-width: 30px;
  height: 30px;
}

.service-corpus-icon-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.service-corpus-controls {
  display: grid;
  gap: 5px;
  padding: 0 10px 6px;
  flex: 0 0 auto;
  position: relative;
}

.service-corpus-search {
  width: 100%;
}

.service-corpus-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.service-corpus-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
}

.service-corpus-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 6px;
}

.service-corpus-filter-row .service-corpus-filter {
  min-width: 0;
}

.service-corpus-filter-icon.indexed {
  color: var(--accent-success);
  font-weight: 900;
}

.service-corpus-filter-icon.planned {
  color: var(--accent-warning);
}

.service-corpus-help-btn {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-round);
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.service-corpus-help-btn:hover,
.service-corpus-help-btn:focus-visible {
  background: var(--bg-hover);
  outline: 2px solid var(--text-primary);
  outline-offset: 1px;
}

.service-corpus-help-popover {
  position: fixed;
  width: 260px;
  z-index: 30;
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 8px 10px;
  box-shadow: var(--shadow-lg);
}

.service-corpus-help-popover.hidden {
  display: none;
}

.service-corpus-help-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.service-corpus-help-title {
  font-weight: 800;
  margin-bottom: 4px;
}

.service-corpus-help-close {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-round);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.service-corpus-help-close:hover,
.service-corpus-help-close:focus-visible {
  background: var(--bg-hover);
  outline: 2px solid var(--text-primary);
  outline-offset: 1px;
}

.service-corpus-help-text {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.service-corpus-filter-panel {
  position: relative;
  flex: 0 0 auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  width: 30px;
  height: 30px;
}

.service-corpus-filter-panel summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 12px;
  list-style: none;
}

.service-corpus-filter-panel summary::-webkit-details-marker {
  display: none;
}

.service-corpus-filter-panel summary::before {
  content: '▾';
  display: block;
  color: var(--text-primary);
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
}

.service-corpus-filter-panel[open] summary::before {
  content: '▾';
}

.service-corpus-filter-panel-body {
  position: fixed;
  left: auto;
  right: auto;
  top: auto;
  width: 296px;
  z-index: 25;
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
}

.service-corpus-filter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
}

.service-corpus-filter-close {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-round);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.service-corpus-filter-close:hover,
.service-corpus-filter-close:focus-visible {
  background: var(--bg-hover);
  outline: 2px solid var(--text-primary);
  outline-offset: 1px;
}

.service-corpus-filter-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

.service-corpus-filter input {
  margin: 0;
}

.service-corpus-filter-primary,
.service-corpus-flatten {
  justify-content: flex-start;
}

.service-corpus-tree {
  padding: 8px 6px 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: scroll;
  overflow-x: auto;
  scrollbar-color: var(--text-primary) var(--bg-tertiary);
  scrollbar-width: auto;
}

.service-corpus-missing-service {
  flex: 0 0 auto;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-primary);
  text-align: center;
}

.service-corpus-missing-service-link {
  border: 0;
  background: transparent;
  color: var(--accent-primary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.service-corpus-missing-service-link:hover,
.service-corpus-missing-service-link:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
}

.service-corpus-tree::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

.service-corpus-tree::-webkit-scrollbar-thumb {
  background: var(--text-primary);
  border-radius: 8px;
}

.service-corpus-tree::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

.service-corpus-node-btn,
.service-corpus-service {
  position: relative;
  width: max-content;
  min-width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  display: grid;
  align-items: center;
  column-gap: 3px;
  min-height: 24px;
  border-radius: var(--radius-md);
  text-align: left;
}

.service-corpus-node-btn {
  grid-template-columns: max-content max-content;
  justify-content: space-between;
  column-gap: 8px;
}

.service-corpus-node-label {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 3px;
  min-width: 0;
  text-align: left;
}

.service-corpus-node {
  position: relative;
}

.service-corpus-node > [role="group"] {
  position: relative;
  margin-left: 3px;
}

.service-corpus-node-btn:hover,
.service-corpus-service:hover,
.service-corpus-service.selected {
  background: var(--bg-hover);
}

.service-corpus-node-btn.selected {
  background: color-mix(in srgb, var(--accent-success) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--accent-success);
}

.service-corpus-node-btn.selected .service-corpus-person {
  color: var(--text-primary);
  font-weight: 650;
}

.service-corpus-caret {
  width: 12px;
  color: var(--text-primary);
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
}

.service-corpus-person,
.service-corpus-service-name {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  text-align: left;
}

.service-corpus-person small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
}

.service-corpus-count,
.service-corpus-status {
  justify-self: end;
  border-radius: 999px;
  padding: 2px 6px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 11px;
}

.service-corpus-status.indexed {
  color: var(--accent-success);
}

.service-corpus-status.pending {
  color: var(--accent-warning);
}

.service-corpus-service-divider {
  display: grid;
  grid-template-columns: minmax(16px, 1fr) auto minmax(28px, 2fr);
  align-items: center;
  gap: 6px;
  margin: 3px 0 2px;
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: max-content;
  min-width: 100%;
}

.service-corpus-service-divider span {
  height: 1px;
  background: var(--border-color);
}

.service-corpus-service-divider em {
  font-style: normal;
}

.service-corpus-service {
  grid-template-columns: max-content auto;
  color: var(--text-secondary);
  font-size: 12px;
}

.service-corpus-overflow,
.service-corpus-empty {
  color: var(--text-muted);
  font-size: 12px;
  padding: 10px 12px;
}

.service-corpus-error {
  color: var(--accent-error);
}

.service-corpus-detail-body {
  padding: 16px;
}

.service-corpus-detail-placeholder {
  max-width: 720px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  padding: 20px;
}

.service-corpus-detail-placeholder h3 {
  margin: 6px 0 8px;
  font-size: 20px;
}

.service-corpus-detail-placeholder p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Service Corpus — service top section */
.service-corpus-detail-page .canvas-page-header {
  padding: 6px 10px;
  background: var(--bg-secondary);
}
.service-corpus-detail-page .canvas-page-header h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.service-corpus-detail-page .canvas-page-kicker:empty,
.service-corpus-detail-page [data-service-corpus-detail-subtitle]:empty,
.service-corpus-detail-page [data-service-corpus-detail-stamp]:empty { display: none; }
.service-corpus-detail-page .canvas-page-body.service-corpus-detail-body {
  padding: 8px 10px;
}
.service-top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 6px;
  align-items: stretch;
  max-block-size: calc(100vh / 3);
  overflow: hidden;
  padding: 4px 6px;
  background:
    radial-gradient(circle at 6% 0%, rgba(0, 120, 212, 0.10), transparent 32%),
    linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  border-radius: var(--radius-md);
}
.service-top-col { display: grid; gap: 3px; min-width: 0; }
.service-top-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 24px;
  gap: 8px;
  align-items: center;
  padding: 2px 0;
  border-bottom: 1px solid var(--border-color);
  min-height: 26px;
}
.service-top-row:last-child { border-bottom: 0; }
.service-top-k {
  color: var(--text-muted, var(--text-secondary));
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.service-top-v {
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  word-break: break-word;
  min-width: 0;
}
.service-top-sub {
  display: block;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 10px;
}
.service-top-chip {
  display: inline-block;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(0, 120, 212, 0.10);
  color: var(--accent-primary);
  font-size: 10px;
  font-weight: 700;
  margin-right: 3px;
}
.service-top-chip.ok { background: rgba(16, 124, 16, 0.12); color: var(--accent-success); }
.service-top-chip.high { background: rgba(196, 49, 75, 0.12); color: #c4314b; }
.service-top-v a { color: var(--accent-primary); text-decoration: none; }
.service-top-v a:hover { text-decoration: underline; }

/* =============================================
   First-run guided tour
   ============================================= */

.guided-tour-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
}

.guided-tour-scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .34);
  pointer-events: auto;
}

.guided-tour-card {
  position: fixed;
  width: min(360px, calc(100vw - 32px));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
  padding: 16px;
  pointer-events: auto;
}

.guided-tour-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: #fff;
  font-weight: 800;
  margin-bottom: 8px;
}

.guided-tour-card h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.guided-tour-card p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.45;
}

.guided-tour-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.guided-tour-progress {
  flex: 1;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}

.guided-tour-target {
  position: relative;
  z-index: calc(var(--z-overlay) + 1);
  outline: 3px solid var(--accent-primary);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.whoami-send-highlight {
  animation: whoami-send-pulse .75s ease-in-out 3;
  box-shadow: 0 0 0 5px rgba(79, 70, 229, .22), 0 0 20px rgba(79, 70, 229, .34);
}

@keyframes whoami-send-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

.btn-confirm {
  background: var(--accent-success);
  color: white;
}

.btn-confirm:hover {
  background: #388e3c;
}

/* New Chat Button */
.btn-new-chat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.btn-new-chat:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--accent-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-new-chat .plus-icon {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

/* Stop Button */
.stop-btn {
  display: block;
  margin: var(--spacing-md) auto 0;
  padding: var(--spacing-sm) var(--spacing-xl);
  border-radius: 20px;
  background-color: var(--accent-error);
  color: #fff !important;
}

.stop-btn:hover {
  background-color: #d32f2f;
  color: #fff !important;
}

.stop-btn.hidden {
  display: none;
}

/* Export Button */
.btn-export {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  opacity: 0.6;
  transition: opacity var(--transition-normal);
}

.btn-export:hover {
  opacity: 1;
}

.btn-export-response {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.btn-export-response:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

.btn-export-response svg {
  width: 16px;
  height: 16px;
}

/* Copy Button */
.btn-copy {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-xs);
  padding: 2px var(--spacing-xs);
  border-radius: 3px;
  opacity: 0.6;
  transition: opacity var(--transition-normal), background var(--transition-normal);
}

.btn-copy:hover {
  opacity: 1;
  background: var(--bg-tertiary);
}

/* Resume Button */
.btn-resume {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--spacing-sm) var(--spacing-lg);
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.btn-resume:hover {
  background: linear-gradient(135deg, #66bb6a 0%, #43a047 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.btn-resume svg {
  flex-shrink: 0;
}

.btn-resume.hidden {
  display: none;
}

/* =============================================
   DROPDOWNS - GENERIC
   ============================================= */

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown .btn-icon {
  display: flex;
  align-items: center;
  gap: 2px;
}

.dropdown-arrow {
  opacity: 0.6;
  margin-left: 2px;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--spacing-xs);
  min-width: 180px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.1s;
}

.dropdown-item:first-child {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.dropdown-item:last-child {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.dropdown-item:hover {
  background-color: var(--bg-hover);
}

.dropdown-item-danger {
  color: var(--accent-error);
}

.dropdown-item-danger:hover {
  background-color: rgba(239, 68, 68, 0.1);
}

.dropdown-divider {
  height: 1px;
  background-color: var(--border-color);
  margin: var(--spacing-xs) 0;
}

/* Main Menu Dropdown */
.btn-menu {
  padding: var(--spacing-sm);
}

.main-menu-dropdown {
  min-width: 240px;
}

.main-menu-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 10px 14px;
}

.menu-icon {
  width: 20px;
  text-align: center;
}



/* Submenu Support */
.dropdown-item-submenu {
  position: relative;
}

.has-submenu {
  display: flex;
  align-items: center;
  width: 100%;
}

.submenu-arrow {
  margin-left: auto;
  font-size: 0.6rem;
  color: var(--text-muted);
}

.submenu {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 200px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 101;
}

.submenu.open-left {
  left: auto;
  right: 100%;
  transform: translateX(8px);
}

.dropdown-item-submenu:hover .submenu,
.dropdown-item-submenu.open .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.dropdown-item-submenu:hover .submenu.open-left,
.dropdown-item-submenu.open .submenu.open-left {
  transform: translateX(0);
}

.submenu .dropdown-item:first-child {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.submenu .dropdown-item:last-child {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* =============================================
   MODEL DROPDOWN
   ============================================= */

.model-dropdown {
  position: relative;
}

.model-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  min-width: 160px;
}

.model-dropdown-trigger:hover {
  background-color: var(--bg-hover);
}

.model-dropdown-arrow {
  margin-left: auto;
  opacity: 0.6;
}

.model-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--spacing-xs);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  min-width: 200px;
  max-height: 400px;
  overflow-y: auto;
  z-index: var(--z-modal);
}

.model-dropdown.open .model-dropdown-menu {
  display: block;
}

.model-list {
  padding: var(--spacing-xs) 0;
}

.model-item {
  padding: 10px 14px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  transition: background var(--transition-fast);
}

.model-item:hover {
  background: var(--bg-hover);
}

.model-item.selected {
  color: #22c55e;
}

.model-item.selected::before {
  content: "✓ ";
  font-weight: bold;
}

/* Model Tooltip */
.model-tooltip {
  display: none;
  position: absolute;
  top: 0;
  right: 100%;
  margin-right: var(--spacing-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  padding: var(--spacing-md);
  min-width: 280px;
  max-width: 340px;
  max-height: 400px;
  overflow-y: auto;
  z-index: var(--z-tooltip);
}

.model-tooltip.visible {
  display: block;
}

.model-tooltip pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* =============================================
   SESSIONS DROPDOWN
   ============================================= */

.sessions-dropdown {
  position: relative;
  display: inline-block;
}

.btn-sessions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--spacing-sm) 14px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: 500;
  transition: all var(--transition-normal);
}

.btn-sessions:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--accent-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-sessions svg {
  width: 16px;
  height: 16px;
}

.sessions-count {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.75rem;
  min-width: 20px;
  text-align: center;
}

.sessions-count:empty {
  display: none;
}

.sessions-arrow {
  opacity: 0.7;
  transition: transform var(--transition-normal);
}

.sessions-dropdown.open .sessions-arrow {
  transform: rotate(180deg);
}

.sessions-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  min-width: 320px;
  max-width: 400px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 24px var(--shadow-color);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  overflow: hidden;
}

.sessions-dropdown.open .sessions-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sessions-header {
  padding: var(--spacing-md) var(--spacing-lg);
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-tertiary);
}

.sessions-list {
  max-height: 400px;
  overflow-y: auto;
  padding: var(--spacing-sm) 0;
}

.sessions-list::-webkit-scrollbar {
  width: 6px;
}

.sessions-list::-webkit-scrollbar-track {
  background: transparent;
}

.sessions-list::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 3px;
}

.sessions-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 32px var(--spacing-lg);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.sessions-empty span:first-child {
  font-size: 2rem;
}

.session-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px var(--spacing-lg);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.session-item:hover {
  background-color: var(--bg-hover);
}

.session-item.current {
  background-color: var(--bg-tertiary);
}

.session-status-dot {
  display: none;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round);
  background-color: var(--text-muted);
  flex-shrink: 0;
  margin-top: var(--spacing-xs);
}

.session-info {
  flex: 1;
  min-width: 0;
}

.session-title {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.session-time {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.session-delete {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.session-item:hover .session-delete {
  opacity: 1;
}

.session-delete:hover {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--accent-error);
}

.session-switch-loading {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: clamp(56px, 12vh, 112px) var(--spacing-lg);
  animation: fadeIn 0.22s ease-out;
}

.session-switch-loading-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.session-switch-spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: var(--radius-round);
  border: 2px solid rgba(79, 195, 247, 0.2);
  border-top-color: rgba(79, 195, 247, 0.9);
  animation: spin 0.8s linear infinite;
}

.session-switch-loading-copy {
  min-width: 0;
}

.session-switch-loading-title {
  color: var(--text-primary);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(280px, 52vw);
}

.sessions-footer {
  padding: var(--spacing-sm);
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-tertiary);
}

.sessions-clear-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--accent-error);
  cursor: pointer;
  font-size: 0.85rem;
  transition: all var(--transition-fast);
}

.sessions-clear-all:hover {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: var(--accent-error);
}

/* =============================================
   USER DROPDOWN
   ============================================= */

/* === Gateway Mode Toggle === */
.gateway-mode-toggle {
  position: relative;
  display: inline-flex;
  margin-right: 8px;
}

.gateway-mode-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border-color, #d0d0d0);
  border-radius: 16px;
  background: var(--bg-secondary, #f5f5f5);
  color: var(--text-secondary, #555);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.gateway-mode-btn:hover {
  background: var(--bg-tertiary, #e8e8e8);
  border-color: var(--accent-color, #0078d4);
}

.gateway-mode-icon {
  font-size: 13px;
}

.gateway-mode-label {
  font-size: 11px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.gateway-mode-arrow {
  opacity: 0.5;
  transition: transform 0.15s;
}

.gateway-mode-toggle.open .gateway-mode-arrow {
  transform: rotate(180deg);
}

/* Remote mode visual indicator */
.gateway-mode-btn.mode-remote {
  background: #e8f4fd;
  border-color: #0078d4;
  color: #0078d4;
}

.gateway-mode-btn.mode-local {
  background: var(--bg-secondary, #f5f5f5);
}

/* Dropdown menu */
.gateway-mode-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 240px;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #d0d0d0);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 1000;
  overflow: hidden;
}

.gateway-mode-toggle.open .gateway-mode-menu {
  display: block;
}

.gateway-mode-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.gateway-mode-option:hover {
  background: var(--bg-secondary, #f5f5f5);
}

.gateway-mode-option:first-child {
  border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.gateway-opt-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.gateway-opt-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.gateway-opt-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #333);
}

.gateway-opt-desc {
  font-size: 11px;
  color: var(--text-tertiary, #888);
  margin-top: 1px;
}

.gateway-opt-check {
  /* Was #0078d4 (Windows blue). */
  color: var(--dc-accent);
  font-size: 16px;
  font-weight: bold;
  flex-shrink: 0;
}

/* === Mode Switch Overlay === */

.mode-switch-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: overlayFadeIn 0.2s ease-out;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.mode-switch-spinner-card {
  background: var(--bg-primary, #1e1e1e);
  border: 1px solid var(--border-color, #333);
  border-radius: 16px;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.mode-switch-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color, #444);
  /* Was #0078d4 (Windows blue), a latent leak in a rarely-seen
     overlay spinner. */
  border-top-color: var(--dc-accent);
  border-radius: 50%;
  animation: modeSpin 0.8s linear infinite;
}

@keyframes modeSpin {
  to { transform: rotate(360deg); }
}

.mode-switch-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  letter-spacing: 0.2px;
}

.mode-switch-subtext {
  font-size: 12px;
  color: var(--text-tertiary, #888);
}

/* === User Identity Dropdown === */

.user-dropdown {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  order: 100;
}

.user-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 5px 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
  overflow: visible;
}

.user-dropdown-trigger:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-primary);
}

.user-avatar-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  flex: 0 0 auto;
  overflow: visible;
}

.user-avatar-img {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-round);
  object-fit: cover;
}

.user-avatar-img + .user-display-name {
  display: none;
}

.user-display-name {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background: var(--text-muted);
}

.user-status-dot.authenticated {
  background: var(--accent-success);
  box-shadow: 0 0 4px rgba(76, 175, 80, 0.5);
}

.user-dropdown-arrow {
  opacity: 0.6;
  transition: transform var(--transition-normal);
}

.user-dropdown.open .user-dropdown-arrow {
  transform: rotate(180deg);
}

.user-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  min-width: 260px;
  background-color: var(--dc-paper);
  border: 1px solid var(--dc-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 26px var(--dc-card-shadow);
  color: var(--dc-ink-2);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  overflow: hidden;
}

.user-dropdown.open .user-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-dropdown-header {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--dc-line);
}

.user-dropdown-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
  color: var(--dc-ink-2);
}

.user-dropdown-icon {
  width: 20px;
  text-align: center;
}

.user-dropdown-name {
  font-weight: 600;
  color: var(--dc-ink);
  font-size: var(--font-size-md);
  line-height: 1.3;
}

.user-dropdown-title {
  font-size: var(--font-size-sm);
  color: var(--dc-ink-2);
  margin-top: 2px;
  line-height: 1.3;
}
.user-dropdown-title:empty { display: none; }

.user-dropdown-email {
  font-size: var(--font-size-sm);
  color: var(--dc-ink-2);
  margin-top: 4px;
  word-break: break-all;
  line-height: 1.3;
}
.user-dropdown-email:empty { display: none; }

.user-dropdown-row {
  padding: var(--spacing-xs) var(--spacing-lg);
}

.user-dropdown-divider {
  height: 1px;
  background-color: var(--dc-line);
}

.user-dropdown-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-sm);
  color: var(--dc-ink-2);
}

.user-status-indicator {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background: var(--text-muted);
}

.user-status-indicator.authenticated {
  background: var(--accent-success);
}

/* =============================================
   DOWNLOADS DROPDOWN
   ============================================= */

.downloads-dropdown {
  position: relative;
}

.downloads-dropdown.hidden {
  display: none;
}

.downloads-btn {
  position: relative;
}

.downloads-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: var(--accent-success);
  color: white;
  font-size: 10px;
  font-weight: bold;
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.downloads-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--spacing-sm);
  width: 280px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px var(--shadow-color);
  z-index: var(--z-modal);
  display: none;
  overflow: hidden;
}

.downloads-dropdown.open .downloads-menu {
  display: block;
}

.downloads-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.downloads-close {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.downloads-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.downloads-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--spacing-md);
}

.downloads-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.downloads-info {
  flex: 1;
  min-width: 0;
}

.downloads-filename {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  word-break: break-all;
}

.downloads-actions {
  display: flex;
  gap: var(--spacing-sm);
}

.downloads-action {
  padding: 5px 10px;
  font-size: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.downloads-action:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

/* =============================================
   CANVAS PAGES / USAGE METRICS
   ============================================= */

.canvas-workspace-page {
  width: 100%;
  min-height: 100%;
}

.canvas-page-panel {
  width: 100%;
  min-height: calc(100vh - 124px);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.canvas-page-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 26px 18px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-tertiary);
}

.canvas-page-header h2 {
  margin: 4px 0 6px;
  font-size: 26px;
  font-weight: 650;
  color: var(--text-primary);
}

.canvas-page-header p {
  margin: 0;
  color: var(--text-secondary);
  max-width: 760px;
}

.canvas-page-kicker {
  color: var(--accent-primary);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.canvas-page-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.canvas-page-stamp {
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
}

.canvas-page-body {
  padding: 24px 26px 28px;
}

.canvas-page-loading,
.usage-empty {
  color: var(--text-secondary);
  padding: 22px;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
}

.usage-period-tabs {
  display: flex;
  width: fit-content;
  margin: 16px 26px 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-primary);
}

.usage-period-tab {
  border: 0;
  border-right: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.usage-period-tab:last-child {
  border-right: 0;
}

.usage-period-tab.active {
  background: color-mix(in srgb, var(--accent-primary) 16%, var(--bg-secondary));
  color: var(--text-primary);
  box-shadow: inset 0 -2px 0 var(--accent-primary);
}

.usage-dashboard-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border-color);
}

.usage-dashboard-summary h3 {
  margin: 3px 0 5px;
  font-size: 18px;
  color: var(--text-primary);
}

.usage-dashboard-summary p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.usage-section-label,
.usage-summary-meta {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.usage-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.usage-kpi,
.usage-card {
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  padding: 18px;
}

.usage-kpi {
  border-left: 3px solid var(--accent-primary);
}

.usage-kpi-label {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.usage-kpi-value {
  color: var(--text-primary);
  font-size: 32px;
  font-weight: 700;
  margin-top: 8px;
}

.usage-kpi-hint {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 6px;
}

.usage-dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

.usage-card-wide {
  grid-column: span 2;
}

.usage-card-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 14px;
}

.usage-card-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 16px;
}

.usage-card-header span {
  color: var(--text-muted);
  font-size: 12px;
}

.usage-trend {
  position: relative;
  height: 340px;
  padding: 34px 0 0;
  border-top: 1px solid var(--border-color);
  background: var(--bg-primary);
}

.usage-trend-legend {
  position: absolute;
  top: 8px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-muted);
  font-size: 12px;
  z-index: 3;
}

.usage-trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.usage-legend-line {
  width: 18px;
  height: 0;
  border-top: 2px solid var(--accent-primary);
}

.usage-legend-sessions {
  border-color: #0078d4;
}

.usage-legend-users {
  border-color: #107c10;
}

.usage-legend-repos {
  border-color: #5c6bc0;
}

.usage-trend-svg {
  position: absolute;
  inset: 34px 0 34px;
  width: 100%;
  height: calc(100% - 34px);
  overflow: visible;
  z-index: 2;
}

.usage-chart-grid {
  stroke: color-mix(in srgb, var(--border-color) 65%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.usage-chart-axis {
  stroke: color-mix(in srgb, var(--text-muted) 45%, var(--border-color));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.usage-chart-axis-label {
  fill: var(--text-muted);
  font-size: 12px;
}

.usage-chart-y-label {
  text-anchor: end;
}

.usage-chart-x-label {
  text-anchor: middle;
}

.usage-trend-line {
  fill: none;
  stroke: #0078d4;
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}

.usage-trend-line-sessions {
  stroke: #0078d4;
}

.usage-trend-line-users {
  stroke: #107c10;
}

.usage-trend-line-repos {
  stroke: #5c6bc0;
}

.usage-trend-target {
  fill: transparent;
  pointer-events: all;
}

.usage-trend-hit {
  cursor: pointer;
}

.usage-trend-hit:hover .usage-trend-target,
.usage-trend-hit:focus-visible .usage-trend-target {
  fill: color-mix(in srgb, var(--accent-primary) 8%, transparent);
}

.usage-trend-point {
  fill: #0078d4;
  stroke: var(--bg-primary);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.usage-trend-point-users {
  fill: #107c10;
}

.usage-trend-point-repos {
  fill: #5c6bc0;
}

.usage-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

.usage-table th {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: right;
  text-transform: uppercase;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--border-color);
}

.usage-table th:first-child,
.usage-table td:first-child {
  text-align: left;
}

.usage-table td {
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
  color: var(--text-secondary);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-table td:first-child {
  color: var(--text-primary);
  font-weight: 600;
  padding-right: 12px;
}

.usage-bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(18px, 1fr);
  gap: 8px;
  height: 210px;
  align-items: end;
}

.usage-bar-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.usage-bar-track {
  width: 100%;
  height: 170px;
  border-radius: var(--radius-round);
  background: var(--bg-tertiary);
  display: flex;
  align-items: end;
  overflow: hidden;
}

.usage-bar-fill {
  width: 100%;
  background: var(--accent-primary);
  border-radius: var(--radius-round) var(--radius-round) 0 0;
}

.usage-bar-label {
  color: var(--text-muted);
  font-size: 11px;
  max-width: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usage-rank-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.usage-rank-row {
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.usage-rank-label {
  color: var(--text-primary);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-rank-metric {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .usage-kpi-grid,
  .usage-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .usage-card-wide {
    grid-column: span 1;
  }

  .canvas-page-header {
    flex-direction: column;
  }
}

/* =============================================
   MESSAGES
   ============================================= */

.message {
  display: flex;
  gap: var(--spacing-md);
  animation: fadeIn 0.3s ease;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 600;
  font-size: var(--font-size-base);
}

.user-message .message-avatar {
  background-color: var(--accent-primary);
  color: var(--dc-paper);
}

.assistant-message .message-avatar {
  background-color: var(--bg-tertiary);
  color: var(--accent-primary);
}

.message-avatar .avatar-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.assistant-message {
  position: relative;
}

.message-content {
  flex: 1;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-xl);
  max-width: calc(100% - 48px);
}

.user-message .message-content {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--user-message-bg);
  border: 1px solid var(--user-message-border);
  border-left: 4px solid var(--dcx-accent);
  color: var(--user-message-fg);
  border-bottom-left-radius: var(--radius-sm);
  white-space: pre-wrap;
}

.user-message .message-content.has-question-timing {
  flex-direction: column;
  align-items: stretch;
}

.user-message .message-content-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: pre-wrap;
}

.session-ref-title-chip-row {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  position: relative;
}

.live-status-bar .session-ref-title-chip-row {
  align-items: center;
  display: inline-flex;
  gap: 2px;
  position: relative;
}

.live-status-bar .session-ref-title-chip-row:empty {
  display: none;
}

.live-status-bar .session-ref-titlebar-action {
  font-size: 13px;
  line-height: 1;
  margin-left: 6px;
}

.user-message .question-display-copy {
  line-height: 1.55;
}

.user-message .question-display-collapsed .question-display-copy {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.user-message .question-display-toggle {
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--dcx-accent);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

.user-message .question-display-toggle:hover {
  text-decoration: underline;
}

.question-timing-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 8px;
  width: 100%;
  color: var(--user-message-fg-muted);
  font-size: 12px;
  line-height: 1.2;
  opacity: 0.9;
  white-space: nowrap;
  order: 999;
}

.question-model-effort-footer {
  align-self: flex-start;
  margin-top: 8px;
  color: var(--user-message-fg-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  opacity: 0.9;
  order: 998;
}

.question-duration {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  color: inherit;
  font-size: 13px;
  line-height: 1;
  margin-right: 4px;
}

.question-annotation-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.question-annotation {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-left: 3px solid color-mix(in srgb, var(--dcx-ink) 18%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--dcx-surface) 45%, transparent);
  color: inherit;
}

.question-annotation-queue {
  border-color: color-mix(in srgb, var(--dcx-ink) 14%, transparent);
  border-left-color: var(--dcx-warning);
  background: color-mix(in srgb, var(--dcx-warning) 12%, var(--dcx-surface));
  font-weight: 600;
}

.question-annotation-steer {
  border-color: color-mix(in srgb, var(--dcx-ink) 14%, transparent);
  border-left-color: var(--dcx-accent);
  background: color-mix(in srgb, var(--dcx-surface) 80%, transparent);
  font-weight: 600;
}

.question-annotation .action-icon {
  display: inline-flex;
  vertical-align: -4px;
  margin-right: 6px;
  color: var(--dcx-action);
}

.question-annotation .question-annotation-body > :first-child:not(.question-display-copy) {
  display: inline;
}

.user-message {
  cursor: pointer;
}

.assistant-message .message-content {
  background-color: var(--assistant-message-bg);
  border: 1px solid var(--dc-line);
  border-left: 4px solid var(--dc-accent);
  border-bottom-left-radius: var(--radius-sm);
  color: var(--dc-ink);
  box-shadow: 0 8px 24px var(--dc-card-shadow);
}

.assistant-message .message-content .mermaid-container {
  background: var(--dc-paper);
}

/* Scroll-linked edge fade — chat-bubble tables only (never
   `.info-detail-body`, which keeps the plain `.markdown-table`
   background above untouched). The "cover" layers scroll together with
   the table (background-attachment: local) and paint over the
   "shadow" layers, which stay pinned to the viewport
   (background-attachment: scroll) — so a shadow is only uncovered on
   whichever edge still has content past it, and it disappears once you
   scroll that edge into view. `.markdown-table`'s own background is
   turned off for this context only (below) so the fade shows through
   the body rows; `border-radius` is repeated here so the wrapper — not
   just the table — clips to the same rounded footprint, which keeps
   narrow (non-scrolling) tables looking like the original rounded
   card instead of a background rectangle peeking out at the corners. */
.assistant-message .message-content .table-wrapper {
  --table-fade-bg: var(--dc-paper);
  border-radius: var(--radius-lg);
  background-color: var(--table-fade-bg);
  background-image:
    linear-gradient(to right, var(--table-fade-bg) 40%, transparent),
    linear-gradient(to left, var(--table-fade-bg) 40%, transparent),
    linear-gradient(to right, rgba(0, 0, 0, 0.22), transparent),
    linear-gradient(to left, rgba(0, 0, 0, 0.22), transparent);
  background-repeat: no-repeat;
  background-position: left, right, left, right;
  background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

.assistant-message .message-content .markdown-table {
  background-color: transparent;
}

.assistant-message .message-content .markdown-table th {
  background: var(--dc-band);
}

.assistant-message .message-content .markdown-table tbody tr:nth-child(even) {
  background: var(--dc-ground);
}

.assistant-message .message-content .markdown-table tbody tr:hover {
  background: var(--dc-band);
}

.system-message {
  justify-content: center;
}

.system-message .message-content {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  max-width: min(1180px, calc(100% - 32px));
  text-align: center;
}

#welcomeMessage {
  width: 100%;
}

#welcomeMessage .message-content {
  max-width: none;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  text-align: left;
}

.home-shell {
  padding: 18px 24px 24px;
}

.home-hero {
  display: block;
  margin-bottom: 10px;
}

.home-hero-copy {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 40px;
}

.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dc-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--dc-hue-u), var(--dc-accent));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--dc-accent) 9%, transparent);
}

/* The greeting is deliberately the quieter half of this heading: "Welcome," is
   muted and unweighted so the reader's own name carries the emphasis. Sizing it
   down from a display scale keeps it from outranking the tagline, which is the
   line that actually explains the product. */
#welcomeMessage h2 {
  max-width: 449px;
  margin: 0;
  color: var(--dc-ink);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

#welcomeMessage h2 .welcome-greeting {
  color: var(--dc-ink-3);
  font-weight: 400;
}

#welcomeMessage h2 .welcome-name {
  color: var(--dc-ink);
  font-weight: 700;
}

/* 76ch is the narrowest measure that still sets the tagline on two lines. The
   sentence is 144 characters; below roughly 75ch it breaks to three, which
   pushes the starter-prompt rail below the fold on a 900px-tall viewport. */
#welcomeMessage .home-hero-copy > p {
  max-width: 76ch;
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.5;
}

#welcomeMessage p {
  max-width: 620px;
  margin: 0;
  color: var(--dc-ink-2);
  font-size: 15px;
  line-height: 1.55;
}

body:has(#welcomeMessage) .input-container:not(.drag-over) {
  background-color: transparent;
}

.home-beta-note a,
.home-beta-note .inline-link-button {
  color: var(--dc-accent);
  text-decoration: none;
  white-space: nowrap;
}

.home-beta-note a:hover,
.home-beta-note .inline-link-button:hover {
  text-decoration: underline;
}

.home-beta-note a:focus-visible,
.home-beta-note .inline-link-button:focus-visible {
  outline: 2px solid var(--dc-accent);
  outline-offset: 2px;
}

.system-message h2 {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-md);
  color: var(--accent-primary);
}

.system-message p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
}

.message.restored .message-content::before {
  content: "📂 ";
  opacity: 0.6;
}

/* Message Actions */
.message-actions {
  display: flex;
  justify-content: flex-start;
  padding: var(--spacing-sm) 0 0 0;
  margin-top: var(--spacing-sm);
}

/* P21.SP4.T7 HITL-G — Turn-anchored inline error card.
   Rendered by streaming.js `case 'error'` when a turn DOM anchor is
   available (originator path). Persistent — no auto-dismiss, no close
   button. Future Retry slot appends inside `.turn-error-card`. */
.turn-error-card {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--error-border, #f5c2c7);
  background-color: var(--error-bg, #fdecea);
  color: var(--error-text, #842029);
  font-size: 0.9rem;
  line-height: 1.4;
  word-break: break-word;
}

.turn-error-card-label {
  font-weight: 600;
  margin-bottom: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  opacity: 0.85;
}

.turn-error-card-body {
  white-space: pre-wrap;
}

/* Message Body - wraps content and actions */
.message-body {
  flex: 1;
  min-width: 0;
}

/* Collapse Chevron — toggle on user-message to show/hide following assistant response */
.collapse-chevron {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 12px;
  padding: 4px 8px;
  flex-shrink: 0;
  align-self: center;
  transition: transform 0.2s ease, color 0.15s ease;
  line-height: 1;
}

.collapse-chevron:hover {
  color: var(--accent-primary);
}

.collapse-chevron.expanded {
  transform: rotate(90deg);
}

/* Collapsed assistant message — hide body with animated max-height */
.assistant-message.collapsed .message-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
  margin: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}

.assistant-message:not(.collapsed) .message-body {
  max-height: none;
  opacity: 1;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}

/* Hide avatar when collapsed to keep layout tight */
.assistant-message.collapsed .message-avatar {
  display: none;
}

.assistant-message.collapsed {
  margin: 0;
  padding: 0;
  min-height: 0;
}

.reasoning-container.collapsed,
.main-reasoning-panel.collapsed {
  display: none;
}

.conversation-float-rail {
  position: fixed;
  right: 18px;
  top: 50%;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(20, 20, 23, 0.96), rgba(5, 5, 8, 0.92));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transform: translateY(-50%);
  backdrop-filter: blur(14px);
}

.conversation-float-rail.is-dragging {
  user-select: none;
}

.conversation-rail-drag-handle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 18px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(248, 250, 252, 0.7);
  cursor: grab;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  padding: 0;
}

.conversation-rail-drag-handle:hover,
.conversation-rail-drag-handle:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: none;
}

.conversation-rail-drag-handle:active {
  cursor: grabbing;
}

.conversation-rail-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  color: #f8fafc;
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.conversation-rail-btn:hover,
.conversation-rail-btn:focus-visible {
  /* Was Tailwind blue-400/blue-600 (rgba(96,165,250,.7) /
     rgba(37,99,235,.38)) — the button the owner screenshotted rendering as a
     solid blue chip. Same alpha, warm hue, derived from the brand accent so
     it stays correct in both themes. Rail chrome (background gradient,
     border, base icon colour) is neutral white-on-near-black by design and
     is unchanged — only the blue hue moves. */
  border-color: color-mix(in srgb, var(--dcx-accent) 70%, transparent);
  background: color-mix(in srgb, var(--dcx-accent) 38%, transparent);
  color: #ffffff;
  outline: none;
  transform: translateX(-1px) scale(1.04);
}

.conversation-rail-btn:active {
  transform: translateX(-1px) scale(0.98);
}

.conversation-rail-divider {
  width: 22px;
  height: 1px;
  margin: 5px auto 3px;
  background: rgba(255, 255, 255, 0.32);
}

/* Getting Started */
.getting-started {
  text-align: left;
  background-color: var(--bg-tertiary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-top: var(--spacing-lg);
}

.getting-started h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
}

.getting-started ol {
  margin-left: var(--spacing-xl);
  color: var(--text-secondary);
}

.getting-started li {
  margin-bottom: var(--spacing-sm);
}

/* Code in Messages */
.message-content pre {
  background-color: var(--code-bg);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--spacing-md) 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
}

.message-content code {
  font-family: var(--font-mono);
  background-color: var(--code-bg);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
}

.message-content pre code {
  background: none;
  padding: 0;
}

/* Session Restored Banner */
.session-restored-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(56, 142, 60, 0.15) 100%);
  border: 1px dashed #4caf50;
  border-radius: var(--radius-lg);
  margin: var(--spacing-lg) 0;
  color: #81c784;
  font-size: 13px;
}

.session-restored-banner .banner-icon {
  font-size: 18px;
}

/* =============================================
   MODAL
   ============================================= */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
}

.modal.active {
  display: flex;
}

.modal-content {
  background-color: var(--bg-secondary);
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  width: 90%;
  max-width: 500px;
  border: 1px solid var(--border-color);
}

.modal-content h2 {
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
}

.modal-content p {
  margin-bottom: var(--spacing-lg);
  color: var(--text-secondary);
}

.modal-content input {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-xl);
  outline: none;
}

.modal-content input:focus {
  border-color: var(--accent-primary);
}

.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
}

/* Error Message */
.error-message {
  background-color: rgba(244, 67, 54, 0.1);
  border: 1px solid var(--accent-error);
  color: var(--accent-error);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin: var(--spacing-lg) 0;
}

/* =============================================
   VOICE INPUT
   ============================================= */

/* Inline Waveform */
.voice-waveform-inline {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 0 var(--spacing-sm);
}

.voice-waveform-inline .waveform-bars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 32px;
  flex: 1;
}

.voice-waveform-inline .waveform-bar {
  width: 3px;
  height: 8px;
  min-height: 4px;
  background: var(--accent-success);
  border-radius: 2px;
  transition: height 0.05s ease-out;
  animation: wave-idle-inline 1.2s ease-in-out infinite;
}

.voice-waveform-inline .waveform-bar:nth-child(1) { animation-delay: 0s; }
.voice-waveform-inline .waveform-bar:nth-child(2) { animation-delay: 0.08s; }
.voice-waveform-inline .waveform-bar:nth-child(3) { animation-delay: 0.16s; }
.voice-waveform-inline .waveform-bar:nth-child(4) { animation-delay: 0.24s; }
.voice-waveform-inline .waveform-bar:nth-child(5) { animation-delay: 0.32s; }
.voice-waveform-inline .waveform-bar:nth-child(6) { animation-delay: 0.40s; }
.voice-waveform-inline .waveform-bar:nth-child(7) { animation-delay: 0.48s; }
.voice-waveform-inline .waveform-bar:nth-child(8) { animation-delay: 0.56s; }
.voice-waveform-inline .waveform-bar:nth-child(9) { animation-delay: 0.48s; }
.voice-waveform-inline .waveform-bar:nth-child(10) { animation-delay: 0.40s; }
.voice-waveform-inline .waveform-bar:nth-child(11) { animation-delay: 0.32s; }
.voice-waveform-inline .waveform-bar:nth-child(12) { animation-delay: 0.24s; }
.voice-waveform-inline .waveform-bar:nth-child(13) { animation-delay: 0.16s; }
.voice-waveform-inline .waveform-bar:nth-child(14) { animation-delay: 0.08s; }
.voice-waveform-inline .waveform-bar:nth-child(15) { animation-delay: 0s; }
.voice-waveform-inline .waveform-bar:nth-child(16) { animation-delay: 0.08s; }

@keyframes wave-idle-inline {
  0%, 100% { height: 6px; }
  50% { height: 24px; }
}

.voice-waveform-inline .waveform-label {
  font-size: 0.85rem;
  color: var(--accent-success);
  font-weight: 500;
  white-space: nowrap;
}

.voice-waveform-inline.transcribing .waveform-bar {
  background: var(--accent-primary);
  animation: none;
  height: 8px;
}

.voice-waveform-inline.transcribing .waveform-label {
  color: var(--accent-primary);
}

/* Voice Recording Indicator */
.voice-recording-indicator .recording-dot {
  width: 8px;
  height: 8px;
  background: var(--accent-error);
  border-radius: var(--radius-round);
  animation: blink 1s ease-in-out infinite;
}

/* Voice Error Message */
.voice-error-message {
  max-width: 900px;
  margin: 0 auto var(--spacing-md);
  padding: 10px var(--spacing-lg);
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid var(--accent-error);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent-error);
  font-size: 0.9rem;
}

.voice-error-icon {
  font-size: 1.1rem;
}

.voice-error-text {
  flex: 1;
}

.voice-error-close {
  background: none;
  border: none;
  color: var(--accent-error);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 var(--spacing-xs);
  opacity: 0.7;
}

.voice-error-close:hover {
  opacity: 1;
}

/* Linear Waveform Visualizer */
.voice-waveform {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(244, 67, 54, 0.08);
  border: 1px solid var(--accent-error);
  border-radius: 10px;
  animation: waveform-fade-in 0.3s ease;
}

@keyframes waveform-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.waveform-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
}

.waveform-bar {
  width: 3px;
  height: 4px;
  min-height: 4px;
  background: var(--accent-error);
  border-radius: 2px;
  transition: height 0.05s ease-out;
}

.voice-waveform.idle .waveform-bar:nth-child(1) { animation: wave-idle 1.2s ease-in-out infinite 0s; }
.voice-waveform.idle .waveform-bar:nth-child(2) { animation: wave-idle 1.2s ease-in-out infinite 0.1s; }
.voice-waveform.idle .waveform-bar:nth-child(3) { animation: wave-idle 1.2s ease-in-out infinite 0.2s; }
.voice-waveform.idle .waveform-bar:nth-child(4) { animation: wave-idle 1.2s ease-in-out infinite 0.3s; }
.voice-waveform.idle .waveform-bar:nth-child(5) { animation: wave-idle 1.2s ease-in-out infinite 0.4s; }
.voice-waveform.idle .waveform-bar:nth-child(6) { animation: wave-idle 1.2s ease-in-out infinite 0.5s; }
.voice-waveform.idle .waveform-bar:nth-child(7) { animation: wave-idle 1.2s ease-in-out infinite 0.4s; }
.voice-waveform.idle .waveform-bar:nth-child(8) { animation: wave-idle 1.2s ease-in-out infinite 0.3s; }
.voice-waveform.idle .waveform-bar:nth-child(9) { animation: wave-idle 1.2s ease-in-out infinite 0.2s; }
.voice-waveform.idle .waveform-bar:nth-child(10) { animation: wave-idle 1.2s ease-in-out infinite 0.1s; }
.voice-waveform.idle .waveform-bar:nth-child(11) { animation: wave-idle 1.2s ease-in-out infinite 0s; }
.voice-waveform.idle .waveform-bar:nth-child(12) { animation: wave-idle 1.2s ease-in-out infinite 0.1s; }

@keyframes wave-idle {
  0%, 100% { height: 4px; }
  50% { height: 12px; }
}

.waveform-label {
  font-size: var(--font-size-sm);
  color: var(--accent-error);
  font-weight: 500;
  white-space: nowrap;
}

.voice-waveform.downloading .waveform-label,
.voice-waveform.transcribing .waveform-label {
  color: var(--accent-primary);
}

.voice-waveform.downloading,
.voice-waveform.transcribing {
  background: rgba(0, 122, 204, 0.08);
  border-color: var(--accent-primary);
}

.voice-waveform.downloading .waveform-bar,
.voice-waveform.transcribing .waveform-bar {
  background: var(--accent-primary);
}

/* =============================================
   ATTACHMENTS
   ============================================= */

.attachment-preview-container {
  max-width: 800px;
  margin: 0 auto var(--spacing-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.attachment-preview-container.hidden {
  display: none;
}

.attachment-preview-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid var(--border-color);
  background: var(--bg-tertiary);
  transition: border-color var(--transition-normal);
}

.attachment-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attachment-preview-item:hover {
  border-color: var(--accent-primary);
}

.attachment-type-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.attachment-icon {
  font-size: 28px;
  opacity: 0.9;
}

.attachment-preview-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: var(--radius-round);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-normal);
  z-index: 2;
}

.attachment-preview-item:hover .attachment-preview-remove {
  opacity: 1;
}

.attachment-preview-remove:hover {
  background: var(--accent-error);
}

.attachment-preview-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2px var(--spacing-xs);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.55rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* Attachment Notification */
.attachment-notification {
  max-width: 800px;
  margin: 0 auto var(--spacing-md);
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  animation: slideIn 0.2s ease-out;
}

.attachment-notification-warning {
  background: rgba(255, 193, 7, 0.15);
  border: 1px solid rgba(255, 193, 7, 0.4);
  color: var(--text-primary);
}

.attachment-notification-error {
  background: rgba(220, 53, 69, 0.15);
  border: 1px solid rgba(220, 53, 69, 0.4);
  color: var(--text-primary);
}

.attachment-notification-info {
  background: rgba(13, 110, 253, 0.15);
  border: 1px solid rgba(13, 110, 253, 0.4);
  color: var(--text-primary);
}

.attachment-notif-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.attachment-notif-text {
  flex: 1;
}

.attachment-notif-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.attachment-notif-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Legacy Image Preview (backward compat) */
.image-preview-container {
  max-width: 800px;
  margin: 0 auto var(--spacing-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.image-preview-container.hidden {
  display: none;
}

.image-preview-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid var(--border-color);
  background: var(--bg-tertiary);
}

.image-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview-item:hover {
  border-color: var(--accent-primary);
}

.image-preview-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: var(--radius-round);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.image-preview-item:hover .image-preview-remove {
  opacity: 1;
}

.image-preview-remove:hover {
  background: var(--accent-error);
}

.image-preview-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2px var(--spacing-xs);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================================
   TYPING INDICATOR
   ============================================= */

.typing-indicator {
  display: flex;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) 0;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background-color: var(--text-muted);
  border-radius: var(--radius-round);
  animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

/* =============================================
   INSIGHTS PANEL COMPONENTS
   ============================================= */

.debug-panel,
.debug-sections {
  background-color: var(--dc-sunk, var(--dc-band, var(--dcx-surface-sunken)));
}

.debug-sections::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.debug-sections::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}

.debug-sections::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb);
}

.debug-panel {
  border-left-color: var(--dc-line, var(--dcx-border));
  color: var(--dc-ink-2, var(--dcx-ink-2));
}

.debug-header {
  background-color: var(--dc-band, var(--dcx-surface-raised));
  border-bottom-color: var(--dc-line, var(--dcx-border));
}

.debug-header h3,
.section-title {
  color: var(--dc-ink, var(--dcx-ink));
}

.debug-section {
  background-color: var(--dc-band, var(--dcx-surface-raised));
}

.section-header:hover,
.debug-panel .btn-copy:hover {
  background-color: var(--dc-sunk, var(--dc-band, var(--dcx-surface-sunken)));
}

.section-toggle,
.section-count,
.section-content {
  color: var(--dc-ink-2, var(--dcx-ink-2));
}

/* Session Section */
.insights-session {
  border-bottom: 1px solid var(--dc-line, var(--dcx-border));
  padding: 10px var(--spacing-md);
  background: var(--dc-band, var(--dcx-surface-raised));
}

.session-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.session-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
}

.insights-session .session-row {
  flex-wrap: wrap;
}

.session-label {
  color: var(--dc-ink-2, var(--dcx-ink-2));
  font-weight: 500;
}

.session-id {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  background: var(--dc-sunk, var(--dc-band, var(--dcx-surface-sunken)));
  color: var(--dc-ink, var(--dcx-ink));
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-divider {
  color: var(--dc-ink-2, var(--dcx-ink-2));
  opacity: 0.4;
  margin: 0 2px;
}

/* Metrics Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.metrics-grid:last-child {
  margin-bottom: 0;
}

.metric-item {
  text-align: center;
  padding: var(--spacing-sm) 6px;
  background-color: var(--dc-paper, var(--dcx-surface));
  border: 1px solid var(--dc-line, var(--dcx-border));
  border-radius: var(--radius-md);
  transition: background var(--transition-normal);
}

.metric-item:hover {
  background-color: var(--dc-paper, var(--dcx-surface));
}

html:not([data-theme="light"]) .debug-section {
  background-color: var(--dc-paper, var(--dcx-surface));
}

html:not([data-theme="light"]) .metric-item,
html:not([data-theme="light"]) .metric-item:hover {
  background-color: var(--dc-band, var(--dcx-surface-raised));
}

.metric-label {
  display: block;
  font-size: 0.65rem;
  color: var(--dc-ink-2, var(--dcx-ink-2));
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.metric-value {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dc-ink, var(--dcx-ink));
  font-family: var(--font-mono);
}

.metric-value.highlight {
  color: var(--dc-ink, var(--dcx-ink));
}

/* Reasoning Section */
.reasoning-stats {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--spacing-sm);
}

.reasoning-stat {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.reasoning-stat strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.reasoning-scroll {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  padding-right: var(--spacing-xs);
}

.reasoning-scroll::-webkit-scrollbar { width: 4px; }
.reasoning-scroll::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }

.reasoning-chunk {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.5;
  padding: var(--spacing-sm) 10px;
  background: var(--bg-primary);
  border: 1px solid rgba(128,128,128,0.15);
  border-radius: var(--radius-md);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.reasoning-chunk:hover {
  border-color: var(--border-color);
  background: var(--bg-hover);
}

.reasoning-empty {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  padding: var(--spacing-sm);
}

/* SDK Data Display */
.sdk-subsection {
  margin-bottom: var(--spacing-md);
}

.sdk-subsection-title {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 500;
}

.sdk-kv-box {
  background: var(--bg-primary);
  border: 1px solid rgba(128,128,128,0.15);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.sdk-kv-box:hover {
  border-color: var(--border-color);
}

.sdk-kv-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  line-height: 1.4;
}

.sdk-kv-key {
  color: var(--text-muted);
}

.sdk-kv-value {
  color: var(--text-primary);
  font-weight: 500;
}

.sdk-empty {
  color: var(--text-muted);
  font-style: italic;
  font-family: inherit;
}

/* Tools Timeline */
.tools-timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.tool-timeline-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 6px var(--spacing-sm);
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  border-left: 3px solid var(--accent-primary);
  transition: background var(--transition-normal);
}

.tool-timeline-item:hover {
  background: var(--bg-tertiary);
}

.tool-timeline-item.completed {
  border-left-color: var(--accent-success);
}

.tool-timeline-item.failed {
  border-left-color: var(--accent-error);
}

.tool-timeline-item.in-progress {
  border-left-color: var(--accent-warning);
  animation: pulse-border 1.5s ease-in-out infinite;
}

@keyframes pulse-border {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.tool-icon {
  font-size: 0.9rem;
}

.tool-name {
  flex: 1;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-duration {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--accent-primary);
  /* Was rgba(66,133,244,.1) — Google blue. */
  background: color-mix(in srgb, var(--dcx-accent) 10%, transparent);
  padding: 2px 6px;
  border-radius: 10px;
}

.tool-status {
  font-size: var(--font-size-xs);
}

/* Timeline Bar */
.timeline-bar-container {
  height: 16px;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.timeline-bar {
  display: flex;
  height: 100%;
}

.timeline-segment {
  height: 100%;
  position: relative;
  min-width: 4px;
  transition: opacity var(--transition-normal);
}

.timeline-segment:hover {
  opacity: 0.8;
}

.timeline-segment::after {
  content: attr(data-tool);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.65rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.timeline-segment:hover::after {
  opacity: 1;
}

.timeline-segment.read-file { background: #4285f4; }
.timeline-segment.grep-search { background: #34a853; }
.timeline-segment.edit-file { background: #fbbc04; }
.timeline-segment.run-terminal { background: #ea4335; }
.timeline-segment.semantic-search { background: #9c27b0; }
.timeline-segment.other { background: #607d8b; }

/* Files List */
.files-list {
  font-size: var(--font-size-sm);
}

.file-group {
  margin-bottom: var(--spacing-sm);
}

.file-group-header {
  font-weight: 600;
  color: var(--accent-warning);
  font-size: 0.75rem;
  margin-bottom: var(--spacing-xs);
  padding-left: var(--spacing-xs);
}

.file-list {
  list-style: disc;
  margin: 0;
  padding-left: var(--spacing-2xl);
}

.file-item {
  padding: 2px 0;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.file-item::marker {
  color: var(--accent-primary);
}

.file-item:hover {
  background-color: var(--bg-hover);
}

/* Tools Summary */
.tools-list {
  font-size: var(--font-size-sm);
}

.tool-summary {
  display: flex;
  justify-content: space-between;
  padding: 6px var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  background-color: var(--bg-primary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-primary);
}

.tool-summary .tool-name {
  /* Was #4fc3f7 (light-blue) — the actual leaf painting the census
     hit; base .tool-name already resolved warm via var(--text-primary). */
  color: var(--dc-accent);
  font-weight: 500;
}

.tool-summary .tool-count {
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* Errors Section */
.errors-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.error-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 10px;
  background: rgba(234, 67, 53, 0.1);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent-error);
  font-size: 0.75rem;
}

.error-timestamp {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  flex-shrink: 0;
}

.error-message {
  color: var(--accent-error);
  word-break: break-word;
  line-height: 1.3;
}

/* Stats Grid (Legacy) */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
}

.stat-item {
  text-align: center;
  padding: var(--spacing-sm);
  background-color: var(--bg-primary);
  border-radius: var(--radius-md);
}

.stat-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: var(--spacing-xs);
}

.stat-value {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.stat-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  /* Was rgba(66,133,244,.3) / #4285f4 — Google blue spinner ring. */
  border: 2px solid color-mix(in srgb, var(--dcx-accent) 30%, transparent);
  border-top-color: var(--dc-accent);
  border-radius: var(--radius-round);
  animation: spin 0.8s linear infinite;
}

/* Empty State */
.empty-state {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
  padding: var(--spacing-md);
  font-style: italic;
}

.empty-state.success {
  color: var(--accent-success);
  font-style: normal;
}

/* Prompt Content */
.prompt-content {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  background-color: var(--bg-primary);
  padding: 10px;
  border-radius: var(--radius-sm);
  max-height: 200px;
  overflow-y: auto;
  margin: 0;
}

/* Debug Content */
.debug-content {
  max-height: 300px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.debug-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  text-align: center;
  padding: var(--spacing-xl);
}

.debug-entry {
  padding: 6px 10px;
  margin-bottom: var(--spacing-xs);
  border-radius: var(--radius-sm);
  background-color: var(--bg-tertiary);
  animation: slideIn 0.2s ease;
}

.debug-entry .timestamp {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  margin-right: var(--spacing-sm);
}

.debug-entry.event-tool-start {
  border-left: 3px solid var(--accent-primary);
}

.debug-entry.event-tool-complete {
  border-left: 3px solid var(--accent-success);
}

.debug-entry.event-tool-error {
  border-left: 3px solid var(--accent-error);
}

.debug-entry.event-thinking {
  border-left: 3px solid var(--accent-warning);
  color: var(--accent-warning);
}

.debug-entry.event-streaming {
  border-left: 3px solid #9c27b0;
  color: #ce93d8;
}

.debug-entry.event-intent {
  border-left: 3px solid #00bcd4;
  color: #80deea;
}

.debug-entry .tool-name {
  /* Was #4fc3f7 (light-blue), same defect as .tool-summary .tool-name. */
  color: var(--dc-accent);
  font-weight: 600;
}

.debug-entry .tool-args {
  color: var(--text-secondary);
  font-size: 0.75rem;
  margin-top: 2px;
  word-break: break-all;
}

.debug-entry .tool-result {
  color: var(--accent-success);
  font-size: 0.75rem;
  margin-top: var(--spacing-xs);
}

.debug-entry .tool-duration {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  float: right;
}

/* =============================================
   PROMPT & TOOL PREVIEWS
   ============================================= */

.prompt-preview-message {
  justify-content: center;
  margin: var(--spacing-sm) 0;
}

.prompt-preview {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.prompt-preview details {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.prompt-preview summary {
  padding: 10px var(--spacing-lg);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.85rem;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  user-select: none;
}

.prompt-preview summary:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.prompt-preview details[open] summary {
  border-bottom: 1px solid var(--border-color);
}

/* Tool Calls Preview */
.tool-calls-message {
  justify-content: center;
  margin: var(--spacing-sm) 0;
}

.tool-calls-preview {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.tool-calls-preview details {
  background-color: #1a2f1a;
  border: 1px solid #2d5a2d;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tool-calls-preview summary {
  padding: 10px var(--spacing-lg);
  cursor: pointer;
  color: #88cc88;
  font-size: 0.85rem;
  background-color: #1e3a1e;
  border-bottom: 1px solid #2d5a2d;
  user-select: none;
}

.tool-calls-preview summary:hover {
  background-color: #254525;
  color: #aaffaa;
}

.tool-calls-preview details[open] summary {
  border-bottom: 1px solid #2d5a2d;
}

.tool-calls-content {
  padding: var(--spacing-md) var(--spacing-lg);
  margin: 0;
  font-size: var(--font-size-sm);
  color: #88cc88;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 300px;
  overflow-y: auto;
  background-color: #0d1f0d;
  font-family: var(--font-mono);
  line-height: 1.6;
}

/* =============================================
   REASONING/THINKING INDICATOR
   ============================================= */

.reasoning-container {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md) var(--spacing-lg);
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(103, 58, 183, 0.1) 100%);
  border-radius: var(--radius-xl);
  border-left: 3px solid #9c27b0;
  transition: all 0.5s ease;
}

.reasoning-container.fade-out {
  opacity: 0;
  transform: translateY(-10px);
}

.reasoning-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.reasoning-icon {
  font-size: 18px;
}

.reasoning-label {
  font-weight: 600;
  color: #ce93d8;
  font-size: 13px;
}

.reasoning-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(156, 39, 176, 0.3);
  border-top-color: #9c27b0;
  border-radius: var(--radius-round);
  animation: spin 0.8s linear infinite;
  margin-left: auto;
}

.reasoning-content {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  max-height: 120px;
  overflow-y: auto;
  padding: var(--spacing-sm) 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  white-space: pre-wrap;
  word-break: break-word;
}

/* =============================================
   MAIN CANVAS REASONING PANEL (Rich)
   ============================================= */

.main-reasoning-panel {
  display: flex;
  flex-direction: column;
  width: calc(100% - 96px);
  max-width: calc(100% - 96px);
  box-sizing: border-box;
  margin: var(--spacing-md) 48px var(--spacing-md) 48px;
  background: #fff9e6;
  border-radius: var(--radius-xl);
  border: 1px solid #f6e7a8;
  border-left: 4px solid #d97706;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.08);
}

.main-reasoning-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: #d97706;
  font-size: 12px;
  color: #ffffff;
  font-weight: 600;
}

.main-reasoning-header .reasoning-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: var(--radius-round);
  animation: spin 0.8s linear infinite;
}

.main-reasoning-stats {
  display: flex;
  gap: var(--spacing-md);
  margin-left: auto;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}

.main-reasoning-scroll {
  max-height: 120px;
  overflow-y: auto;
  padding: var(--spacing-md);
  transition: max-height 0.35s ease-out;
}

/* Expanded during active streaming */
.main-reasoning-panel.active .main-reasoning-scroll {
  max-height: 380px;
}

/* Expand button in header */
.main-reasoning-header .reasoning-expand-btn {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: #ffffff;
  font-size: 14px;
  padding: 0 var(--spacing-xs);
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.main-reasoning-header .reasoning-expand-btn:hover {
  opacity: 1;
}

/* When stats are present, push expand btn to far right */
.main-reasoning-header:has(.main-reasoning-stats) .reasoning-expand-btn {
  margin-left: var(--spacing-sm);
}

.main-reasoning-chunk {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: #fffdf2;
  border: 1px solid #fde68a;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-family: var(--font-mono);
  line-height: 1.5;
  color: #3b2600;
  white-space: pre-wrap;
  word-break: break-word;
}

.main-reasoning-chunk:last-child {
  margin-bottom: 0;
}

/* ─── Reasoning Modal Popup ─────────────────────────────────────────────── */
.stage-artifact-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
  align-self: flex-start;
  flex: 0 0 auto;
  position: relative;
}

.user-message .message-content.has-question-timing .stage-artifact-chip-row {
  align-self: flex-end;
  margin-left: 0;
  order: 1;
}

.stage-artifact-chip {
  border: 0;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  min-width: 24px;
  min-height: 24px;
  padding: 3px;
}

.stage-artifact-chip:hover {
  transform: translateY(-1px);
}

.stage-artifact-chip-gateway {
  color: var(--accent-primary);
}

.stage-artifact-chip-flow_trace {
  color: var(--text-secondary);
}

.stage-artifact-chip-discovery {
  color: var(--accent-success);
}

.stage-artifact-chip-reasoning {
  color: var(--accent-warning);
}

.stage-artifact-chip-associated-conversations {
  color: var(--accent-primary);
}

.stage-artifact-chip-session-attachments {
  color: var(--accent-success);
}

.stage-artifact-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9001;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 24px 24px;
  backdrop-filter: blur(2px);
}

.stage-artifact-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 80px);
  max-width: 760px;
  width: 100%;
}

.session-ref-dropdown {
  background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
  backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid color-mix(in srgb, var(--border-color) 75%, var(--accent-primary));
  border-radius: 0;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32), inset 3px 0 0 var(--accent-primary);
  color: var(--text-primary);
  min-width: 420px;
  max-width: min(560px, calc(100vw - 48px));
  padding: 0;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 1002;
}

.session-ref-dropdown-header {
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 18%, transparent), transparent 70%);
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 10px 12px 9px 14px;
}

.session-ref-dropdown-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.session-ref-dropdown-close {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.session-ref-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 280px;
  overflow: auto;
  padding: 6px 0;
}

.session-ref-archives-toggle {
  align-items: center;
  color: var(--text-secondary);
  display: flex;
  font-size: 12px;
  gap: 6px;
  padding: 8px 12px 2px;
}

.session-ref-dropdown-section {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 8px 12px 4px;
  text-transform: uppercase;
}

.session-ref-dropdown-row {
  align-items: center;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 8px 14px 8px 12px;
}

.session-ref-tree-row {
  margin-left: calc(var(--session-ref-depth, 0) * 18px);
  position: relative;
}

.session-ref-tree-child::before {
  border-bottom: 1px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
  content: "";
  height: 1px;
  left: -12px;
  position: absolute;
  top: 50%;
  width: 10px;
}

.session-ref-tree-child::after {
  border-left: 1px solid color-mix(in srgb, var(--accent-primary) 35%, var(--border-color));
  content: "";
  left: -12px;
  position: absolute;
  top: -50%;
  bottom: 50%;
}

.session-ref-dropdown-row:hover,
.session-ref-dropdown-row:focus-visible {
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-hover));
  outline: none;
}

.session-ref-archive-child {
  opacity: 0.95;
}

.session-ref-attachment-tree .session-ref-archive-child {
  margin-left: calc((var(--session-ref-depth, 0) * 24px) + 12px);
}

.session-ref-attachment-tree .session-ref-archive-child::before {
  left: -14px;
  width: 12px;
}

.session-ref-attachment-tree .session-ref-archive-child::after {
  left: -14px;
}

.session-ref-dropdown-row-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.session-ref-dropdown-row-title {
  color: var(--text-primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.session-ref-dropdown-row-meta {
  color: var(--text-secondary);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-artifact-modal-header {
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
}

.stage-artifact-modal-header h2 {
  font-size: 16px;
  margin: 0;
}

.stage-artifact-modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  margin-left: auto;
}

.stage-artifact-modal-download {
  background: var(--accent-primary);
  border: 0;
  border-radius: var(--radius-sm);
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  margin-left: auto;
  padding: var(--spacing-xs) var(--spacing-sm);
}

.stage-artifact-modal-download + .stage-artifact-modal-close {
  margin-left: 0;
}

.stage-artifact-modal-summary {
  color: var(--text-primary);
  padding: var(--spacing-md) var(--spacing-lg) 0;
}

.stage-artifact-modal-content {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  margin: var(--spacing-md) var(--spacing-lg) 0;
  overflow: auto;
  padding: var(--spacing-md);
  white-space: pre-wrap;
}

.stage-artifact-modal-content-rendered {
  line-height: 1.4;
  white-space: normal;
}

.stage-artifact-modal-content-rendered p,
.stage-artifact-modal-content-rendered ul {
  margin: 0 0 8px;
}

.stage-artifact-modal-content-rendered p:last-child,
.stage-artifact-modal-content-rendered ul:last-child {
  margin-bottom: 0;
}

.stage-artifact-modal-raw-details {
  color: var(--text-secondary);
  margin: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
}

.stage-artifact-modal-raw-details summary {
  cursor: pointer;
  font-weight: 600;
}

.stage-artifact-modal-raw {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  margin: var(--spacing-sm) 0 0;
  overflow: auto;
  padding: var(--spacing-md);
  white-space: pre-wrap;
}

.reasoning-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 24px 24px;
  backdrop-filter: blur(2px);
}

.reasoning-modal {
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
  width: 100%;
  max-width: 900px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
}

.reasoning-modal-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.reasoning-modal-header .reasoning-modal-close {
  margin-left: auto;
}

.reasoning-modal-header .modal-title-icon {
  font-size: 16px;
}

.reasoning-modal-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 18px;
  padding: 0 var(--spacing-xs);
  line-height: 1;
  opacity: 0.7;
}
.reasoning-modal-close:hover { opacity: 1; }

.reasoning-modal-copy,
.reasoning-modal-download {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 11px;
  padding: 2px 8px;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.reasoning-modal-copy:hover,
.reasoning-modal-download:hover { opacity: 1; }

.reasoning-modal-legacy-note {
  margin: var(--spacing-sm) var(--spacing-lg) 0;
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(255, 180, 0, 0.1);
  border-left: 3px solid var(--accent-warning, #f0b429);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-secondary);
}

.reasoning-modal-body {
  overflow-y: auto;
  padding: var(--spacing-lg);
  font-size: 12px;
  font-family: var(--font-mono);
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.reasoning-modal-empty {
  padding: var(--spacing-xl);
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
}


/* =============================================
   SIDEBAR SIMPLE REASONING INDICATOR
   ============================================= */

.reasoning-simple {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  max-height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================================
   ACCESSIBILITY: SCREEN READER ONLY
   ============================================= */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================
   TOOL PROGRESS INDICATORS
   ============================================= */

.tool-progress-container {
  display: none;
  flex-direction: column;
  width: calc(100% - 48px);
  max-width: calc(100% - 48px);
  box-sizing: border-box;
  gap: 6px;
  margin: var(--spacing-md) 0 var(--spacing-md) 48px;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--bg-tertiary);
  border-radius: var(--radius-xl);
  border-left: 3px solid var(--accent-primary);
}

.tool-progress-container.is-visible {
  display: flex;
}

.tool-progress-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  font-size: 13px;
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.tool-progress-item.loading {
  animation: toolPulse 2s ease-in-out infinite;
}

.tool-progress-item.success {
  background: rgba(76, 175, 80, 0.15);
  border-left: 2px solid #4caf50;
}

.tool-progress-item.error {
  background: rgba(244, 67, 54, 0.15);
  border-left: 2px solid #f44336;
}

.tool-progress-item.fade-out {
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.5s ease;
}

.tool-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: var(--radius-round);
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

.tool-status-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.tool-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes toolPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* =============================================
   MERMAID DIAGRAMS
   ============================================= */

.mermaid-container {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-xl);
  padding-left: 60px;
  background-color: var(--dc-paper);
  border-radius: var(--radius-lg);
  overflow: auto;
  width: 100%;
  max-width: 100%;
  position: relative;
  min-height: 200px;
}

.mermaid-container .mermaid {
  display: block;
  width: fit-content;
  min-width: 100%;
  transition: transform var(--transition-normal);
}

.mermaid-container svg {
  max-width: none;
  height: auto;
}

.mermaid-error {
  color: #f44336;
  padding: 10px;
  background: #ffebee;
  border-radius: var(--radius-sm);
}

.mermaid-zoom-controls {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #f5f5f5;
  padding: 6px;
  border-radius: var(--radius-lg);
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.mermaid-zoom-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #d0d0d0;
  background: #ffffff;
  color: #555;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.mermaid-zoom-btn:hover {
  background: #e3f2fd;
  border-color: #2196f3;
  color: #1976d2;
}

.mermaid-zoom-btn:active {
  background: #bbdefb;
}

.mermaid-zoom-btn svg {
  width: 18px;
  height: 18px;
}

/* =============================================
   MARKDOWN TABLES
   ============================================= */

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin: var(--spacing-lg) 0;
}

.markdown-table {
  min-width: 100%;
  width: max-content;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.markdown-table th,
.markdown-table td {
  padding: 10px 14px;
  text-align: left;
  border: 1px solid var(--border-color);
}

.markdown-table th {
  background: var(--bg-secondary);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.markdown-table td {
  color: var(--text-primary);
  vertical-align: top;
}

.markdown-table tbody tr:hover {
  background: var(--bg-hover);
}

.markdown-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.markdown-table code {
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.markdown-table.reconstructed {
  border: 2px dashed var(--accent-warning);
}

:is(.message-content, .message-content-text, .stage-artifact-modal-content-rendered, .info-detail-body, .markdown-body) :is(h1, h2, h3, h4, h5, h6) {
  margin: var(--spacing-lg) 0 var(--spacing-sm);
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
}

:is(.message-content, .message-content-text, .stage-artifact-modal-content-rendered, .info-detail-body, .markdown-body) h1 { font-size: var(--font-size-heading-1); }
:is(.message-content, .message-content-text, .stage-artifact-modal-content-rendered, .info-detail-body, .markdown-body) h2 { font-size: var(--font-size-heading-2); }
:is(.message-content, .message-content-text, .stage-artifact-modal-content-rendered, .info-detail-body, .markdown-body) h3 { font-size: var(--font-size-heading-3); }
:is(.message-content, .message-content-text, .stage-artifact-modal-content-rendered, .info-detail-body, .markdown-body) h4 { font-size: var(--font-size-heading-4); }
:is(.message-content, .message-content-text, .stage-artifact-modal-content-rendered, .info-detail-body, .markdown-body) h5 { font-size: var(--font-size-heading-5); }
:is(.message-content, .message-content-text, .stage-artifact-modal-content-rendered, .info-detail-body, .markdown-body) h6 { font-size: var(--font-size-heading-6); }

:is(.message-content, .message-content-text, .stage-artifact-modal-content-rendered, .info-detail-body, .markdown-body) p {
  margin: 0 0 var(--spacing-sm);
}

:is(.message-content, .message-content-text, .stage-artifact-modal-content-rendered, .info-detail-body, .markdown-body) hr {
  margin: var(--spacing-lg) 0;
  border: none;
  border-top: 1px solid var(--border-color);
}

:is(.message-content, .message-content-text, .stage-artifact-modal-content-rendered, .info-detail-body, .markdown-body) :is(ul, ol) {
  margin: 0 0 var(--spacing-sm);
  padding-left: var(--spacing-xl);
}

:is(.message-content, .message-content-text, .stage-artifact-modal-content-rendered, .info-detail-body, .markdown-body) li {
  margin: 0 0 var(--spacing-xs);
}

:is(.message-content, .message-content-text, .stage-artifact-modal-content-rendered, .info-detail-body, .markdown-body) :is(ul, ol) :is(ul, ol) {
  margin-top: var(--spacing-xs);
}

:is(.message-content, .message-content-text, .stage-artifact-modal-content-rendered, .info-detail-body, .markdown-body) blockquote {
  margin: 0 0 var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  border-left: 3px solid var(--border-color);
  color: var(--text-secondary);
}

:is(.message-content, .message-content-text, .stage-artifact-modal-content-rendered, .info-detail-body, .markdown-body) details {
  margin: 0 0 var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

:is(.message-content, .message-content-text, .stage-artifact-modal-content-rendered, .info-detail-body, .markdown-body) summary {
  cursor: pointer;
  font-weight: 600;
}

:is(.message-content, .message-content-text, .stage-artifact-modal-content-rendered, .info-detail-body, .markdown-body) details[open] summary {
  margin-bottom: var(--spacing-sm);
}

/* Work item 2 (SPEC.md "Reading Value" contract) — About This Analysis /
   Appendix / sub-section summaries reuse the generic details/summary box
   above (border, cursor, spacing) and only add the font-size/weight steps
   from SPEC.md section 9. No new collapse mechanics here — these are
   plain <details> elements produced by applyReadingValueLayout() and
   already handled by the generic rules above; native `open` attribute
   (absent by default) is what makes them collapsed-by-default. */
:is(.message-content, .message-content-text, .stage-artifact-modal-content-rendered, .info-detail-body, .markdown-body) details.dc-rv-meta > summary,
:is(.message-content, .message-content-text, .stage-artifact-modal-content-rendered, .info-detail-body, .markdown-body) details.dc-rv-section > summary {
  font-size: 24px;
  font-weight: 700;
}

:is(.message-content, .message-content-text, .stage-artifact-modal-content-rendered, .info-detail-body, .markdown-body) details.dc-rv-subsection > summary {
  font-size: 20px;
  font-weight: 700;
}

/* Relocated "Suggested Follow-Up Questions" heading (SPEC.md 5.4) — CSS-only
   size bump to match its new top-level siblings, no tag rename. */
:is(.message-content, .message-content-text, .stage-artifact-modal-content-rendered, .info-detail-body, .markdown-body) .dc-rv-toplevel-size {
  font-size: 24px;
  font-weight: 700;
}

.malformed-table-notice {
  margin: var(--spacing-md) 0 var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-tertiary);
  border-left: 3px solid var(--accent-warning);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.malformed-table {
  margin: 0 0 var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  border: 1px solid var(--border-color);
}


/* =============================================
   MODAL OVERLAY & CUSTOM DIALOGS
   ============================================= */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
  animation: fadeIn 0.15s ease-out;
}

[data-theme="light"] .modal-overlay {
  background-color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .modal-content {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

/* Custom Alert/Confirm Dialogs */
.custom-dialog {
  max-width: 380px;
  min-width: 300px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.custom-dialog .dialog-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl) var(--spacing-2xl) var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.custom-dialog .dialog-icon {
  font-size: 24px;
  line-height: 1;
}

.custom-dialog .dialog-icon.warning { color: var(--dcx-warning); }
.custom-dialog .dialog-icon.error { color: var(--dcx-danger); }
.custom-dialog .dialog-icon.info { color: var(--dcx-accent); }
.custom-dialog .dialog-icon.success { color: var(--dcx-success); }
.custom-dialog .dialog-icon.question { color: var(--dcx-ink-2); }
.custom-dialog .dialog-icon.action { display: inline-flex; color: var(--dcx-action); }

.custom-dialog .dialog-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.custom-dialog .dialog-body {
  padding: var(--spacing-xl) var(--spacing-2xl);
}

.custom-dialog .dialog-message {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.custom-dialog .dialog-input {
  width: 100%;
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--transition-fast);
}

.custom-dialog .dialog-input:focus {
  border-color: var(--accent-primary);
}

.custom-dialog .dialog-input::placeholder {
  color: var(--text-muted);
}

.custom-dialog .dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-2xl) var(--spacing-xl);
  border-top: 1px solid var(--border-color);
}

.custom-dialog .dialog-btn {
  padding: var(--spacing-sm) 18px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
}

.custom-dialog .dialog-btn-cancel {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.custom-dialog .dialog-btn-cancel:hover {
  background-color: var(--bg-secondary);
}

.custom-dialog .dialog-btn-primary {
  background-color: var(--accent-primary);
  color: white;
}

.custom-dialog .dialog-btn-primary:hover {
  background-color: var(--accent-hover);
}

.custom-dialog .dialog-btn-danger {
  background-color: #ef4444;
  color: white;
}

.custom-dialog .dialog-btn-danger:hover {
  background-color: #dc2626;
}

.custom-dialog.steer-confirm-dialog {
  max-width: 460px;
  border-color: color-mix(in srgb, var(--dcx-accent) 34%, var(--dcx-border));
  background: var(--dcx-surface);
  box-shadow: var(--dcx-card-shadow);
}

.custom-dialog.steer-confirm-dialog .dialog-header {
  border-bottom-color: color-mix(in srgb, var(--dcx-accent) 22%, var(--dcx-border));
}

.custom-dialog.steer-confirm-dialog .dialog-icon {
  color: var(--dcx-action);
}

.custom-dialog.steer-confirm-dialog .dialog-title {
  color: var(--dcx-ink);
}

.custom-dialog.steer-confirm-dialog .dialog-message {
  padding: 10px 12px;
  border-left: 3px solid var(--dcx-accent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--dcx-accent) 8%, var(--dcx-surface));
  color: var(--dcx-ink);
}

/* ── Archive Manager Dialog ─────────────────────────────────────── */

.archive-manager-dialog {
  max-width: 680px;
  min-width: 520px;
  max-height: 80vh;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.archive-manager-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-2xl);
  border-bottom: 1px solid var(--border-color);
}

.archive-manager-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.archive-close-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.archive-close-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.archive-manager-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 300px;
}

.archive-session-list-panel {
  width: 200px;
  min-width: 200px;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.archive-panel-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: var(--spacing-sm) var(--spacing-md);
}

.archive-session-list {
  flex: 1;
  overflow-y: auto;
}

.archive-session-item {
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: background var(--transition-fast);
}

.archive-session-item:hover {
  background: var(--bg-tertiary);
}

.archive-session-item.selected {
  background: var(--accent-primary);
  color: white;
}

.archive-session-item.selected .archive-session-title {
  color: white;
}

.archive-session-item.selected .archive-badge {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}

.archive-session-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.archive-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  margin-top: 2px;
}

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

.archive-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  gap: var(--spacing-sm);
}

.archive-detail-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.archive-list-container {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-sm);
}

.archive-item {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
  background: var(--bg-primary);
  transition: border-color var(--transition-fast);
}

.archive-item:hover {
  border-color: var(--accent-primary);
}

.archive-item-meta {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.archive-item-notes {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: var(--spacing-xs);
  padding: 2px 0;
}

.archive-notes-section {
  margin-bottom: var(--spacing-sm);
}

.archive-notes-input {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13px;
}

.archive-item-actions {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  margin-top: var(--spacing-xs);
}

.archive-action-btn {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.archive-action-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-primary);
}

.archive-action-btn.archive-action-primary {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
  font-size: 12px;
  padding: 4px 14px;
}

.archive-action-btn.archive-action-primary:hover {
  background: var(--accent-hover);
}

.archive-action-btn.archive-action-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.archive-action-btn.archive-action-delete:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #ef4444;
}

.archive-empty-state {
  padding: var(--spacing-2xl);
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

.archive-manager-footer {
  display: flex;
  justify-content: flex-end;
  padding: var(--spacing-md) var(--spacing-2xl);
  border-top: 1px solid var(--border-color);
}

/* Fork Dialog — Message List */
.fork-message-list {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}

.fork-select-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.fork-select-controls-label {
  font-size: 13px;
  color: var(--text-secondary);
  flex: 1;
}

.fork-select-btn {
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.fork-select-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.fork-message-item {
  display: grid;
  grid-template-columns: 20px 34px 1fr;
  align-items: start;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: background var(--transition-fast);
}

.fork-message-item:last-child {
  border-bottom: none;
}

.fork-message-item:hover {
  background: var(--bg-secondary);
}

.fork-message-item.fork-message-checked {
  background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

.fork-message-item input[type="checkbox"] {
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--accent-primary);
  width: 14px;
  height: 14px;
}

.fork-message-number {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-primary);
  padding-top: 2px;
  text-align: right;
}

.fork-message-preview {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* About Modal */
.about-modal .about-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.about-modal .about-header .about-icon {
  font-size: 36px;
  line-height: 1;
}

.about-modal .about-header .about-icon-img {
  width: 36px;
  height: 36px;
}

.about-modal .about-header h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.about-modal .about-body {
  padding: var(--spacing-md) var(--spacing-lg);
}

.about-modal .about-body p {
  margin: 0 0 var(--spacing-md);
  color: var(--text-secondary);
  line-height: 1.4;
}

.about-modal .about-details {
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
}

.about-modal .about-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
}

.about-modal .about-row:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}

.about-modal .about-label {
  color: var(--text-muted);
  font-size: 12px;
}

.about-modal .about-value {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
}

.about-modal .about-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: center;
}

/* About Modal - Compact variant */
.about-modal-compact {
  max-width: 360px;
  min-width: 340px;
}

.about-modal .about-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.about-modal .about-version {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

/* =============================================
   DATA & PRIVACY PANEL
   ============================================= */

.data-privacy-modal {
  max-width: 580px;
  min-width: 500px;
}

.data-privacy-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.data-privacy-modal .modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.modal-close-btn:hover {
  color: var(--text-primary);
}

.data-privacy-modal .modal-body {
  padding: var(--spacing-lg);
  max-height: 60vh;
  overflow-y: auto;
}

.data-section {
  margin-bottom: var(--spacing-lg);
}

.data-section.clear-section-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.data-section h3 {
  margin: 0 0 var(--spacing-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.data-section .section-desc {
  margin: 0 0 var(--spacing-sm);
  font-size: 13px;
  color: var(--text-muted);
}

.data-locations-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.data-location-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.data-location-info {
  flex: 1;
  min-width: 0;
}

.data-location-name {
  font-weight: 500;
  font-size: 13px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.secure-badge {
  font-size: 10px;
  background: var(--accent-success-bg, #e8f5e9);
  color: var(--accent-success, #2e7d32);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.data-location-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.data-location-path {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-top: 4px;
  word-break: break-all;
}

.data-location-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.data-location-size {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.btn-small {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-small:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn-clear {
  color: var(--accent-error);
}

.btn-clear:hover {
  background: rgba(244, 67, 54, 0.1);
  border-color: var(--accent-error);
}

.security-features {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
}

.security-features li {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 4px 0;
}

.clear-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.data-privacy-modal .modal-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* =============================================
   KNOWLEDGE SOURCES PANEL
   ============================================= */

.knowledge-sources-modal {
  max-width: 640px;
  min-width: 540px;
}

.knowledge-sources-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.knowledge-sources-modal .modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.knowledge-sources-modal .modal-body {
  padding: var(--spacing-lg);
}

.intro-text {
  margin: 0 0 var(--spacing-md);
  font-size: 14px;
  color: var(--text-secondary);
}

.knowledge-sources-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.knowledge-source-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.knowledge-source-card.missing {
  opacity: 0.7;
  border-style: dashed;
}

.knowledge-source-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.knowledge-source-icon {
  font-size: 18px;
}

.knowledge-source-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.missing-badge {
  font-size: 10px;
  background: rgba(244, 67, 54, 0.1);
  color: var(--accent-error);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: auto;
}

.knowledge-source-body {
  padding: var(--spacing-md);
}

.knowledge-source-desc {
  margin: 0 0 var(--spacing-sm);
  font-size: 13px;
  color: var(--text-secondary);
}

.knowledge-source-purpose {
  margin: 0 0 var(--spacing-sm);
  font-size: 12px;
  color: var(--text-muted);
}

.knowledge-source-stats {
  display: flex;
  gap: var(--spacing-md);
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
}

.knowledge-source-types {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
}

.knowledge-source-path {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  word-break: break-all;
  padding: 4px 8px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.knowledge-source-footer {
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
}

.knowledge-tip {
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(33, 150, 243, 0.1);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--accent-primary);
}

.knowledge-sources-modal .modal-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
}

/* Simplified Knowledge Sources Modal */
.knowledge-sources-modal-simple {
  max-width: 400px;
  width: 90%;
}

.knowledge-sources-modal-simple .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.knowledge-sources-modal-simple .modal-header h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.knowledge-sources-modal-simple .modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border-color);
}

.knowledge-sources-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.knowledge-source-card-simple {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.knowledge-source-card-simple .knowledge-source-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
}

/* =============================================
   FEEDBACK COMPONENT - ChatGPT Style
   ============================================= */

/* Message action bar (inline with message) */
.message-action-bar {
  display: flex;
  align-items: center;
  gap: 4px;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.action-btn.selected {
  color: var(--accent-primary);
}

.action-btn.thumbs-up.selected {
  color: #22c55e;
}

.action-btn.thumbs-down.selected {
  color: #ef4444;
}

/* Fork button styling */
.action-btn.fork-btn:hover {
  color: var(--accent-primary);
}

/* =============================================
   SESSION FORK TREE CONNECTORS
   ============================================= */

.session-fork-item {
  padding-left: 28px !important;
  position: relative;
  font-size: 0.9em;
  opacity: 0.92;
}

.session-fork-item::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 50%;
  width: 1px;
  background: var(--border-color);
}

.session-fork-item::after {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 10px;
  height: 1px;
  background: var(--border-color);
}

/* Vertical connector spans full height for non-last fork children */
.session-fork-item:not(:last-child)::before {
  bottom: 0;
}

/* First fork connects to parent above */
.session-fork-item:first-child::before {
  top: -4px;
}

.action-btn.copied {
  color: #22c55e;
}

/* Feedback Modal */
.feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.feedback-modal.open {
  opacity: 1;
  visibility: visible;
}

.feedback-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.feedback-modal-content {
  position: relative;
  width: 90%;
  max-width: 500px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transform: scale(0.95);
  transition: transform var(--transition-normal);
}

.feedback-modal.open .feedback-modal-content {
  transform: scale(1);
}

.feedback-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.feedback-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.feedback-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.feedback-modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.feedback-modal-body {
  padding: var(--spacing-lg);
}

.feedback-session-scope {
  display: grid;
  gap: 6px;
  margin-bottom: var(--spacing-md);
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb, 0, 122, 204), 0.10), rgba(255, 255, 255, 0.03));
}

.feedback-session-scope[hidden] {
  display: none;
}

.feedback-session-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.feedback-session-select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  font: inherit;
}

.feedback-session-select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 0, 122, 204), 0.18);
}

.feedback-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.feedback-tag {
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.feedback-tag:hover {
  border-color: var(--text-muted);
  background: var(--bg-hover);
}

.feedback-tag.selected {
  border-color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb, 0, 122, 204), 0.1);
  color: var(--accent-primary);
}

.feedback-textarea {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 100px;
  transition: border-color var(--transition-fast);
}

.feedback-textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.feedback-textarea::placeholder {
  color: var(--text-muted);
}

.feedback-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border-color);
}

.feedback-modal-submit {
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--accent-primary);
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.feedback-modal-submit:hover:not(:disabled) {
  background: var(--accent-primary-hover, #0066b8);
}

.feedback-modal-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.feedback-log-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-md);
}

.feedback-log-card {
  min-height: 180px;
}

.feedback-log-card .feedback-comment,
.feedback-log-card .feedback-query {
  color: var(--text-secondary);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.feedback-log-card .feedback-tags {
  margin: var(--spacing-sm) 0;
}

/* Toast notification */
.feedback-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 24px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-size: 14px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: all var(--transition-normal);
  z-index: 1001;
}

.feedback-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.feedback-toast.error {
  border-color: #ef4444;
  color: #ef4444;
}

/* =============================================
   PERSONA SELECTOR - VS Code Style Chip
   ============================================= */

/* Container for chips row inside input (VS Code style) */
.input-chips-row {
  display: flex;
  align-items: center;
  padding: 4px 0 0 0;
  gap: 8px;
  /* The four composer-pill actions now live in this row
     alongside the chips. flex-wrap is the safety net for narrow viewports —
     at rest there is always room (this is the same row that used to have
     500px spare), but if the wrapper ever shrinks enough to threaten an
     overlap, the pill group folds to its own line instead of clipping or
     overlapping the last chip. Nothing about the chips' own sizing changes. */
  flex-wrap: wrap;
  row-gap: 6px;
}

/* Chip visual order only; markup stays in its original DOM positions. */
.query-augmentation-toggle { order: 1; }
#modelChipSelector { order: 2; }
#contextTierSelector { order: 3; }
#effortSelector { order: 4; }
#associatedSessionsSelector { order: 5; }
#personaSelector { order: 6; }
#agentModeSelector { order: 7; }

/* The relocated action-icon group is last in both DOM and
   visual order — after all five chips, never among or before them — and
   margin-left: auto pushes it flush to the row's right edge regardless of
   how much space the chips leave. This keeps the icons pinned to the same
   right edge they occupy today, rather than packed snug against the last
   chip or centred. flex-shrink: 0 keeps all four actions at their
   existing size even if the row is ever tight on space; wrapping (above)
   is the fallback, not shrinking. align-self overrides the base
   .composer-pill-group's flex-end (correct for its old spot beside a
   growing textarea) with center, so the icons sit on the same optical
   baseline as the chips now that they share this row. */
.composer-pill-anchor {
  order: 6;
  margin-left: auto;
  align-self: center;
  flex-shrink: 0;
}

input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: var(--dc-accent);
}

.query-augmentation-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--dc-band);
  border-radius: var(--radius-md);
  color: var(--dc-ink-2);
  font-size: var(--font-size-xs);
  cursor: pointer;
  user-select: none;
}

.query-augmentation-toggle:hover {
  background: var(--dc-line-hover);
  color: var(--dc-ink);
}

/* This is the one chip with a genuine, zero-JS default-vs-changed
   signal — the box ships checked, so "checked" IS the default and needs no
   new state tracking. Ghost at rest when checked (the default); go solid
   the moment it's unchecked (a deliberate change), on hover, or on
   keyboard focus. 0.8 (not the 0.55 in the mock) is the lowest opacity that
   still clears WCAG AA 4.5:1 for the label text in both themes. */
.query-augmentation-toggle:has(input:checked) span {
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

.query-augmentation-toggle:hover span,
.query-augmentation-toggle:has(input:focus-visible) span {
  opacity: 1;
}

/* Data source selector is intentionally unavailable in the footer toolbar. */
#datasourceChipSelector {
  display: none !important;
}

/* Persona selector wrapper */
.persona-selector {
  position: relative;
  display: inline-flex;
}

/* Persona button - chip style (VS Code embedded) */
.persona-selector-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--dc-band);
  border: none;
  border-radius: var(--radius-md);
  color: var(--dc-ink-2);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.persona-selector-btn:hover {
  background: var(--dc-line-hover);
  color: var(--dc-ink);
}

/* Gateway auto-selection highlight - functional success signal, left as-is
   in colour, but its rest-state end point must track the chip's own
   themed resting background/colour or the flash would settle into the
   app's old generic chip colour instead of the retheme'd one. */
.persona-selector-btn.prompt-auto-selected {
  background: #22c55e;
  color: #000;
  animation: prompt-flash 2s ease-out;
}

@keyframes prompt-flash {
  0% { background: #22c55e; color: #000; box-shadow: 0 0 8px rgba(34, 197, 94, 0.6); }
  100% { background: var(--dc-band); color: var(--dc-ink-2); box-shadow: none; }
}

.persona-selector.open .persona-selector-btn {
  background: var(--dc-line-hover);
  color: var(--dc-ink);
}

.persona-icon {
  font-size: 14px;
}

.persona-title {
  font-weight: 500;
}

/* Design Codex prefix so the Analysis Type chip is never bare —
   plain px + \00A0\00B7\00A0 escapes so encoding can't mangle the dot.
   No color/weight/opacity here: owner said not to mute the prefix, so it
   must inherit the exact same styling as the value it precedes. */
#personaTitle::before {
  content: "Analysis\00A0\00B7\00A0";
}

/* No persistent DOM hook exists to tell "Analysis Type left on
   Automatic" apart from "user explicitly picked one" (the only related
   class, .prompt-auto-selected, is a 2s success flash, not durable state —
   see app.js:4218-4224). Fallback per plan: ghost at rest, full strength
   while open/hovered/focused, so the row still reads quieter without
   inventing new state logic. */
.persona-selector .persona-title {
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

.persona-selector:hover .persona-title,
.persona-selector.open .persona-title,
.persona-selector-btn:focus-visible .persona-title {
  opacity: 1;
}

.persona-arrow {
  opacity: 0.6;
  transition: transform var(--transition-fast);
}

.persona-selector.open .persona-arrow {
  transform: rotate(180deg);
}

/* Persona dropdown menu */
.persona-dropdown-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  min-width: 220px;
  max-width: 300px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition-fast);
}

.chip-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* space-between alone has zero slack to distribute once the
     longest header label ("Reasoning Effort") plus "Help me choose" fill
     the 200px menu edge to edge — an explicit gap is needed as a floor. */
  gap: 14px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
}

.chip-help-link {
  border: 0;
  background: transparent;
  color: var(--accent-primary);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 0;
  /* Never let the help link wrap once space is tight. */
  white-space: nowrap;
}

.chip-help-link:hover {
  text-decoration: underline;
}

.persona-selector.open .persona-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.persona-selector.disabled .persona-selector-btn {
  opacity: 0.5;
  cursor: not-allowed;
}

.persona-selector.disabled .persona-selector-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

/* Persona list */
.persona-list {
  padding: 6px;
}

/* Individual persona item */
/* Two-column grid instead of a check-gutter flex row: the tick sits tight
   against the title, and the description spans both columns so it starts at
   the row's left edge instead of being indented behind an empty gutter. The
   tick glyph measures 9px; the column is sized to the glyph rather than a
   round number so there's no dead air before the gap begins. */
.persona-item {
  display: grid;
  grid-template-columns: 10px 1fr;
  column-gap: 4px;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.persona-item:hover:not(.disabled) {
  background: var(--bg-tertiary);
}

.persona-item.active {
  /* --accent-primary-bg was never declared, so this always fell back to
     rgba(0,120,212,.1) — Windows blue instead of the brand accent. */
  background: var(--accent-primary-bg, color-mix(in srgb, var(--dcx-accent) 10%, transparent));
}

.persona-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Now tracks the brand accent instead of a hard-coded green, so it also
   tracks the theme (mint on dark paper, deep green on light). */
.persona-check {
  color: var(--dc-accent);
  font-size: 12px;
  font-weight: bold;
  line-height: 1.45;
}

/* The wrapper stays in the markup for JS/readability but must not form a
   layout box, or name and description would share one grid cell. */
.persona-info {
  display: contents;
}

.persona-name {
  grid-column: 2;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.persona-description {
  grid-column: 1 / -1;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

/* Separator between persona groups */
.persona-separator {
  margin: 6px 10px;
  border-top: 1px solid var(--border-color);
}

/* Light theme adjustments */
:root[data-theme="light"] .persona-dropdown-menu {
  background: var(--bg-primary);
}

:root[data-theme="light"] .persona-item:hover:not(.disabled) {
  background: var(--bg-secondary);
}

:root[data-theme="light"] .persona-item.active {
  /* This light-theme override has higher specificity than the base
     .persona-item.active rule above, so it — not the rule above — was the
     one actually painting the stray blue. */
  background: color-mix(in srgb, var(--dcx-accent) 8%, transparent);
}

/* ================================
   Model Chip Selector (input area)
   ================================ */

.model-chip-selector {
  position: relative;
  display: inline-flex;
}

.model-chip-selector[hidden] {
  display: none;
}

.model-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--bg-secondary);
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.model-chip-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.model-chip-selector.disabled .model-chip-btn {
  opacity: 0.5;
  cursor: not-allowed;
}

.model-chip-selector.disabled .model-chip-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.model-chip-selector.open .model-chip-btn {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.model-chip-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Globe SVG paints closer to its full box than the Octocat PNG's opaque badge
   does inside the same 16px box (measured ~15px vs ~13.1px alpha extent), so
   without this the globe reads visibly larger than the Octocat two chips
   over. Scale only the painted artwork down to match; the 16x16 layout box,
   gap, and flex centering are untouched. Covers both Design Codex globes -
   the Analysis chip's .persona-icon-globe and the Agents chip's .chip-icon-dcx
   (never the Octocat's shared .model-chip-icon box rule). */
.persona-icon-globe,
.chip-icon-dcx {
  transform: scale(0.875);
  transform-origin: center;
}

/* The chip-row globe is the real brand mark converted to monochrome
   programmatically, not redrawn. scripts read images/globe-icon.svg and
   replaced every colour with its Rec.709 luminance grey - geometry copied
   byte-for-byte (#4CC2FF -> #adadad, #1A91DD -> #7d7d7d, white lines stay
   white). Result lives in images/globe-icon-mono.svg and is painted as a
   plain background-image, so the meridian lines survive as real white
   linework. images/globe-icon.svg itself is untouched and stays full-colour
   everywhere else (header logo, favicon, splash screen, About modal). */
.persona-icon-globe,
.chip-icon-dcx {
  display: inline-block;
  background-image: url('../images/globe-icon-mono.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.model-chip-name {
  font-weight: 500;
}

/* Design Codex / GitHub Copilot ownership prefixes so every
   dropdown carries its own label — same no-color/no-weight rule as the
   persona prefix above; these three IDs share .model-chip-name but each
   needs different prefix text, hence per-ID selectors. */
#agentModeName::before {
  content: "Agents\00A0\00B7\00A0";
}

#modelChipName::before {
  content: "Model\00A0\00B7\00A0";
}

#effortName::before {
  content: "Effort\00A0\00B7\00A0";
}

/* Same fallback as the persona chip — agent mode ("Single"),
   model ("Auto"), and reasoning effort ("Auto") share this class but have
   no persistent default-vs-changed hook either (only transient dropdown
   checkmarks inside the closed menu). Ghost at rest; full strength while
   open/hovered/focused so it never reads as disabled. */
.model-chip-selector .model-chip-name {
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

.model-chip-selector:hover .model-chip-name,
.model-chip-selector.open .model-chip-name,
.model-chip-selector .model-chip-btn:focus-visible .model-chip-name {
  opacity: 1;
}

.model-chip-arrow {
  opacity: 0.6;
  transition: transform var(--transition-fast);
}

.model-chip-selector.open .model-chip-arrow {
  transform: rotate(180deg);
}

/* Model chip dropdown menu */
.model-chip-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  /* 200px left "Reasoning Effort" + "Help me choose" with 0 slack
     for the header gap above; 220px covers the longest label + 14px gap
     + link + padding with a small margin. */
  min-width: 220px;
  max-width: 280px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition-fast);
}

.model-chip-selector.open .model-chip-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.model-chip-list {
  padding: 4px;
}

.model-chip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.model-chip-item:hover {
  background: var(--bg-hover);
}

.model-chip-item.active {
  background: var(--bg-active);
}

/* Same stray emerald as .persona-check — unified on the brand accent
   so all three chip menus tick in one colour. */
.model-chip-item .model-check {
  width: 16px;
  color: var(--dc-accent);
  font-size: 14px;
  font-weight: bold;
}

.model-chip-item .model-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
}

.model-chip-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.associated-sessions-selector.has-selection .model-chip-btn {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.associated-sessions-menu {
  min-width: 320px;
  max-width: 420px;
  max-height: none;
  overflow: hidden;
}

.associated-sessions-list {
  padding: 4px;
  max-height: min(420px, 60vh);
  overflow: auto;
}

.associated-session-controls {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 6px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 4px;
}

.associated-session-controls button {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  padding: 3px 4px;
}

.associated-session-controls button:hover {
  color: var(--text-primary);
}

.associated-session-folder {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px calc(8px + (var(--assoc-depth, 0) * 14px));
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.associated-session-folder:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.associated-folder-caret {
  width: 12px;
  flex: 0 0 12px;
  text-align: center;
}

.associated-folder-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.associated-folder-count {
  color: var(--text-muted);
  font-size: 10px;
}

.associated-session-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px calc(8px + (var(--assoc-depth, 0) * 14px));
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}

.associated-session-item .model-check {
  width: 16px;
  flex: 0 0 16px;
  color: #22c55e;
  font-size: 14px;
  font-weight: bold;
}

.associated-session-item:hover {
  background: var(--bg-hover);
}

.associated-session-item.active {
  background: var(--bg-active);
}

.associated-session-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.associated-sessions-empty {
  padding: 10px 12px;
  color: var(--text-secondary);
  font-size: 12px;
}

/* Model chip tooltip */
.model-chip-tooltip {
  position: fixed;
  min-width: 280px;
  max-width: 350px;
  padding: 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.model-chip-tooltip.visible {
  opacity: 1;
  visibility: visible;
}

.model-chip-tooltip pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.dropdown-help-modal.hidden {
  display: none;
}

.dropdown-help-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.dropdown-help-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(6px);
}

.dropdown-help-card {
  position: relative;
  width: min(920px, calc(100vw - 48px));
  max-height: min(760px, calc(100vh - 48px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--bg-primary), var(--bg-secondary));
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

.dropdown-help-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border-color);
}

.dropdown-help-eyebrow {
  color: var(--accent-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.dropdown-help-header h2 {
  margin: 4px 0 0;
  color: var(--text-primary);
  font-size: 22px;
  letter-spacing: -0.02em;
}

.dropdown-help-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.dropdown-help-close:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.dropdown-help-body {
  overflow: auto;
  padding: 20px 24px 24px;
}

.dropdown-help-callout {
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid rgba(79, 70, 229, 0.22);
  border-radius: 16px;
  background: rgba(79, 70, 229, 0.08);
  color: var(--text-primary);
  line-height: 1.45;
}

.dropdown-help-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.dropdown-help-grid article {
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--bg-primary);
}

.dropdown-help-grid h3 {
  margin: 0 0 6px;
  font-size: 14px;
}

.dropdown-help-grid p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.dropdown-help-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-primary);
  font-size: 13px;
}

.dropdown-help-table th,
.dropdown-help-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  vertical-align: top;
  text-align: left;
}

.dropdown-help-table th {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dropdown-help-table tr:last-child td {
  border-bottom: 0;
}

.dropdown-help-prompt-table code {
  display: block;
  max-width: 340px;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font-size: 11px;
}

.dropdown-help-model-table td:first-child {
  min-width: 150px;
}

.dropdown-help-model-table small {
  display: block;
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: 11px;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .dropdown-help-grid {
    grid-template-columns: 1fr;
  }

  .dropdown-help-modal {
    padding: 16px;
  }
}

/* Light theme adjustments */
:root[data-theme="light"] .model-chip-btn {
  background: var(--bg-secondary);
}

:root[data-theme="light"] .model-chip-item.active {
  /* Same defect as .persona-item.active above — was rgba(0,120,212,.08). */
  background: color-mix(in srgb, var(--dcx-accent) 8%, transparent);
}

/* =============================================
   CONTEXT WINDOW - App Insights Section
   ============================================= */

.context-window-summary {
  padding: var(--spacing-sm) 0;
  margin-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--dc-line, var(--dcx-border));
}

.context-tokens-display {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
}

.context-tokens-display .context-used {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--dc-ink, var(--dcx-ink));
  font-family: var(--font-mono);
}

.context-tokens-display .context-divider {
  color: var(--dc-ink-2, var(--dcx-ink-2));
  opacity: 0.5;
  margin: 0 2px;
}

.context-tokens-display .context-max {
  font-size: 0.9rem;
  color: var(--dc-ink-2, var(--dcx-ink-2));
  font-family: var(--font-mono);
}

.context-tokens-display .context-unit {
  font-size: 0.75rem;
  color: var(--dc-ink-2, var(--dcx-ink-2));
  margin-left: 2px;
}

.context-tokens-display .context-percent {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-primary);
  margin-left: auto;
  font-family: var(--font-mono);
}

/* Progress bar container */
.context-progress-container {
  height: 6px;
  background: var(--dc-sunk, var(--dc-band, var(--dcx-surface-sunken)));
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--spacing-xs);
}

.context-progress-bar {
  height: 100%;
  background: var(--accent-primary);
  border-radius: var(--radius-sm);
  transition: width 0.3s ease, background-color 0.3s ease;
  width: 0%;
}

/* Progress bar warning state (75-89%) */
.context-progress-bar.warning {
  background: var(--accent-warning, #f59e0b);
}

/* Progress bar danger state (90%+) */
.context-progress-bar.danger {
  background: var(--accent-error, #ef4444);
}

.context-note {
  font-size: 0.7rem;
  color: var(--dc-ink-2, var(--dcx-ink-2));
  font-style: italic;
  opacity: 0.7;
}

/* Context breakdown */
.context-breakdown {
  padding-top: var(--spacing-xs);
}

.context-breakdown-header {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--dc-ink-2, var(--dcx-ink-2));
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.context-breakdown-header:first-child {
  margin-top: 0;
}

.context-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 0.8rem;
}

.context-breakdown-row .context-label {
  color: var(--dc-ink-2, var(--dcx-ink-2));
}

.context-breakdown-row .context-value {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--dc-ink, var(--dcx-ink));
}

/* =============================================
   QUEUE INDICATOR PILL  (P15 — inline stacking pill)
   Twin of .steer-indicator/.steer-badge below; coloured blue to
   visually distinguish a "Queued:" pill from a yellow "Steered:" pill
   in the chronological message stream. Rendered by `queueMessage()`
   in app.js as a child of `#chatMessages` (NOT inside .input-container).
   ============================================= */

.queue-indicator-pill {
  justify-content: center;
  margin: var(--spacing-sm) 0;
}

.queue-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(66, 133, 244, 0.15);
  border: 1px solid rgba(66, 133, 244, 0.3);
  border-radius: 20px;
  font-size: 12px;
  color: var(--accent-primary);
  font-weight: 500;
}

/* =============================================
   STEER BUTTON & INDICATOR
   ============================================= */

/* Steer button style (applied to send button when processing + has input) */
.btn-send.btn-steer {
  background: #f59e0b;
  color: #1a1a2e;
}

.btn-send.btn-steer:hover {
  background: #d97706;
}

/* Steer indicator in chat */
.steer-indicator {
  justify-content: center;
  margin: var(--spacing-sm) 0;
}

.steer-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 20px;
  font-size: 12px;
  color: #f59e0b;
  font-weight: 500;
}

/* Steered (partial) message treatment */
.message.steered .message-content {
  opacity: 0.6;
  border-left: 3px solid #f59e0b;
}

.message.steered::after {
  content: "steered";
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 10px;
  color: #f59e0b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* =============================================
   ERROR BANNER - E2E Traceability
   ============================================= */

.error-banner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1));
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.error-banner-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.error-banner-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: var(--text-primary);
}

.error-banner-content {
  flex: 1;
  min-width: 0;
}

.error-banner-message {
  color: #fca5a5;
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.4;
}

.error-banner-trace {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-secondary);
}

.error-banner-trace strong {
  color: var(--text-muted);
}

.error-banner-trace code {
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #fca5a5;
  user-select: all;
}

.error-banner-copy {
  padding: 4px 10px;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  color: #fca5a5;
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.error-banner-copy:hover {
  background: rgba(239, 68, 68, 0.3);
}

/* ================================
   Data Source Chip Selector
   ================================ */

.datasource-chip-selector {
  position: relative;
  display: inline-flex;
}

.datasource-chip-selector.hidden {
  display: none;
}

.datasource-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.datasource-chip-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.datasource-chip-selector.open .datasource-chip-btn {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.datasource-chip-arrow {
  transition: transform 0.15s ease;
}

.datasource-chip-selector.open .datasource-chip-arrow {
  transform: rotate(180deg);
}

.datasource-chip-label {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.datasource-chip-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-height: 350px;
  overflow-y: auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 1000;
  padding: 4px;
}

.datasource-chip-selector.open .datasource-chip-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.datasource-chip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
}

/* P27 (2026-05-13): .datasource-refresh-btn rules + ds-spin keyframe DELETED.
   No DOM element references them — refresh button removed in P27. */

.datasource-chip-divider-label {
  padding: 6px 12px 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.datasource-chip-divider-label.ds-group-inactive {
  opacity: 0.45;
}

.persona-group-header {
  padding: 6px 12px 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.datasource-chip-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  transition: background 0.1s ease;
}

.datasource-chip-item:hover {
  background: var(--bg-tertiary);
}

.datasource-chip-item.active {
  color: var(--text-primary);
}

.datasource-chip-item.ds-always-on {
  cursor: default;
  opacity: 0.85;
}

.datasource-chip-item.ds-always-on .ds-check::after {
  content: ' \1F512';
  font-size: 0.7em;
}

.datasource-chip-item .ds-check {
  width: 14px;
  font-size: 12px;
  color: var(--accent-primary);
  flex-shrink: 0;
}

.datasource-chip-item .ds-name {
  flex: 1;
}

.datasource-chip-item .ds-warning {
  font-size: 12px;
  color: #f59e0b;
  margin-left: auto;
}

.datasource-chip-item.ds-consent-required {
  background: rgba(245, 158, 11, 0.05);
}

.datasource-chip-item.ds-consent-required:hover {
  background: rgba(245, 158, 11, 0.1);
}

/* Data source health status indicators */
.ds-status {
  font-size: 10px;
  margin-left: auto;
  transition: color 0.2s ease;
}

.ds-status-pending { color: #6b7280; }
.ds-status-checking { color: #f59e0b; animation: ds-pulse 1s ease-in-out infinite; }
.ds-status-ok { color: #22c55e; }
.ds-status-error { color: #ef4444; }
.ds-status-unknown { color: #6b7280; }
.ds-status-mcp { color: #8b5cf6; }

@keyframes ds-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Consent Popup */
.consent-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.consent-popup {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  max-width: 420px;
  width: 90%;
  overflow: hidden;
}

.consent-popup-header {
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
  border-bottom: 1px solid var(--border-color);
}

.consent-popup-body {
  padding: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.consent-popup-actions {
  padding: 12px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.consent-btn {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.consent-btn-cancel {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.consent-btn-cancel:hover {
  background: var(--bg-tertiary);
}

.consent-btn-accept {
  background: #f59e0b;
  border: 1px solid #f59e0b;
  color: #000;
}

.consent-btn-accept:hover {
  background: #d97706;
  border-color: #d97706;
}

/* ================================================================
   Home Scenario Rail (rolling starter-prompt rail)
   Ambient roll + drag-to-scrub. GAP, SPEED, card dimensions and
   line-clamps are deliberate; colours are re-pointed to the
   --dc-* landing/composer palette (base.css dark default, themes.css
   light override) so
   light AND dark mode both work with genuine, hand-verified values
   rather than a single accent that fails AA on a dark paper.
   ================================================================ */

.home-scenario-rail {
  /* Break the rail section itself out of chat-container (20px),
     chat-messages (32px), and home-shell (24px) gutters. */
  margin: 4px -76px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.home-scenario-rail-marquee {
  position: relative;
  margin-top: 22px;
  padding: 6px 0 10px;
  cursor: grab;
  touch-action: pan-y;
}

.home-scenario-rail-marquee.dragging {
  cursor: grabbing;
}

.home-scenario-rail-track {
  --rail-card-w: 352px;
  display: flex;
  gap: 14px;
  width: max-content;
  will-change: transform;
}

.home-scenario-rail-card {
  width: var(--rail-card-w);
  min-height: 162px;
  flex: none;
  background: var(--dc-paper);
  text-align: left;
  border: 1px solid var(--dc-line);
  border-radius: 14px;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-scenario-rail-marquee.dragging .home-scenario-rail-card {
  cursor: grabbing;
}

/* Hover and focus-visible are deliberately different colours, matching the
   mock: hover gets a neutral border lift (it's ambient, mouse-only, and
   must not look like a focus ring), while focus-visible gets the accent
   border AND the accent outline ring, since it is the real a11y signal. */
.home-scenario-rail-card:hover {
  transform: translateY(-3px);
  border-color: var(--dc-line-hover);
  box-shadow: 0 10px 26px var(--dc-card-shadow);
}

.home-scenario-rail-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--dc-accent);
  box-shadow: 0 10px 26px var(--dc-card-shadow);
  outline: 2px solid var(--dc-accent);
  outline-offset: 2px;
}

/* One-shot staggered entrance. The rail arrives as a short ripple
   so the eye registers the cards as reachable, then it stops - no loop, no
   pulse (owner rejected blinking: 30+ cards flashing at once reads as noise).
   Uses the independent `translate` property, NOT `transform`, so the
   fill-forwards end state cannot clobber the :hover/:focus-visible
   translateY(-3px) lift above. Stagger caps at the 8th card; anything past
   that is off-screen on arrival and would only delay the rail looking ready. */
@keyframes dcRailCardIn {
  from {
    opacity: 0;
    translate: 0 14px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.home-scenario-rail-card {
  animation: dcRailCardIn 0.42s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.home-scenario-rail-card:nth-child(1) { animation-delay: 0.02s; }
.home-scenario-rail-card:nth-child(2) { animation-delay: 0.07s; }
.home-scenario-rail-card:nth-child(3) { animation-delay: 0.12s; }
.home-scenario-rail-card:nth-child(4) { animation-delay: 0.17s; }
.home-scenario-rail-card:nth-child(5) { animation-delay: 0.22s; }
.home-scenario-rail-card:nth-child(6) { animation-delay: 0.27s; }
.home-scenario-rail-card:nth-child(7) { animation-delay: 0.32s; }
.home-scenario-rail-card:nth-child(n + 8) { animation-delay: 0.36s; }

/* The capability mark sits small and centred inside a neutral band; only the
   mark itself carries the capability colour (set inline per-card, mock L370). */
.home-scenario-rail-thumb {
  position: relative;
  flex: none;
  width: 100%;
  height: 30px;
  border-radius: 13px 13px 0 0;
  background: var(--dc-band);
  display: grid;
  place-items: center;
  margin: 0;
}

.home-scenario-rail-thumb svg {
  display: block;
  width: auto;
  height: 22px;
}

/* The LOCKED capability-mark SVGs (js/app.js RAIL_SHAPES) hardcode their
   neutral "text line" decoration as light-mode greys. Untouched, those
   would glow near-white on a dark card. This re-tints ONLY those neutral
   fills/strokes for dark mode via attribute selectors (SVG presentation
   attributes lose every CSS specificity contest, so no !important is
   needed) - the 5 accent hue fills (owner: "this is gold... keep it")
   are never selected here and stay theme-invariant, as instructed. */
:root:not([data-theme="light"]) .home-scenario-rail-thumb svg rect[fill="#D6D0C2"] {
  fill: var(--dc-mark-neutral-1);
}

:root:not([data-theme="light"]) .home-scenario-rail-thumb svg rect[fill="#C9D8EA"] {
  fill: var(--dc-mark-neutral-2);
}

:root:not([data-theme="light"]) .home-scenario-rail-thumb svg *[stroke="#8FA9C6"] {
  stroke: var(--dc-mark-neutral-3);
}

:root:not([data-theme="light"]) .home-scenario-rail-thumb svg rect[fill="#E3CBA0"] {
  fill: var(--dc-mark-neutral-4);
}

:root:not([data-theme="light"]) .home-scenario-rail-thumb svg *[stroke="#C9AC79"] {
  stroke: var(--dc-mark-neutral-5);
}

:root:not([data-theme="light"]) .home-scenario-rail-thumb svg rect[fill="#C3CBD2"] {
  fill: var(--dc-mark-neutral-6);
}

.home-scenario-rail-inlab {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 13px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* The "Try now" hint is not persistent chrome - it only shows while the
   cursor/focus is on the card, so the resting rail stays clean. */
.home-scenario-rail-hint {
  position: absolute;
  top: 50%;
  right: 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--dc-accent);
  opacity: 0;
  transform: translateY(-50%) translateX(3px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  white-space: nowrap;
}

.home-scenario-rail-card:hover .home-scenario-rail-hint,
.home-scenario-rail-card:focus-visible .home-scenario-rail-hint {
  opacity: 1;
  transform: translateY(-50%);
}

/* In dark mode the accent is much brighter than the band behind it, so
   "Try now" reads as a lit-up thing to click. In light mode the same token is
   darker than the band, so it reads as a caption instead. This is the one
   place that needs a lighter, more saturated green than --dc-accent - it is
   scoped to this label only and does not touch the accent anywhere else. */
html[data-theme="light"] .home-scenario-rail-hint {
  color: #0f8a63;
}

/* Mid-drag the cursor sweeps over every card it passes; the hint would strobe. */
.home-scenario-rail-marquee.dragging .home-scenario-rail-hint {
  opacity: 0;
  transition: none;
}

/* Hover fills the masthead band so "Try now" stops competing with a flat
   neutral strip. --dc-line-hover is the established hover-fill elsewhere in
   this file (e.g. model-chip hover), so the band steps to the same surface
   the rest of the app uses on hover instead of introducing a new colour. */
.home-scenario-rail-thumb {
  transition: background-color 0.18s ease;
}

.home-scenario-rail-card:hover .home-scenario-rail-thumb,
.home-scenario-rail-card:focus-visible .home-scenario-rail-thumb {
  background: var(--dc-line-hover);
}

/* The band darkens under the hint, so the hint gains weight to hold its own
   against it - same accent colour, no new ink. */
.home-scenario-rail-card:hover .home-scenario-rail-hint,
.home-scenario-rail-card:focus-visible .home-scenario-rail-hint {
  font-weight: 700;
}

/* Motion is decoration here, never information: with reduced motion the rail
   is simply present at rest and hover still fills the band. */
@media (prefers-reduced-motion: reduce) {
  .home-scenario-rail-card {
    animation: none;
  }
}

/* A3 Balanced: title and description stay verbatim and form one optically
   centred text block below the flush masthead. */
.home-scenario-rail-label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--dc-ink);
  margin: auto 13px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  transform: translateY(-1px);
}

.home-scenario-rail-trigger {
  font-size: 14px;
  line-height: 1.55;
  color: var(--dc-ink-2);
  margin: 4px 13px auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: 0;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .home-scenario-rail {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .home-scenario-rail-card {
    transition: none;
  }
}

/* =====================================================================
   PERSONALIZED LANDING GRID
   ===================================================================== */

.home-landing-grid {
  --rail-card-w: 352px;
  display: grid;
  grid-template-columns: repeat(2, var(--rail-card-w));
  gap: 16px;
  justify-content: center;
  margin: 44px 0 0;
}

@media (max-width: 760px) {
  .home-landing-grid {
    --rail-card-w: min(352px, calc(100vw - 32px));
    grid-template-columns: var(--rail-card-w);
  }
}

/* =====================================================================
   ACTIVITY DRAWER
   Always-visible session activity panel (reasoning · discovery · tools)
   ===================================================================== */

.activity-drawer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  height: 240px;
  min-height: 80px;
  border-top: 1px solid #2a2a40;
  background: #0f0f1a;
  overflow: hidden;
  color: #e2e2e8;
  color-scheme: dark;
}

/* COLLAPSED STATE — single-line bar with chevron + title only */
.activity-drawer-collapsed {
  flex: 0 0 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
}
.activity-drawer-collapsed .activity-body {
  display: none !important;
  height: 0 !important;
}
.activity-drawer-collapsed .activity-tabs,
.activity-drawer-collapsed .activity-header-actions,
.activity-drawer-collapsed .activity-resize-handle {
  display: none !important;
}
.activity-drawer-collapsed .activity-header {
  border-bottom: none;
  min-height: 32px;
  box-sizing: border-box;
}

/* Drag-to-resize strip at the very top */
.activity-resize-handle {
  flex-shrink: 0;
  height: 5px;
  cursor: ns-resize;
  background: transparent;
  transition: background 0.15s;
}
.activity-resize-handle:hover {
  background: var(--accent-color, #7c3aed);
}

/* Header bar */
.activity-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--bg-tertiary, #141428);
}

.activity-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Tab row */
.activity-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
}

.activity-tab {
  padding: 3px 10px;
  font-size: 11px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.activity-tab:hover {
  background: var(--hover-color, rgba(255,255,255,0.07));
  color: var(--text-primary, #eee);
}

.activity-tab.active {
  background: var(--accent-color, #7c3aed);
  color: #fff;
  border-color: var(--accent-color, #7c3aed);
}

/* Header action buttons */
.activity-header-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.activity-refresh-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 13px;
  border-radius: 3px;
  transition: background 0.15s;
}

.activity-refresh-btn:hover {
  background: var(--hover-color, rgba(255,255,255,0.07));
  color: var(--text-primary, #eee);
}

/* Toggle chevron button — far right, always visible, high-contrast orange */
.activity-toggle-btn {
  background: transparent;
  border: none;
  color: #ff9500;
  cursor: pointer;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 3px;
  transition: background 0.15s;
  flex-shrink: 0;
  margin-left: auto;
}

.persona-icon-img,
.datasource-chip-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}
.activity-toggle-btn:hover {
  background: rgba(255, 149, 0, 0.15);
  color: #ffad33;
}

/* Body (scrollable) */
.activity-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
}

/* Placeholder */
.activity-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-secondary, #888);
  font-size: 12px;
  gap: 6px;
}

/* Scrollable content wrapper */
.activity-content {
  padding: 6px 10px 10px;
}

/* Collapsible section (details/summary) */
.act-section {
  margin-bottom: 8px;
  border: 1px solid var(--border-color, #2a2a45);
  border-radius: 4px;
  overflow: hidden;
}

.act-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  background: var(--bg-tertiary, #141428);
  cursor: pointer;
  user-select: none;
  list-style: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.act-section-header::-webkit-details-marker { display: none; }
.act-section-header::before { content: '▸'; margin-right: 2px; font-size: 10px; }
details[open] > .act-section-header::before { content: '▾'; }

.act-section-body {
  padding: 6px 8px;
  background: var(--bg-primary, #0f0f1a);
  color: var(--text-primary, #e2e2e8);
}

/* Badge chips */
.act-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  border-radius: 10px;
  background: var(--bg-elevated, #252540);
  color: var(--text-secondary, #aaa);
  font-weight: 500;
}
.act-badge-green { background: rgba(80,120,90,0.15);  color: #7a9e87; }
.act-badge-blue  { background: rgba(99,130,200,0.12);  color: #8aaacf; }
.act-badge-red   { background: rgba(200,80,80,0.12);   color: #c98888; }

/* Phase labels */
.act-phase {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  border-radius: 10px;
  font-weight: 500;
}
.act-phase-gateway   { background: rgba(180,130,60,0.10);  color: #c4a46b; }
.act-phase-discovery { background: rgba(110,100,200,0.10);  color: #9b96c8; }
.act-phase-main      { background: rgba(80,150,100,0.10);   color: #8ab09a; }
.act-phase-title     { background: rgba(140,140,140,0.10);  color: #a8adb5; }
.act-phase-init      { background: rgba(110,180,140,0.12);  color: #8fc9a5; }

/* P9.P.F — Yellow warning badge (Q16 severity discriminator) */
.act-badge-yellow {
  background: rgba(245,158,11,0.15);
  color: #d4a256;
}

/* P9.P.F.T1 — Errors row severity accents */
.act-severity-error   { border-left: 3px solid #c98888; padding-left: 8px; }
.act-severity-warning { border-left: 3px solid #d4a256; padding-left: 8px; }
.act-severity-info    { border-left: 3px solid #7c8590; padding-left: 8px; }
.act-error-row {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 3px 6px;
  font-size: 12px;
  flex-wrap: wrap;
}

/* P9.P.F.T3 — File ops grouped by directory */
.act-files-group {
  margin: 6px 0;
  padding: 4px 0;
  border-top: 1px dashed rgba(120,120,140,0.20);
}
.act-files-group:first-child { border-top: none; }
.act-files-dir {
  font-size: 11px;
  color: var(--text-secondary, #8a8aa0);
  margin-bottom: 2px;
}
.act-file-row {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 2px 6px;
  font-size: 12px;
  flex-wrap: wrap;
}
/* .act-file-op-read was #6aa7d4 (steel blue), a latent leak. Using
   the warning/amber token (not the accent green) keeps read/write/delete
   visually distinct — write already uses green (#7dc99a) and delete uses red
   (#d68585), so read cannot also become green without losing that contrast. */
.act-file-op-read   { color: var(--dcx-warning); font-weight: 500; }
.act-file-op-write  { color: #7dc99a; font-weight: 500; }
.act-file-op-delete { color: #d68585; font-weight: 500; }

/* P9.P.F.T4 — Lifecycle event rows */
.act-lifecycle-row {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 3px 6px;
  font-size: 12px;
  flex-wrap: wrap;
}
.act-lifecycle-event {
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-primary, #e2e2e8);
}
.act-lifecycle-event-boot                 { color: #b196d4; }
.act-lifecycle-event-turn                 { color: #aab8c4; }
.act-lifecycle-event-model_change         { background: rgba(120,140,160,0.10); padding: 2px 6px; border-radius: 3px; }
.act-lifecycle-event-bootstrap_inventory  { color: #6fbfa8; font-style: italic; }

/* P15 (2026-05-17) — Dedicated Lifecycle tab: toolbar + body. */
.act-lifecycle-tab {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 4px 0 4px;
}
.act-lifecycle-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 6px 8px;
  background: var(--bg-elev-1, rgba(255,255,255,0.03));
  border-radius: 4px;
  font-size: 12px;
}
.act-lifecycle-title {
  font-weight: 600;
  color: var(--text-primary, #e2e2e8);
}
.act-lifecycle-filter-label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--text-muted, #9aa1ac);
}
.act-lifecycle-phase-select {
  background: var(--bg-elev-2, rgba(255,255,255,0.06));
  color: var(--text-primary, #e2e2e8);
  border: 1px solid var(--border-color, rgba(255,255,255,0.10));
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 12px;
  cursor: pointer;
}
.act-lifecycle-refresh-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border-color, rgba(255,255,255,0.10));
  color: var(--text-primary, #e2e2e8);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.4s ease;
}
.act-lifecycle-refresh-btn:hover { background: var(--bg-elev-2, rgba(255,255,255,0.06)); }
.act-lifecycle-refresh-btn.spinning {
  animation: act-spin 0.8s linear infinite;
}
@keyframes act-spin { to { transform: rotate(360deg); } }
.act-lifecycle-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 100%;
  overflow-y: auto;
}

/* P15 (2026-05-17, refreshed 2026-05-23) — Build-info deploy provenance pill.
   Green palette by deploy class (WCAG AAA contrast, no glow):
     - Full deploy (clean base) : DARK green bg + soft off-white fg
     - Hotfix (.has-hotfix)     : LIGHT green bg + deep green fg
     - Dirty   (.dirty)         : orthogonal red outline ring (does NOT replace
       bg, so the full-vs-hotfix classification remains visible at a glance). */
.build-info-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10px;
  line-height: 14px;
  color: #ecfdf5;            /* green-50: soft, non-glaring on dark green */
  background: #166534;       /* green-800: full-deploy default */
  border: 1px solid #14532d; /* green-900 */
  border-radius: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: help;
  vertical-align: middle;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Hotfix indicator — Hotfix-VM patch live on top of base redeploy. */
.build-info-pill.has-hotfix {
  color: #14532d;            /* green-900 */
  background: #dcfce7;       /* green-100 */
  border-color: #86efac;     /* green-300 */
}
/* Dirty = uncommitted; orthogonal to deploy class. Red ring (not bg swap)
   keeps the green classification readable underneath. */
.build-info-pill.dirty {
  outline: 2px solid #dc2626;  /* red-600 */
  outline-offset: 1px;
}

/* P9.P.F.T5 — Permissions row treatment */
.act-perm-row {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 3px 6px;
  font-size: 12px;
  flex-wrap: wrap;
}
.act-perm-approval { color: #7dc99a; }
.act-perm-denial   { color: #d68585; }
.act-perm-oauth    { color: #6aa7d4; font-weight: 500; }

/* P9.P.F.T6 — Thinking events typed channels (R10) */
.act-thinking-row {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 2px 6px;
  font-size: 12px;
  color: var(--text-secondary, #aaa);
  font-style: italic;
  flex-wrap: wrap;
}
.act-thinking-channel-analysis   { border-left: 2px solid #9b96c8; padding-left: 6px; }
.act-thinking-channel-commentary { border-left: 2px solid #6aa7d4; padding-left: 6px; }
.act-thinking-channel-thinking   { border-left: 2px solid #7c8590; padding-left: 6px; }

/* Empty state */
.act-empty {
  padding: 8px 0;
  font-size: 11px;
  color: #8888a0;
  font-style: italic;
}

/* Reasoning item */
.act-reasoning-item {
  padding: 5px 0;
  border-bottom: 1px solid var(--border-color, #2a2a45);
}
.act-reasoning-item:last-child { border-bottom: none; }

.act-reasoning-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 11px;
}

.act-seq {
  font-weight: 600;
  color: var(--text-secondary, #888);
  min-width: 24px;
}

.act-meta-pill {
  padding: 1px 5px;
  font-size: 10px;
  border-radius: 8px;
  background: rgba(128, 128, 160, 0.12);
  color: var(--text-secondary, #999);
  border: 1px solid rgba(128, 128, 160, 0.18);
}



.act-time {
  font-size: 10px;
  color: var(--text-tertiary, #666);
  font-variant-numeric: tabular-nums;
}

.act-reasoning-preview {
  margin: 5px 0 0 20px;
  padding: 6px 8px;
  font-size: 10px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: #c8c8d8;
  background: #1a1a30;
  border-radius: 3px;
  border-left: 2px solid var(--accent-color, #7c3aed);
  max-height: 150px;
  overflow-y: auto;
}

.act-btn-sm {
  padding: 1px 7px;
  font-size: 10px;
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
  background: transparent;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  transition: background 0.15s;
  margin-left: auto;
}
.act-btn-sm:hover {
  background: var(--hover-color, rgba(255,255,255,0.07));
  color: var(--text-primary, #eee);
}

/* Table shared styles */
.act-table-wrap {
  overflow-x: auto;
  max-width: 100%;
}

.act-table {
  min-width: 100%;
  width: max-content;
  border-collapse: collapse;
  font-size: 10px;
  color: #d0d0dc;
}

.act-table th {
  padding: 4px 6px;
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  color: var(--text-secondary, #888);
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--bg-tertiary, #141428);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.act-table td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--border-color, #252540);
  vertical-align: top;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.act-table tr:last-child td { border-bottom: none; }
.act-table tr:hover td { background: var(--hover-color, rgba(255,255,255,0.03)); }

/* Cell type modifiers */
.act-mono     { font-family: monospace; font-size: 10px; }
.act-right    { text-align: right; }
.act-row-num  { color: var(--text-tertiary, #666); min-width: 24px; text-align: right; }
.act-model    { font-size: 9px; color: var(--text-secondary, #888); }
.act-cell-sm  { max-width: 400px; white-space: pre-wrap; word-break: break-word; vertical-align: top; }
.act-error    { color: #f87171; }
.act-status   { font-size: 10px; }
.act-status-ok { color: #6e9278; }
.act-status-na { color: var(--text-secondary, #888); }

/* Tool name coloring */
.act-tool-name        { font-weight: 600; font-family: monospace; }
.act-tool-bluebird    { color: #7fa8c4; }
.act-tool-system      { color: #b8a870; }
.act-tool-intent      { color: #a88cc0; }



/* ═══════════════════════════════════════════════════════════════════════════
   CODEX OVERLAY PANELS  (Feedback Log, Data Fix)
   ═══════════════════════════════════════════════════════════════════════════ */

.codex-overlay {
  position: fixed;
  inset: 0;
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.codex-overlay.hidden { display: none; }

.codex-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.codex-overlay-panel {
  position: relative;
  z-index: 1;
  background: var(--bg-primary, #1e1e1e);
  border: 1px solid var(--border-color, #333);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  width: 90vw;
  max-width: 1200px;
  overflow: hidden;
  animation: overlayFadeIn 0.18s ease-out;
}

.codex-overlay-panel-wide {
  width: 95vw;
  max-width: 1400px;
}

.inline-link-button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--accent-primary, #4a9eff);
  padding: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.coverage-matter-panel {
  max-width: 860px;
}

.coverage-matter-body {
  padding: 20px 24px 24px;
  overflow: auto;
}

.coverage-matter-lead {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary, #fff);
}

.coverage-matter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.coverage-matter-grid section,
.coverage-matter-note {
  border: 1px solid var(--border-color, #333);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  padding: 14px;
}

.coverage-matter-grid h3 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--accent-primary, #4a9eff);
}

.coverage-matter-grid p,
.coverage-matter-note {
  margin: 0;
  color: var(--text-secondary, #c9c9c9);
  line-height: 1.55;
  font-size: 13px;
}

.coverage-matter-note {
  margin-top: 14px;
}

@keyframes server-health-spin {
  to { transform: rotate(360deg); }
}

/* P8.E.T4 (2026-05-17) — Server Management overlay tabs + op cards */
.codex-overlay-tabs {
  display: flex;
  gap: 4px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--bg-secondary, rgba(255,255,255,0.02));
}
.codex-tab {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-secondary, #999);
  font-size: 13px;
  font-weight: 500;
  padding: 12px 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.codex-tab:hover {
  color: var(--text-primary, #fff);
  background: rgba(255,255,255,0.04);
}
.codex-tab.active {
  color: var(--accent-primary, #4a9eff);
  border-bottom-color: var(--accent-primary, #4a9eff);
}
.codex-tab-panel {
  animation: codex-tab-fade 160ms ease;
}
@keyframes codex-tab-fade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.server-mgmt-op-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--bg-secondary, rgba(255,255,255,0.03));
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  margin-bottom: 14px;
  transition: border-color 120ms ease, background 120ms ease;
}
.server-mgmt-op-card:hover {
  border-color: var(--accent-primary, #4a9eff);
  background: rgba(74, 158, 255, 0.04);
}
.server-mgmt-op-card-danger {
  border-color: rgba(198, 40, 40, 0.4);
}
.server-mgmt-op-card-danger:hover {
  border-color: #c62828;
  background: rgba(198, 40, 40, 0.05);
}
.server-mgmt-op-icon {
  font-size: 28px;
  flex: 0 0 auto;
  width: 44px;
  text-align: center;
}
.server-mgmt-op-text {
  flex: 1 1 auto;
  min-width: 0;
}
.server-mgmt-op-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #fff);
  margin-bottom: 4px;
}
.server-mgmt-op-desc {
  font-size: 12px;
  color: var(--text-secondary, #aaa);
  line-height: 1.45;
}
.server-mgmt-op-card .btn {
  flex: 0 0 auto;
  min-width: 92px;
}
.btn.btn-danger {
  background: #c62828;
  border-color: #c62828;
  color: #fff;
}
.btn.btn-danger:hover {
  background: #b71c1c;
  border-color: #b71c1c;
}

/* Server Management — single-view action toolbar.
   Borderless icon-only buttons (no labels, no frame around the strip). */
.server-mgmt-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin: 0 0 12px 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.server-mgmt-toolbar-spacer { flex: 1 1 auto; }
.server-mgmt-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  color: var(--text-primary, #fff);
  border: none;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 100ms ease, transform 80ms ease;
}
.server-mgmt-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.server-mgmt-icon-btn:active {
  transform: scale(0.92);
}
.server-mgmt-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.server-mgmt-icon-btn-danger:hover {
  background: rgba(198, 40, 40, 0.15);
}
.server-mgmt-op-result {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.server-mgmt-op-result-info  { color: var(--text-secondary, #aaa); }
.server-mgmt-op-result-ok    { color: #2e7d32; background: rgba(46, 125, 50, 0.10); }
.server-mgmt-op-result-error { color: #c62828; background: rgba(198, 40, 40, 0.10); }

/* ── Server Management — bordered cards + Task-Manager-style metric tiles ── */
.server-mgmt-card {
  background: var(--bg-secondary, #1a1f2a);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 14px 0;
}
.server-mgmt-card-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-secondary, #8b949e);
  margin: 0 0 10px 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.server-mgmt-card-hint {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--text-tertiary, #6e7681);
  opacity: 0.85;
}

/* Controls — square icon+label buttons inside the card */
.server-mgmt-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.server-mgmt-ctl-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 12px;
  min-height: 32px;
  background: var(--bg-tertiary, #232936);
  color: var(--text-primary, #e6edf3);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.10));
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease, color 120ms ease;
}
.server-mgmt-ctl-btn svg { flex: 0 0 auto; }
.server-mgmt-ctl-btn:hover {
  background: rgba(88,166,255,0.08);
  border-color: rgba(88,166,255,0.35);
  color: #58a6ff;
}
.server-mgmt-ctl-btn:active { transform: scale(0.97); }
.server-mgmt-ctl-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.server-mgmt-ctl-btn-danger:hover {
  background: rgba(248,81,73,0.10);
  border-color: rgba(248,81,73,0.45);
  color: #f85149;
}

/* Metrics — 3-column responsive grid */
.server-mgmt-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 900px) {
  .server-mgmt-metric-grid { grid-template-columns: 1fr; }
}
.server-mgmt-metric-tile {
  display: grid;
  grid-template-columns: 132px 1fr;
  align-items: stretch;
  gap: 12px;
  background: var(--bg-tertiary, #232936);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  border-radius: 8px;
  padding: 10px 12px 10px 10px;
  min-height: 78px;
  transition: border-color 160ms ease, background 160ms ease;
}
.server-mgmt-metric-tile:hover {
  border-color: rgba(88,166,255,0.35);
  background: rgba(88,166,255,0.04);
}
.server-mgmt-spark {
  width: 100%;
  height: 58px;
  align-self: center;
  /* Was a rgba(88,166,255,...) blue wash behind every sparkline
     (cpu/mem/threads alike) — warmed since it's shared, not metric-specific. */
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--dcx-accent) 6%, transparent) 0%,
    color-mix(in srgb, var(--dcx-accent) 2%, transparent) 100%);
  border-radius: 4px;
  overflow: hidden;
}
/* Was rgba(88,166,255,.22) — a latent (0×0 today) blue leak in the
   server-management sparkline fill. */
.sm-spark-area  { fill: color-mix(in srgb, var(--dcx-accent) 22%, transparent); stroke: none; transition: fill 200ms ease; }
.sm-spark-line  { fill: none; stroke: var(--dc-accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; transition: stroke 200ms ease; }
/* per-metric accent colors. cpu warmed (was blue, same defect as the shared
   rules above); mem (violet) and threads (green) are distinct per-metric
   colour coding, not the Windows/Google blue this task targets — left as-is. */
.server-mgmt-metric-tile[data-metric="cpu"]     .sm-spark-area { fill: color-mix(in srgb, var(--dcx-accent) 22%, transparent); }
.server-mgmt-metric-tile[data-metric="cpu"]     .sm-spark-line { stroke: var(--dc-accent); }
.server-mgmt-metric-tile[data-metric="mem"]     .sm-spark-area { fill: rgba(187,128,255,0.22); }
.server-mgmt-metric-tile[data-metric="mem"]     .sm-spark-line { stroke: #bb80ff; }
.server-mgmt-metric-tile[data-metric="threads"] .sm-spark-area { fill: rgba(63,185,80,0.20); }
.server-mgmt-metric-tile[data-metric="threads"] .sm-spark-line { stroke: #3fb950; }

.server-mgmt-metric-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.server-mgmt-metric-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--text-primary, #e6edf3);
  margin-bottom: 2px;
}
.server-mgmt-metric-value {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: var(--text-primary, #e6edf3);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.server-mgmt-metric-sub {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-secondary, #8b949e);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Light theme overrides */
html[data-theme="light"] .server-mgmt-card {
  background: var(--dc-paper);
  border-color: var(--dc-line);
}
html[data-theme="light"] .server-mgmt-card-title { color: var(--dc-ink-2); }
html[data-theme="light"] .server-mgmt-card-hint  { color: var(--dc-ink-2); }
html[data-theme="light"] .server-mgmt-metric-tile {
  background: var(--dc-band);
  border-color: var(--dc-line);
}
html[data-theme="light"] .server-mgmt-metric-tile:hover {
  background: var(--dc-ground);
  border-color: var(--dc-accent);
}
html[data-theme="light"] .server-mgmt-metric-label { color: var(--dc-ink); }
html[data-theme="light"] .server-mgmt-metric-value { color: var(--dc-ink); }
html[data-theme="light"] .server-mgmt-metric-sub   { color: var(--dc-ink-2); }
html[data-theme="light"] .server-mgmt-ctl-btn {
  background: #ffffff;
  color: #1f2937;
  border-color: #d1d5db;
}
html[data-theme="light"] .server-mgmt-ctl-btn:hover {
  background: #eff6ff; color: #0078d4; border-color: #0078d4;
}
html[data-theme="light"] .server-mgmt-ctl-btn-danger:hover {
  background: #fef2f2; color: #c62828; border-color: #c62828;
}

/* Summary line (compact, below metrics — secondary info) */
.server-mgmt-summary {
  font-size: 12px;
  color: var(--text-secondary, #8b949e);
  margin: 0 0 12px 2px;
}

.codex-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-color, #333);
  flex-shrink: 0;
}
.codex-overlay-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  margin: 0;
}
.codex-overlay-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.codex-overlay-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.codex-overlay-close {
  background: transparent;
  border: none;
  color: var(--text-secondary, #aaa);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}
.codex-overlay-close:hover { background: var(--bg-hover, #2a2a2a); color: var(--text-primary, #e0e0e0); }

/* ── Table Shared ── */
.codex-table-wrapper {
  overflow-x: auto;
}
.codex-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.codex-table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--text-secondary, #aaa);
  font-weight: 500;
  border-bottom: 1px solid var(--border-color, #333);
  white-space: nowrap;
}
.codex-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-muted, #2a2a2a);
  color: var(--text-primary, #e0e0e0);
  vertical-align: top;
}
.codex-table tr:hover td { background: var(--bg-hover, #242424); }
.codex-table-empty {
  text-align: center;
  color: var(--text-tertiary, #777);
  padding: 32px !important;
}
.codex-table-error { color: #e87474 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   FEEDBACK LOG PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

.feedback-stats-summary {
  font-size: 12px;
  color: var(--text-secondary, #aaa);
  padding: 4px 10px;
  background: var(--bg-secondary, #252525);
  border-radius: 20px;
}

.feedback-log-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--spacing-lg);
  min-height: 0;
}

.feedback-log-table-wrap {
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  background: var(--bg-primary);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.feedback-log-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.feedback-log-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 14px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-color);
}

.feedback-log-table td {
  padding: 12px 14px;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  vertical-align: top;
}

.feedback-log-row {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.feedback-log-row:hover,
.feedback-log-row.selected {
  background: rgba(79, 70, 229, 0.07);
}

.feedback-log-row code {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 11px;
}

.feedback-rating-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.feedback-rating-pill.positive {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.feedback-rating-pill.negative {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.feedback-rating-pill.neutral {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.feedback-detail-panel {
  min-width: 0;
  align-self: start;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--bg-primary), var(--bg-secondary));
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  padding: var(--spacing-lg);
}

.feedback-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

.feedback-detail-header h3 {
  margin: 4px 0 0;
  font-size: 18px;
}

.feedback-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: var(--spacing-md) 0;
}

.feedback-detail-grid div {
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.54);
}

.feedback-detail-grid dt {
  margin-bottom: 3px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.feedback-detail-grid dd {
  margin: 0;
  color: var(--text-primary);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.feedback-detail-section {
  margin-top: var(--spacing-md);
}

.feedback-detail-section h4 {
  margin: 0 0 6px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.feedback-detail-section p {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  .header-feedback-action span:last-child {
    display: none;
  }

  /* The Feedback trigger's last child is the caret, so the rule above would hide the
     caret and keep the word - the exact inverse of what it does everywhere else.
     Restore the caret; the label stays because it is not the last child. */
  #headerFeedbackMenuBtn span:last-child {
    display: inline;
  }

  /* Items INSIDE the dropdown keep their labels. Collapsing them would leave a menu of
     bare glyphs, which is unreadable and pointless - the menu has room for words. */
  .header-feedback-menu-dropdown .header-feedback-action span:last-child {
    display: inline;
  }

  /* Guided tour keeps its label. The base rule was written for a seven-button header;
     with two controls there is room, and a bare "i" glyph is unreadable.
     #whoamiHeaderBtn now lives inside the dropdown and is covered by the rule above. */
  #guidedTourHeaderBtn span:last-child {
    display: inline;
  }

  .feedback-log-shell {
    grid-template-columns: 1fr;
  }
}

/* S2 header feedback menu.
   CRITICAL: `display` is declared on the CONTAINER only and never on
   `.header-feedback-menu-dropdown .header-feedback-action`. The hidden-item freeze in
   layout.css hides admin-gated items via a class-based selector, and adding any `display`
   declaration to an item selector here would create a specificity tie that could unhide
   #appFeedbackBtn for non-admins. Verified: #appFeedbackBtn still computes display:none. */
.header-feedback-menu {
  position: relative;
}

.header-feedback-menu-caret {
  flex: 0 0 auto;
  color: var(--dc-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.9;
}

.header-feedback-menu-dropdown {
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 2px;
  width: max-content;
  min-width: 0;
  background: var(--dc-paper);
  border-color: var(--dc-line);
  box-shadow: 0 10px 26px var(--dc-card-shadow);
  color: var(--dc-ink-2);
}

.header-feedback-menu-dropdown .header-feedback-action {
  width: 100%;
  justify-content: flex-start;
  border-radius: 8px;
  background: transparent;
  border-color: transparent;
  padding: 8px 10px;
  color: var(--dc-ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.header-feedback-menu-dropdown .header-feedback-action:hover {
  background: var(--dc-band);
  border-color: var(--dc-line-hover);
  box-shadow: 0 2px 8px var(--dc-card-shadow);
  color: var(--dc-ink);
}

.header-feedback-menu-dropdown .header-feedback-action:focus-visible {
  background: var(--dc-band);
  border-color: var(--dc-accent);
  box-shadow: 0 2px 8px var(--dc-card-shadow);
  color: var(--dc-ink);
}

.feedback-panel-filters {
  margin-bottom: 12px;
}

.feedback-rating { font-size: 18px; }
.feedback-tags { color: var(--text-tertiary, #888); font-size: 12px; }
.feedback-comment { max-width: 280px; }
.feedback-query { max-width: 200px; font-size: 12px; color: var(--text-secondary, #bbb); }
.feedback-model { font-size: 12px; white-space: nowrap; }
.feedback-when { font-size: 12px; white-space: nowrap; color: var(--text-tertiary, #888); }
.tag-list { font-size: 11px; }
.muted { color: var(--text-tertiary, #666); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════════
   DATA FIX PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

/* Service search */
.datafix-service-filter {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-color, #333);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.datafix-service-search-wrapper {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 400px;
}

.datafix-service-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-primary, #1e1e1e);
  border: 1px solid var(--border-color, #444);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
}
.datafix-service-suggestions.hidden { display: none; }

.datafix-suggestion {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-primary, #e0e0e0);
}
.datafix-suggestion:hover { background: var(--bg-hover, #2a2a2a); }

.datafix-selected-services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  flex: 2;
}
.datafix-no-filter {
  font-size: 12px;
  color: var(--text-tertiary, #777);
  font-style: italic;
}
.datafix-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 10px;
  background: var(--accent-muted, #0078d422);
  border: 1px solid var(--accent, #0078d4);
  border-radius: 14px;
  font-size: 12px;
  color: var(--accent, #4db2ff);
}
.datafix-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent, #4db2ff);
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
}
.datafix-chip-remove:hover { color: #e87474; }

/* Tabs */
.datafix-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-color, #333);
  flex-shrink: 0;
}
.datafix-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 18px;
  font-size: 13px;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  transition: all 0.15s;
}
.datafix-tab:hover { color: var(--text-primary, #e0e0e0); }
.datafix-tab.active {
  color: var(--accent, #4db2ff);
  border-bottom-color: var(--accent, #0078d4);
}
.datafix-tab-count { font-size: 11px; opacity: 0.7; }

/* Status filter row */
.datafix-status-filter {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 20px;
  font-size: 12px;
  color: var(--text-secondary, #aaa);
  background: var(--bg-secondary, #1a1a1a);
  flex-shrink: 0;
}
.datafix-status-filter label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.datafix-record-count { margin-left: auto; color: var(--text-tertiary, #777); }

/* Tab content */
.datafix-tab-content { display: none; }
.datafix-tab-content.active { display: block; }

.datafix-body {
  padding: 0 !important;
}

/* Badges */
.issue-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}
.issue-conflict { background: #5a1a1a; color: #f87676; border: 1px solid #7a2020; }
.issue-unresolved { background: #3a3010; color: #f0c060; border: 1px solid #605020; }
.issue-low-confidence { background: #1a3050; color: #70b0f0; border: 1px solid #205080; }

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
}
.status-open { background: var(--bg-secondary, #252525); color: var(--text-secondary, #aaa); }
.status-staged { background: #2a2050; color: #a090f0; border: 1px solid #4040a0; }
.status-resolved { background: #1a3020; color: #60c080; border: 1px solid #205030; }

.datafix-staged-badge {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 10px;
  background: #3a2050;
  color: #c090f0;
  border: 1px solid #5040a0;
}
.datafix-staged-badge.hidden { display: none; }

/* Table cell styles */
.datafix-term { font-weight: 500; }
.datafix-services { font-size: 11px; color: var(--text-secondary, #aaa); max-width: 160px; }
.datafix-values { font-size: 12px; max-width: 200px; }
.datafix-updated-by { font-size: 12px; color: var(--text-tertiary, #777); }
.datafix-correction { font-size: 12px; max-width: 200px; word-break: break-word; }
.datafix-approval-btns { display: flex; gap: 4px; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   CODEX MODAL  (correction submit dialog)
   ═══════════════════════════════════════════════════════════════════════════ */

.codex-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.codex-modal.hidden { display: none; }

.codex-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

.codex-modal-content {
  position: relative;
  z-index: 1;
  background: var(--bg-primary, #1e1e1e);
  border: 1px solid var(--border-color, #444);
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.5);
  width: 480px;
  max-width: 96vw;
  animation: overlayFadeIn 0.15s ease-out;
}

.codex-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color, #333);
}
.codex-modal-header h3 { font-size: 15px; font-weight: 600; margin: 0; color: var(--text-primary, #e0e0e0); }

.codex-modal-body { padding: 16px 18px; }
.codex-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-color, #333);
}

.codex-form-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: start;
  gap: 8px;
  margin-bottom: 12px;
}
.codex-form-row label {
  font-size: 12px;
  color: var(--text-secondary, #aaa);
  padding-top: 6px;
}
.codex-form-value { font-size: 13px; color: var(--text-primary, #e0e0e0); padding: 5px 0; }
.codex-form-value-muted { color: var(--text-tertiary, #777); font-style: italic; }
.codex-form-note { font-size: 11px; color: var(--text-tertiary, #777); margin: 4px 0 0 110px; }
.required { color: #e87474; }

/* shared input/select */
.codex-input, .codex-select {
  background: var(--bg-secondary, #252525);
  border: 1px solid var(--border-color, #444);
  border-radius: 6px;
  color: var(--text-primary, #e0e0e0);
  font-size: 13px;
  padding: 6px 10px;
  width: 100%;
  box-sizing: border-box;
}
.codex-input:focus, .codex-select:focus {
  outline: none;
  border-color: var(--accent, #0078d4);
}

/* Utility */
.hidden { display: none !important; }
.text-center { text-align: center; }
.btn-success { background: #1a4a2a; color: #60d080; border-color: #206030; }
.btn-success:hover { background: #1e6030; }
.btn-danger { background: #4a1a1a; color: #e07070; border-color: #602020; }
.btn-danger:hover { background: #602020; }


/* ═══════════════════════════════════════════════════════════════════════════
   ROLES & ACCESS PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

.roles-help-text {
  font-size: 13px;
  color: var(--text-secondary, #aaa);
  margin: 0 0 16px;
}

.roles-role-card {
  background: var(--bg-secondary, #1a1a1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.roles-role-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.roles-role-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  text-transform: capitalize;
}

.roles-feats { margin-bottom: 10px; }

.roles-feat-category {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.roles-feat-cat-label {
  font-size: 11px;
  color: var(--text-tertiary, #777);
  min-width: 80px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.roles-feat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 10px;
  background: var(--bg-tertiary, #2a2a2a);
  border: 1px solid var(--border-color, #404040);
  border-radius: 12px;
  font-size: 12px;
  color: var(--text-secondary, #ccc);
}

.roles-feat-revoke {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary, #777);
  font-size: 13px;
  padding: 0 2px;
  line-height: 1;
}
.roles-feat-revoke:hover { color: #e87474; }

.roles-grant-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.roles-grant-row .codex-select { max-width: 280px; }

.roles-assign-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.roles-assign-form .codex-input { max-width: 220px; }
.roles-assign-form .codex-select { max-width: 140px; }

.roles-role-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}
.roles-badge-admin    { background: #3a1050; color: #d090f0; border: 1px solid #5040a0; }
.roles-badge-contributor { background: #0a2a50; color: #70b0f0; border: 1px solid #205080; }
.roles-badge-user     { background: var(--bg-secondary, #252525); color: var(--text-secondary, #aaa); border: 1px solid var(--border-color, #444); }

.roles-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 18px;
  font-size: 13px;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  transition: all 0.15s;
}
.roles-tab:hover { color: var(--text-primary, #e0e0e0); }
.roles-tab.active {
  color: var(--accent, #4db2ff);
  border-bottom-color: var(--accent, #0078d4);
}

.roles-tab-content { display: none; }
.roles-tab-content.active { display: block; }

/* ============================================================================ */
/* P8.T20 — Subagent runs (session_subagent_runs grouped by run / phase)        */
/* Used in: activity drawer (.act-subagent-*) + App Insights sidebar            */
/* ============================================================================ */

.act-subagent-group {
  border: 1px solid var(--border-color, #2a2a45);
  border-radius: 4px;
  margin: 6px 0;
  background: var(--bg-secondary, #181828);
}
.act-subagent-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(140, 110, 200, 0.10);
  border-bottom: 1px solid var(--border-color, #2a2a45);
  font-size: 11px;
}
.act-subagent-agent-name {
  font-weight: 600;
  color: #c2a6e6;
  font-family: monospace;
}
.act-subagent-prompt {
  flex: 1;
  color: var(--text-secondary, #aaa);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.act-subagent-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
}
.act-subagent-event-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-family: monospace;
}
.act-subagent-event-kind {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.act-subagent-event-started     { background: rgba(110,180,140,0.15); color: #8fc9a5; }
.act-subagent-event-completed   { background: rgba(80,120,90,0.15);   color: #7a9e87; }
.act-subagent-event-failed      { background: rgba(200,80,80,0.15);   color: #c98888; }
.act-subagent-event-selected    { background: rgba(99,130,200,0.12);  color: #8aaacf; }
.act-subagent-event-deselected  { background: rgba(140,140,160,0.12); color: #9090a8; }

.act-subagent-result {
  padding: 4px 8px 6px 8px;
  font-size: 11px;
  border-top: 1px dashed var(--border-color, #2a2a45);
  color: var(--text-secondary, #aaa);
}
.act-subagent-result-ok     { color: #7a9e87; }
.act-subagent-result-fail   { color: #c98888; }
.act-subagent-result-label {
  font-weight: 600;
  margin-right: 4px;
}

/* App Insights sidebar variant — grouped by phase */
.subagent-runs-list .subagent-phase-group {
  margin: 6px 0 10px 0;
}
.subagent-runs-list .subagent-phase-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #aaa);
  padding: 2px 0 4px 0;
  border-bottom: 1px solid var(--border-color, #2a2a45);
  margin-bottom: 4px;
}
.subagent-runs-list .subagent-run-line {
  display: flex;
  gap: 6px;
  font-size: 11px;
  padding: 2px 0;
  font-family: monospace;
}
.subagent-runs-list .subagent-run-status-ok   { color: #7a9e87; }
.subagent-runs-list .subagent-run-status-fail { color: #c98888; }
.subagent-runs-list .subagent-run-status-pending { color: #aaa; }


/* ── P6 §6.1 (steer-queue-stop, 2026-05-25) — LiveStatusBar shell ──
   Reserved-space presence bar mounted as a SIBLING immediately before
   #chatMessages. NOT a sticky overlay: the chat column scrolls beneath
   it because it lives outside the scroll container. Flat rectangle, no
   rounded corners, uses the existing dark-theme design tokens. */
.live-status-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  /* P6 §6.3.2 — height + horizontal padding tokenised; vertical padding
     dropped (chip rail owns its own safe-zone via padding-block).
     `overflow: visible` defends against future drift that would re-clip
     the count badge. */
  height: var(--lsb-height);
  padding: 0 var(--lsb-padding-x);
  overflow: visible;
  margin: 0;
  background: var(--bg-secondary, #252526);
  border-bottom: 1px solid var(--border-color, #3c3c3c);
  color: var(--text-primary, #e0e0e0);
  font-size: 12px;
  user-select: none;
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 50;
}
.live-status-bar.hidden { display: none; }

/* LEFT \u2014 session identity (Word-style title bar). Title takes the room
   it needs; sid suffix is muted and monospace for scanability. */
.live-status-bar .lsb-session {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 0 1 auto;
}
.live-status-bar .lsb-session-title {
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60ch;
  user-select: text;
  -webkit-user-select: text;
}
.live-status-bar .lsb-session-sid {
  font-family: ui-monospace, Consolas, "Cascadia Mono", monospace;
  font-size: 10.5px;
  color: var(--text-secondary, #a0a0a0);
  user-select: text;
  -webkit-user-select: text;
}

.live-status-bar .lsb-titlebar-action {
  margin-left: 6px;
  border: 0;
  background: transparent;
  color: var(--text-primary, #e0e0e0);
  cursor: pointer;
  line-height: 1;
  padding: 2px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.94;
  transition: color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

.live-status-bar .lsb-titlebar-action svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  pointer-events: none;
}

.live-status-bar .lsb-titlebar-action:hover {
  color: var(--accent-primary, #007acc);
  background: transparent;
  opacity: 1;
  transform: translateY(-1px);
}

.live-status-bar .lsb-titlebar-action.is-action-confirmed,
.live-status-bar .lsb-titlebar-action.is-action-confirmed:hover {
  color: #22c55e;
}

/* =============================================
   P9.P.F.T9 — In-flight ("⏵ Live") badge
   =============================================
   Sits inline next to the session title in the LiveStatusBar. Visible
   only when the parent .live-status-bar carries the `.in-flight` class
   (toggled by LiveStatusBar.setInFlight(), which subscribes to the
   `stream-activity` window event already dispatched by
   streaming.onQueryStart / streaming.onIdle for BOTH originator and
   spectator paths). Distinct from `.live-tag` (presence-gated "other
   users watching"): this badge means "this session has frames streaming
   right now". */
.live-status-bar .in-flight-badge {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: rgba(99, 188, 121, 0.14);
  color: var(--accent-success, #63bc79);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  user-select: none;
}
.live-status-bar.in-flight .in-flight-badge {
  display: inline-flex;
}
.live-status-bar .in-flight-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-success, #63bc79);
  box-shadow: 0 0 0 0 rgba(99, 188, 121, 0.55);
}
.live-status-bar.in-flight .in-flight-badge-dot {
  animation: in-flight-badge-pulse 1.4s ease-out infinite;
}
@keyframes in-flight-badge-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99, 188, 121, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(99, 188, 121, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 188, 121, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .live-status-bar.in-flight .in-flight-badge-dot { animation: none; }
}

/* Spacer pushes the live tag + chips to the right edge. */
.live-status-bar .lsb-spacer {
  flex: 1 1 auto;
}

.live-status-bar .live-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10.5px;
  color: var(--text-primary, #e0e0e0);
}
.live-status-bar .live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-success, #63bc79);
  box-shadow: 0 0 0 0 rgba(99, 188, 121, 0.45);
  animation: live-bar-pulse 1.8s ease-out infinite;
}
@keyframes live-bar-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99, 188, 121, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(99, 188, 121, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 188, 121, 0); }
}

.live-status-bar .live-count {
  color: var(--text-muted, #6a6a6a);
  font-size: 11px;
}

.live-status-bar .presence-chips {
  display: inline-flex;
  align-items: center;
  gap: var(--presence-chip-gap);
  flex: 0 1 auto;
  max-width: 50%;
  /* P6 §6.3.2 — overflow-y must be VISIBLE so the count badge + speaker
     ring (painted as box-shadow outside the avatar circle) are not
     clipped by the chip-rail viewport. Horizontal scroll preserved.
     `scrollbar-gutter: stable` + symmetric `padding-block` keep the bar
     baseline steady when the scrollbar appears. */
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted, #6a6a6a) transparent;
  padding-block: var(--lsb-chip-rail-padding-y);
}
.live-status-bar .presence-chips::-webkit-scrollbar { height: 4px; }
.live-status-bar .presence-chips::-webkit-scrollbar-thumb {
  background: var(--text-muted, #6a6a6a);
  border-radius: 2px;
}
.live-status-bar .presence-chips::-webkit-scrollbar-track { background: transparent; }
.live-status-bar .presence-chips .presence-chip { flex: 0 0 auto; }

/* Collapsed: hide overflow chips beyond first 3; count tag shows total. */
/* Collapsed mode removed — all chips shown, container scrolls horizontally. */

.presence-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* P6 §6.3.3 — wrapper 34×34 (was 26) around 24×24 avatar leaves 5px
     each side for box-shadow speaker ring + count badge overhang.
     `overflow: visible` defends against future drift. */
  width: var(--presence-chip-size);
  height: var(--presence-chip-size);
  overflow: visible;
}

.presence-chip .presence-avatar {
  position: relative;
  /* P6 §6.3.3 — avatar size tokenised. */
  width: var(--presence-avatar-size);
  height: var(--presence-avatar-size);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Wave-B Bug 3 (2026-05-26): chip avatar contrast.
     Previous rule used `background: var(--bg-tertiary, #2d2d2d)` with
     `color:#fff`. In light theme `--bg-tertiary` resolves to `#e8e8e8`,
     giving white initials on a near-white avatar (~1.1:1 contrast —
     unreadable, fails WCAG AA 4.5:1). Switched to a fixed, theme-
     independent Microsoft brand neutral pair: navy `#0a2540` background
     with `#ffffff` initials (14.8:1 contrast — exceeds WCAG AAA 7:1
     for normal text). Hard-coded here rather than tokenised in
     tokens.config.json because the token generator + schema validator
     live in the super-repo (tools/generate-css-tokens.py) which is
     out-of-scope for Wave-B (framework/-only edit constraint). Follow-
     up: tokenise as --presence-avatar-bg / --presence-avatar-fg in a
     future wave that can bump the schema-version + the validator. */
  color: #ffffff;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.3px;
  background: #0a2540;
  border: 2px solid var(--border-color, #3c3c3c);
  box-sizing: border-box;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

/* P6 §6.3.4 — Speaker ring (steady) + pulse (animated). Class contract
   is `.is-speaker` + optional `.is-pulsing` (NOT `.is-speaker-active`).
   Ring layered as box-shadow so no layout reflow when toggled. */
.presence-chip.is-speaker .presence-avatar {
  box-shadow:
    0 0 0 var(--presence-speaker-ring-width) var(--presence-speaker-ring-color);
}

/* Combined is-speaker + is-you: speaker ring (layer A) + is-you halo
   (layers B solid + C blur) painted simultaneously. */
.presence-chip.is-speaker.is-you .presence-avatar {
  box-shadow:
    0 0 0 var(--presence-speaker-ring-width) var(--presence-speaker-ring-color),
    0 0 0 calc(var(--presence-speaker-ring-width) + 5px) #4fc3f7,
    0 0 8px calc(var(--presence-speaker-ring-width) + 5px) rgba(79, 195, 247, 0.55);
}

@keyframes presence-speaker-pulse {
  0% {
    box-shadow:
      0 0 0 var(--presence-speaker-ring-width) var(--presence-speaker-ring-color),
      0 0 var(--presence-speaker-pulse-blur-min) calc(var(--presence-speaker-ring-width) + 2px) var(--presence-speaker-ring-color);
  }
  50% {
    box-shadow:
      0 0 0 var(--presence-speaker-ring-width) var(--presence-speaker-ring-color),
      0 0 var(--presence-speaker-pulse-blur-max) calc(var(--presence-speaker-ring-width) + 2px) var(--presence-speaker-ring-color);
  }
  100% {
    box-shadow:
      0 0 0 var(--presence-speaker-ring-width) var(--presence-speaker-ring-color),
      0 0 var(--presence-speaker-pulse-blur-min) calc(var(--presence-speaker-ring-width) + 2px) var(--presence-speaker-ring-color);
  }
}

.copilot-version-line {
  flex: 1 1 100%;
  min-width: 0;
  margin-top: 2px;
  font-size: 11px;
  color: var(--dc-ink-2, var(--dcx-ink-2));
  font-family: ui-monospace, Consolas, "Cascadia Mono", monospace;
}

.presence-chip.is-speaker.is-pulsing .presence-avatar {
  animation: presence-speaker-pulse var(--presence-speaker-pulse-duration) ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .presence-chip.is-speaker.is-pulsing .presence-avatar { animation: none; }
}

/* CRITICAL NOTE TO LLM / AGENTS:
   User approved and locked this title-bar joined-user badge ring/color hue.
   Do NOT change the SM-style presence badge halo, cyan hue, blur, or pulse
   unless the user directly requests a presence-badge visual redesign.

   "you" — bright cyan halo + bottom dot identifying THIS user's chip.
   P6 §6.1 (steer-queue-stop, 2026-05-25): when the local viewer has
   multiple tabs open under the same Entra identity, all those tabs
   collapse into ONE chip (initials/colors identical), so the chip needs
   an obvious visual marker to read as "this is you". A 3px cyan halo +
   2s breathing pulse pops against the static spectator chips; the 6px
   bottom dot replicates the legacy indicator so the badge stays
   unambiguous even at small chip sizes. */
.presence-chip.is-you .presence-avatar {
  box-shadow:
    0 0 0 2px var(--bg-secondary, #252526),
    0 0 0 5px #4fc3f7,
    0 0 8px 5px rgba(79, 195, 247, 0.55);
  animation: presence-chip-you-pulse 2s ease-in-out infinite;
}
@keyframes presence-chip-you-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px var(--bg-secondary, #252526),
      0 0 0 5px #4fc3f7,
      0 0 8px 5px rgba(79, 195, 247, 0.55);
  }
  50% {
    box-shadow:
      0 0 0 2px var(--bg-secondary, #252526),
      0 0 0 5px #80d8ff,
      0 0 12px 6px rgba(79, 195, 247, 0.75);
  }
}
.presence-chip.is-you::before {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4fc3f7;
  box-shadow: 0 0 0 1.5px var(--bg-secondary, #252526);
}
@media (prefers-reduced-motion: reduce) {
  .presence-chip.is-you .presence-avatar { animation: none; }
}

/* badge-ui-bug-fixes 6.1 (2026-05-21) — iOS-style notification badge.
   v3: matches iPhone WhatsApp / Phone unread badge — Apple system red
   (#ff3b30), pure white bold number, perfect circle (becomes pill
   automatically for 2+ digits), thin white "punched-out" ring, sharp
   shadow. Sized to ~50% of the 24px avatar so the number reads at a
   glance without obscuring the face. */
.presence-chip .presence-chip-count {
  /* P6 §6.3.3 — count badge fully tokenised. Sits at wrapper top-right
     OUTSIDE the avatar circle; visible because both .live-status-bar
     and .live-status-bar .presence-chips and .presence-chip declare
     `overflow: visible` (P6 §6.3.2). */
  position: absolute;
  top: var(--presence-chip-count-offset-y);
  right: var(--presence-chip-count-offset-x);
  min-width: var(--presence-chip-count-size);
  height: var(--presence-chip-count-size);
  padding: 0 4px;
  border-radius: 999px;
  background: var(--presence-chip-count-bg);
  color: var(--presence-chip-count-fg);
  font-size: var(--presence-chip-count-font-size);
  font-weight: 700;
  line-height: var(--presence-chip-count-size);
  text-align: center;
  border: var(--presence-chip-count-border-width) solid var(--presence-chip-count-border-color);
  box-shadow: 0 1px 2px rgba(0,0,0,0.30);
  box-sizing: content-box;
  z-index: var(--presence-chip-count-z);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.presence-chip.is-you .presence-chip-count {
  background: #ff3b30;
  color: #ffffff;
}

/* P6 §6.3.5 (2026-05-25) — Dead-CSS removal (N21 CSS, N25 CSS). Five
   rule bodies were deleted from this slot because Wave 2 JS slice
   6.2.4 stopped emitting the deprecated wrapper classes and the
   chip-glyph child element, and §6.0.1.C re-keyed the streaming
   pulse contract to the per-chip is-pulsing class (rule lives above
   keyed to the presence-speaker-pulse keyframe, not the legacy
   bar-level pulse keyframe). The removed rule selectors are listed
   in plan §6.3.5 step 2 of the implement.md and in P6 nuke catalog
   entries N21+N25 — not duplicated here so the static grep gate for
   the deprecated class names stays at exactly zero matches across
   this file. Course-correction (recorded in worklog DB): the legacy
   bar-level pulse keyframe block was also removed because evidence
   shows the .is-you halo uses its own dedicated keyframe (see rule
   above this block) and zero live selectors referenced the legacy
   keyframe after the rule deletions. Net deletion: ~30 lines. */

/* ──────────────────────────────────────────────────────────────────────
 * Presence join toast (P12.PERF.T9.UX1, 2026-05-17)
 *
 * Top-right floating column of "X joined the conversation" bubbles.
 * Container is fixed-position overlay; bubbles stack vertically via flex
 * gap so they reflow cleanly as they enter and leave (no manual stagger).
 * ────────────────────────────────────────────────────────────────────── */
.presence-toast-container {
    position: fixed;
    top: 72px;                /* below app header bar */
    right: 24px;
    z-index: 9999;            /* above everything except modal backdrop */
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;     /* container is overlay; toasts handle their own */
    max-width: 360px;
}

.presence-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 10px;
    background: rgba(32, 38, 48, 0.96);
    color: #f3f4f6;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;     /* full pill */
    box-shadow:
        0 10px 24px -8px rgba(0, 0, 0, 0.55),
        0 2px 6px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    line-height: 1.3;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
        opacity 220ms ease,
        transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1.05);
    will-change: transform, opacity;
}

/* Light theme override (parity with the rest of the app) */
body:not(.dark-mode) .presence-toast,
.theme-light .presence-toast {
    background: rgba(255, 255, 255, 0.97);
    color: #1f2937;
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow:
        0 10px 24px -8px rgba(15, 23, 42, 0.18),
        0 2px 6px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.presence-toast-avatar {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0078d4;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.presence-toast-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    padding-right: 4px;
}

.presence-toast-name {
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.presence-toast-action {
    font-size: 11.5px;
    opacity: 0.78;
    color: inherit;
}

.presence-toast-close {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    opacity: 0.72;
    padding: 2px 0 2px 4px;
}

.presence-toast-close:hover {
    opacity: 1;
}

/* Entry animation — slide in from the right with a tiny scale-up. */
.presence-toast.is-entering {
    opacity: 0;
    transform: translateX(16px) scale(0.96);
}

/* Exit animation — fade + slight upward drift. */
.presence-toast.is-leaving {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
}

/* Coalesce refresh — brief pulse so the user sees the bubble re-acknowledge */
.presence-toast.is-refreshed {
    animation: presence-toast-pulse 320ms ease;
}
@keyframes presence-toast-pulse {
    0%   { transform: translateY(0) scale(1.00); }
    45%  { transform: translateY(0) scale(1.04); }
    100% { transform: translateY(0) scale(1.00); }
}

@media (prefers-reduced-motion: reduce) {
    .presence-toast,
    .presence-toast.is-entering,
    .presence-toast.is-leaving,
    .presence-toast.is-refreshed {
        transition: opacity 120ms linear;
        transform: none;
        animation: none;
    }
}

/* ============================================================
 * P18 (2026-05-17) — Live-share UI
 * ============================================================ */

.lsb-share-button {
    margin-left: 10px;
    box-shadow: none;
    animation: none;
}
/* steer-queue-stop B2 Q12 (2026-05-23) — `::after { content: 'LIVE'; ... }`
 * pseudo-element REMOVED. There were three overlapping "LIVE" indicators
 * on the share-button bar; HITL Q12 locks exactly TWO: (a) the presence
 * chips ("N viewers") and (b) the existing LiveStatusBar in-flight-badge
 * (LOCKED selector — do NOT touch). The pulsing red halo + 📡 emoji on
 * the button itself remain to keep the share affordance discoverable;
 * only the redundant text label is dropped. */
.lsb-share-button:hover {
    background: transparent;
    box-shadow: none;
}
.live-status-bar.is-own-live .lsb-share-button,
.live-status-bar.is-live-shared .lsb-share-button {
    animation: lsb-share-pulse 1.6s ease-in-out infinite;
}
body:not(.dark-mode) .lsb-share-button,
.theme-light .lsb-share-button {
    background: transparent;
    border-color: transparent;
    color: var(--text-primary, #1f1f1f);
}
.live-status-bar .lsb-share-button.lsb-share-button--pending,
body:not(.dark-mode) .live-status-bar .lsb-share-button.lsb-share-button--pending,
.theme-light .live-status-bar .lsb-share-button.lsb-share-button--pending {
    /* SR freeze: pending live-share icon is blue and targets the same button
       as the live glow. Do not retune selectors/effects/colors without three
       explicit SR approvals. */
    background: rgba(0, 120, 212, 0.12);
    border-color: rgba(0, 120, 212, 0.90);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.35), inset 0 0 0 1px rgba(0, 120, 212, 0.90);
    animation: lsb-share-pending-pulse 1.6s ease-in-out infinite;
}
@keyframes lsb-share-pulse {
    /* SR freeze: active live-share icon glow is green. Do not retune without
       three explicit SR approvals. */
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 124, 16, 0.55); }
    50%      { box-shadow: 0 0 0 10px rgba(16, 124, 16, 0.0); }
}

@keyframes lsb-share-pending-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.35), inset 0 0 0 1px rgba(0, 120, 212, 0.90); }
    50%      { box-shadow: 0 0 0 10px rgba(0, 120, 212, 0.0), inset 0 0 0 1px rgba(0, 120, 212, 0.90); }
}

/* badge-ui-bug-fixes 2.4 (2026-05-21) — Live-now folder "Spotlight card".
 *
 * The previous treatment only drop-shadowed the folder icon emoji, which
 * was easy to miss when the live folder appears. The Spotlight card
 * lights up the whole header row:
 *
 *   • a thin animated conic-gradient ring (purple ↔ teal) rotates around
 *     the row using a registered CSS custom property `--lsb-angle`;
 *     browsers without `@property` support fall back to the static
 *     gradient fallback below.
 *   • a soft inset radial glow tints the row.
 *   • the count pill (e.g. "3 live") breathes in opacity to draw the eye
 *     without yanking it.
 *   • on first mount the row slides in with a 360 ms cubic-bezier
 *     overshoot keyframe so the eye lands on it naturally.
 *
 * `prefers-reduced-motion: reduce` strips the rotation, slide-in, and
 * breathing pulse — only the static gradient + glow remain. */
@property --lsb-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.session-folder--live > .session-folder-header {
    position: relative;
    isolation: isolate;
    border-radius: 6px;
    background:
        radial-gradient(ellipse at left, rgba(124, 92, 255, 0.18), transparent 65%),
        radial-gradient(ellipse at right, rgba(52, 212, 200, 0.16), transparent 65%);
    box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.35);
    animation: lsb-live-slide-in 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.session-folder--live > .session-folder-header::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from var(--lsb-angle), #7c5cff, #34d4c8, #7c5cff);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
    animation: lsb-live-rotate 6s linear infinite;
}
.session-folder--live > .session-folder-header > * {
    position: relative;
    z-index: 1;
}
.session-folder--live > .session-folder-header .folder-icon {
    filter: drop-shadow(0 0 4px rgba(124, 92, 255, 0.65));
    animation: live-folder-pulse 2.4s ease-in-out infinite;
}
@keyframes live-folder-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(124, 92, 255, 0.65)); }
    50%      { filter: drop-shadow(0 0 9px rgba(52, 212, 200, 0.85)); }
}
@keyframes lsb-live-rotate {
    to { --lsb-angle: 360deg; }
}
@keyframes lsb-live-slide-in {
    0% {
        transform: translateY(-8px);
        opacity: 0;
    }
    70% {
        transform: translateY(2px);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
/* @property fallback for engines that don't register --lsb-angle: the
 * conic-gradient stays static (no rotation), but the gradient + inset
 * glow + drop-shadow still set the row apart. Detected via @supports. */
@supports not (background: paint(angle)) {
    .session-folder--live > .session-folder-header::before {
        background: conic-gradient(from 0deg, #7c5cff, #34d4c8, #7c5cff);
        animation: none;
    }
}
.session-folder--live .session-folder-count,
.session-folder--live .session-count-pill {
    animation: lsb-live-count-breathe 2.6s ease-in-out infinite;
}

.session-sidebar-item--live-highlight {
    animation: session-live-row-highlight 2.4s ease-out 2;
    box-shadow: inset 0 0 0 1px rgba(52, 212, 200, 0.85), 0 0 0 4px rgba(52, 212, 200, 0.22);
}

@keyframes session-live-row-highlight {
    0% {
        background: rgba(52, 212, 200, 0.22);
    }
    100% {
        background: transparent;
    }
}

@keyframes lsb-live-count-breathe {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .session-folder--live > .session-folder-header,
    .session-folder--live > .session-folder-header::before,
    .session-folder--live > .session-folder-header .folder-icon,
    .session-sidebar-item--live-highlight,
    .live-status-bar .lsb-share-button.lsb-share-button--pending,
    .session-folder--live .session-folder-count,
    .session-folder--live .session-count-pill {
        animation: none !important;
    }
    .session-folder--live > .session-folder-header::before {
        background: conic-gradient(from 0deg, #7c5cff, #34d4c8, #7c5cff);
    }
}

/* Live variant of presence-toast (📡 share start/stop notifications). */
.presence-toast--live {
    border-left: 3px solid #ff4d4d;
    background: linear-gradient(90deg, rgba(255,77,77,0.10), rgba(255,77,77,0) 60%);
}
.presence-toast-join {
    margin-left: 6px;
    color: #4da3ff;
    text-decoration: underline;
    cursor: pointer;
}
.presence-toast-join:hover { color: #6cb5ff; }

/* Share dialog modal. */
.share-dialog-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
}
/* Dialog is its own surface — hardcode light card + dark text so it is
 * legible regardless of the page theme. Light-mode override below switches
 * to a dark card for contrast against a white page. */
.share-dialog {
    background: #ffffff;
    color: #111827;
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.55);
    width: min(560px, 92vw);
    max-height: 86vh;
    display: flex; flex-direction: column;
}
.share-dialog-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.10);
    background: #f3f4f6;
    color: #111827;
    border-radius: 8px 8px 0 0;
}
.share-dialog-header h2 { margin: 0; font-size: 16px; font-weight: 600; color: #111827; }
.share-dialog-close {
    background: transparent; border: none; color: #374151;
    font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.share-dialog-body {
    padding: 16px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 14px;
    color: #111827;
}
.share-dialog-subtitle {
    margin: 0; font-size: 13px; color: #4b5563;
    word-break: break-all;
}
.share-dialog-mode {
    border: 1px solid rgba(0,0,0,0.14);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 0;
    color: #111827;
}
.share-dialog-mode legend { padding: 0 6px; font-size: 12px; color: #374151; font-weight: 600; }
.share-dialog-mode label {
    display: block; padding: 4px 0; cursor: pointer; font-size: 13px; color: #111827;
}
.share-dialog-search-label { display: block; font-size: 12px; color: #374151; font-weight: 600; }
.share-dialog-search {
    width: 100%; box-sizing: border-box;
    margin-top: 4px;
    padding: 6px 8px;
    background: #ffffff;
    color: #111827;
    border: 1px solid rgba(0,0,0,0.20);
    border-radius: 4px;
}
.share-dialog-user-list {
    max-height: 240px; overflow-y: auto;
    margin-top: 8px;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 4px;
    padding: 4px 0;
    background: #ffffff;
    color: #111827;
}
.share-dialog-user-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 10px; cursor: pointer; font-size: 13px; color: #111827;
}
.share-dialog-user-row:hover { background: rgba(0,0,0,0.05); }
.share-dialog-user-active { color: #15803d; font-size: 10px; font-weight: 700; }
.share-dialog-user-meta { margin-left: auto; color: #6b7280; font-size: 11px; }
.share-dialog-link { display: flex; flex-direction: column; gap: 6px; }
.share-dialog-link > label { color: #374151; font-size: 12px; font-weight: 600; }
.share-dialog-link-input {
    width: 100%; box-sizing: border-box;
    margin-top: 4px;
    padding: 6px 8px;
    background: #f9fafb;
    color: #111827;
    border: 1px solid rgba(0,0,0,0.20);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}
.share-dialog-copy {
    align-self: flex-start;
    padding: 4px 10px;
    background: #2563eb; color: #ffffff;
    border: none; border-radius: 4px; cursor: pointer; font-size: 12px;
}
.share-dialog-copy:hover { background: #1d4ed8; }
.share-dialog-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid rgba(0,0,0,0.10);
    background: #f3f4f6;
    border-radius: 0 0 8px 8px;
}
.share-dialog-footer button {
    padding: 6px 14px; border-radius: 4px; cursor: pointer;
    border: 1px solid rgba(0,0,0,0.20);
    background: #ffffff; color: #111827; font-size: 13px;
}
.share-dialog-footer button:hover { background: #f3f4f6; }
.share-dialog-footer button.primary {
    background: #2563eb; color: #ffffff; border-color: transparent;
}
.share-dialog-footer button.primary:hover { background: #1d4ed8; }
.share-dialog-footer button:disabled { opacity: 0.5; cursor: not-allowed; }
.share-dialog-footer .share-dialog-unshare {
    background: #dc2626; color: #ffffff; border-color: transparent;
}
.share-dialog-footer .share-dialog-unshare:hover { background: #b91c1c; }

/* Dark-mode override: when the host page is dark, flip the card to dark
 * with light text so the dialog still contrasts against the (dark) backdrop. */
body.dark-mode .share-dialog,
.theme-dark .share-dialog {
    background: #1f2937;
    color: #e5e7eb;
    border-color: rgba(255,255,255,0.14);
}
body.dark-mode .share-dialog-header,
.theme-dark .share-dialog-header {
    background: #111827;
    color: #e5e7eb;
    border-bottom-color: rgba(255,255,255,0.08);
}
body.dark-mode .share-dialog-header h2,
.theme-dark .share-dialog-header h2,
body.dark-mode .share-dialog-close,
.theme-dark .share-dialog-close,
body.dark-mode .share-dialog-body,
.theme-dark .share-dialog-body,
body.dark-mode .share-dialog-mode,
.theme-dark .share-dialog-mode,
body.dark-mode .share-dialog-mode label,
.theme-dark .share-dialog-mode label,
body.dark-mode .share-dialog-user-row,
.theme-dark .share-dialog-user-row {
    color: #e5e7eb;
}
body.dark-mode .share-dialog-subtitle,
.theme-dark .share-dialog-subtitle,
body.dark-mode .share-dialog-mode legend,
.theme-dark .share-dialog-mode legend,
body.dark-mode .share-dialog-search-label,
.theme-dark .share-dialog-search-label,
body.dark-mode .share-dialog-link > label,
.theme-dark .share-dialog-link > label {
    color: #cbd5e1;
}
body.dark-mode .share-dialog-mode,
.theme-dark .share-dialog-mode,
body.dark-mode .share-dialog-search,
.theme-dark .share-dialog-search,
body.dark-mode .share-dialog-user-list,
.theme-dark .share-dialog-user-list,
body.dark-mode .share-dialog-link-input,
.theme-dark .share-dialog-link-input {
    background: #0f172a;
    color: #e5e7eb;
    border-color: rgba(255,255,255,0.14);
}
body.dark-mode .share-dialog-user-row:hover,
.theme-dark .share-dialog-user-row:hover {
    background: rgba(255,255,255,0.06);
}
body.dark-mode .share-dialog-user-meta,
.theme-dark .share-dialog-user-meta { color: #94a3b8; }
body.dark-mode .share-dialog-user-active,
.theme-dark .share-dialog-user-active { color: #4ade80; }
body.dark-mode .share-dialog-footer,
.theme-dark .share-dialog-footer {
    background: #111827;
    border-top-color: rgba(255,255,255,0.08);
}
body.dark-mode .share-dialog-footer button,
.theme-dark .share-dialog-footer button {
    background: transparent; color: #e5e7eb;
    border-color: rgba(255,255,255,0.18);
}
body.dark-mode .share-dialog-footer button:hover,
.theme-dark .share-dialog-footer button:hover {
    background: rgba(255,255,255,0.06);
}

/* P18 hot-fix-04 — success banner + cross-user live row */
.share-dialog-success {
    background: #e6f7ec;
    border: 1px solid #2e8b57;
    color: #15532f;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.4;
}
.share-dialog-success strong { display:block; margin-bottom: 4px; font-size: 15px; }
.share-dialog-success em { font-style: italic; color: #b00020; }
body.dark-mode .share-dialog-success, .theme-dark .share-dialog-success {
    background: #1a3326;
    border-color: #4ec07a;
    color: #cfeeda;
}
body.dark-mode .share-dialog-success em, .theme-dark .share-dialog-success em {
    color: #ff6b8a;
}

/* Cross-user row (other user's live session in Live folder) */
.session-item._cross-user .session-summary::before {
    content: '👤 ';
    opacity: 0.85;
}
.session-item._cross-user {
    background: rgba(220, 60, 60, 0.06);
}
/* ─────────────────────────────────────────────────────────────────────────
 * Navigate-away confirm modal (Phase 3 / Decision 7)
 * Component: js/components/navigate-confirm.js
 * Distinct namespace from .modal-overlay / .custom-dialog to avoid coupling
 * to the existing dialogs.js shape (which is boolean — incompatible with the
 * tri-state contract of confirmNavigate()).
 * ─────────────────────────────────────────────────────────────────────────*/
.codex-nav-confirm {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease-out;
}

.codex-nav-confirm__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

[data-theme="light"] .codex-nav-confirm__backdrop {
  background-color: rgba(0, 0, 0, 0.3);
}

.codex-nav-confirm__panel {
  position: relative;
  min-width: 360px;
  max-width: 480px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  padding: var(--spacing-xl) var(--spacing-2xl) var(--spacing-lg);
}

.codex-nav-confirm__title {
  margin: 0 0 var(--spacing-md) 0;
  padding-right: var(--spacing-2xl);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.codex-nav-confirm__body {
  margin: 0 0 var(--spacing-xl) 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.codex-nav-confirm__actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-end;
  flex-wrap: wrap;
}

.codex-nav-confirm__btn {
  appearance: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.codex-nav-confirm__btn:focus-visible {
  outline: 2px solid var(--accent-color, #3b82f6);
  outline-offset: 2px;
}

.codex-nav-confirm__btn--primary {
  background-color: var(--accent-color, #3b82f6);
  border-color: var(--accent-color, #3b82f6);
  color: var(--dc-paper);
}

.codex-nav-confirm__btn--primary:hover {
  filter: brightness(1.1);
}

.codex-nav-confirm__btn--secondary {
  background-color: transparent;
  color: var(--text-primary);
}

.codex-nav-confirm__btn--secondary:hover {
  background-color: var(--bg-tertiary, rgba(255, 255, 255, 0.05));
}

.codex-nav-confirm__btn--close {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-md);
}

.codex-nav-confirm__btn--close:hover {
  background-color: var(--bg-tertiary, rgba(255, 255, 255, 0.05));
  color: var(--text-primary);
}

.codex-nav-confirm__btn--close:focus-visible {
  outline: 2px solid var(--accent-color, #3b82f6);
  outline-offset: 2px;
}
/* steer-queue-stop B2 Q11 (2026-05-23) — Sub-agent frame attribution.
 * Reasoning chunks and tool-progress rows that originated from a
 * sub-agent (server-stamped ``agentName`` non-null) are rendered with:
 *   • a left border + indent so they visually separate from main-agent
 *     content,
 *   • an inline name-prefix pill (``[<agent_name>]``),
 *   • a per-agent color drawn deterministically from a config-driven
 *     palette (``app.uiConfig.subagentColorPalette``) via FNV-1a hash of
 *     the agent_name — same agent gets the same color across the session,
 *     across panels (main reasoning canvas, tool-progress rows, App
 *     Insights reasoning chunks + tools timeline).
 * Phase tag suffix (e.g. ``(discovery)``) appears via the
 * ``.subagent-phase-tag`` span set by the JS renderer.
 *
 * The palette colors themselves come from JS at render time as inline
 * ``style="--subagent-color: <hex>"`` — keeping the count of palette
 * entries config-driven (no per-N CSS classes to maintain). */
.subagent-frame {
    border-left: 3px solid var(--subagent-color, #888);
    padding-left: 10px;
    margin-left: 8px;
    position: relative;
}
.subagent-name-pill {
    display: inline-block;
    background: var(--subagent-color, #888);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    margin-right: 6px;
    letter-spacing: 0.03em;
    vertical-align: middle;
}
.subagent-phase-tag {
    display: inline-block;
    font-size: 10px;
    color: var(--text-muted, #888);
    margin-left: 6px;
    font-style: italic;
    vertical-align: middle;
}
.tool-progress-item.subagent-frame {
    background: rgba(0, 0, 0, 0.02);
}


/* B4 R2 (steer-queue-stop, 2026-05-23) — Invariant #6 fix.
   Base styling for the LLM-thinking 3-tier pill rendered by
   streaming.js::_llmThinkingEnsurePillEl. Replaces the previously
   inlined style.cssText block so dynamic per-tier color is the ONLY
   inline binding (style.color + style.borderColor). All other visual
   knobs live in this rule. Isolated — does not touch existing
   .copilot-pill / .status-chip / sub-agent rules. */
.llm-thinking-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  margin: 4px 0;
  border: 1px solid currentColor;
  opacity: 0.85;
}

/* Info panel */
.info-panel-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  padding: 12px;
  gap: 10px;
}

.info-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(0, 120, 212, 0.14), rgba(118, 89, 255, 0.10));
}

.info-panel-header h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.info-panel-header p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.info-panel-refresh {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  flex: 0 0 auto;
}

.info-panel-refresh:hover {
  background: var(--bg-hover);
}

.info-panel-search {
  width: 100%;
}

.info-panel-tree {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 4px 0 10px;
}

.info-tree-root {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-tree-folder {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  overflow: hidden;
}

.info-tree-folder summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  cursor: pointer;
  list-style: none;
}

.info-tree-folder summary::-webkit-details-marker {
  display: none;
}

.info-tree-folder summary::before {
  content: '▸';
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.info-tree-folder[open] > summary::before {
  transform: rotate(90deg);
}

.info-tree-children {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 18px;
  padding: 0 6px 8px 10px;
  border-left: 1px dashed var(--border-color);
}

.info-tree-document {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.info-tree-document:hover,
.info-tree-document.active {
  border-color: var(--border-color);
  background: var(--bg-hover);
}

.info-tree-document.active {
  box-shadow: inset 3px 0 0 var(--accent-primary);
}

.info-tree-connector {
  width: 10px;
  height: 16px;
  margin-top: 2px;
  border-left: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  border-bottom-left-radius: 5px;
  flex: 0 0 auto;
}

.info-tree-emoji {
  width: 20px;
  flex: 0 0 auto;
  line-height: 1.2;
}

.info-tree-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.info-tree-title {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
}

.info-tree-description {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.25;
}

.info-tree-overview {
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
}

.info-tree-overview:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.info-panel-loading,
.info-panel-empty,
.info-panel-error,
.info-detail-error {
  padding: 12px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.35;
}

.info-panel-error,
.info-detail-error {
  color: var(--accent-error);
}

.info-detail-page {
  padding: 22px;
  overflow: auto;
}

.info-detail-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(0, 120, 212, 0.16), rgba(118, 89, 255, 0.12));
}

.info-detail-hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--bg-primary);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  font-size: 28px;
  flex: 0 0 auto;
}

.info-detail-eyebrow {
  margin-bottom: 4px;
  color: var(--accent-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.info-detail-hero h1 {
  margin: 0 0 4px;
  font-size: 28px;
  line-height: 1.15;
}

.info-detail-hero p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.35;
}

.info-detail-body {
  max-width: 1040px;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.55;
}

.info-detail-body table {
  width: 100%;
}

.info-detail-body .mermaid-container {
  margin: 16px 0;
}