/* Performance Round 1: Optimize CSS with hardware acceleration and reduce layout thrashing */
:root {
  --bg: #0b0d10;
  --panel: #12161b;
  --border: #2a313a;
  --text: #f4f6f8;
  --muted: #b4bdc8;
  --accent: #8ab4f8;
  --accent-dark: #b9d2ff;
  --ribbon: #0b0d10;
  --ribbon-raised: #1a2028;
  --ribbon-warm: #8ab4f8;
  --active-page-bg: #18263a;
  --active-page-bg-raised: #1a2028;
  --active-page-text: #ffffff;
  --ui-control: #12161b;
  --ui-control-hover: #1a2028;
  --ui-control-selected: #223044;
  --ui-focus-ring: #9fc2ff;
  --ui-focus-width: 2px;
  --ui-shadow: rgba(0, 0, 0, 0.48);
  --success: #4ade80;
  --warning: #fbbf24;
  --error: #f87171;
  --writer-style-rail-width: clamp(320px, 32vw, 460px);
}

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

/* Performance Round 2: Use transform for animations and will-change for elements that will animate */
* {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  width: 100%;
  height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

:where(button, input, select, textarea, a, [tabindex]):focus-visible {
  outline: var(--ui-focus-width, 2px) solid var(--ui-focus-ring);
  outline-offset: 2px;
}

.app-shell {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  transition: none;
}

.app-shell[hidden],
.project-start[hidden] {
  display: none !important;
}

.project-start {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(420px, 1.28fr);
  grid-template-rows: 1fr auto;
  background: var(--neutral-canvas, var(--bg));
  overflow: auto;
}

.project-start-header {
  padding: clamp(44px, 8vh, 92px) clamp(32px, 5vw, 76px);
  border-right: 1px solid var(--neutral-border, var(--border));
  background: var(--neutral-panel-soft, var(--panel));
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.project-start-brand {
  color: var(--neutral-accent-strong, var(--accent-dark));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.project-start-header h1 {
  margin: 0;
  max-width: 12ch;
  color: var(--neutral-text, var(--text));
  font-size: clamp(34px, 5vh, 54px);
  line-height: 1.04;
  letter-spacing: 0;
}

.project-start-header p {
  margin: 24px 0 0;
  max-width: 44ch;
  color: var(--neutral-muted, var(--muted));
  font-size: 15px;
  line-height: 1.65;
}

.project-start-workspace {
  padding: clamp(40px, 7vh, 78px) clamp(28px, 5vw, 72px);
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 40px;
}

.project-start-actions {
  display: grid;
  border-top: 1px solid var(--neutral-border, var(--border));
}

.project-start-action {
  min-height: 82px;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  border-bottom: 1px solid var(--neutral-border, var(--border));
  border-radius: 0;
  background: transparent;
  color: var(--neutral-text, var(--text));
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  text-align: left;
  cursor: pointer;
}

.project-start-action:hover,
.project-start-action:focus-visible {
  background: var(--neutral-raised, var(--ui-control-hover));
}

.project-start-action.primary .icon {
  color: var(--neutral-accent, var(--accent));
}

.project-start-action .icon {
  width: 25px;
  height: 25px;
  color: var(--neutral-muted, var(--muted));
}

.project-start-action span {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.project-start-action strong {
  font-size: 15px;
  font-weight: 680;
}

.project-start-action small {
  color: var(--neutral-muted, var(--muted));
  font-size: 12px;
  line-height: 1.4;
}

.project-start-recent {
  min-width: 0;
}

.project-start-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--neutral-border, var(--border));
}

.project-start-section-title h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.project-start-section-title span {
  min-width: 0;
  max-width: 48%;
  color: var(--neutral-faint, var(--muted));
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-recent-list {
  display: grid;
}

.project-recent-item,
.project-recent-empty {
  min-height: 48px;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--neutral-border, var(--border)) 66%, transparent);
  background: transparent;
  color: var(--neutral-text, var(--text));
  text-align: left;
}

button.project-recent-item {
  cursor: pointer;
}

button.project-recent-item:hover {
  color: var(--neutral-accent-strong, var(--accent-dark));
}

.project-recent-item strong,
.project-recent-item span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-recent-item strong {
  font-size: 12px;
}

.project-recent-item span,
.project-recent-empty {
  color: var(--neutral-muted, var(--muted));
  font-size: 10px;
}

.project-new-form {
  grid-column: 2;
  padding: 0 clamp(28px, 5vw, 72px) 28px;
}

.project-new-form > label {
  display: block;
  margin-bottom: 8px;
  color: var(--neutral-muted, var(--muted));
  font-size: 11px;
  font-weight: 650;
}

.project-new-form > div {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 8px;
}

.project-new-form input,
.project-start-confirm,
.project-start-cancel {
  min-height: 38px;
  border: 1px solid var(--neutral-border, var(--border));
  border-radius: 4px;
}

.project-new-form input {
  min-width: 0;
  padding: 0 12px;
  background: var(--neutral-panel, var(--panel));
  color: var(--neutral-text, var(--text));
}

.project-start-confirm,
.project-start-cancel {
  padding: 0 14px;
  cursor: pointer;
}

.project-start-confirm {
  border-color: var(--neutral-accent, var(--accent));
  background: var(--neutral-accent, var(--accent));
  color: var(--neutral-canvas, var(--bg));
  font-weight: 700;
}

.project-start-cancel {
  background: var(--neutral-panel, var(--panel));
  color: var(--neutral-text, var(--text));
}

.project-start-status {
  grid-column: 1 / -1;
  min-height: 28px;
  padding: 6px clamp(28px, 5vw, 72px) 12px;
  color: var(--neutral-muted, var(--muted));
  font-size: 11px;
}

.project-start-status[data-tone="error"] {
  color: var(--error);
}

.project-menu {
  position: relative;
  flex: 0 0 auto;
}

.project-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.project-menu-button .icon {
  width: 16px;
  height: 16px;
}

.project-menu-panel {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 7px);
  right: 0;
  width: 278px;
  padding: 5px;
  border: 1px solid var(--neutral-border, var(--border));
  border-radius: 6px;
  background: var(--neutral-raised, var(--panel));
  box-shadow: 0 14px 34px var(--ui-shadow);
}

.project-menu-panel button {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--neutral-text, var(--text));
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  cursor: pointer;
}

.project-menu-panel button:hover,
.project-menu-panel button:focus-visible {
  background: var(--neutral-selected, var(--ui-control-selected));
}

.project-menu-panel .icon {
  width: 15px;
  height: 15px;
  color: var(--neutral-muted, var(--muted));
}

.project-menu-separator {
  height: 1px;
  margin: 5px 4px;
  background: var(--neutral-border, var(--border));
}

.project-update-status {
  padding: 7px 8px;
}

.project-update-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--neutral-text, var(--text));
  font-size: 11px;
  font-weight: 700;
}

.project-update-heading small,
.project-update-status p {
  color: var(--neutral-muted, var(--muted));
  font-size: 10px;
  font-weight: 500;
}

.project-update-status p {
  margin: 4px 0 7px;
  line-height: 1.35;
}

.project-update-status[data-state="error"] p {
  color: var(--error);
}

.project-update-status[data-state="downloaded"] p,
.project-update-status[data-state="healthy"] p {
  color: var(--success, #2b8a5a);
}

.project-update-actions {
  display: flex;
  gap: 5px;
}

.project-menu-panel .project-update-actions button {
  width: auto;
  min-height: 28px;
  padding: 5px 7px;
  border: 1px solid var(--neutral-border, var(--border));
  background: var(--neutral-surface, var(--surface));
  font-size: 10px;
}

.project-menu-panel .project-update-actions button[disabled] {
  cursor: not-allowed;
  opacity: 0.48;
}

.project-capability-status {
  padding: 5px 8px 7px;
}

.project-capability-heading {
  margin-bottom: 4px;
  color: var(--neutral-muted, var(--muted));
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.project-capability-row {
  min-height: 25px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  color: var(--neutral-text, var(--text));
  font-size: 11px;
}

.project-capability-row i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neutral-muted, var(--muted));
}

.project-capability-row[data-available="true"] i {
  background: var(--success, #2b8a5a);
}

.project-capability-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-capability-row small {
  color: var(--neutral-muted, var(--muted));
  font-size: 10px;
}

[data-project-capability][data-project-capability-unavailable="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.project-operation-toast {
  position: fixed;
  z-index: 3000;
  right: 18px;
  bottom: 18px;
  max-width: min(420px, calc(100vw - 36px));
  padding: 10px 13px;
  border: 1px solid var(--neutral-border-strong, var(--border));
  border-radius: 5px;
  background: var(--neutral-raised, var(--panel));
  color: var(--neutral-text, var(--text));
  box-shadow: 0 12px 30px var(--ui-shadow);
  font-size: 11px;
}

.project-operation-toast[data-tone="success"] {
  border-color: var(--success);
}

.project-operation-toast[data-tone="error"] {
  border-color: var(--error);
  color: var(--error);
}

@media (max-width: 760px) {
  .project-start {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }

  .project-start-header {
    padding: 34px 24px 28px;
    border-right: 0;
    border-bottom: 1px solid var(--neutral-border, var(--border));
  }

  .project-start-header h1 {
    max-width: 14ch;
    font-size: 34px;
  }

  .project-start-workspace {
    padding: 28px 24px;
    gap: 28px;
  }

  .project-new-form {
    grid-column: 1;
    padding: 0 24px 22px;
  }

  .project-new-form > div {
    grid-template-columns: 1fr auto;
  }

  .project-start-cancel {
    grid-column: 1 / -1;
  }
}

/* ── Collection references v2 ──────────────────────────────── */
.citation-picker-panel {
  width: min(900px, calc(100vw - 32px));
  max-height: min(90vh, 820px);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 22px 70px var(--ui-shadow, rgba(0, 0, 0, 0.42));
}

.citation-picker-library-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--ui-control, var(--panel));
}

.citation-picker-library-bar > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.citation-picker-library-bar strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.citation-picker-library-status {
  color: var(--muted);
  font-size: 11px;
}

.citation-picker-library-status.is-ready { color: var(--success); }
.citation-picker-library-status.is-warning { color: var(--warning); }
.citation-picker-library-status.is-conflict { color: var(--danger, var(--warning)); }

.citation-picker-library-actions,
.reference-manager-sync-actions,
.reference-manager-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.citation-picker-library-actions button,
.reference-manager button {
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--ui-control, var(--panel));
  color: var(--text);
  padding: 5px 10px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.citation-picker-library-actions button:hover,
.reference-manager button:hover {
  border-color: var(--accent);
  background: var(--ui-control-hover, var(--panel));
}

.citation-picker-library-actions button:disabled,
.reference-manager button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.citation-picker-options {
  grid-template-columns: minmax(120px, 0.8fr) minmax(150px, 1fr) minmax(150px, 1fr) auto;
}

.citation-picker-evidence-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 12px;
  padding: 9px 16px 11px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.citation-picker-detail-heading {
  grid-column: 1 / -1;
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
}

.citation-picker-evidence-options label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
}

.citation-picker-evidence-options textarea,
.reference-manager :is(input, textarea, select) {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--ui-control, var(--panel));
  color: var(--text);
  padding: 7px 9px;
  font: inherit;
  font-size: 12px;
  line-height: 1.35;
  resize: vertical;
}

.citation-picker-evidence-options textarea:focus,
.reference-manager :is(input, textarea, select):focus {
  border-color: var(--accent);
  outline: 2px solid var(--neutral-selected, transparent);
  outline-offset: 1px;
}

.citation-picker-evidence-options p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.citation-picker-selection {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--ui-control, var(--panel));
}

.citation-picker-selection[hidden] { display: none; }

.citation-picker-selection-label {
  flex: 0 0 auto;
  padding-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.citation-picker-selection-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.citation-picker-selection-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 24px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--ui-control-selected, var(--ui-control));
  color: var(--text);
  padding: 1px 3px 1px 9px;
  font-size: 10px;
}

.citation-picker-selection-chip > span {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.citation-picker-selection-chip button {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  padding: 0;
  cursor: pointer;
}

.citation-picker-selection-chip button:hover { background: var(--panel); color: var(--text); }
.citation-picker-selection-chip button:disabled { opacity: 0.3; cursor: default; }

.citation-picker-results {
  min-height: 180px;
  overscroll-behavior: contain;
}

.citation-picker-result {
  border-left: 3px solid transparent;
  padding: 9px 16px 9px 13px;
}

.citation-picker-result:hover,
.citation-picker-result.active {
  border-left-color: var(--muted);
  padding-left: 13px;
}

.citation-picker-result.selected {
  border-left-color: var(--accent);
  background: var(--ui-control-selected, var(--ui-control));
  padding-left: 13px;
}

.cite-result-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.cite-status {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--ui-control, var(--panel));
  color: var(--muted);
  padding: 1px 7px;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.cite-status.is-linked { border-color: var(--success); color: var(--success); }
.cite-status.is-conflict { border-color: var(--danger, var(--warning)); color: var(--danger, var(--warning)); }
.cite-status.is-pdf { border-color: var(--accent); color: var(--accent); }

.citation-picker-empty {
  display: grid;
  gap: 5px;
}

.citation-picker-empty strong { color: var(--text); }

/* Manual reference and Zotero sync manager. */
.reference-manager {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 16px;
}

.reference-manager[hidden] { display: none; }

.reference-manager-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
}

.reference-manager-panel {
  position: relative;
  width: min(720px, calc(100vw - 32px));
  max-height: min(88vh, 760px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 22px 70px var(--ui-shadow, rgba(0, 0, 0, 0.46));
}

.reference-manager-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.reference-manager-header > div { display: grid; gap: 2px; }
.reference-manager-header span { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.reference-manager-header h2 { margin: 0; font-size: 15px; font-weight: 650; }
.reference-manager-header > button { width: 30px; padding: 0; font-size: 20px; }

.reference-manager-tabs {
  display: flex;
  gap: 4px;
  padding: 9px 16px 0;
}

.reference-manager-tabs button.is-active {
  border-color: var(--accent);
  background: var(--ui-control-selected, var(--ui-control));
  color: var(--accent);
}

.reference-manager-status,
.reference-manager-status-detail {
  margin: 10px 16px 0;
  border-left: 3px solid var(--border);
  background: var(--ui-control, var(--panel));
  color: var(--text);
  padding: 8px 10px;
  font-size: 11px;
}

.reference-manager-status-detail {
  margin-top: 0;
  border-left-color: var(--border);
  color: var(--muted);
  padding-top: 0;
}

.reference-manager-status.is-success { border-left-color: var(--success); }
.reference-manager-status.is-conflict { border-left-color: var(--danger, var(--warning)); }
.reference-manager-status.is-error { border-left-color: var(--danger, var(--warning)); }

.reference-manager-form,
.reference-manager-sync {
  padding: 14px 16px 16px;
}

.reference-manager-form[hidden],
.reference-manager-sync[hidden] { display: none; }

.reference-manager-help {
  margin: 0 0 11px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.reference-manager-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 12px;
}

.reference-manager-grid label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.reference-manager-grid .is-wide { grid-column: 1 / -1; }

.reference-manager-push {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 12px 0;
  color: var(--text);
  font-size: 11px;
  line-height: 1.4;
}

.reference-manager-push input { width: auto; margin-top: 2px; }
.reference-manager button.is-primary { border-color: var(--accent); background: var(--accent); color: var(--button-primary-text, #fff); }

.reference-manager-sync > p:first-child {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.reference-manager-conflict-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 12px;
  border: 1px solid var(--danger, var(--warning));
  border-radius: 6px;
  padding: 10px;
}

.reference-manager-conflict-actions[hidden] { display: none; }
.reference-manager-sync-actions[hidden] { display: none; }
.reference-manager-conflict-actions strong { color: var(--danger, var(--warning)); font-size: 11px; }

.reference-manager-relink {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
  padding: 10px;
}

.reference-manager-relink[hidden],
.reference-manager-relink [hidden] { display: none; }
.reference-manager-relink > strong { color: var(--accent); font-size: 11px; }
.reference-manager-relink > p { margin: 0; color: var(--text); font-size: 10px; line-height: 1.45; }
.reference-manager-relink > label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 600; }
.reference-manager-relink > div { display: flex; justify-content: flex-end; gap: 7px; }

.reference-manager-sync-preview {
  margin: 10px 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--ui-control, var(--panel));
  padding: 9px;
}

.reference-manager-sync-preview[hidden] { display: none; }

.reference-manager-preview-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
  font-size: 11px;
}

.reference-manager-preview-heading span {
  color: var(--muted);
  font-size: 9px;
}

.reference-manager-sync-preview ul {
  display: grid;
  gap: 5px;
  max-height: 220px;
  overflow: auto;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.reference-manager-sync-preview li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2px 7px;
  border-top: 1px solid var(--border);
  padding-top: 5px;
  font-size: 10px;
}

.reference-manager-preview-kind {
  color: var(--accent);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reference-manager-sync-preview li > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reference-manager-sync-preview li > span:not(.reference-manager-preview-kind) { color: var(--muted); }
.reference-manager-sync-preview li > small { grid-column: 2 / -1; color: var(--muted); line-height: 1.35; }
.reference-manager-sync-preview > p { margin: 7px 0 0; color: var(--muted); font-size: 9px; line-height: 1.4; }

.reference-manager-exact-confirmation {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  border: 1px solid var(--danger, var(--warning));
  border-radius: 6px;
  background: var(--ui-control, var(--panel));
  background: color-mix(in srgb, var(--danger, var(--warning)) 7%, var(--panel));
  padding: 10px;
}

.reference-manager-exact-confirmation[hidden] { display: none; }
.reference-manager-exact-confirmation > strong { color: var(--danger, var(--warning)); font-size: 11px; }
.reference-manager-exact-confirmation > p { margin: 0; color: var(--text); font-size: 10px; line-height: 1.45; }
.reference-manager-exact-confirmation > div { display: flex; justify-content: flex-end; gap: 7px; }
.reference-manager button.is-danger { border-color: var(--danger, var(--warning)); color: var(--danger, var(--warning)); }

@media (max-width: 680px) {
  .citation-picker {
    align-items: stretch;
    padding: 8px;
  }

  .citation-picker-panel {
    width: 100%;
    max-height: calc(100vh - 16px);
  }

  .citation-picker-library-bar,
  .citation-picker-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .citation-picker-library-actions > button { flex: 1; }
  .citation-picker-options,
  .citation-picker-evidence-options,
  .reference-manager-grid { grid-template-columns: minmax(0, 1fr); }
  .citation-picker-flag { align-self: start; }
  .citation-picker-detail-heading,
  .citation-picker-evidence-options p,
  .reference-manager-grid .is-wide { grid-column: 1; }
  .reference-manager { padding: 8px; }
  .reference-manager-panel { width: 100%; max-height: calc(100vh - 16px); }
}

.app-shell.sidebar-minimized {
  grid-template-columns: 1fr;
}

/* Sidebar styles with performance optimizations */
.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow-y: hidden;
  /* overflow-x: visible so the floating collapse chevron isn't clipped */
  overflow-x: visible;
  will-change: auto;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.sidebar.minimized .sidebar-action span,
.sidebar.minimized .sidebar-section-title,
.sidebar.minimized .tree-folder-labels,
.sidebar.minimized .tree-review-action,
.sidebar.minimized .tree-threads,
.sidebar.minimized .tree-thread-label,
.sidebar.minimized .thread-status,
.sidebar.minimized .settings-button span {
  display: none !important;
}

.sidebar.minimized .sidebar-actions {
  grid-template-columns: 1fr;
}

.sidebar.minimized .sidebar-top,
.sidebar.minimized .sidebar-footer {
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar.minimized .sidebar-window-button {
  margin-left: 0;
  margin-right: 0;
}

.sidebar.minimized .review-tree {
  padding: 0 8px;
}

.sidebar.minimized .tree-folder {
  justify-content: center;
  padding: 12px 0;
}

.sidebar.minimized .tree-folder-trailing {
  margin: 0;
  gap: 0;
}

.sidebar.minimized .tree-folder-status {
  margin: 0;
}

.sidebar.minimized .settings-button {
  justify-content: center;
  padding: 10px;
}

.sidebar-top {
  flex-shrink: 0;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.sidebar-window-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  margin-bottom: 12px;
  transition: background 0.2s ease;
  will-change: background;
}

.sidebar-window-button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.sidebar-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sidebar-action {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 74px;
  padding: 10px 8px;
  background: rgba(242, 243, 245, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--muted);
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.2s ease;
  will-change: transform, background, color;
}

.sidebar-action:hover {
  background: rgba(255, 255, 255, 0.065);
  color: var(--text);
  transform: translateY(-1px);
}

.sidebar-action.active {
  background: var(--active-page-bg);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--active-page-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 24px rgba(0, 0, 0, 0.42);
}

.sidebar-action--data.active {
  background: var(--active-page-bg);
}

.sidebar-action--coding.active {
  background: var(--active-page-bg);
}

.sidebar-action--paper.active {
  background: var(--active-page-bg);
}

.sidebar-action--edit.active {
  background: var(--active-page-bg);
  color: var(--active-page-text);
}

.sidebar-action .icon {
  width: 20px;
  height: 20px;
}

.sidebar-action span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.1;
  text-align: center;
}

.sidebar-section-title {
  flex-shrink: 0;
  padding: 12px 16px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.review-tree {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  height: auto;
  padding: 0 8px;
  will-change: scroll-position;
}

.data-tool-group {
  padding: 10px 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.data-tool-group-title {
  padding: 0 8px 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.data-tool-list {
  display: grid;
  gap: 6px;
}

.data-tool-button {
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.data-tool-button:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.05);
}

.data-tool-button.active {
  background: var(--active-page-bg);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--active-page-text);
}

.data-tool-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--accent);
}

.data-tool-icon .icon {
  width: 16px;
  height: 16px;
}

.data-tool-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.data-tool-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.data-tool-hint {
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

/* Fix tree display issues */
.tree-node {
  position: relative;
  margin-bottom: 4px;
  will-change: transform;
}

.tree-node[data-expanded="true"] {
  margin-bottom: 8px;
}

.tree-threads {
  padding-left: 28px;
  margin-bottom: 4px;
  margin-top: 4px;
}

.tree-folder {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease;
  will-change: background;
}

.tree-folder:hover {
  background: rgba(255, 255, 255, 0.04);
}

.tree-folder.active {
  background: var(--active-page-bg);
  border-color: rgba(255, 255, 255, 0.26);
  color: var(--active-page-text);
}

.tree-chevron {
  width: 14px;
  height: 14px;
  color: var(--muted);
  transition: transform 0.2s ease;
  will-change: transform;
}

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

.tree-folder-labels {
  flex: 1;
  text-align: left;
  min-width: 0;
}

.tree-folder-trailing {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tree-folder-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: 8px;
}

.tree-folder-status.completed {
  background-color: #4ade80; /* green */
  box-shadow: 0 0 5px rgba(74, 222, 128, 0.4);
}

.tree-folder-status.not-initiated {
  background-color: rgba(242, 243, 245, 0.48);
}

.tree-folder-status.pending {
  background-color: #f87171; /* red */
  animation: pulse 1.5s infinite;
}

.tree-folder-status.search-loaded {
  background-color: #fbbf24; /* amber — search loaded, not collection-connected */
  box-shadow: 0 0 4px rgba(251, 191, 36, 0.3);
}

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

.tree-folder-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.tree-folder-desc {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.tree-review-action {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.tree-review-action:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.tree-threads {
  padding-left: 28px;
  margin-bottom: 4px;
}

.tree-thread {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease;
  will-change: background;
  font-size: 12px;
}

.tree-thread:hover {
  background: rgba(255, 255, 255, 0.03);
}

.tree-thread.active {
  background: var(--active-page-bg);
  border-color: rgba(255, 255, 255, 0.26);
  color: var(--active-page-text);
}

.tree-thread-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tree-thread-label {
  color: var(--text);
}

.thread-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.thread-status.connected {
  background: var(--success);
}

.thread-status.placeholder {
  background: var(--warning);
}

.sidebar-footer {
  flex-shrink: 0;
  padding: 16px;
  border-top: 1px solid var(--border);
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

/* ── Citation picker ────────────────────────────────────────── */
.citation-picker { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.citation-picker[hidden] { display: none; }
.citation-picker-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.citation-picker-panel {
  position: relative;
  background: var(--panel, #15192b);
  color: var(--text, #eef2f7);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 10px;
  width: min(720px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 60px rgba(0,0,0,0.5);
}
.citation-picker-header {
  display: flex;
  gap: 8px;
  padding: 14px 16px 8px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.citation-picker-header input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
}
.citation-picker-close {
  background: transparent; border: none; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1;
}
.citation-picker-options {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  font-size: 12px;
  color: var(--muted, #98a6bc);
}
.citation-picker-options label { display: flex; flex-direction: column; gap: 3px; }
.citation-picker-options input[type="text"] {
  background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text);
  padding: 4px 8px; border-radius: 4px; font-size: 13px;
}
.citation-picker-flag { flex-direction: row !important; align-items: center; gap: 6px; align-self: end; }
.citation-picker-results {
  flex: 1; overflow-y: auto; padding: 4px 0;
}
.citation-picker-result {
  padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer; transition: background 0.1s;
}
.citation-picker-result:hover, .citation-picker-result.active {
  background: rgba(242, 243, 245, 0.10);
  border-left: 3px solid var(--text);
  padding-left: 13px;
}
.cite-result-head { display: flex; gap: 6px; align-items: baseline; font-size: 13px; }
.cite-year { color: var(--muted, #98a6bc); }
.cite-recent { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: rgba(242, 243, 245, 0.10); color: var(--text); }
.cite-result-title { font-size: 13px; color: var(--text); margin-top: 2px; line-height: 1.4; }
.cite-result-journal { font-size: 11px; color: var(--muted, #98a6bc); margin-top: 2px; }
.citation-picker-empty { padding: 32px 16px; text-align: center; color: var(--muted, #98a6bc); }
.citation-picker-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  font-size: 12px; color: var(--muted, #98a6bc);
}

/* Dedicated collapse toggle — chevron at the right edge of the sidebar */
.sidebar-collapse-toggle {
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.sidebar-collapse-toggle:hover {
  background: rgba(242, 243, 245, 0.10);
  color: #fff;
  transform: translateY(-50%) scale(1.1);
}
.sidebar.minimized .sidebar-collapse-toggle {
  right: -12px;
}
.sidebar-collapse-icon {
  display: inline-block;
  font-weight: 700;
  user-select: none;
}

.settings-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  will-change: transform, background;
}

.settings-button:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.settings-button .icon {
  width: 16px;
  height: 16px;
}

.settings-button span {
  font-size: 13px;
}

.ribbon-tabs-row .settings-button {
  flex: 0 0 auto;
  width: auto;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.ribbon-tabs-row .settings-button:hover {
  transform: none;
}

.app-scale-popover {
  position: fixed;
  top: 58px;
  right: 52px;
  z-index: 1800;
  width: min(372px, calc(100vw - 24px));
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 92%, var(--text) 8%);
  color: var(--text);
  box-shadow: 0 18px 44px var(--ui-shadow);
}

.app-scale-popover[hidden] {
  display: none;
}

.app-scale-popover-header,
.app-scale-control,
.app-scale-reset {
  display: flex;
  align-items: center;
}

.app-scale-popover-header {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.app-scale-title {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
}

.app-scale-subtitle {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}

.academic-theme-picker {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.academic-theme-picker legend,
.app-scale-section-label {
  margin: 0 0 8px;
  padding: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

.academic-theme-options {
  display: grid;
  gap: 5px;
}

.academic-theme-option {
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: 16px 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--ui-control);
  color: var(--text);
  cursor: pointer;
}

.academic-theme-option:hover {
  border-color: var(--border);
  background: var(--ui-control-hover);
}

.academic-theme-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--ui-control-selected);
}

.academic-theme-option:has(input:focus-visible) {
  outline: var(--ui-focus-width, 2px) solid var(--ui-focus-ring);
  outline-offset: 2px;
}

.academic-theme-option input[type="radio"] {
  appearance: none;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 50%;
  background: transparent;
}

.academic-theme-option input[type="radio"]:checked {
  border: 4px solid var(--accent);
  background: var(--bg);
}

.academic-theme-swatch {
  width: 52px;
  height: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.academic-theme-swatch span {
  min-width: 0;
}

.academic-theme-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.academic-theme-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.academic-theme-description {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appearance-settings-divider {
  height: 1px;
  margin: 14px 0;
  background: var(--border);
}

.app-scale-control {
  gap: 10px;
}

.app-scale-control input[type="range"] {
  min-width: 0;
  flex: 1 1 auto;
  accent-color: var(--accent);
}

.app-scale-icon-button {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--ui-control);
  color: var(--text);
  font: 600 17px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}

.app-scale-icon-button:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--ui-control-hover);
  color: var(--active-page-text);
}

.app-scale-icon-button:disabled {
  opacity: 0.38;
  cursor: default;
}

.app-scale-reset {
  justify-content: space-between;
  width: 100%;
  min-height: 32px;
  margin-top: 12px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--ui-control);
  color: var(--muted);
  font: 600 11px/1.2 Inter, system-ui, sans-serif;
  cursor: pointer;
}

.app-scale-reset:hover {
  border-color: var(--accent);
  background: var(--ui-control-selected);
  color: var(--text);
}

.app-scale-advanced {
  width: 100%;
  min-height: 32px;
  margin-top: 8px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font: 600 11px/1.2 Inter, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}

.app-scale-advanced:hover {
  border-color: var(--accent);
  background: var(--ui-control-hover);
  color: var(--text);
}

#appScaleValue {
  color: var(--text);
  font-size: 12px;
}

.ribbon-tabs-row .sidebar-window-button {
  flex: 0 0 auto;
  margin: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.ribbon-tabs-row .sidebar-collapse-toggle {
  position: static;
  flex: 0 0 auto;
  transform: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
  font-size: 16px;
}

.ribbon-tabs-row .sidebar-collapse-toggle:hover {
  transform: none;
  background: rgba(242, 243, 245, 0.10);
  color: var(--text);
}

/* Workspace styles */
.workspace {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.workspace-header {
  --ribbon-tabs-row-height: 40px;
  --ribbon-command-row-height: 88px;
  --ribbon-command-group-height: 64px;
  flex: 0 0 auto;
  padding: 8px 14px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--ribbon);
  box-shadow: none;
  z-index: 20;
}

.workspace-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.workspace-brand {
  justify-self: center;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}

.drag-region {
  -webkit-app-region: drag;
}

.no-drag {
  -webkit-app-region: no-drag;
}

.workspace-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0;
}

.workspace-header #workspaceTitle {
  margin: 0;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.workspace-context {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.workspace-status-panel {
  display: flex;
  align-items: center;
  gap: 8px;
}

.collection-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 16px;
  font-size: 11px;
  color: var(--text);
}

.collection-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collection-chip.muted {
  opacity: 0.7;
}

.collection-chip .icon {
  width: 12px;
  height: 12px;
}

.workspace-ribbon,
.workspace-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ribbon-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}

.ribbon-tabs-row {
  display: grid;
  grid-template-columns: minmax(340px, max-content) minmax(120px, 1fr) minmax(360px, max-content);
  align-items: center;
  gap: 12px;
  height: var(--ribbon-tabs-row-height);
  min-height: var(--ribbon-tabs-row-height);
  max-height: var(--ribbon-tabs-row-height);
}

.ribbon-command-row {
  align-items: stretch;
  flex-wrap: nowrap;
  height: var(--ribbon-command-row-height);
  min-height: var(--ribbon-command-row-height);
  max-height: var(--ribbon-command-row-height);
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  background: rgba(242, 243, 245, 0.025);
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none;
}

.ribbon-command-row::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.ribbon-tabs.sidebar-actions {
  display: flex;
  grid-template-columns: none;
  gap: 4px;
  min-width: 0;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.ribbon-tabs .sidebar-action {
  position: relative;
  min-height: 32px;
  min-width: 88px;
  flex-direction: row;
  justify-content: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 6px;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  box-shadow: none;
  transition: none;
}

.ribbon-tabs .sidebar-action .agent-issues-tab-count {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #356b5b;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

.ribbon-tabs .sidebar-action .agent-issues-tab-count[hidden] {
  display: none;
}

.ribbon-tabs .sidebar-action:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.06);
}

.ribbon-tabs .sidebar-action.active {
  color: var(--active-page-text);
  background: var(--active-page-bg);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 20px rgba(0,0,0,0.36);
}

.ribbon-tabs .sidebar-action.active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -4px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.9;
}

.ribbon-tabs .sidebar-action--edit.active {
  color: var(--active-page-text);
  background: var(--active-page-bg);
  border-color: rgba(255, 255, 255, 0.34);
}

.ribbon-tabs .sidebar-action .icon {
  width: 15px;
  height: 15px;
}

.ribbon-tabs .sidebar-action span {
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
}

.app-shell.sidebar-minimized .ribbon-tabs .sidebar-action {
  min-width: 38px;
  width: 38px;
  padding-inline: 0;
}

.app-shell.sidebar-minimized .ribbon-tabs .sidebar-action span,
.app-shell.sidebar-minimized .settings-button span {
  display: none;
}

.app-shell.sidebar-minimized .ribbon-review-menu {
  flex: 1 1 220px;
  min-width: 170px;
}

.ribbon-review-menu {
  position: relative;
  min-width: 230px;
  flex: 1 1 340px;
}

.ribbon-review-command {
  flex: 0 0 auto;
  min-width: 0;
}

.ribbon-review-command .ribbon-group-body {
  width: auto;
}

.ribbon-review-command .ribbon-review-menu {
  flex: 0 0 auto;
  min-width: 0;
  width: max-content;
}

.ribbon-review-command .ribbon-dropdown-trigger {
  width: auto;
  min-width: 0;
  grid-template-columns: 18px max-content 18px;
}

.ribbon-review-command .ribbon-selection-label {
  display: none;
}

.ribbon-dropdown-trigger {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: var(--ribbon-raised);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.ribbon-dropdown-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ribbon-dropdown-trigger:hover,
.ribbon-dropdown-trigger[aria-expanded="true"] {
  border-color: rgba(242, 243, 245, 0.28);
  background: rgba(242, 243, 245, 0.075);
}

.ribbon-dropdown-trigger .sidebar-section-title {
  padding: 0;
  border: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

.ribbon-selection-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.15;
}

.ribbon-dropdown-chevron {
  color: var(--muted);
  text-align: center;
  transition: transform 0.18s ease;
}

.ribbon-dropdown-trigger[aria-expanded="true"] .ribbon-dropdown-chevron {
  transform: rotate(180deg);
}

.ribbon-dropdown-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: min(430px, calc(100vw - 36px));
  max-height: min(72vh, 620px);
  z-index: 1000;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 22px 70px var(--ui-shadow);
  overflow: hidden;
}

.ribbon-dropdown-panel[hidden] {
  display: none !important;
}

.ribbon-dropdown-panel .review-tree {
  max-height: calc(min(72vh, 620px) - 18px);
  padding: 0;
}

.ribbon-command-group {
  flex: 0 0 auto;
  display: grid;
  grid-template-rows: minmax(30px, 1fr) auto;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  height: var(--ribbon-command-group-height);
  min-height: var(--ribbon-command-group-height);
  max-height: var(--ribbon-command-group-height);
  padding: 7px 9px 5px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 6px;
  background: rgba(242, 243, 245, 0.025);
}

.workspace-ribbon:not([data-active-ribbon]) .ribbon-command-group[data-ribbon-panel],
.workspace-ribbon[data-active-ribbon] .ribbon-command-group[data-ribbon-panel] {
  display: none;
}

.workspace-ribbon[data-active-ribbon] .ribbon-command-group[data-ribbon-panel].is-active {
  display: grid;
}

.workspace-ribbon[data-active-ribbon="edit"] .ribbon-command-group.is-active:not(.ribbon-review-command):not(.ribbon-view-command) {
  grid-template-rows: 1fr;
  align-items: center;
  min-height: 42px;
  min-width: 74px;
  padding: 7px 10px;
  scroll-margin-inline: 8px;
}

.workspace-ribbon[data-active-ribbon="edit"] .ribbon-command-group.is-active.ribbon-command-group--collapsed {
  flex: 0 0 auto;
  order: 80;
  cursor: pointer;
  border-color: rgba(255, 255, 255, 0.28);
  background: var(--active-page-bg);
  color: var(--active-page-text);
}

.workspace-ribbon[data-active-ribbon="edit"] .ribbon-command-group.is-active:not(.ribbon-review-command):not(.ribbon-view-command) > .ribbon-group-body {
  display: none;
}

.workspace-ribbon[data-active-ribbon="edit"] .ribbon-command-group.is-active.ribbon-multiple-review-command:not(.ribbon-review-command):not(.ribbon-view-command) > .ribbon-group-body {
  display: flex;
  align-items: end;
  gap: 7px;
}

.ribbon-multiple-review-command[hidden] {
  display: none;
}

.ribbon-source-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 130px;
  max-width: 220px;
  color: color-mix(in srgb, var(--muted) 88%, white);
  font-size: 10px;
  font-weight: 600;
}

.ribbon-source-field select {
  width: 100%;
  min-width: 0;
}

.ribbon-multiple-review-command .save-status {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-ribbon[data-active-ribbon="edit"] .ribbon-command-group.is-active:not(.ribbon-review-command):not(.ribbon-view-command) > .ribbon-group-label {
  padding: 0 4px;
  border-top: 0;
  color: var(--active-page-text);
  font-size: 11px;
}

.workspace-ribbon[data-active-ribbon="edit"] .ribbon-command-group.is-active.ribbon-command-group--expanded {
  flex: 0 1 auto;
  width: max-content;
  max-width: 100%;
  order: 20;
  grid-template-rows: minmax(30px, 1fr) auto;
  align-items: stretch;
  height: var(--ribbon-command-group-height);
  min-height: var(--ribbon-command-group-height);
  max-height: var(--ribbon-command-group-height);
  min-width: 0;
  padding: 7px 9px 5px;
  cursor: default;
  border-color: rgba(255, 255, 255, 0.34);
  background: var(--active-page-bg);
  color: var(--active-page-text);
}

.workspace-ribbon[data-active-ribbon="edit"] .ribbon-command-group.is-active.ribbon-command-group--expanded > .ribbon-group-body {
  display: flex !important;
}

.workspace-ribbon[data-active-ribbon="edit"] .ribbon-command-group.is-active.ribbon-command-group--expanded > .ribbon-group-label {
  padding: 5px 4px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 10px;
}

/* Expanded Edit commands consume width, never height. Keeping one horizontal
   control row prevents group expansion or scrollbar appearance from resizing
   the manuscript viewport. Reviews selection and View remain persistent. */
.workspace-ribbon[data-active-ribbon="edit"] .ribbon-command-group.is-active.ribbon-edit-tools-command.ribbon-command-group--expanded {
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
}

.workspace-ribbon[data-active-ribbon="edit"] .ribbon-command-group.is-active.ribbon-edit-tools-command.ribbon-command-group--expanded > .ribbon-group-body {
  display: grid !important;
  grid-template-rows: minmax(30px, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: stretch;
  align-content: start;
  flex-wrap: nowrap;
}

.workspace-ribbon[data-active-ribbon="edit"] .ribbon-command-group.is-active.ribbon-edit-tools-command.ribbon-command-group--expanded > .ribbon-group-body > * {
  min-width: max-content;
  margin-left: 0;
}

.ribbon-command-row:has(.ribbon-edit-tools-command.ribbon-command-group--expanded) {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 243, 245, 0.3) transparent;
}

.ribbon-command-row:has(.ribbon-edit-tools-command.ribbon-command-group--expanded)::-webkit-scrollbar {
  display: block;
  width: 0;
  height: 6px;
}

.ribbon-command-row:has(.ribbon-edit-tools-command.ribbon-command-group--expanded)::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: rgba(242, 243, 245, 0.3);
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-group.is-active.ribbon-analysis-command.ribbon-command-group--collapsed {
  flex: 0 0 auto;
  order: 80;
  grid-template-rows: 1fr;
  align-items: center;
  min-height: 42px;
  min-width: 74px;
  padding: 7px 10px;
  cursor: pointer;
  scroll-margin-inline: 8px;
  border-color: rgba(242, 243, 245, 0.28);
  background: var(--active-page-bg);
  color: var(--active-page-text);
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-group.is-active.ribbon-analysis-command.ribbon-command-group--collapsed > .ribbon-group-body {
  display: none;
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-group.is-active.ribbon-analysis-command.ribbon-command-group--collapsed > .ribbon-group-label {
  padding: 0 4px;
  border-top: 0;
  color: color-mix(in srgb, var(--text) 86%, transparent);
  font-size: 11px;
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-group.is-active.ribbon-analysis-command.ribbon-command-group--expanded {
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
  order: 20;
  grid-template-rows: minmax(30px, 1fr) auto;
  align-items: stretch;
  height: var(--ribbon-command-group-height);
  min-height: var(--ribbon-command-group-height);
  max-height: var(--ribbon-command-group-height);
  min-width: 0;
  padding: 7px 9px 5px;
  cursor: default;
  border-color: rgba(242, 243, 245, 0.34);
  background: var(--active-page-bg);
  color: var(--active-page-text);
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-group.is-active.ribbon-analysis-command.ribbon-command-group--expanded > .ribbon-group-body {
  display: grid !important;
  grid-template-rows: minmax(30px, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: stretch;
  align-content: start;
  flex-wrap: nowrap;
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-group.is-active.ribbon-analysis-command.ribbon-command-group--expanded > .ribbon-group-body > * {
  min-width: max-content;
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-row {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 243, 245, 0.3) transparent;
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-row::-webkit-scrollbar {
  display: block;
  width: 0;
  height: 6px;
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-row::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: rgba(242, 243, 245, 0.3);
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-group.is-active.ribbon-analysis-command.ribbon-command-group--expanded > .ribbon-group-label {
  padding: 5px 4px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 10px;
}

.workspace-ribbon[data-active-ribbon="edit"] .ribbon-command-group.is-active.ribbon-command-group--collapsed-leading,
.workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-group.is-active.ribbon-command-group--collapsed-leading {
  margin-left: auto;
}

.workspace-ribbon:not([data-active-ribbon="edit"]) .ribbon-edit-view-control:not(.editor-audio-container) {
  display: none;
}

.ribbon-group-body {
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.ribbon-group-label {
  display: block;
  min-width: 0;
  padding: 5px 4px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

button.ribbon-group-label {
  appearance: none;
  width: 100%;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font-family: inherit;
  cursor: inherit;
}

.ribbon-command-group--collapsed button.ribbon-group-trigger {
  cursor: pointer;
}

.ribbon-command-group--collapsed button.ribbon-group-trigger:hover,
.ribbon-command-group--collapsed button.ribbon-group-trigger:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.ribbon-tool-button.active {
  color: var(--active-page-text);
  background: var(--active-page-bg);
  border-color: rgba(255, 255, 255, 0.32);
}

.ribbon-tool-button[data-analysis-status],
.ribbon-tool-button[data-data-status] {
  position: relative;
}

.ribbon-tool-button[data-analysis-status]::after,
.ribbon-tool-button[data-data-status]::after {
  display: none !important;
}

.ribbon-tool-button[data-analysis-status="ready"],
.ribbon-tool-button[data-data-status="ready"] {
  border-color: rgba(74, 222, 128, 0.75) !important;
}

.ribbon-tool-button[data-analysis-status="pending"],
.ribbon-tool-button[data-data-status="pending"] {
  border-color: rgba(248, 113, 113, 0.75) !important;
}

.ribbon-command-group .toolbar-button {
  min-height: 30px;
}

.ribbon-command-group button.cmd-active {
  color: var(--accent);
  border-color: rgba(242, 243, 245, 0.32);
  background: rgba(242, 243, 245, 0.10);
}

.ribbon-command-group .toolbar-button.success {
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.3);
  color: var(--success);
}

.ribbon-command-group .toolbar-button.success:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.2);
}

.ribbon-command-group .toolbar-button.is-active {
  background: var(--active-page-bg);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--active-page-text);
}

.ribbon-command-group .toolbar-button.is-inactive {
  opacity: 0.72;
}

.ribbon-command-group .toolbar-button.is-active[data-analysis-status="ready"] {
  color: var(--active-page-text);
  border-color: rgba(255, 255, 255, 0.34);
  background: var(--active-page-bg);
}

.ribbon-command-group .toolbar-button.is-active[data-analysis-status="pending"] {
  color: var(--active-page-text);
  border-color: rgba(255, 255, 255, 0.34);
  background: var(--active-page-bg);
}

.toolbar-left {
  flex: 1;
  min-width: 0;
}

.toolbar-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 4px;
}

.collection-path-block {
  flex: 1 1 260px;
  min-width: 180px;
  overflow: hidden;
  padding: 0 10px 0 2px;
}

.collection-path {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
}

.toolbar-chip.muted {
  color: var(--muted);
}

.toolbar-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  will-change: transform, background;
  font-size: 12px;
}

.toolbar-button.icon-only {
  width: 32px;
  justify-content: center;
  padding-inline: 0;
}

.toolbar-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.toolbar-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.toolbar-button.primary {
  background: rgba(242, 243, 245, 0.075);
  border-color: rgba(242, 243, 245, 0.28);
  color: var(--accent);
}

.toolbar-button.primary:hover:not(:disabled) {
  background: rgba(242, 243, 245, 0.10);
}

.toolbar-select {
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 11px;
  width: auto;
  max-width: 210px;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.toolbar-select:hover {
  background: rgba(255, 255, 255, 0.08);
}
.toolbar-select optgroup {
  color: var(--text-muted, #888);
  font-weight: 600;
  font-size: 10px;
}
.toolbar-select option {
  color: var(--text);
  background: var(--bg, #1e1e2e);
  font-size: 11px;
}

.ribbon-thematic-method {
  display: grid;
  gap: 3px;
  min-width: 190px;
  color: color-mix(in srgb, var(--muted) 90%, white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ribbon-thematic-method .toolbar-select {
  width: 100%;
  max-width: 230px;
  min-height: 30px;
  letter-spacing: normal;
  text-transform: none;
}

.ribbon-thematic-command {
  border-color: color-mix(in srgb, #a995ff 34%, rgba(255, 255, 255, 0.08));
}

.ribbon-thematic-command.ribbon-command-group--expanded {
  border-color: color-mix(in srgb, #a995ff 58%, rgba(255, 255, 255, 0.09));
}

.toolbar-button .icon {
  width: 14px;
  height: 14px;
}

/* Workspace body */
.workspace-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.workspace-body.is-editing {
  grid-template-columns: minmax(0, 1fr) !important;
}

.workspace-body.coding-mode {
  grid-template-columns: minmax(0, 1fr);
  background: var(--bg);
}

.workspace-body.coding-mode .panel-surface {
  border-left: none;
}

.workspace-body.coding-mode .document-panel {
  background: var(--bg);
}

.workspace-body.coding-mode .document-frame-shell {
  background: var(--bg);
}

.workspace-body.data-mode {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-body.analysis-mode {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-body.human-coding-mode {
  grid-template-columns: minmax(0, 1fr);
  background: var(--bg);
}

.workspace-body.human-coding-mode .document-panel,
.workspace-body.human-coding-mode .document-frame-shell {
  background: var(--bg);
}

.workspace-body.docs-mode {
  grid-template-columns: var(--docs-sidebar-width, 300px) minmax(0, 1fr) !important;
  background: var(--bg);
}

.workspace-body.docs-mode .document-panel {
  background: var(--neutral-canvas, var(--bg));
}

.workspace-body > .docs-tree-panel {
  position: relative;
  display: none;
  border-left: 0;
  border-right: 1px solid var(--border);
  background: var(--neutral-panel, var(--panel));
}

.workspace-body.docs-mode .docs-tree-panel {
  display: flex;
}

.docs-tree-header {
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 12px;
  background: var(--neutral-raised, var(--ribbon-raised));
}

.docs-tree-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.docs-tree-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.docs-tree-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.docs-tree-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}

.docs-tree-count {
  flex: 0 0 auto;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.docs-sidebar-reset {
  display: grid;
  place-items: center;
  width: 24px;
  min-height: 22px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
}

.docs-sidebar-reset:hover {
  border-color: var(--border-strong);
  background: var(--ui-control-hover);
  color: var(--text);
}

.docs-sidebar-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.docs-sidebar-reset .icon { width: 13px; height: 13px; }

.docs-search {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--ui-control);
  color: var(--muted);
}

.docs-search:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

.docs-search-icon { font-size: 16px; line-height: 1; }

.docs-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 11px;
}

.docs-search input::placeholder { color: color-mix(in srgb, var(--muted) 82%, transparent); }

.docs-tree {
  flex: 1 1 auto;
  min-height: 0;
  padding: 9px 8px 18px;
  overflow: auto;
  scrollbar-color: color-mix(in srgb, var(--muted) 36%, transparent) transparent;
  scrollbar-width: thin;
}

.docs-tree-branch,
.docs-tree-file { margin-left: var(--docs-indent); }
.docs-tree-branch > details { margin: 1px 0; }

.docs-tree-folder {
  display: flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.025em;
  list-style: none;
  user-select: none;
}

.docs-tree-folder::-webkit-details-marker { display: none; }
.docs-tree-folder::before {
  content: '›';
  width: 12px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 120ms ease;
}
.docs-tree-branch details[open] > .docs-tree-folder::before { transform: rotate(90deg); }
.docs-tree-folder:hover { background: var(--ui-control-hover); color: var(--text); }

.docs-tree-file-button {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  min-height: 27px;
  margin: 1px 0;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  text-align: left;
}

.docs-tree-file-button:hover { background: var(--ui-control-hover); color: var(--text); }
.docs-tree-file-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.docs-tree-file-button.is-active {
  border-color: var(--accent);
  background: var(--active-page-bg);
  color: var(--active-page-text);
}

.docs-file-type {
  flex: 0 0 27px;
  color: var(--muted);
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}
.docs-tree-file-button.is-readable .docs-file-type { color: var(--accent-dark); }
.docs-tree-file-button.is-active .docs-file-type {
  color: var(--active-page-text);
  opacity: 0.78;
}
.docs-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-tree-empty {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 18px 10px;
}

.docs-tree-empty-card {
  display: grid;
  gap: 8px;
  width: min(100%, 280px);
  padding: 18px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--ui-control);
  color: var(--muted);
  text-align: left;
}

.docs-tree-empty-eyebrow {
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.docs-tree-empty-card strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.docs-tree-empty-card span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.docs-sidebar-resizer {
  position: absolute;
  z-index: 3;
  top: 0;
  right: -5px;
  bottom: 0;
  width: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
}

.docs-sidebar-resizer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 2px;
  background: transparent;
  transition: background 120ms ease;
}

.docs-sidebar-resizer:hover::after,
.docs-sidebar-resizer:focus-visible::after,
body.docs-sidebar-resizing .docs-sidebar-resizer::after { background: var(--accent); }
.docs-sidebar-resizer:focus-visible { outline: 0; }
body.docs-sidebar-resizing { cursor: col-resize; user-select: none; }

.panel-surface {
  background: var(--panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.document-panel {
  position: relative;
  border-left: none;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  width: 100%;
}

.document-topbar {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.document-meta {
  flex: 1;
  min-width: 0;
}

.document-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 2px;
}

.document-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-tabs {
  display: flex;
  gap: 4px;
  margin-left: 12px;
}

.thread-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  will-change: transform, background;
  font-size: 11px;
}

.thread-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.thread-tab.active {
  background: var(--active-page-bg);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--active-page-text);
}

.thread-tab .thread-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.document-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.info-card {
  font-size: 11px;
}

.info-label {
  color: var(--muted);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.info-value {
  color: var(--text);
  word-break: break-word;
}

.document-frame-shell {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

.document-frame-shell.with-embedded-browser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 44%);
  gap: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.content-frame {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: none;
  color-scheme: inherit;
  background: var(--bg) !important;
  background-color: var(--bg) !important;
}

.document-frame-shell.with-embedded-browser .content-frame {
  width: 100%;
  min-width: 0;
}

.embedded-browser-pane {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  border-left: 1px solid var(--border);
  background: var(--panel);
  overflow: hidden;
}

.embedded-browser-pane[hidden] {
  display: none !important;
}

.embedded-browser-stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b1118;
}

.embedded-browser-stage.is-loading::after {
  content: 'Loading page...';
  position: absolute;
  inset: 12px auto auto 12px;
  z-index: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(13, 19, 28, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(226, 232, 240, 0.88);
  font-size: 11px;
  pointer-events: none;
}

.embedded-browser-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  text-align: center;
  color: rgba(226, 232, 240, 0.72);
  line-height: 1.7;
}

.embedded-browser-empty strong {
  display: block;
  color: rgba(241, 245, 249, 0.94);
  margin-bottom: 8px;
}

.embedded-browser-view {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b1118;
}

.embedded-browser-webview {
  flex: 1 1 auto;
  display: flex;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #0b1118;
}

/* Visual lab styles */
.visual-lab {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.visual-lab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--border);
}

.visual-lab-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
}

.visual-lab-badge {
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(242, 243, 245, 0.075);
  border: 1px solid rgba(242, 243, 245, 0.14);
  border-radius: 12px;
  color: var(--accent);
}

.visual-scene {
  position: relative;
  width: 100%;
  height: 200px;
  background: rgba(242, 243, 245, 0.025);
  overflow: hidden;
}

.scene-block {
  position: absolute;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 10px;
  color: var(--text);
  white-space: nowrap;
  transform: translateZ(0);
  will-change: transform;
}

.scene-node {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(242, 243, 245, 0.10);
  border: 1px solid rgba(242, 243, 245, 0.28);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text);
  transform: translateZ(0);
  will-change: transform;
}

.scene-pill {
  position: absolute;
  height: 2px;
  background: rgba(242, 243, 245, 0.14);
  transform: translateZ(0);
  will-change: transform;
}

/* Performance Round 4: Optimize animations and transitions */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
  }
}

/* Performance Round 5: Virtual scrolling and memory optimizations */
/* Hide elements that are far outside viewport */
@media (max-width: 1400px) {
  .visual-workbench {
    grid-template-columns: 1fr;
  }

  .ribbon-tabs .sidebar-action {
    min-width: 86px;
  }

  .toolbar-select {
    max-width: 170px;
  }
}

@media (max-width: 1050px) {
  .workspace-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .workspace-status-panel {
    flex-wrap: wrap;
  }

  .ribbon-tabs-row {
    grid-template-columns: 1fr;
    flex-wrap: wrap;
  }

  .workspace-brand {
    justify-self: start;
    text-align: left;
  }

  .workspace-context {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .ribbon-tabs-row .ribbon-review-menu {
    order: 2;
    flex-basis: 100%;
  }

  .ribbon-command-group {
    border-left: 1px solid rgba(255, 255, 255, 0.075);
  }
}

@media (max-width: 760px) {
  .workspace-header {
    padding: 10px;
  }

  .ribbon-tabs {
    width: 100%;
  }

  .ribbon-tabs .sidebar-action {
    min-width: 0;
    flex: 1 1 0;
  }

  .ribbon-tabs .sidebar-action span {
    font-size: 11px;
  }

  .collection-path-block {
    flex-basis: 100%;
  }

  .workspace-body.docs-mode {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .workspace-body.docs-mode .docs-tree-panel {
    display: none;
  }

  .docs-sidebar-resizer { display: none; }

  .toolbar-select {
    flex: 1 1 150px;
    max-width: none;
  }
}

/* Optimize for touch devices */
@media (hover: none) and (pointer: coarse) {
  .tree-folder,
  .tree-thread,
  .toolbar-button,
  .resource-button {
    padding: 12px 8px;
  }
}

/* Icon styles */
.icon {
  fill: currentColor;
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
}

.icon-defs {
  position: absolute;
  width: 0;
  height: 0;
}

/* Analyse ribbon actions are icon-led. Keep the text in the DOM for the
   accessible name and native title tooltip, but give every SVG a fixed flex
   basis so it cannot collapse when a command group is compacted. */
.workspace-ribbon[data-active-ribbon="paper"] .ribbon-analysis-command > .ribbon-group-body .ribbon-tool-button {
  width: 36px;
  min-width: 36px;
  min-height: 32px;
  padding: 6px;
  justify-content: center;
  gap: 0;
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-analysis-command > .ribbon-group-body .ribbon-tool-button > .icon {
  display: block;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  min-width: 17px;
  min-height: 17px;
  overflow: visible;
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-analysis-command > .ribbon-group-body .ribbon-tool-button > span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Analyse is a compact neutral-night tool surface. Status remains available to
   assistive technology and the native tooltip, while the visual indicator stays
   a small dot so dense groups do not turn back into text-button strips. */
.workspace-ribbon[data-active-ribbon="paper"] .ribbon-analysis-command.is-active {
  border-color: rgba(255, 255, 255, 0.11);
  background: var(--active-page-bg);
  box-shadow: none;
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-analysis-command.is-active.ribbon-command-group--expanded {
  border-color: rgba(255, 255, 255, 0.15);
  background: var(--active-page-bg-raised);
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-analysis-command > .ribbon-group-body .ribbon-tool-button,
.workspace-ribbon[data-active-ribbon="paper"] .ribbon-analysis-command > .ribbon-group-body .ribbon-tool-button[data-analysis-status="ready"],
.workspace-ribbon[data-active-ribbon="paper"] .ribbon-analysis-command > .ribbon-group-body .ribbon-tool-button[data-analysis-status="pending"] {
  color: var(--text);
  border-color: color-mix(in srgb, var(--border) 78%, var(--text) 22%);
  background: var(--ui-control);
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-analysis-command > .ribbon-group-body .ribbon-tool-button:hover,
.workspace-ribbon[data-active-ribbon="paper"] .ribbon-analysis-command > .ribbon-group-body .ribbon-tool-button:focus-visible,
.workspace-ribbon[data-active-ribbon="paper"] .ribbon-analysis-command > .ribbon-group-body .ribbon-tool-button.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background: var(--ui-control-hover);
  outline: none;
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-analysis-command > .ribbon-group-body .ribbon-tool-button[data-analysis-status] {
  padding-right: 6px;
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-analysis-command > .ribbon-group-body .ribbon-tool-button[data-analysis-status]::after {
  display: none !important;
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-analysis-command > .ribbon-group-body .ribbon-tool-button[data-analysis-status="ready"] {
  border-color: rgba(74, 222, 128, 0.75) !important;
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-analysis-command > .ribbon-group-body .ribbon-tool-button[data-analysis-status="pending"] {
  border-color: rgba(248, 113, 113, 0.75) !important;
}

/* Skeleton Loader */
.skeleton-loader {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.skeleton-block {
  background: linear-gradient(90deg, rgba(242, 243, 245, 0.025) 25%, rgba(242, 243, 245, 0.075) 50%, rgba(242, 243, 245, 0.025) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 8px;
}

.skeleton-title { height: 40px; width: 60%; margin-bottom: 24px; }
.skeleton-line { height: 20px; width: 100%; }
.skeleton-line.short { width: 80%; }
.skeleton-line.shorter { width: 60%; }

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.context-menu {
  position: absolute;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  padding: 8px 0;
  min-width: 160px;
  z-index: 1000;
  font-size: 13px;
}

.context-menu-item {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s;
}

.context-menu-item:hover {
  background: var(--ui-control-hover);
}

.context-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.agent-chat-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483647;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 16px 36px var(--ui-shadow);
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateZ(0);
  transition: border-color 0.16s ease, transform 0.12s ease, background 0.16s ease;
}

.agent-chat-fab:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: var(--border-strong);
  background: var(--ui-control-hover);
}

.agent-chat-fab.recording,
.agent-chat-fab.speaking {
  border-color: var(--accent);
  background: var(--active-page-bg);
}

.agent-chat-fab-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.agent-chat-fab-icon .icon {
  width: 22px;
  height: 22px;
}

.agent-chat-dock {
  position: fixed;
  right: 14px;
  bottom: 92px;
  width: min(780px, calc(100vw - 32px));
  height: min(780px, calc(100vh - 110px));
  min-height: min(560px, calc(100vh - 110px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 18px 40px var(--ui-shadow);
  overflow: hidden;
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  z-index: 2147483646;
  transition: transform 0.14s ease, opacity 0.14s ease;
}

.agent-chat-dock.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.agent-chat-workbench {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  background: var(--bg);
}

.agent-conversation-rail {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-right: 1px solid var(--border);
  background: var(--panel-2);
}

.agent-conversation-rail-title {
  padding: 12px 12px 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.agent-conversation-list {
  min-height: 0;
  overflow: auto;
  padding: 0 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.agent-conversation-item {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.agent-conversation-item:hover {
  background: var(--ui-control-hover);
}

.agent-conversation-item.active {
  border-color: var(--border-strong);
  background: var(--active-page-bg);
}

.agent-conversation-item.archived {
  opacity: 0.62;
}

.agent-conversation-item.archived.active {
  opacity: 0.86;
  border-style: dashed;
}

.agent-conversation-item strong,
.agent-conversation-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-conversation-item strong {
  font-size: 11px;
  font-weight: 650;
}

.agent-conversation-item span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 9px;
}

.agent-conversation-item time {
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap;
}

.agent-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--ribbon-raised);
}

.agent-chat-head-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.agent-chat-head strong {
  max-width: 420px;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-chat-subhead,
.agent-chat-hint {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.agent-chat-head-actions {
  display: flex;
  gap: 6px;
}

.agent-chat-configuration {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(126px, 1fr) repeat(3, minmax(108px, 0.72fr)) minmax(116px, 0.75fr);
  align-items: end;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}

.agent-chat-config-field {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.agent-chat-config-field select,
.agent-chat-config-field > .agent-console-button {
  min-width: 0;
  width: 100%;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0 8px;
  background: var(--ui-control);
  color: var(--text);
  font: 11px/1.2 inherit;
  text-transform: none;
}

.agent-chat-config-field select:focus,
.agent-chat-config-field > .agent-console-button:focus-visible {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
  outline-offset: 1px;
}

.agent-chat-config-field select:disabled,
.agent-chat-config-field button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.agent-chat-skills-control {
  position: relative;
}

.agent-chat-skills-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 2147483647;
  width: min(420px, calc(100vw - 40px));
  max-height: min(480px, calc(100vh - 180px));
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 16px 36px var(--ui-shadow);
  color: var(--text);
  text-transform: none;
}

.agent-chat-skills-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.agent-chat-skills-head .icon-button {
  width: 28px;
  height: 28px;
  padding: 0;
}

.agent-chat-skills-panel p {
  margin: 7px 0 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.45;
}

.agent-chat-skills-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.agent-chat-skills-grid button {
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 9px;
  background: var(--ui-control);
  color: var(--text);
  font-size: 10px;
  text-align: left;
}

.agent-chat-skills-grid button:hover {
  border-color: var(--accent);
  background: var(--ui-control-hover);
}

.agent-chat-access-hint {
  grid-column: 1 / -1;
  min-height: 15px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

.agent-chat-head-actions button,
.agent-chat-controls button,
.agent-console-button,
.agent-console-settings {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--ui-control);
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
}

.agent-chat-head-actions button:hover,
.agent-chat-controls button:hover,
.agent-console-button:hover,
.agent-console-settings:hover {
  border-color: var(--accent);
  background: var(--ui-control-hover);
}

.agent-chat-controls button .icon {
  width: 15px;
  height: 15px;
}

.agent-chat-messages {
  min-height: 0;
  overflow: auto;
  padding: 16px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
}

.agent-codex-console-mount {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--bg);
}

.agent-chat-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.agent-chat-empty {
  margin: auto;
  display: grid;
  gap: 5px;
  padding: 36px 24px;
  text-align: center;
}

.agent-chat-empty strong {
  color: var(--text);
  font-size: 13px;
}

.agent-chat-empty span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.agent-chat-context-bar {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px 32px auto auto;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.agent-chat-context-select {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.agent-chat-context-select span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.agent-chat-context-select select {
  min-width: 0;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 8px;
  background: var(--ui-control);
  color: var(--text);
  font-size: 11px;
}

.agent-chat-context-bar .icon-button {
  width: 32px;
  height: 32px;
  padding: 0;
}

.agent-chat-run-status {
  max-width: 130px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-chat-run-status.running {
  color: var(--accent);
}

.agent-chat-run-status.error {
  color: var(--error);
}

#btnAgentChatStop {
  height: 30px;
  border-color: color-mix(in srgb, var(--error) 42%, var(--border));
  color: var(--error);
}

.agent-console-dropdown {
  min-width: 0;
  margin: 0;
}

.agent-console-button {
  min-height: 34px;
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}

.agent-console-button.export-trigger {
  background: var(--ui-control);
  border-color: var(--border);
  color: var(--text);
}

.agent-console-button.export-trigger:hover {
  background: var(--ui-control-hover);
  border-color: var(--accent);
}

.agent-console-button.primary-action {
  border-color: var(--accent);
  background: var(--active-page-bg);
  font-weight: 700;
}

.agent-console-settings {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.agent-console-menu.export-menu,
.agent-chat-dock #aiActionsMenu {
  min-width: 210px;
}

.agent-chat-controls .export-menu {
  top: auto;
  bottom: calc(100% + 6px);
  margin-top: 0;
  max-height: min(340px, 58vh);
  overflow: auto;
  z-index: 2147483647;
}

.agent-chat-controls #aiActionsMenu {
  left: auto;
  right: 0;
  min-width: min(260px, calc(100vw - 48px));
}

.agent-chat-msg {
  max-width: 88%;
  display: grid;
  gap: 4px;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
}

.agent-chat-msg.user {
  align-self: flex-end;
  background: var(--active-page-bg);
}

.agent-chat-msg.assistant {
  align-self: flex-start;
  border-left: 2px solid var(--accent);
  border-radius: 2px 8px 8px 2px;
  background: var(--panel);
}

.agent-chat-msg.error {
  color: var(--error);
}

.agent-chat-meta {
  display: block;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0;
}

.agent-chat-meta::after {
  content: none;
}

.agent-chat-body {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}

.agent-chat-msg.assistant .agent-chat-body {
  padding-right: 0;
}

.agent-chat-activity {
  border-top: 1px solid var(--border);
  background: var(--panel-2);
}

.agent-chat-activity summary {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
}

.agent-chat-activity-log {
  max-height: 120px;
  overflow: auto;
  padding: 0 12px 10px;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.agent-chat-activity-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 8px;
}

.agent-chat-activity-row span:first-child {
  color: var(--accent);
}

.agent-draft-review {
  max-height: 270px;
  overflow: auto;
  border-top: 1px solid var(--border);
  background: var(--panel);
}

.agent-draft-review:not(.expanded) .agent-draft-comparison {
  display: none;
}

.agent-draft-head {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 12px;
}

.agent-draft-head > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.agent-draft-head strong {
  font-size: 11px;
}

.agent-draft-head span {
  color: var(--muted);
  font-size: 10px;
}

.agent-draft-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.agent-draft-actions button {
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 9px;
  background: var(--ui-control);
  color: var(--text);
  font-size: 10px;
}

.agent-draft-actions .primary-action {
  border-color: var(--accent);
  background: var(--active-page-bg);
}

.agent-draft-conflict {
  margin: 0 12px 8px;
  padding: 7px 9px;
  border-left: 2px solid var(--error);
  background: color-mix(in srgb, var(--error) 9%, var(--panel));
  color: var(--error);
  font-size: 10px;
}

.agent-draft-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--border);
}

.agent-draft-comparison > div {
  min-width: 0;
  padding: 8px 10px 10px;
}

.agent-draft-comparison > div + div {
  border-left: 1px solid var(--border);
}

.agent-draft-comparison span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.agent-draft-comparison pre {
  min-height: 54px;
  max-height: 130px;
  overflow: auto;
  margin: 6px 0 0;
  color: var(--text);
  font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.agent-chat-form {
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 9px 12px 11px;
  background: var(--ribbon-raised);
}

.agent-chat-form input[type="text"],
.agent-chat-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 12px;
  outline: none;
  resize: vertical;
  min-height: 68px;
  max-height: 180px;
  font: inherit;
  line-height: 1.45;
}

.agent-chat-form input[type="text"]:focus,
.agent-chat-form textarea:focus {
  border-color: var(--accent);
  box-shadow: none;
}

.agent-chat-controls {
  display: grid;
  grid-template-columns: repeat(2, 34px) minmax(150px, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

#btnAgentChatDictation,
#btnAgentChatMic {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
}

#btnAgentChatDictation.active {
  border-color: var(--error);
  background: color-mix(in srgb, var(--error) 18%, var(--panel));
  color: var(--text);
}

#btnAgentChatMic.active,
#btnAgentChatMic.speaking,
#btnAgentChatMic.recording {
  border-color: var(--accent);
  background: var(--active-page-bg);
  color: var(--text);
}

.agent-chat-voice-status {
  min-height: 16px;
  font-size: 11px;
  color: var(--muted);
}

.agent-chat-voice-legend {
  min-height: 13px;
  font-size: 10px;
  color: color-mix(in srgb, var(--muted) 78%, transparent);
}

.agent-chat-voice-status:empty,
.agent-chat-voice-legend:empty {
  display: none;
}

.agent-chat-audio {
  display: none;
}

@media (max-width: 900px) {
  .agent-chat-fab {
    right: 12px;
    bottom: 16px;
  }

  .agent-chat-dock {
    right: 12px;
    bottom: 82px;
    width: calc(100vw - 24px);
    height: min(720px, calc(100vh - 96px));
    min-height: min(500px, calc(100vh - 96px));
  }

  .agent-chat-workbench {
    grid-template-columns: 1fr;
    grid-template-rows: 72px minmax(0, 1fr);
  }

  .agent-chat-configuration {
    grid-template-columns: repeat(5, minmax(112px, 1fr));
    overflow-x: auto;
  }

  .agent-chat-access-hint {
    display: none;
  }

  .agent-chat-form {
    gap: 6px;
    padding: 7px 10px 9px;
  }

  .agent-chat-form textarea {
    min-height: 54px;
    max-height: 110px;
  }

  .agent-conversation-rail {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .agent-conversation-rail-title {
    display: flex;
    align-items: center;
    padding: 0 10px;
  }

  .agent-conversation-list {
    flex-direction: row;
    padding: 7px 8px;
  }

  .agent-conversation-item {
    width: 160px;
    flex: 0 0 160px;
  }

  .agent-chat-controls {
    grid-template-columns: 34px 34px minmax(130px, 1fr) auto;
  }

  .agent-chat-voice-status,
  .agent-chat-voice-legend {
    grid-column: 1 / -1;
  }

  .agent-console-settings {
    display: none;
  }

  .agent-chat-form textarea {
    min-height: 62px;
    max-height: 100px;
  }

  .agent-draft-review {
    max-height: 140px;
  }

  .agent-draft-comparison pre {
    max-height: 62px;
  }

}

@media (max-width: 560px) {
  .agent-chat-configuration {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-chat-access-hint {
    grid-column: 1 / -1;
  }

  .agent-chat-skills-grid {
    grid-template-columns: 1fr;
  }

  .agent-chat-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #btnAgentChatDictation,
  #btnAgentChatMic {
    width: 100%;
  }

  .agent-draft-comparison {
    grid-template-columns: 1fr;
  }

  .agent-draft-comparison > div + div {
    border-top: 1px solid var(--border);
    border-left: 0;
  }
}

/* ── Editor ────────────────────────────────────────────── */
.editor-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--writer-style-rail-width);
  grid-template-rows: auto minmax(0, 1fr);
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--bg);
  gap: 0;
}

.editor-shell.writer-rail-collapsed {
  grid-template-columns: minmax(0, 1fr) 44px;
}

.editor-toolbar {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.editor-toolbar[hidden] {
  display: none !important;
}

.editor-toolbar button {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.editor-toolbar button:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}
/* Active formatting indicator — cmd is currently applied at cursor */
.editor-toolbar button.cmd-active {
  color: var(--accent);
  border-color: rgba(242, 243, 245, 0.32);
  background: rgba(242, 243, 245, 0.10);
}
.editor-toolbar button.success {
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.3);
  color: var(--success);
}
.editor-toolbar button.success:hover {
  background: rgba(74, 222, 128, 0.2);
}
.editor-toolbar button.is-active {
  background: var(--active-page-bg);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--active-page-text);
}
.editor-toolbar button.is-inactive {
  opacity: 0.72;
}
.toolbar-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 2px;
}

.save-status {
  font-size: 11px;
  color: var(--muted);
  margin-left: 4px;
}
.save-status.unsaved { color: var(--warning); }
.save-status.saving  { color: var(--accent); }
.save-status.saved   { color: var(--success); }
.save-status.error   { color: var(--error); }

.versions-menu {
  min-width: 260px;
  max-width: 360px;
  max-height: 320px;
  overflow: auto;
}

.export-item-static {
  cursor: default;
  opacity: 0.8;
}

.version-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.version-item strong,
.version-item span {
  pointer-events: none;
}

.version-item-meta {
  font-size: 11px;
  color: var(--muted);
}

.version-preview-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 10, 18, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4000;
}

.version-preview-modal {
  width: min(860px, calc(100vw - 48px));
  max-height: calc(100vh - 72px);
  overflow: auto;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.version-preview-title {
  margin: 0 0 6px;
  font-size: 18px;
}

.version-preview-meta {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 12px;
}

.version-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.version-preview-pane {
  min-height: 220px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  padding: 12px;
}

.version-preview-pane h4 {
  margin: 0 0 8px;
  font-size: 13px;
}

.version-preview-pane pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text);
}

.version-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 820px) {
  .version-preview-grid {
    grid-template-columns: 1fr;
  }
}

/* Export dropdown */
.export-dropdown {
  position: relative;
  display: inline-block;
  margin-left: 4px;
}
.export-trigger {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
.export-trigger:hover {
  background: rgba(255, 255, 255, 0.06);
}
.export-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 0;
  min-width: 170px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 100;
}
.export-menu.open {
  display: block;
}
.export-menu.floating {
  position: fixed;
  right: auto;
  bottom: auto;
  z-index: 10000;
  max-height: min(360px, calc(100vh - 24px));
  overflow: auto;
}
.export-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.export-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.export-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.export-item[data-export="all"] {
  color: var(--accent);
  font-weight: 500;
}
.version-create-button {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 8px;
  color: var(--accent);
  font-weight: 500;
}

/* Citation style dropdown */
.cite-dropdown {
  position: relative;
  display: inline-block;
  margin-left: 4px;
}
.cite-trigger {
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.3);
  color: var(--warning);
  font-size: 11px;
}
.cite-trigger:hover {
  background: rgba(251, 191, 36, 0.2);
}
.export-item.cite-active {
  color: var(--warning);
  font-weight: 500;
}
.export-item.cite-active::before {
  content: "\2713 ";
}

.mode-toggle-group {
  display: flex;
  gap: 2px;
  margin-left: auto;
}
.mode-button {
  padding: 4px 6px !important;
}
.mode-button.active {
  background: var(--accent) !important;
  color: var(--bg) !important;
}

.live-editor-mode-toggle {
  margin-left: 0;
}

.live-editor-mode-button {
  min-width: 44px;
}

.live-editor-toolbar {
  position: fixed;
  z-index: 5000;
  display: none;
  box-sizing: border-box;
  align-items: center;
  gap: 0.2rem;
  width: min(42rem, calc(100vw - 16px));
  max-width: none;
  padding: 0.35rem;
  border: 1px solid var(--paper-border);
  border-radius: 8px;
  background: var(--paper-popover);
  color: var(--paper-text);
  box-shadow: 0 16px 45px var(--ui-shadow);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--paper-muted) var(--paper-popover);
}

.live-editor-toolbar.open {
  display: grid;
  grid-template-rows: repeat(2, 1.85rem);
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-content: center;
}

.live-editor-toolbar button {
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 0.45rem;
  border: 1px solid var(--paper-border);
  border-radius: 5px;
  background: var(--paper-surface);
  color: var(--paper-text);
  font: 700 0.72rem/1 "Segoe UI", Arial, sans-serif;
  cursor: pointer;
}

.live-editor-toolbar button[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.1);
  border-color: #555a61;
  color: #ffffff;
}

.live-editor-toolbar button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.live-editor-toolbar button:hover,
.live-editor-toolbar button:focus {
  border-color: #555a61;
  color: #ffffff;
  outline: none;
}

.live-editor-toolbar button[data-live-editor-command="highlight"] {
  color: #fde68a;
  border-color: rgba(250, 204, 21, 0.34);
}

.live-editor-toolbar button[data-live-editor-command="highlight"]:hover,
.live-editor-toolbar button[data-live-editor-command="highlight"]:focus {
  background: rgba(250, 204, 21, 0.18);
  border-color: rgba(250, 204, 21, 0.72);
}

.live-editor-toolbar button[data-live-editor-command^="comment"] {
  color: rgba(242, 243, 245, 0.82);
  border-color: rgba(242, 243, 245, 0.22);
}

.live-editor-toolbar button[data-live-editor-command^="comment"]:hover,
.live-editor-toolbar button[data-live-editor-command^="comment"]:focus {
  background: rgba(242, 243, 245, 0.1);
  border-color: rgba(242, 243, 245, 0.54);
}

.editor-source-readonly {
  opacity: 0.72;
}

.editor-body {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex: 1 1 0;
  width: 100%;
  overflow: hidden;
  min-height: 0;
  --editor-left-width: 50%;
  --editor-right-width: 50%;
}

.editor-raw-pane {
  width: var(--editor-left-width);
  height: 100%;
  overflow: hidden;
  display: flex;
  min-width: 0;
}

.raw-editor-host {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.cm-editor-host {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.cm-editor-host .cm-editor {
  height: 100%;
  background: transparent;
  color: var(--text);
}

.cm-editor-host .cm-scroller {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 15px;
  line-height: 1.6;
  overflow: auto;
  cursor: text;
}

.cm-editor-host .cm-content,
.cm-editor-host .cm-gutter {
  min-height: 100%;
}

.cm-editor-host .cm-content {
  caret-color: var(--text);
  color: var(--text);
  cursor: text;
  user-select: text;
}

.cm-editor-host .cm-focused {
  outline: none;
}

.cm-editor-host .cm-focused .cm-cursor,
.cm-editor-host .cm-dropCursor {
  border-left-color: var(--text);
}

.cm-editor-host .cm-selectionBackground,
.cm-editor-host ::selection {
  background: var(--paper-selection) !important;
}

.cm-editor-host .cm-gutters {
  background: var(--panel);
  color: var(--muted);
  border-right: 1px solid var(--border);
}

/* Shared font metrics for textarea + highlight layer */
.raw-editor-textarea,
.raw-editor-highlight {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 13px;
  line-height: 1.6;
  tab-size: 2;
  padding: 12px;
  border: none;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Highlight layer sits behind the textarea */
.raw-editor-highlight {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
  color: var(--text);
  z-index: 0;
}

.raw-editor-textarea {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  height: 100%;
  resize: none;
  background: transparent;
  color: transparent;
  caret-color: var(--text);
  outline: none;
  overflow: auto;
  scrollbar-width: none;
  -webkit-text-fill-color: transparent;
}
.raw-editor-textarea::-webkit-scrollbar { display: none; }

.raw-editor-textarea.cm-backing-textarea {
  opacity: 0;
  pointer-events: none;
}

.raw-editor-highlight.cm-backing-highlight {
  display: none;
}

/* ── Syntax highlight tokens (Obsidian-style) ──────────── */
/* Body text is the default colour of .raw-editor-highlight  */
/* which inherits var(--text). Only markup is recoloured.    */

/* Syntax punctuation: #, *, -, `, [, ], (, ), > etc. */
.hl-syn          { color: rgba(158, 167, 184, 0.45); }

/* Headings: slightly brighter than body text */
.hl-heading      { color: #eef2f7; font-weight: 600; }

/* Bold/italic content stays readable */
.hl-bold         { color: var(--text); font-weight: 700; }
.hl-em           { color: var(--text); font-style: italic; }

/* Inline code content — subtle tint */
.hl-code         { color: #8ec8a0; }

/* Link text is body colour; URLs are muted */
.hl-url          { color: rgba(158, 167, 184, 0.5); }

/* Blockquote text — slightly dimmer than body */
.hl-bq           { color: #9ea7b8; font-style: italic; }

/* HTML tags — single muted colour for the entire tag */
.hl-tag          { color: rgba(158, 167, 184, 0.45); }
.hl-comment      { color: rgba(158, 167, 184, 0.3); font-style: italic; }

.editor-resizer {
  width: 4px;
  cursor: col-resize;
  background: var(--border);
  flex-shrink: 0;
}
.editor-resizer:hover,
.editor-resizer.active {
  background: var(--accent);
}

.editor-preview-pane {
  width: var(--editor-right-width);
  height: 100%;
  overflow: auto;
  scrollbar-width: none;
  background: var(--paper-bg);
  min-width: 0;
  outline: none !important;
  border: none !important;
}
.editor-preview-pane:hover,
.editor-preview-pane:focus,
.editor-preview-pane:focus-within,
.editor-preview-pane:focus-visible,
.editor-preview-pane [contenteditable]:hover,
.editor-preview-pane [contenteditable]:focus,
.editor-preview-pane [contenteditable]:focus-visible {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.editor-preview-pane::-webkit-scrollbar { display: none; }

:root {
  --doc-zoom: 1;
}

.zoom-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
}

.zoom-control input[type="range"] {
  width: 96px;
  accent-color: var(--accent);
  cursor: pointer;
}

.zoom-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 4px;
  background: transparent;
  color: var(--text, #e7ecf3);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.zoom-btn:hover {
  background: rgba(255,255,255,0.06);
}

.zoom-btn:disabled {
  opacity: 0.38;
  cursor: default;
  background: transparent;
}

.zoom-value {
  min-width: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: right;
  color: var(--muted, #98a6bc);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.zoom-value:hover,
.zoom-value:focus-visible {
  color: var(--text, #e7ecf3);
  outline: none;
}

.preview-content {
  max-width: calc(1200px * min(var(--doc-zoom, 1), 1.3));
  margin: 0 auto;
  padding: 40px 32px;
  font-size: calc(20px * var(--doc-zoom, 1));
  line-height: 1.75;
  color: var(--text);
  background: transparent;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  word-spacing: -0.02em;
  letter-spacing: 0.01em;
}

.preview-content.editor-document-loading {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 24px;
  box-sizing: border-box;
  background: var(--paper-bg);
}

.editor-document-loader {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}

.editor-document-spinner {
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border: 2px solid var(--paper-border);
  border-top-color: var(--paper-accent);
  border-radius: 50%;
  animation: editor-document-spinner 0.8s linear infinite;
}

@keyframes editor-document-spinner {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .editor-document-spinner {
    animation: none;
  }
}
.preview-content h1,
.preview-content h2,
.preview-content h3 {
  text-align: left;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
  letter-spacing: -0.01em;
}
.preview-content h1 { font-size: 1.6em; }
.preview-content h2 { font-size: 1.3em; }
.preview-content h3 { font-size: 1.1em; font-weight: 600; }
.preview-content p { margin: 0.7em 0; }
.preview-content a {
  color: #4a90d9;
  text-decoration: underline;
}
.preview-content a:hover {
  color: #5ba0e9;
}
.preview-content code {
  background: var(--panel);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.9em;
}
.preview-content pre {
  background: var(--panel);
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
}
.preview-content ul,
.preview-content ol {
  padding-left: 1.6em;
  margin: 0.7em 0;
}
.preview-content li { margin: 0.3em 0; }
.preview-content li::marker { color: var(--muted); }
.preview-content blockquote {
  border-left: 3px solid var(--accent);
  padding: 4px 16px;
  margin: 1em 0;
  color: var(--muted);
  font-style: italic;
}
.preview-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.6em 0;
}
.preview-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  font-size: 0.92em;
}
.preview-content th,
.preview-content td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
}
.preview-content th {
  background: var(--panel);
  font-weight: 600;
}

/* Citation anchors — clickable chips that open the PDF viewer */
.preview-content .dqid-cite {
  display: inline;
  color: rgba(242, 243, 245, 0.82);
  text-decoration: none;
  background: rgba(242, 243, 245, 0.05);
  border-bottom: 1px dashed rgba(242, 243, 245, 0.36);
  padding: 0 2px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.preview-content .dqid-cite:hover {
  background: rgba(242, 243, 245, 0.12);
  border-bottom-color: transparent;
}
.preview-content .dqid-cite[data-quote-valid="false"],
.preview-content .dqid-cite.pdf-quote-invalid,
.preview-live-mode .dqid-cite[data-quote-valid="false"],
.preview-live-mode .dqid-cite.pdf-quote-invalid {
  color: #ef4444;
  border-bottom-color: rgba(239, 68, 68, 0.72);
  background: rgba(239, 68, 68, 0.1);
}
.preview-content.ia-footnote-citations .dqid-cite,
.preview-live-mode.ia-footnote-citations .dqid-cite,
.ia-footnote-citations .preview-content .dqid-cite {
  display: inline-block;
  font-size: 0;
  line-height: 1;
  min-width: 0.45rem;
  min-height: 0.72rem;
  vertical-align: super;
  background: transparent;
  border-bottom: none;
  padding: 0 1px;
  border-radius: 0;
  text-align: center;
}
.preview-content.ia-footnote-citations .dqid-cite::after,
.preview-live-mode.ia-footnote-citations .dqid-cite::after,
.ia-footnote-citations .preview-content .dqid-cite::after {
  display: inline-block;
  content: attr(data-footnote-index);
  font-size: 0.72rem;
  line-height: 1;
  color: var(--paper-accent);
}
.preview-content.ia-footnote-citations .dqid-cite[data-quote-valid="false"]::after,
.preview-content.ia-footnote-citations .dqid-cite.pdf-quote-invalid::after,
.preview-live-mode.ia-footnote-citations .dqid-cite[data-quote-valid="false"]::after,
.preview-live-mode.ia-footnote-citations .dqid-cite.pdf-quote-invalid::after,
.ia-footnote-citations .preview-content .dqid-cite[data-quote-valid="false"]::after,
.ia-footnote-citations .preview-content .dqid-cite.pdf-quote-invalid::after {
  color: #ef4444;
}
.preview-content.ia-footnote-citations .dqid-cite:hover,
.preview-live-mode.ia-footnote-citations .dqid-cite:hover,
.ia-footnote-citations .preview-content .dqid-cite:hover {
  background: var(--paper-code);
}
.preview-content.ia-footnote-citations .dqid-cite::before,
.preview-live-mode.ia-footnote-citations .dqid-cite::before,
.ia-footnote-citations .preview-content .dqid-cite::before {
  display: none;
}
.preview-live-mode .preview-article-wrapper {
  counter-reset: review-section review-paragraph review-figure review-table;
}
.preview-live-mode .preview-article-wrapper.preview-article-wrapper--multiple-review,
.preview-live-mode .preview-article-wrapper:has(> .ia-article.multiple-review-article) {
  width: min(1500px, calc(100% - 36px));
  max-width: 1500px;
  margin-inline: auto;
}
.preview-live-mode .preview-article-wrapper.preview-article-wrapper--multiple-review > .ia-article.multiple-review-article,
.preview-live-mode .ia-article.multiple-review-article {
  width: 100%;
  max-width: none;
  padding: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(820px, 100%)) minmax(0, 1fr);
  align-content: start;
}
.preview-live-mode .preview-article-wrapper.preview-article-wrapper--multiple-review > .ia-article.multiple-review-article > main,
.preview-live-mode .ia-article.multiple-review-article > main {
  grid-column: 2;
  width: 100%;
  max-width: 820px;
  margin: 0;
  display: block;
  float: none;
  clear: both;
  position: relative;
  inset: auto;
}
.preview-live-mode .preview-article-wrapper section:not(:empty):not(.no-review-section-number) {
  counter-increment: review-section;
  position: relative;
}
.preview-live-mode .preview-article-wrapper section:not(:empty):not(.no-review-section-number)::before {
  content: none;
  position: absolute;
  left: -5.95rem;
  top: 0.18rem;
  min-width: 2.35rem;
  padding-right: 0.45rem;
  color: var(--muted);
  font: 700 0.72rem/1.25 "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
  text-align: right;
  user-select: none;
  pointer-events: none;
}
.preview-live-mode .preview-article-wrapper figure:not(:empty):not(.no-review-figure-number) {
  counter-increment: review-figure;
  position: relative;
}
.preview-live-mode .preview-article-wrapper figure:not(:empty):not(.no-review-figure-number)::before {
  content: "f" counter(review-figure);
  position: absolute;
  left: -8.15rem;
  top: 0.18rem;
  min-width: 2.35rem;
  padding-right: 0.45rem;
  color: var(--muted);
  font: 700 0.72rem/1.25 "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
  text-align: right;
  user-select: none;
  pointer-events: none;
}
.preview-live-mode .preview-article-wrapper table:not(:empty):not(.no-review-table-number) {
  counter-increment: review-table;
  position: relative;
}
.preview-live-mode .preview-article-wrapper table:not(:empty):not(.no-review-table-number)::before {
  content: "t" counter(review-table);
  position: absolute;
  left: -8.15rem;
  top: 0.18rem;
  min-width: 2.35rem;
  padding-right: 0.45rem;
  color: var(--muted);
  font: 700 0.72rem/1.25 "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
  text-align: right;
  user-select: none;
  pointer-events: none;
}
.preview-live-mode .preview-article-wrapper p:not(:empty):not(.no-review-paragraph-number):not(.review-template-placeholder) {
  counter-increment: review-paragraph;
  position: relative;
}
.preview-live-mode .preview-article-wrapper p:not(:empty):not(.no-review-paragraph-number):not(.review-template-placeholder)::before {
  content: "p" counter(review-paragraph);
  position: absolute;
  left: -3.65rem;
  top: 0.16rem;
  min-width: 2.55rem;
  padding-right: 0.45rem;
  color: var(--muted);
  font: 600 0.72rem/1.25 "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
  text-align: right;
  user-select: none;
  pointer-events: none;
}
.preview-live-mode .preview-article-wrapper :where(td, th, figcaption, nav, header, footer, .metadata, .references, .reference-list, .bibliography, .citation-notes) p::before {
  content: none !important;
}
.preview-live-mode .preview-article-wrapper :where(td, th, figcaption, nav, header, footer, .metadata, .references, .reference-list, .bibliography, .citation-notes) section::before {
  content: none !important;
}
.preview-live-mode .preview-article-wrapper :where(td, th, figcaption, nav, header, footer, .metadata, .references, .reference-list, .bibliography, .citation-notes) figure::before,
.preview-live-mode .preview-article-wrapper :where(td, th, figcaption, nav, header, footer, .metadata, .references, .reference-list, .bibliography, .citation-notes) table::before {
  content: none !important;
}
.preview-live-mode .review-locator-materialized::before {
  content: none !important;
}
.preview-live-mode .review-section-numbered.review-locator-materialized {
  position: relative;
}
.preview-live-mode .review-locator-chip {
  position: absolute;
  left: -3.7rem;
  top: 0.12rem;
  min-width: 2.45rem;
  padding: 0 0.35rem 0 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 700 0.72rem/1.25 "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
  text-align: right;
  cursor: copy;
  user-select: none;
}
.preview-live-mode .review-locator-chip:hover,
.preview-live-mode .review-locator-chip:focus {
  color: var(--text);
  outline: none;
}
.preview-live-mode .review-locator-chip--s { left: -5.95rem; }
.preview-live-mode .review-locator-chip--f { left: -8.15rem; color: var(--muted); }
.preview-live-mode .review-section-word-count-chip {
  display: inline-block;
  margin-left: 0.55rem;
  color: var(--muted);
  font: 700 0.68rem/1.2 "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
  vertical-align: baseline;
  white-space: nowrap;
}
.preview-live-mode.review-locators-hidden .preview-article-wrapper :where(section, p, figure, table)::before,
.preview-live-mode .review-locators-hidden :where(section, p, figure, table)::before {
  content: none !important;
}
.preview-live-mode.review-locators-hidden .review-locator-chip,
.preview-live-mode .review-locators-hidden .review-locator-chip {
  display: none !important;
}
.preview-content .dqid-cite::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 3px;
  vertical-align: -1px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4.5h8.5A2.5 2.5 0 0 1 19 7v11a2.5 2.5 0 0 1-2.5 2.5H8A2.5 2.5 0 0 1 5.5 18V7A2.5 2.5 0 0 1 8 4.5Z' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M8.5 8.5h7M8.5 12h7M8.5 15.5h4.5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4.5h8.5A2.5 2.5 0 0 1 19 7v11a2.5 2.5 0 0 1-2.5 2.5H8A2.5 2.5 0 0 1 5.5 18V7A2.5 2.5 0 0 1 8 4.5Z' fill='none' stroke='currentColor' stroke-width='2'/%3E%3Cpath d='M8.5 8.5h7M8.5 12h7M8.5 15.5h4.5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.6;
}

.preview-content .internal-link {
  color: var(--paper-link);
  text-decoration: underline;
  cursor: pointer;
}
.preview-content .internal-link:hover {
  color: var(--paper-accent);
}

.preview-hover-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  z-index: 9999;
  max-width: 280px;
  font-size: 12px;
  color: var(--text);
  box-shadow: 0 4px 12px var(--ui-shadow);
}
.citation-footnote-card {
  position: relative;
  box-sizing: border-box;
  max-width: 380px;
  max-height: min(72vh, 640px);
  overflow: auto;
  box-shadow: 0 18px 50px var(--ui-shadow);
  z-index: 1200;
  padding-right: 34px;
}
.citation-footnote-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 20px;
  cursor: pointer;
}
.citation-footnote-close:hover,
.citation-footnote-close:focus-visible {
  background: var(--ui-control-hover);
  color: var(--text);
  outline: none;
}
.citation-footnote-card .preview-hover-body {
  white-space: normal;
  line-height: 1.55;
}
.citation-footnote-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.citation-footnote-label {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.citation-footnote-section blockquote {
  margin: 0;
  padding: 0 0 0 10px;
  border-left: 2px solid var(--accent);
  color: var(--text);
  line-height: 1.5;
}
.citation-footnote-reference .preview-hover-body {
  font-size: 12px;
  color: var(--muted);
}
.citation-footnote-card .preview-hover-body.muted {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}
.citation-footnote-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}
.citation-footnote-list li {
  padding: 8px 8px 8px 2px;
  border-bottom: 1px solid var(--border);
}
.citation-footnote-list li:last-child {
  border-bottom: 0;
}
.citation-footnote-list-title {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.citation-footnote-list-body {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.citation-footnote-list-field {
  margin-top: 7px;
  display: grid;
  gap: 3px;
}
.citation-footnote-list-field > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.citation-footnote-list-field > div,
.citation-footnote-list-field blockquote {
  margin: 0;
  color: var(--text);
  font-size: 11px;
  line-height: 1.42;
}
.citation-footnote-list-field blockquote {
  padding: 0 0 0 9px;
  border-left: 2px solid var(--accent);
}
.citation-footnote-list-quote {
  margin-top: 4px;
  color: var(--text);
  font-size: 11px;
  line-height: 1.4;
}
.preview-hover-title { font-weight: 600; margin-bottom: 4px; }

.preview-anchor-hit {
  animation: anchor-flash 3.4s ease-out;
  border-radius: 4px;
  scroll-margin-top: 72px;
}
@keyframes anchor-flash {
  0%, 70% { background: rgba(242, 243, 245, 0.16); box-shadow: 0 0 0 3px rgba(242, 243, 245, 0.18); }
  100% { background: transparent; box-shadow: 0 0 0 0 rgba(242, 243, 245, 0); }
}

.active-sentence {
  background: rgba(250, 204, 21, 0.35);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.5) inset;
}

.find-active-match {
  background: rgba(250, 204, 21, 0.7) !important;
  border-radius: 3px;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.55) inset, 0 0 0 1px rgba(250, 204, 21, 0.55);
}

/* Editor view modes */
.editor-shell.raw-only .editor-preview-pane,
.editor-shell.raw-only .editor-resizer { display: none; }
.editor-shell.raw-only .editor-raw-pane { width: 100%; }

.editor-shell.preview-only .editor-raw-pane,
.editor-shell.preview-only .editor-resizer { display: none; }
.editor-shell.preview-only .editor-preview-pane { width: 100%; }

/* ── Inline PDF viewer panel ─────────────────────────────── */
.editor-pdf-panel {
  display: none;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--bg);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

/*
 * When PDF is open: CSS grid with left column (editor panes) + right column (PDF).
 * The mode classes (raw-only, split-view/default, preview-only) control
 * which panes appear in the left column and how they stack.
 */

/* Base grid: two columns, left stacks raw+preview vertically (split default) */
.editor-shell.has-pdf .editor-body {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  grid-template-rows: 1fr 1fr;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.editor-shell.has-pdf .editor-resizer { display: none; }
.editor-shell.has-pdf .editor-raw-pane {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid var(--border);
}
.editor-shell.has-pdf .editor-preview-pane {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  height: 100%;
  overflow: auto;
  max-width: 100%;
  position: relative;
  isolation: isolate;
}
.editor-shell.has-pdf .editor-pdf-panel {
  display: flex;
  grid-column: 2;
  grid-row: 1 / -1;
  border-left: 1px solid var(--border);
  min-width: 0;
  min-height: 0;
  align-self: stretch;
}

/* has-pdf + raw-only: raw fills left column */
.editor-shell.has-pdf.raw-only .editor-body {
  grid-template-rows: 1fr;
}
.editor-shell.has-pdf.raw-only .editor-raw-pane {
  grid-row: 1;
  border-bottom: none;
}
.editor-shell.has-pdf.raw-only .editor-preview-pane {
  display: none;
}

/* has-pdf + preview-only: preview fills left column */
.editor-shell.has-pdf.preview-only .editor-body {
  grid-template-rows: 1fr;
}
.editor-shell.has-pdf.preview-only .editor-raw-pane {
  display: none;
}
.editor-shell.has-pdf.preview-only .editor-preview-pane {
  grid-row: 1;
}

/* Adapt preview content when sharing space with PDF */
.editor-shell.has-pdf .preview-content {
  max-width: none;
  padding: 12px 12px 16px;
}

.editor-shell.has-pdf .editor-preview-frame {
  width: 100%;
  height: 100%;
}

.editor-pdf-frame {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  background: var(--pdf-ui-bg);
  display: block;
  color-scheme: inherit;
}

.editor-shell.has-pdf .editor-pdf-panel {
  background: var(--pdf-ui-bg);
}

.editor-shell.has-pdf .editor-pdf-frame {
  background: var(--pdf-ui-bg);
}

/* Writer-style rail, embedded from the standalone writer_style_editor. */
.writer-style-rail {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 10px;
  overflow: hidden;
  scrollbar-gutter: stable;
  background: var(--bg);
  border-left: 1px solid var(--border);
  color: var(--text);
  --writer-line: var(--neutral-border);
  --writer-panel: var(--neutral-panel);
  --writer-panel-soft: var(--neutral-panel-soft);
  --writer-raised: var(--neutral-raised);
  --writer-accent: var(--neutral-accent);
  --writer-green: #80d39b;
  --writer-red: #ff9288;
}

.ai-assistant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  border: 1px solid var(--writer-line);
  border-radius: 8px;
  background: var(--writer-panel);
  padding: 7px 9px;
}

.writer-style-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid var(--writer-line);
  border-radius: 9px;
  background: var(--bg);
  padding: 4px;
}

.writer-style-mode-tabs button {
  min-width: 0;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.writer-style-mode-tabs button:hover {
  color: var(--text);
  border-color: var(--writer-line);
}

.writer-style-mode-tabs button.active {
  background: var(--active-page-bg);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--active-page-text);
}

.writer-style-mode-panel {
  display: none;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.writer-style-mode-panel.active {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.writer-style-mode-panel--ai {
  --writer-panel: var(--neutral-panel);
  --writer-panel-soft: var(--neutral-panel-soft);
  --writer-raised: var(--neutral-raised);
  --writer-accent: var(--neutral-accent);
}

.writer-style-mode-panel--notes {
  --writer-panel: var(--neutral-panel);
  --writer-panel-soft: var(--neutral-panel-soft);
  --writer-raised: var(--neutral-raised);
  --writer-accent: var(--neutral-accent);
}

.writer-style-mode-panel--evidence {
  --writer-panel: var(--neutral-panel);
  --writer-panel-soft: var(--neutral-panel-soft);
  --writer-raised: var(--neutral-raised);
  --writer-accent: var(--neutral-accent);
}

.writer-style-mode-panel--stats {
  --writer-panel: var(--neutral-panel);
  --writer-panel-soft: var(--neutral-panel-soft);
  --writer-raised: var(--neutral-raised);
  --writer-accent: var(--neutral-accent);
}

.writer-style-mode-panel--pronunciation {
  --writer-panel: var(--neutral-panel);
  --writer-panel-soft: var(--neutral-panel-soft);
  --writer-raised: var(--neutral-raised);
  --writer-accent: var(--neutral-accent);
}

.ai-assistant-header strong {
  display: block;
  color: var(--writer-accent);
  font-size: 13px;
  font-weight: 700;
}

.ai-assistant-header span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.writer-style-rail-action-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}

.writer-style-rail-actions {
  min-width: 0;
  display: none;
  grid-template-columns: minmax(0, 1fr) 34px 34px;
  gap: 4px;
  align-items: stretch;
  border: 1px solid var(--writer-line);
  border-radius: 8px;
  background: var(--writer-panel);
  padding: 3px;
}

.writer-style-rail-actions--notes {
  --writer-accent: var(--neutral-accent);
}

.writer-style-rail-actions--ai {
  --writer-accent: var(--neutral-accent);
}

.writer-style-rail-actions--evidence {
  --writer-accent: var(--neutral-accent);
}

.writer-style-rail-actions--stats {
  --writer-accent: var(--neutral-accent);
}

.writer-style-rail-actions--pronunciation {
  --writer-accent: var(--neutral-accent);
}

.writer-style-rail-actions.active {
  display: grid;
  border-color: var(--writer-accent);
  box-shadow: inset 0 0 0 1px var(--writer-line);
}

.writer-style-rail-actions--revision {
  --writer-accent: var(--neutral-accent);
}

.writer-evidence-ledger-panel {
  min-height: 0;
}

.writer-pronunciation-panel {
  min-height: 0;
}

.writer-pronunciation-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.writer-pronunciation-controls label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.writer-pronunciation-controls select,
.writer-pronunciation-controls input[type="range"] {
  min-width: 0;
  border: 1px solid var(--writer-line);
  border-radius: 6px;
  background: var(--writer-raised);
  color: var(--text);
  padding: 7px 8px;
  font: inherit;
}

.writer-pronunciation-controls label:has(#writerStylePronunciationVoice) {
  grid-column: 1 / -1;
}

.writer-pronunciation-controls label:has(#writerStylePronunciationModel) {
  grid-column: 1 / -1;
}

.writer-pronunciation-selection {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--writer-line);
  border-radius: 8px;
  background: var(--writer-panel-soft);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.writer-pronunciation-token {
  border-radius: 4px;
  padding: 1px 2px;
  transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.writer-pronunciation-token.is-speaking {
  background: var(--neutral-accent-soft);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--writer-accent);
}

.writer-pronunciation-selection:empty {
  display: none;
}

.writer-pronunciation-stress {
  margin: 8px 0 10px;
  color: var(--writer-accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.writer-pronunciation-stress:empty {
  display: none;
}

.writer-pronunciation-rhythm {
  margin: 8px 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--writer-line);
  border-radius: 8px;
  background: var(--writer-panel-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.writer-pronunciation-rhythm:empty {
  display: none;
}

.writer-pronunciation-tips {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.42;
}

.writer-pronunciation-tips:empty {
  display: none;
}

.writer-pronunciation-tips ul {
  margin: 0;
  padding-left: 18px;
}

.writer-pronunciation-words {
  display: grid;
  gap: 8px;
}

.writer-pronunciation-word-card,
.writer-pronunciation-practice-item {
  border: 1px solid var(--writer-line);
  border-radius: 8px;
  background: var(--writer-raised);
  padding: 10px;
}

.writer-pronunciation-word-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.writer-pronunciation-word-head strong {
  color: var(--text);
  font-size: 14px;
}

.writer-pronunciation-word-head span {
  color: var(--writer-accent);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.writer-pronunciation-stress-line,
.writer-pronunciation-source {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.writer-pronunciation-guidance,
.writer-pronunciation-warnings {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.42;
}

.writer-pronunciation-warnings {
  color: #ffd6a5;
}

.writer-pronunciation-pairs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.writer-pronunciation-pairs span {
  border: 1px solid var(--writer-line);
  border-radius: 999px;
  background: var(--writer-panel-soft);
  color: var(--text);
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 700;
}

.writer-pronunciation-variants {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.writer-pronunciation-variants span {
  min-width: 0;
  border: 1px solid var(--writer-line);
  border-radius: 6px;
  background: var(--writer-panel-soft);
  color: var(--text);
  padding: 5px 7px;
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.writer-pronunciation-practice {
  margin-top: 12px;
}

.writer-pronunciation-practice summary {
  cursor: pointer;
  color: var(--writer-accent);
  font-size: 12px;
  font-weight: 700;
}

.writer-pronunciation-practice-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.writer-pronunciation-practice-toolbar {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.writer-pronunciation-practice-toolbar select {
  min-width: 0;
  flex: 1;
  border: 1px solid var(--writer-line);
  border-radius: 6px;
  background: var(--writer-raised);
  color: var(--text);
  padding: 6px 8px;
  font: inherit;
}

.writer-pronunciation-practice-item strong,
.writer-pronunciation-practice-item span,
.writer-pronunciation-practice-item small {
  display: block;
}

.writer-pronunciation-practice-item strong {
  color: var(--text);
}

.writer-pronunciation-practice-item.mastered {
  border-color: rgba(183, 208, 122, .34);
  background: rgba(183, 208, 122, .08);
}

.writer-pronunciation-practice-item span {
  color: var(--writer-accent);
  font-weight: 700;
}

.writer-pronunciation-practice-item small {
  color: var(--muted);
}

.writer-pronunciation-practice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.writer-pronunciation-practice-actions button {
  min-height: 26px;
  border: 1px solid var(--writer-line);
  border-radius: 6px;
  background: var(--writer-panel-soft);
  color: var(--text);
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 700;
}

.writer-pronunciation-recording {
  margin-top: 12px;
}

.writer-pronunciation-recording summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.writer-evidence-ledger-tabs {
  display: flex;
  gap: 6px;
  min-height: 32px;
  overflow-x: auto;
  padding: 1px 0 3px;
  scrollbar-width: thin;
}

.writer-evidence-ledger-tab {
  align-items: center;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--writer-line);
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
  max-width: 220px;
  min-height: 30px;
  padding: 4px 8px;
}

.writer-evidence-ledger-tab.active {
  background: rgba(242, 243, 245, .10);
  border-color: rgba(242, 243, 245, .42);
  color: var(--text);
}

.writer-evidence-ledger-tab-title {
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.writer-evidence-ledger-tab-count {
  border: 1px solid rgba(242, 243, 245, .24);
  border-radius: 999px;
  color: var(--writer-accent);
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  padding: 1px 5px;
  text-align: center;
}

.writer-evidence-ledger-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 9px;
}

.writer-evidence-ledger-item {
  border: 1px solid var(--writer-line);
  border-radius: 8px;
  background: var(--writer-panel-soft);
  padding: 10px;
}

.writer-evidence-ledger-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--writer-accent);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

.writer-evidence-ledger-item-head span {
  color: var(--muted);
  font-size: 11px;
}

.writer-evidence-ledger-item-body {
  color: var(--text);
  font-size: 12px;
  line-height: 1.55;
}

.writer-evidence-ledger-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.writer-evidence-ledger-summary span {
  border: 1px solid var(--writer-line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, .04);
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
}

.writer-evidence-ledger-ref {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 8px;
  margin-top: 8px;
}

.writer-evidence-ledger-ref strong {
  display: block;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.writer-evidence-ledger-ref span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}

.writer-evidence-ledger-ref p {
  margin: 6px 0 0;
  color: rgba(238, 243, 251, .88);
}

.writer-evidence-ledger-more {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.writer-evidence-ledger-pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: rgba(238, 243, 251, .88);
}

.writer-evidence-ledger-annex {
  max-width: 100%;
  overflow: auto;
}

.writer-evidence-ledger-annex-caption {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  margin: 0 0 8px;
}

.writer-evidence-ledger-annex table {
  border-collapse: collapse;
  min-width: 100%;
  width: max-content;
}

.writer-evidence-ledger-annex :where(th, td) {
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(238, 243, 251, .9);
  font-size: 11px;
  line-height: 1.35;
  max-width: 260px;
  padding: 6px 7px;
  text-align: left;
  vertical-align: top;
}

.writer-evidence-ledger-annex th {
  background: rgba(242, 243, 245, .06);
  color: var(--text);
  font-weight: 700;
}

.writer-evidence-ledger-item-body details {
  border: 1px solid var(--writer-line);
  border-radius: 7px;
  padding: 8px;
  background: rgba(255, 255, 255, .035);
}

.writer-document-stats-panel {
  display: grid;
  gap: 10px;
  min-height: 0;
}

.writer-document-stats-panel .writer-style-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.writer-document-stats-panel .writer-style-actions button {
  min-width: 0;
  border-color: rgba(242, 243, 245, .18);
  background: rgba(242, 243, 245, .05);
  padding-inline: 7px;
  white-space: normal;
}

.writer-document-stats-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 7px;
}

.writer-document-stats-tabs {
  display: grid;
  gap: 7px;
  margin: 0;
}

.writer-document-stats-tab-group {
  display: grid;
  grid-template-columns: 54px repeat(auto-fit, minmax(68px, 1fr));
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
  padding: 5px;
}

.writer-document-stats-tab-group > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.writer-document-stats-options {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
  padding: 0;
}

.writer-document-stats-options summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  list-style: none;
  padding: 8px 9px;
}

.writer-document-stats-options summary::-webkit-details-marker {
  display: none;
}

.writer-document-stats-options summary::after {
  content: '+';
  float: right;
  color: var(--writer-accent);
}

.writer-document-stats-options[open] summary::after {
  content: '-';
}

.writer-document-stats-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0 8px 8px;
  margin: 0;
}

.writer-document-stats-controls label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.writer-document-stats-controls input {
  min-width: 0;
  border: 1px solid var(--writer-line);
  border-radius: 6px;
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  font-size: 11px;
  padding: 5px 6px;
}

.writer-document-stats-scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0 8px 8px;
}

.writer-document-stats-scope label {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.writer-document-stats-scope input {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  accent-color: var(--writer-accent);
}

.writer-document-stats-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.writer-document-stats-tabs button,
.writer-document-stats-subtabs button {
  min-width: 0;
  border: 1px solid var(--writer-line);
  border-radius: 6px;
  background: rgba(255, 255, 255, .04);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  padding: 6px 5px;
}

.writer-document-stats-subtabs button {
  flex: 1 1 82px;
}

.writer-document-stats-tabs button.active,
.writer-document-stats-subtabs button.active {
  border-color: rgba(255, 255, 255, 0.32);
  background: var(--active-page-bg);
  color: var(--active-page-text);
}

.writer-document-stat-tile {
  border: 1px solid var(--writer-line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)),
    var(--writer-panel-soft);
  padding: 8px;
  min-width: 0;
}

.writer-document-stat-tile:first-child,
.writer-document-stat-tile:nth-child(6),
.writer-document-stat-tile:nth-child(7) {
  border-color: rgba(242, 243, 245, .20);
}

.writer-document-stat-tile strong {
  display: block;
  color: var(--writer-accent);
  font-size: 16px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.writer-document-stat-tile span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  margin-top: 4px;
}

.writer-document-stats-lexical {
  display: grid;
  gap: 9px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.writer-document-stat-list {
  border: 1px solid var(--writer-line);
  border-radius: 8px;
  background: var(--writer-panel-soft);
  padding: 9px;
}

.writer-document-stat-list ol {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.writer-document-stat-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: var(--text);
  font-size: 12px;
  padding-top: 5px;
}

.writer-document-stat-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.writer-document-stat-list li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.writer-document-stat-list li span em {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.writer-document-stat-list--wide li span,
.writer-document-stat-list li.writer-document-stat-row-text span {
  white-space: normal;
}

.writer-document-stat-row-text b {
  display: inline-block;
  color: var(--writer-accent);
  font-size: 11px;
  margin-right: 6px;
}

.writer-document-stat-row-text em {
  display: block;
  color: var(--text);
  font-size: 11px;
  font-style: normal;
  line-height: 1.4;
  margin-top: 3px;
}

.writer-document-stat-list li strong {
  color: var(--writer-accent);
  font-size: 11px;
  font-weight: 700;
}

.writer-document-stat-locate {
  width: 26px;
  height: 24px;
  border: 1px solid var(--writer-line);
  border-radius: 6px;
  background: rgba(242, 243, 245, .08);
  color: var(--writer-accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.writer-document-stat-list li.empty {
  color: var(--muted);
}

.writer-style-stats-selected {
  outline: 2px solid rgba(242, 243, 245, .72) !important;
  outline-offset: 3px !important;
  background: rgba(242, 243, 245, .10) !important;
}

.writer-document-stats-json {
  max-height: 420px;
  margin: 8px 0 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 11px;
  line-height: 1.45;
}

.writer-style-mode-button {
  min-width: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--writer-accent);
  cursor: grab;
  font-size: 12px;
  font-weight: 700;
  min-height: 34px;
  text-align: left;
  padding: 4px 9px;
}

.writer-style-mode-button.active {
  color: var(--active-page-text);
  background: var(--active-page-bg);
  cursor: grab;
}

.writer-style-mode-button:active {
  cursor: grabbing;
}

.writer-style-mode-button:hover {
  color: var(--text);
  background: rgba(242, 243, 245, .08);
}

.writer-style-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--writer-accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 0;
}

.writer-style-toggle:hover {
  background: rgba(242, 243, 245, .08);
}

.writer-style-undock-button,
.writer-style-window-button {
  flex: 0 0 auto;
  width: 100%;
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--writer-accent);
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
}

.writer-style-undock-button:hover,
.writer-style-window-button:hover {
  border-color: rgba(242, 243, 245, .38);
  background: var(--writer-raised);
}

.writer-style-toggle-icon {
  font-size: 15px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .16s ease;
}

.editor-shell.writer-rail-collapsed .writer-style-rail {
  padding: 8px 5px;
  align-items: stretch;
}

.editor-shell.writer-rail-collapsed .writer-style-rail-action-stack {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(92px, 1fr);
  flex: 1 1 auto;
}

.editor-shell.writer-rail-collapsed .writer-style-rail-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 3px;
}

.editor-shell.writer-rail-collapsed .writer-style-toggle,
.editor-shell.writer-rail-collapsed .writer-style-undock-button,
.editor-shell.writer-rail-collapsed .writer-style-window-button {
  display: none;
}

.editor-shell.writer-rail-collapsed .writer-style-mode-button {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  min-height: 92px;
  padding: 10px 6px;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
}

.editor-shell.writer-rail-collapsed .writer-style-mode-button.active {
  color: var(--active-page-text);
  background: var(--active-page-bg);
}

.editor-shell.writer-rail-collapsed .writer-style-toggle-icon {
  transform: rotate(180deg);
}

.editor-shell.writer-rail-collapsed .writer-style-score,
.editor-shell.writer-rail-collapsed .writer-style-tabs,
.editor-shell.writer-rail-collapsed .writer-style-panes,
.editor-shell.writer-rail-collapsed .writer-style-mode-panel {
  display: none;
}

.writer-style-score {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--writer-line);
  border-radius: 9px;
  background: var(--writer-panel);
  padding: 8px 10px;
}

.writer-style-score-ring {
  --score: 0;
  width: 58px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, var(--writer-panel) 58%, transparent 59%),
    conic-gradient(var(--writer-green) calc(var(--score) * 1%), rgba(255, 146, 136, .26) 0);
}

.writer-style-score-ring strong {
  display: block;
  font-size: 21px;
  line-height: 1;
}

.writer-style-score-ring span {
  margin-top: -12px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.writer-style-score-summary strong {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
}

.writer-style-score-summary span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.writer-style-tabs,
.writer-style-provider-tabs {
  display: grid;
  gap: 4px;
  border: 1px solid var(--writer-line);
  border-radius: 9px;
  background: var(--bg);
  padding: 4px;
}

.writer-style-tabs {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.writer-style-provider-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-thread-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.writer-style-tabs button,
.writer-style-provider-tabs button {
  min-width: 0;
  min-height: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.writer-style-tabs button:hover,
.writer-style-provider-tabs button:hover {
  color: var(--text);
  border-color: var(--writer-line);
}

.writer-style-tabs button.active,
.writer-style-provider-tabs button.active {
  background: var(--active-page-bg);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--active-page-text);
}

.writer-style-provider-tabs button.active {
  background: var(--active-page-bg);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--active-page-text);
}

.writer-style-panes {
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.writer-style-pane {
  display: none;
  min-height: 0;
  height: 100%;
}

.writer-style-pane.active {
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: auto;
  padding-right: 2px;
}

.writer-ai-panel {
  gap: 10px;
}

.writer-ai-controls {
  display: grid;
  gap: 10px;
}

.writer-ai-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.writer-ai-actions .export-dropdown {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0;
}

.writer-ai-actions #aiActionsButton {
  width: 100%;
  justify-content: center;
}

.writer-ai-panel #aiBackendSelect,
.writer-ai-panel #articleReviewJournalSelect {
  width: 100%;
  max-width: none;
  min-height: 32px;
  margin: 0;
}

.writer-ai-panel #aiSelectionInstruction {
  width: 100%;
  min-height: 76px;
  max-height: 150px;
  resize: vertical;
}

.writer-ai-panel #aiActionsMenu {
  min-width: min(260px, calc(100vw - 48px));
}

#articleReviewCommentedPanel #articleReviewJournalSelect,
#articleReviewCommentedPanel #articleReviewRunButton {
  width: 100%;
  margin: 0;
}

.ai-provider-tabs {
  flex: 0 0 auto;
}

.ai-thread-stack {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
}

.ai-thread-panel {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.ai-thread-panel.active {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ai-thread-hidden-actions {
  display: none;
}

.ai-thread-panel textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
}

.ai-thread-terminal {
  min-height: 280px;
  height: min(42vh, 520px);
  flex: 1 1 280px;
}

.writer-style-focus-header,
.writer-style-review-controls,
.writer-style-box,
.writer-style-score-card {
  border: 1px solid var(--writer-line);
  border-radius: 9px;
  background: var(--writer-panel);
}

.writer-style-focus-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
}

.writer-style-focus-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.writer-style-focus-header strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--writer-accent);
  font-size: 14px;
}

.writer-style-review-controls,
.writer-style-box {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.writer-style-review-controls {
  position: sticky;
  top: 0;
  z-index: 8;
  grid-template-columns: minmax(0, 1fr);
  background: rgba(5, 6, 8, .96);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

.writer-style-box.ai-thread-draft-panel {
  display: flex;
  flex: 0 0 auto;
  min-height: 164px;
  flex-direction: column;
  border-color: rgba(242, 243, 245, .24);
  background: rgba(242, 243, 245, .04);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .14);
}

.ai-thread-draft-panel textarea {
  flex: 1 1 auto;
  width: 100%;
  min-height: 86px;
  max-height: 160px;
  resize: none;
}

.ai-thread-composer-actions {
  display: grid;
  grid-template-columns: minmax(72px, .9fr) repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.ai-thread-composer-actions button {
  min-width: 0;
  padding-inline: 7px;
}

.writer-style-box.ai-thread-panel {
  display: none;
}

.writer-style-box.ai-thread-panel.active {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.writer-style-review-controls span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.writer-style-review-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(242, 243, 245, .10);
}

.writer-style-review-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--writer-accent);
  transition: width .2s ease;
}

.writer-style-review-buttons,
.writer-style-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.writer-style-actions.ai-thread-hidden-actions {
  display: none;
}

.writer-style-actions.ai-thread-composer-actions {
  display: grid;
  grid-template-columns: minmax(72px, .9fr) repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.writer-style-review-buttons button,
.writer-style-actions button,
.writer-style-feature-summary button,
.writer-style-filters button,
.writer-style-card-actions button {
  border: 1px solid var(--writer-line);
  border-radius: 7px;
  background: var(--writer-raised);
  color: var(--text);
  min-height: 30px;
  padding: 5px 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.writer-style-review-buttons button,
.writer-style-actions button {
  flex: 1 1 auto;
}

.writer-style-review-buttons button:hover:not(:disabled),
.writer-style-actions button:hover,
.writer-style-feature-summary button:hover,
.writer-style-filters button:hover,
.writer-style-card-actions button:hover {
  border-color: var(--writer-accent);
}

.writer-style-review-buttons button:disabled {
  opacity: .48;
  cursor: not-allowed;
}

#writerStyleApplyCurrent,
#writerStyleApplyBritish,
#writerStyleApplyVisible,
.writer-style-actions .primary-action {
  border-color: rgba(242, 243, 245, .38);
  color: var(--writer-accent);
}

.writer-style-score-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.writer-style-score-card {
  padding: 8px;
  min-width: 0;
  text-align: left;
  min-height: 58px;
}

button.writer-style-score-card {
  cursor: pointer;
}

.writer-style-score-card strong {
  display: block;
  font-size: 20px;
  line-height: 1.05;
}

.writer-style-score-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.writer-style-score-card.red { border-color: rgba(255, 146, 136, .42); }
.writer-style-score-card.green { border-color: rgba(128, 211, 155, .40); }

.writer-style-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.writer-style-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 0 8px;
  color: var(--writer-accent);
  background: rgba(242, 243, 245, .08);
  font-size: 12px;
  font-weight: 700;
}

.writer-style-feature-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.writer-style-feature-summary button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.writer-style-feature-summary button span,
.writer-style-feature-summary button strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.writer-style-feature-summary button span {
  color: var(--muted);
  font-size: 12px;
}

.writer-style-feature-summary button.active,
.writer-style-filters button.active {
  background: var(--active-page-bg);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--active-page-text);
}

.writer-style-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow: auto;
  padding-right: 2px;
}

.writer-style-annotated {
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  line-height: 1.65;
}

.writer-style-annotated.empty {
  color: var(--muted);
}

.writer-style-hit {
  border-radius: 5px;
  padding: 1px 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  cursor: pointer;
}

.writer-style-hit.critical {
  background: rgba(239, 68, 68, .18);
  border-bottom: 2px solid rgba(239, 68, 68, .86);
}

.writer-style-hit.structure {
  background: rgba(249, 115, 22, .18);
  border-bottom: 2px solid rgba(249, 115, 22, .84);
}

.writer-style-hit.medium {
  background: rgba(250, 204, 21, .18);
  border-bottom: 2px solid rgba(250, 204, 21, .82);
}

.writer-style-hit.mechanical {
  background: rgba(59, 130, 246, .16);
  border-bottom: 2px solid rgba(59, 130, 246, .80);
}

.writer-style-hit.optional {
  background: rgba(34, 197, 94, .16);
  border-bottom: 2px solid rgba(34, 197, 94, .80);
}

.writer-style-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  padding-bottom: 6px;
}

.writer-style-card {
  border: 1px solid var(--writer-line);
  border-radius: 8px;
  background: var(--writer-panel);
  padding: 8px 9px;
  cursor: pointer;
  scroll-margin: 12px;
  position: relative;
  overflow: hidden;
}

.writer-style-card.negative {
  border-color: rgba(255, 146, 136, .24);
  background: #1a171c;
}

.writer-style-card.critical { border-left: 4px solid rgba(239, 68, 68, .92); }
.writer-style-card.structure { border-left: 4px solid rgba(249, 115, 22, .92); }
.writer-style-card.medium { border-left: 4px solid rgba(250, 204, 21, .88); }
.writer-style-card.mechanical { border-left: 4px solid rgba(59, 130, 246, .88); }
.writer-style-card.optional { border-left: 4px solid rgba(34, 197, 94, .88); }

.writer-style-card.positive {
  border-color: rgba(128, 211, 155, .32);
  background: #141d1a;
}

.writer-style-card.active {
  border-color: var(--writer-accent);
  box-shadow: 0 0 0 3px rgba(242, 243, 245, .14);
  background: rgba(242, 243, 245, .06);
}

.writer-style-card-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: start;
}

.writer-style-card-title strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.25;
}

.writer-style-feature-pill {
  flex: 0 0 auto;
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid var(--writer-line);
  border-radius: 999px;
  background: var(--writer-raised);
  color: var(--muted);
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
}

.writer-style-feature-pill.no-auto {
  border-color: rgba(245, 158, 11, .34);
  background: rgba(245, 158, 11, .12);
  color: #f6d199;
}

.writer-style-card .meta {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  margin: 4px 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.writer-style-card mark {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  background: rgba(244, 193, 109, .22);
  color: var(--text);
  border-radius: 4px;
  padding: 4px 5px;
  font-size: 12px;
  line-height: 1.38;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.writer-style-replacement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  padding: 7px;
  border: 1px solid rgba(242, 243, 245, .18);
  border-radius: 7px;
  background: rgba(242, 243, 245, .05);
  color: var(--muted);
  font-size: 12px;
}

.writer-style-replacement span,
.writer-style-replacement strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.writer-style-replacement span {
  text-decoration: line-through;
}

.writer-style-replacement strong::before {
  content: "→ ";
  color: var(--writer-accent);
}

.writer-style-nonapply-reason {
  margin-top: 6px;
  padding: 6px 7px;
  border: 1px solid rgba(245, 158, 11, .22);
  border-radius: 7px;
  background: rgba(245, 158, 11, .08);
  color: #d9c39b;
  font-size: 11px;
  line-height: 1.35;
}

.writer-style-card ul {
  margin: 7px 0 0;
  padding-left: 16px;
  color: rgba(238, 243, 251, .86);
  font-size: 11px;
  line-height: 1.38;
}

.writer-style-card p {
  margin: 7px 0 0;
  color: rgba(238, 243, 251, .82);
  font-size: 11px;
  line-height: 1.38;
}

.writer-style-card-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}

.writer-style-card-actions button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.writer-style-rule-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
  gap: 7px;
}

.writer-style-rule-form.structure {
  grid-template-columns: minmax(0, 1fr) minmax(98px, auto);
}

.writer-style-rule-form input,
.writer-style-rule-form select,
.writer-style-rule-form textarea {
  min-width: 0;
  border: 1px solid var(--writer-line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  padding: 7px 8px;
  font: 12px/1.4 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.writer-style-rule-form textarea,
.writer-style-rule-form #writerStyleVocabularyReplacement {
  grid-column: 1 / -1;
}

.writer-notes-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 8px;
}

.writer-style-notes-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding: 4px;
  border: 1px solid rgba(242, 243, 245, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
}

.writer-style-notes-toolbar button {
  flex: 0 0 auto;
  min-width: 28px;
  min-height: 28px;
  border: 1px solid var(--writer-line);
  border-radius: 7px;
  background: rgba(255, 255, 255, .035);
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  padding: 0 7px;
}

.writer-style-notes-toolbar button:hover {
  border-color: rgba(242, 243, 245, .34);
  background: rgba(242, 243, 245, .08);
  color: var(--text);
}

.writer-style-notes-editor {
  flex: 1 1 auto;
  min-height: 260px;
  width: 100%;
  border: 1px solid var(--writer-line);
  border-radius: 8px;
  outline: none;
  overflow: auto;
  background: var(--bg);
  color: var(--text);
  padding: 18px 20px 44px;
  font: 14px/1.72 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.writer-style-notes-editor:empty::before {
  content: attr(data-placeholder);
  color: rgba(242, 243, 245, .52);
}

.writer-style-notes-editor.dragging {
  border-color: rgba(242, 243, 245, .52);
  box-shadow: inset 0 0 0 2px rgba(242, 243, 245, .14);
  background: rgba(242, 243, 245, .04);
}

.writer-style-notes-editor h1,
.writer-style-notes-editor h2,
.writer-style-notes-editor h3,
.writer-style-notes-editor h4,
.writer-style-notes-editor h5,
.writer-style-notes-editor h6 {
  margin: .62em 0 .25em;
  color: var(--text);
  line-height: 1.22;
}

.writer-style-notes-editor h1 {
  font-size: 1.48rem;
}

.writer-style-notes-editor h2 {
  font-size: 1.24rem;
}

.writer-style-notes-editor h3 {
  font-size: 1.06rem;
}

.writer-style-notes-editor p {
  margin: 0 0 .82em;
}

.writer-style-notes-editor blockquote {
  margin: .74em 0;
  padding: .12em 0 .12em .9em;
  border-left: 3px solid var(--writer-accent);
  color: var(--text);
}

.writer-style-notes-editor ul,
.writer-style-notes-editor ol {
  margin: .55em 0 .86em 1.3em;
  padding: 0;
}

.writer-style-notes-editor li {
  margin: .18em 0;
}

.writer-style-notes-editor code {
  border: 1px solid var(--writer-line);
  border-radius: 6px;
  background: var(--writer-panel-soft);
  padding: 0 .26em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.writer-style-notes-editor mark {
  border-radius: 4px;
  background: rgba(255, 222, 128, .28);
  color: var(--text);
  padding: 0 .18em;
}

.writer-style-notes-editor a {
  color: var(--paper-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.writer-style-notes-command-menu {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 88px;
  z-index: 20;
  display: grid;
  gap: 3px;
  max-height: 240px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--writer-line);
  border-radius: 10px;
  background: rgba(5, 6, 8, .98);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .36);
}

.writer-style-notes-command-menu[hidden] {
  display: none;
}

.writer-style-notes-command {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 7px 9px;
  text-align: left;
}

.writer-style-notes-command:hover,
.writer-style-notes-command.active {
  background: rgba(242, 243, 245, .10);
}

.writer-style-notes-command span {
  font-size: 12px;
  font-weight: 700;
}

.writer-style-notes-command small {
  color: var(--muted);
  font-size: 11px;
}

.writer-style-rule-form button {
  border: 1px solid var(--writer-line);
  border-radius: 7px;
  background: var(--writer-raised);
  color: var(--text);
  min-height: 31px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.writer-style-rule-form button:hover {
  border-color: var(--writer-accent);
}

.writer-style-rule-list {
  display: grid;
  gap: 7px;
}

.writer-style-rule-group {
  display: grid;
  gap: 5px;
}

.writer-style-rule-group-title {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.writer-style-rule-item {
  display: grid;
  gap: 4px;
  border: 1px solid var(--writer-line);
  border-radius: 8px;
  background: rgba(242, 243, 245, .035);
  padding: 8px;
}

.writer-style-rule-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.writer-style-rule-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.writer-style-rule-item span,
.writer-style-rule-item ol {
  color: var(--muted);
  font-size: 12px;
}

.writer-style-rule-item ol {
  margin: 0;
  padding-left: 18px;
}

.writer-style-rule-remove {
  flex: 0 0 auto;
  border: 1px solid var(--writer-line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  min-height: 24px;
  padding: 2px 7px;
}

.writer-style-rule-remove:hover {
  border-color: var(--writer-red);
  color: var(--writer-red);
}

.writer-style-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.writer-style-box textarea {
  width: 100%;
  min-height: 148px;
  resize: vertical;
  border: 1px solid var(--writer-line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  padding: 9px;
  font: 13px/1.45 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.writer-style-status {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.writer-style-terminal {
  min-height: 260px;
  height: min(34vh, 420px);
  overflow: hidden;
  border: 1px solid var(--writer-line);
  border-radius: 8px;
  background: var(--bg);
  padding: 7px;
}

.writer-style-terminal .xterm {
  height: 100%;
}

.writer-style-prompt {
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--writer-line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  padding: 10px;
  margin: 0;
  font: 12px/1.48 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.writer-style-preview-annotation {
  border-radius: 4px;
  padding: 0 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  cursor: pointer;
}

.writer-style-preview-annotation.critical {
  background: rgba(255, 146, 136, .24);
  border-bottom: 2px solid rgba(255, 146, 136, .82);
}

.writer-style-preview-annotation.structure {
  background: rgba(249, 115, 22, .22);
  border-bottom: 2px solid rgba(249, 115, 22, .80);
}

.writer-style-preview-annotation.medium {
  background: rgba(250, 204, 21, .20);
  border-bottom: 2px solid rgba(250, 204, 21, .78);
}

.writer-style-preview-annotation.mechanical {
  background: rgba(96, 165, 250, .20);
  border-bottom: 2px solid rgba(96, 165, 250, .78);
}

.writer-style-preview-annotation.optional {
  background: rgba(128, 211, 155, .20);
  border-bottom: 2px solid rgba(128, 211, 155, .78);
}

.writer-style-preview-annotation.writer-style-selected {
  outline: 2px solid rgba(242, 243, 245, .72);
}

.writer-style-bulk-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
}

.writer-style-bulk-controls button {
  border: 1px solid var(--border);
  border-radius: 5px;
  background: rgba(255, 255, 255, .055);
  color: var(--text);
  cursor: pointer;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
}

.writer-style-bulk-controls button.active {
  border-color: rgba(242, 243, 245, .42);
  background: rgba(242, 243, 245, .10);
}

.writer-style-bulk-controls button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.writer-style-diagnostic-lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0;
}

.writer-style-diagnostic-lanes button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  border: 1px solid var(--writer-line);
  border-radius: 7px;
  background: rgba(255, 255, 255, .035);
  color: var(--text);
  cursor: pointer;
  padding: 7px 8px;
  text-align: left;
}

.writer-style-diagnostic-lanes button.active {
  border-color: rgba(242, 243, 245, .46);
  background: rgba(242, 243, 245, .10);
}

.writer-style-diagnostic-lanes span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
}

.writer-style-diagnostic-lanes strong {
  color: var(--writer-accent);
  font-size: 11px;
}

.writer-style-queue-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.writer-style-queue-empty,
.writer-style-queue-item {
  border: 1px solid var(--writer-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  padding: 9px;
}

.writer-style-queue-empty {
  color: var(--muted);
  font-size: 12px;
}

.writer-style-queue-item.critical { border-left: 3px solid #ef4444; }
.writer-style-queue-item.structure { border-left: 3px solid #f59e0b; }
.writer-style-queue-item.medium { border-left: 3px solid #eab308; }
.writer-style-queue-item.mechanical { border-left: 3px solid #3b82f6; }
.writer-style-queue-item.optional { border-left: 3px solid #22c55e; }

.writer-style-queue-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

.writer-style-queue-head strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
}

.writer-style-queue-head span {
  border: 1px solid var(--writer-line);
  border-radius: 999px;
  padding: 2px 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.writer-style-queue-target,
.writer-style-queue-suggestion {
  max-height: 84px;
  overflow: auto;
  border-radius: 6px;
  padding: 7px;
  font-size: 11px;
  line-height: 1.42;
}

.writer-style-queue-target {
  color: rgba(238, 243, 251, .74);
  background: rgba(239, 68, 68, .08);
}

.writer-style-queue-suggestion {
  margin-top: 5px;
  color: rgba(238, 243, 251, .92);
  background: rgba(34, 197, 94, .09);
}

.writer-style-queue-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}

.writer-style-queue-actions button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.writer-style-queue-limit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  align-items: center;
  gap: 8px;
  margin: 8px 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.writer-style-queue-limit input {
  min-width: 0;
  border: 1px solid var(--writer-line);
  border-radius: 6px;
  background: rgba(0, 0, 0, .22);
  color: var(--text);
  padding: 5px 7px;
  font: inherit;
}

.writer-style-annotation-hover {
  position: fixed;
  z-index: 9700;
  width: min(390px, calc(100vw - 24px));
  max-height: min(430px, calc(100vh - 24px));
  overflow: auto;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--paper-popover);
  color: var(--text);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .46);
  font-size: 12px;
}

.writer-style-annotation-hover[hidden] {
  display: none;
}

.writer-style-annotation-hover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.writer-style-annotation-hover-head button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.writer-style-annotation-hover-type {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.writer-style-annotation-hover-type.critical {
  color: #fecaca;
  border-color: rgba(239, 68, 68, .50);
  background: rgba(239, 68, 68, .14);
}

.writer-style-annotation-hover-type.structure {
  color: #fed7aa;
  border-color: rgba(249, 115, 22, .50);
  background: rgba(249, 115, 22, .14);
}

.writer-style-annotation-hover-type.medium {
  color: #fde047;
  border-color: rgba(250, 204, 21, .48);
  background: rgba(250, 204, 21, .13);
}

.writer-style-annotation-hover-type.mechanical {
  color: #bfdbfe;
  border-color: rgba(59, 130, 246, .48);
  background: rgba(59, 130, 246, .13);
}

.writer-style-annotation-hover-type.optional {
  color: #86efac;
  border-color: rgba(34, 197, 94, .46);
  background: rgba(34, 197, 94, .12);
}

.writer-style-annotation-hover-severity {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.writer-style-annotation-hover-title {
  font-weight: 700;
  color: var(--text);
}

.writer-style-annotation-hover blockquote,
.writer-style-annotation-hover pre,
.writer-style-annotation-hover textarea,
.writer-style-annotation-hover-diff {
  margin: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, .035);
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  line-height: 1.42;
}

.writer-style-annotation-hover textarea {
  min-height: 74px;
  resize: vertical;
  width: 100%;
}

.writer-style-annotation-hover-diff del,
.writer-style-annotation-hover-diff ins {
  border-radius: 3px;
  padding: 0 2px;
  text-decoration: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.writer-style-annotation-hover-diff del {
  background: rgba(255, 146, 136, .18);
  color: #ffb1ab;
}

.writer-style-annotation-hover-diff ins {
  background: rgba(128, 211, 155, .18);
  color: #9ee4b5;
}

.writer-style-annotation-hover p,
.writer-style-annotation-hover ul {
  margin: 0;
  color: var(--muted);
  line-height: 1.42;
}

.writer-style-annotation-hover ul {
  padding-left: 18px;
}

.writer-style-annotation-hover-label,
.writer-style-annotation-hover-empty,
.writer-style-annotation-hover-status,
.writer-style-annotation-hover-validation {
  color: var(--muted);
  font-size: 11px;
}

.writer-style-annotation-hover-status {
  color: rgba(242, 243, 245, .78);
}

.writer-style-annotation-hover-validation:not(:empty) {
  color: #facc15;
}

.writer-style-annotation-hover-source {
  margin-left: 6px;
  color: rgba(242, 243, 245, .78);
  font-weight: 700;
}

.writer-style-annotation-hover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.writer-style-annotation-hover-actions button {
  border: 1px solid var(--border);
  border-radius: 5px;
  background: rgba(255, 255, 255, .055);
  color: var(--text);
  cursor: pointer;
  padding: 5px 8px;
  font-size: 12px;
}

.writer-style-annotation-hover-actions button:hover:not(:disabled) {
  background: rgba(242, 243, 245, .10);
}

.writer-style-annotation-hover-actions button[data-annotation-hover-action="accept"] {
  border-color: rgba(128, 211, 155, .38);
}

.writer-style-annotation-hover-actions button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

@media (max-width: 900px) {
  .editor-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) minmax(320px, 48vh);
  }

  .editor-shell.writer-rail-collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) 44px;
  }

  .writer-style-rail {
    grid-column: 1;
    grid-row: 3;
    border-left: 0;
    border-top: 1px solid var(--border);
    min-height: 280px;
  }
}

/* Audio widget in toolbar */
.editor-audio-container {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ribbon-view-command .ribbon-group-body {
  flex-wrap: nowrap !important;
}

.audio-widget.toolbar-compact {
  display: flex;
  align-items: center;
}

.audio-controls-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: nowrap;
}

.audio-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}
.audio-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.audio-slider-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  min-width: 175px;
  flex-shrink: 0 !important;
  vertical-align: middle;
}

.audio-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 105px;
  height: 6px;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.22);
  background-image: linear-gradient(to right, var(--accent, #6366f1) 0%, var(--accent, #6366f1) var(--slider-pct, 0%), rgba(255, 255, 255, 0.22) var(--slider-pct, 0%), rgba(255, 255, 255, 0.22) 100%);
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
}

.audio-slider:hover {
  background-image: linear-gradient(to right, var(--accent, #6366f1) 0%, var(--accent, #6366f1) var(--slider-pct, 0%), rgba(255, 255, 255, 0.35) var(--slider-pct, 0%), rgba(255, 255, 255, 0.35) 100%);
}

.audio-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--accent, #6366f1);
  box-shadow: 0 0 6px rgba(99, 102, 241, 0.85);
  cursor: pointer;
  border: 1.5px solid #ffffff;
}

.audio-slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.22);
  background-image: linear-gradient(to right, var(--accent, #6366f1) 0%, var(--accent, #6366f1) var(--slider-pct, 0%), rgba(255, 255, 255, 0.22) var(--slider-pct, 0%), rgba(255, 255, 255, 0.22) 100%);
}

.audio-slider::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent, #6366f1);
  border: 1.5px solid #ffffff;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(99, 102, 241, 0.85);
}

.audio-time {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--text, #e2e8f0);
  white-space: nowrap;
  flex-shrink: 0;
}

.audio-time__dur {
  color: var(--muted, #94a3b8);
}

.audio-select,
.audio-engine {
  color-scheme: dark;
  background-color: var(--ui-control, #12161b);
  color: var(--text, #f4f6f8);
  border: 1px solid var(--border, #2a313a);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.audio-select:hover,
.audio-engine:hover {
  background-color: var(--ui-control-hover, #1a2028);
  border-color: rgba(255, 255, 255, 0.25);
}

.audio-select:focus,
.audio-engine:focus {
  border-color: var(--accent, #8ab4f8);
  box-shadow: 0 0 0 1px var(--accent, #8ab4f8);
}

.audio-select option,
.audio-engine option {
  color-scheme: dark;
  background-color: #12161b !important;
  color: #f4f6f8 !important;
  padding: 4px 8px;
}

.audio-rate-wrapper {
  position: relative;
  flex-shrink: 0;
}

.audio-rate {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 11px;
}
.audio-rate:hover {
  color: var(--text);
}

.audio-cache-doc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.audio-cache-doc:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(99, 102, 241, 0.4);
}
.audio-cache-doc.caching {
  color: #818cf8;
  border-color: rgba(99, 102, 241, 0.5);
  background: rgba(99, 102, 241, 0.12);
}
.audio-cache-doc.caching .audio-cache-icon {
  animation: audio-cache-spin 1s linear infinite;
}
.audio-cache-doc.cached {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(52, 211, 153, 0.08);
}
@keyframes audio-cache-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.audio-spinner {
  display: none !important;
}

.audio-btn.play.is-loading {
  position: relative;
}

.audio-btn.play.is-loading::after {
  display: none !important;
}

.audio-rate-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  bottom: auto;
  right: 0;
  background: var(--panel, #1e1e2e);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 200px;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.audio-rate-menu.open {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.audio-rate-menu__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--muted, #94a3b8);
  font-weight: 500;
}
.audio-rate-menu__value {
  font-weight: 700;
  color: var(--text, #f8fafc);
  font-size: 12px;
}
.audio-rate-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.audio-rate-chip {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted, #94a3b8);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 11px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  line-height: 1.2;
}
.audio-rate-chip:hover {
  background: rgba(99, 102, 241, 0.15);
  color: var(--text, #f8fafc);
  border-color: rgba(99, 102, 241, 0.4);
}
.audio-rate-chip.active {
  background: #4f46e5;
  color: #ffffff;
  border-color: #4338ca;
  font-weight: 600;
}
.audio-rate-slider {
  width: 100%;
  accent-color: var(--accent, #4f46e5);
  cursor: pointer;
  margin-top: 2px;
}

/* ── AI settings modal ─────────────────────────────────────── */
.ai-settings-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.ai-settings-modal[hidden] { display: none; }
.ai-settings-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.ai-settings-panel { position: relative; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 10px; width: min(520px, 92vw); padding: 0; box-shadow: 0 18px 60px rgba(0,0,0,0.5); }
.ai-settings-panel header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.ai-settings-panel header h3 { margin: 0; font-size: 15px; }
.ai-settings-panel header button { background: transparent; border: none; color: var(--muted); font-size: 22px; cursor: pointer; }
.ai-settings-panel form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 16px 18px; }
.ai-settings-panel form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.ai-settings-panel form label.full { grid-column: 1 / -1; }
.ai-settings-panel form label.checkbox { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 6px; }
.ai-settings-panel input[type="text"], .ai-settings-panel input[type="number"], .ai-settings-panel select, .ai-settings-panel textarea {
  background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text); padding: 6px 8px; border-radius: 4px; font-size: 13px; font-family: inherit;
}
.ai-settings-panel .actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* ── Find panel ────────────────────────────────────────────── */
.find-panel { position: fixed; top: 70px; right: 20px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; z-index: 9000; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 6px 24px rgba(0,0,0,0.4); width: 320px; }
.find-panel[hidden] { display: none; }
.find-panel input { background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 4px; font-size: 13px; }
.find-panel-row { display: flex; gap: 6px; align-items: center; }
.find-panel-row input[type="checkbox"] { margin: 0 4px; }
.find-panel-row .find-count { font-size: 11px; color: var(--muted); margin-left: auto; }
.find-panel-row button { background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text); padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.find-panel-row button:hover { background: rgba(255,255,255,0.1); }

/* ── Context menu ──────────────────────────────────────────── */
.editor-ctx-menu { position: fixed; z-index: 9500; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 4px 0; box-shadow: 0 6px 24px rgba(0,0,0,0.4); min-width: 200px; font-size: 13px; }
.editor-ctx-menu[hidden] { display: none; }
.editor-ctx-menu button { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); padding: 6px 14px; cursor: pointer; }
.editor-ctx-menu button:hover { background: rgba(242,243,245,0.10); }
.editor-ctx-menu hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.editor-ctx-menu .ctx-icon { display: inline-block; width: 16px; opacity: 0.6; }

/* ── AI draft rail ─────────────────────────────────────────── */
.ai-draft-rail { position: fixed; right: 0; top: 60px; bottom: 0; width: 380px; background: var(--panel); border-left: 1px solid var(--border); padding: 14px; overflow-y: auto; z-index: 9700; }
.ai-draft-rail[hidden] { display: none; }
.ai-draft-rail h4 { margin: 0 0 8px; font-size: 13px; color: var(--accent); }
.ai-draft-rail .draft-original, .ai-draft-rail .draft-proposed { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
.ai-draft-rail .draft-actions { display: flex; gap: 6px; }

/* Citation picker — multi-select + favourites */
.citation-picker-result { display: flex; gap: 8px; align-items: flex-start; }
.citation-picker-result.selected { background: var(--neutral-selected); border-left: 3px solid var(--accent); padding-left: 13px; }
.cite-star { background: none; border: none; color: #888; cursor: pointer; font-size: 14px; padding: 0; line-height: 1; flex: 0 0 auto; align-self: flex-start; margin-top: 2px; }
.cite-star.on { color: #ffd700; }
.cite-result-body { flex: 1; min-width: 0; }
.cite-select { flex: 0 0 auto; align-self: flex-start; margin-top: 4px; cursor: pointer; }

/* Comments panel */
.comments-panel { position: fixed; right: 0; top: 60px; bottom: 0; width: 420px; max-width: min(420px, calc(100vw - 16px)); display: flex; flex-direction: column; overflow: hidden; background: var(--panel); border-left: 1px solid var(--border); padding: 0; color: var(--text); z-index: 9800; font-size: 13px; box-shadow: -12px 0 32px var(--ui-shadow); }
body:has(.comments-panel) .agent-chat-fab { right: 438px; }
@media (max-width: 520px) {
  body:has(.comments-panel) .agent-chat-fab { display: none; }
}
.comments-panel[hidden] { display: none; }
.comments-panel header { min-height: 62px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--panel-2); }
.comments-panel-title { min-width: 0; }
.comments-panel-title > span { display: block; margin-bottom: 2px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.comments-panel header h4 { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--text); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.comments-panel header h4 b { min-width: 22px; padding: 2px 6px; border: 1px solid rgba(255,255,255,0.10); border-radius: 999px; color: #b7bec8; background: rgba(255,255,255,0.045); font-size: 10px; text-align: center; }
.comments-panel-header-actions { min-width: 0; display: flex; justify-content: flex-end; align-items: center; gap: 5px; }
.comments-panel header button { min-height: 28px; background: transparent; border: 1px solid transparent; border-radius: 4px; color: #aeb6c1; cursor: pointer; }
.comments-panel header button:hover { border-color: rgba(255,255,255,0.10); background: rgba(255,255,255,0.045); color: #f1f3f5; }
.comments-panel header [data-review-profile],
.comments-panel header [data-review-notifications] { max-width: 124px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; border-color: rgba(255,255,255,0.09); padding: 4px 7px; color: #c4cad2; }
.comments-panel header [data-comments-close] { width: 28px; flex: 0 0 28px; padding: 0; border-color: rgba(255,255,255,0.08); font-size: 17px; line-height: 1; }
.review-auth-dialog { width: min(380px, calc(100vw - 32px)); border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); padding: 18px; }
.review-auth-dialog::backdrop { background: rgba(0, 0, 0, 0.62); }
.review-auth-dialog form, .review-auth-dialog label { display: grid; gap: 8px; }
.review-auth-dialog form { gap: 14px; }
.review-auth-dialog h3 { margin: 0; font-size: 15px; }
.review-auth-dialog input, .review-auth-dialog select { min-height: 34px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); padding: 6px 8px; }
.review-auth-dialog .review-auth-remember { grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.review-auth-dialog .review-auth-remember input { width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; accent-color: #668d89; }
.review-auth-dialog form > div { display: flex; justify-content: flex-end; gap: 8px; }
.review-auth-dialog form > div button { min-height: 32px; border: 1px solid rgba(255,255,255,0.13); border-radius: 4px; background: #20252b; color: #cbd1d9; padding: 6px 11px; cursor: pointer; }
.review-auth-dialog form > div button[value="submit"] { border-color: #668d89; background: #668d89; color: #f5f8f7; }
.review-auth-dialog form > div button:hover { border-color: #779b97; background: #283037; color: #f1f3f5; }
.review-auth-dialog form > div button[value="submit"]:hover { background: #739894; }

/* ── User Vault & Onboarding Modal ── */
.user-vault-dialog {
  width: min(540px, calc(100vw - 32px));
  max-height: 88vh;
  border: 1px solid var(--border, #2a313a);
  border-radius: 8px;
  background: var(--panel, #161b22);
  color: var(--text, #f0f6fc);
  padding: 22px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  overflow-y: auto;
}
.user-vault-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
}
.user-vault-dialog form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.user-vault-dialog h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.user-vault-notice {
  background: rgba(56, 139, 253, 0.1);
  border: 1px solid rgba(56, 139, 253, 0.25);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #c9d1d9;
}
.user-vault-notice strong {
  color: #58a6ff;
}
.user-vault-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.user-vault-field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-vault-field label {
  font-size: 12px;
  font-weight: 600;
  color: #c9d1d9;
}
.user-vault-status-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}
.user-vault-status-badge.configured {
  background: rgba(46, 160, 67, 0.2);
  color: #3fb950;
  border: 1px solid rgba(46, 160, 67, 0.4);
}
.user-vault-status-badge.unconfigured {
  background: rgba(110, 118, 129, 0.2);
  color: #8b949e;
  border: 1px solid rgba(110, 118, 129, 0.3);
}
.user-vault-input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.user-vault-input-group input {
  width: 100%;
  min-height: 36px;
  padding: 6px 36px 6px 10px;
  border: 1px solid var(--border, #30363d);
  border-radius: 6px;
  background: var(--surface, #0d1117);
  color: #f0f6fc;
  font-family: monospace;
  font-size: 12px;
}
.user-vault-input-group input:focus {
  border-color: #58a6ff;
  outline: 2px solid rgba(88, 166, 255, 0.25);
}
.user-vault-toggle-visibility {
  position: absolute;
  right: 8px;
  background: transparent;
  border: none;
  color: #8b949e;
  cursor: pointer;
  padding: 4px;
  font-size: 13px;
}
.user-vault-field small {
  font-size: 11px;
  color: #8b949e;
}
.user-vault-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}
.user-vault-actions button {
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.user-vault-btn-cancel {
  background: transparent;
  border: 1px solid #30363d;
  color: #c9d1d9;
}
.user-vault-btn-cancel:hover {
  background: #21262d;
  border-color: #8b949e;
}
.user-vault-btn-save {
  background: #238636;
  border: 1px solid #2ea043;
  color: #ffffff;
}
.user-vault-btn-save:hover {
  background: #2ea043;
}

.comments-toolbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.07); background: #15181d; }
.comments-toolbar input[type="search"] { grid-column: 1 / -1; min-width: 0; }
.comments-toolbar [data-comment-status], .comments-toolbar [data-comment-feedback] { grid-column: 1 / 3; }
.comments-toolbar [data-comment-type], .comments-toolbar [data-comment-round] { grid-column: 3 / 5; }
.comments-toolbar [data-comment-visibility] { grid-column: 1 / 5; }
.comments-toolbar input,
.comments-toolbar select,
.comments-toolbar button { min-width: 0; min-height: 31px; border: 1px solid rgba(255,255,255,0.10); border-radius: 4px; background: #1d2127; color: #cbd1d9; padding: 5px 8px; font-size: 11px; }
.comments-toolbar input:focus, .comments-toolbar select:focus, .comments-toolbar button:focus-visible { border-color: #6f918e; outline: 2px solid rgba(111,145,142,0.22); outline-offset: 1px; }
.comments-view-switch { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; grid-column: 1 / 5; }
.comments-view-switch button { flex: 1; }
.comments-view-switch button[aria-pressed="true"] { border-color: #668d89; background: rgba(102,141,137,0.15); color: #ecf4f3; }
.comments-list { min-height: 0; overflow-y: auto; padding: 10px 12px 18px; scrollbar-color: #444b54 transparent; }
.comment-item { --comment-kind: #7f8996; position: relative; background: #1a1e24; border: 1px solid rgba(255,255,255,0.085); border-left: 3px solid var(--comment-kind); border-radius: 5px; padding: 11px 12px; margin-bottom: 7px; cursor: pointer; }
.comment-item.comment-feedback-strength { --comment-kind: #65a47b; }
.comment-item.comment-feedback-major_revision { --comment-kind: #c57171; }
.comment-item.comment-feedback-minor_revision { --comment-kind: #bd9558; }
.comment-item.comment-feedback-question { --comment-kind: #718fad; }
.comment-item.comment-feedback-editorial_note { --comment-kind: #9482a5; }
.comment-item.comment-confidential { border-right-color: rgba(148,130,165,0.4); background: #1d1d24; }
.comment-item:hover { border-top-color: rgba(255,255,255,0.15); border-right-color: rgba(255,255,255,0.15); border-bottom-color: rgba(255,255,255,0.15); background: #1d2229; }
.comment-item.comment-item-active,
.llm-comment-note.comment-item-active {
  border-color: #779b97;
  background: #20272d;
  box-shadow: inset 0 0 0 1px rgba(119,155,151,0.28), 0 0 0 2px rgba(119,155,151,0.14);
}
.comment-item.resolved { opacity: 0.62; }
.comment-meta { margin-bottom: 7px; color: #8f99a6; font-size: 10px; line-height: 1.35; }
.comment-auto-status {
  color: #d9c39b;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 5px;
  padding: 6px 7px;
  margin-bottom: 7px;
  font-size: 11px;
  line-height: 1.35;
}
.comment-auto-status.applied {
  color: #b8f5cd;
  background: rgba(34, 197, 94, 0.09);
  border-color: rgba(34, 197, 94, 0.24);
}
.comment-quote { margin: 0 0 9px; padding: 7px 9px; border-left: 2px solid #59636f; color: #aeb6c1; background: rgba(255,255,255,0.025); font-size: 12px; font-style: normal; line-height: 1.45; }
.comment-body { color: #e5e8ec; margin-bottom: 10px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.comment-state-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.comment-state-row span { padding: 2px 6px; border: 1px solid rgba(255,255,255,0.07); border-radius: 3px; background: rgba(255,255,255,0.035); color: #9ca5b0; font-size: 10px; }
.comment-state-row .comment-kind-chip { border-color: color-mix(in srgb, var(--comment-kind) 55%, transparent); background: color-mix(in srgb, var(--comment-kind) 12%, transparent); color: color-mix(in srgb, var(--comment-kind) 70%, white); font-weight: 700; }
.comment-state-row .comment-workflow-chip { border-color: rgba(127,137,150,0.5); background: rgba(127,137,150,0.12); color: #d8dde3; font-weight: 700; }
.comment-mode-guidance .comment-state-row .comment-workflow-chip { border-color: rgba(189,149,88,0.58); background: rgba(189,149,88,0.13); color: #e2c792; }
.comment-mode-replacement .comment-state-row .comment-workflow-chip { border-color: rgba(101,164,123,0.62); background: rgba(101,164,123,0.14); color: #b8d8c3; }
.comment-state-row .comment-confidential-chip { border-color: rgba(148,130,165,0.45); background: rgba(148,130,165,0.13); color: #c5b8d0; }
.comment-anchor-conflict { margin: 0 0 8px; padding: 7px 8px; border: 1px solid rgba(197,113,113,0.35); border-radius: 4px; background: rgba(197,113,113,0.08); color: #d9a2a2; font-size: 11px; line-height: 1.4; }
.comment-anchor-conflict strong { display: block; margin-bottom: 2px; color: #e2b0b0; font-size: 10px; text-transform: uppercase; }
.comment-classification { margin: 8px 0; border-top: 1px solid rgba(255,255,255,0.065); padding-top: 7px; }
.comment-classification summary { color: #9ea7b2; cursor: pointer; font-size: 11px; }
.comment-classification > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding-top: 8px; }
.comment-classification label { display: grid; gap: 3px; color: #8f99a6; font-size: 10px; }
.comment-classification select, .comment-classification input { min-width: 0; min-height: 29px; border: 1px solid rgba(255,255,255,0.10); border-radius: 4px; background: #15191e; color: #d3d8df; padding: 4px 6px; font-size: 11px; }
.comment-classification button { align-self: end; min-height: 29px; border: 1px solid rgba(102,143,122,0.5); border-radius: 4px; background: transparent; color: #a8c9b3; cursor: pointer; }
.comment-thread { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 6px; }
.comment-reply { padding: 5px 0; font-size: 11px; line-height: 1.4; }
.comment-reply-composer { display: flex; gap: 5px; margin-top: 7px; }
.comment-reply-composer input { min-width: 0; min-height: 28px; flex: 1; border: 1px solid rgba(255,255,255,0.10); border-radius: 4px; background: #15191e; color: #e4e7eb; padding: 4px 7px; font-size: 11px; }
.comment-reply-composer input::placeholder { color: #727c88; }
.comment-reply-composer button { min-height: 28px; border: 1px solid rgba(255,255,255,0.11); border-radius: 4px; background: #232830; color: #c5cbd3; padding: 4px 9px; font-size: 11px; }
.comment-suggestion { color: #d9dde3; border-left: 2px solid #bd9558; padding: 4px 0 4px 9px; margin-bottom: 10px; white-space: pre-wrap; font-size: 12px; line-height: 1.5; }
.comment-suggestion-replacement { border-left-color: #65a47b; }
.comment-suggestion strong, .llm-comment-suggestion strong { display: block; margin-bottom: 3px; color: #c6a86f; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.comment-suggestion-replacement strong { color: #89b899; }
.comment-current-text { margin-bottom: 8px; padding: 6px 8px; border-left: 2px solid #a26868; background: rgba(197,113,113,0.07); color: #c9b3b3; }
.comment-proposed-text { padding: 6px 8px; background: rgba(101,164,123,0.07); }
.comment-actions { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.065); }
.comment-actions button { min-height: 27px; background: transparent; border: 1px solid rgba(255,255,255,0.10); color: #b9c0c9; padding: 3px 8px; border-radius: 4px; cursor: pointer; font-size: 11px; }
.comment-actions button:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.055); color: #f0f2f4; }
.comment-actions [data-publish], .comment-actions [data-resolve], .comment-actions [data-accept-suggestion] { border-color: rgba(102,143,122,0.55); color: #a8c9b3; }
.comment-actions [data-delete], .comment-actions [data-reject] { color: #cf9292; }
.comments-heading { font-size: 11px; color: var(--muted); margin: 12px 0 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.comments-empty { text-align: center; padding: 24px; color: var(--muted); font-size: 12px; }
.comments-load-more {
  width: 100%;
  min-height: 36px;
  margin: 10px 0 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 600;
}
.comments-load-more:hover { border-color: var(--accent); background: var(--hover); }
.editorial-dashboard { display: grid; gap: 9px; }
.editorial-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.editorial-metrics > div, .editorial-dashboard-section { border: 1px solid rgba(255,255,255,0.085); border-radius: 5px; background: #1a1e24; padding: 10px; }
.editorial-metrics strong { display: block; color: #edf0f3; font-size: 16px; }
.editorial-metrics span { color: #8f99a6; font-size: 10px; }
.editorial-dashboard-section h5 { margin: 0 0 7px; color: #dce0e5; font-size: 11px; }
.editorial-dashboard-section p, .editorial-dashboard-section ol, .editorial-dashboard-section ul { margin: 0; color: #aeb6c1; font-size: 11px; line-height: 1.5; }
.editorial-dashboard-section ol, .editorial-dashboard-section ul { padding-left: 18px; }
.editorial-summary-row { display: grid; gap: 2px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.06); color: #aeb6c1; font-size: 11px; }
.editorial-dashboard-warning { border-left: 3px solid #c57171; }
.editorial-cycle-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.editorial-cycle-actions button { min-height: 29px; border: 1px solid rgba(113,143,173,0.45); border-radius: 4px; background: transparent; color: #aebfd0; padding: 4px 8px; cursor: pointer; font-size: 11px; }
.response-matrix { display: grid; gap: 9px; }
.response-matrix-row { border: 1px solid rgba(255,255,255,0.085); border-left: 3px solid #718fad; border-radius: 5px; background: #1a1e24; padding: 11px; }
.response-matrix-row > header { min-height: 0; padding: 0 0 8px; border: 0; background: transparent; }
.response-matrix-row > header strong { color: #aeb6c1; font-size: 10px; }
.response-comment { margin: 0 0 9px; color: #e1e5e9; font-size: 12px; line-height: 1.45; }
.response-matrix-row label { display: grid; gap: 4px; margin-bottom: 7px; color: #8f99a6; font-size: 10px; }
.response-matrix-row textarea, .response-matrix-row input, .response-matrix-row select { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid rgba(255,255,255,0.10); border-radius: 4px; background: #15191e; color: #e1e5e9; padding: 6px 7px; font: inherit; font-size: 11px; }
.response-matrix-row textarea { min-height: 58px; resize: vertical; }
.response-matrix-fields { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 7px; }
.response-matrix-fields label:last-child { grid-column: 1 / -1; }
.response-matrix-row > button { min-height: 29px; border: 1px solid rgba(102,143,122,0.55); border-radius: 4px; background: transparent; color: #a8c9b3; padding: 4px 9px; cursor: pointer; }
.comments-review-score-card,
.llm-review-score-card {
  border: 1px solid rgba(255,255,255,0.09);
  border-left: 3px solid #668d89;
  border-radius: 5px;
  background: #1a1e24;
  padding: 10px 11px;
  margin: 10px 12px 0;
}
.llm-review-score-card {
  pointer-events: auto;
  margin-bottom: 12px;
}
.review-score-main {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}
.review-score-value {
  color: #dbe9e7;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0;
}
.review-score-label {
  color: var(--text);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.35;
}
.review-score-detail {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  margin-top: 5px;
}
/* Comment mark in the document */
.comment-mark { background: rgba(255,193,7,0.22); border-bottom: 1px dotted #ffc107; cursor: help; }
.comment-mark[data-comment-type="comment"] { background: rgba(113,143,173,0.16); border-bottom: 1px dotted rgba(113,143,173,0.95); }
.comment-mark[data-comment-type="suggestion"] { background: rgba(189,149,88,0.18); border-bottom: 1px dashed rgba(189,149,88,0.95); }
.comment-mark[data-comment-suggestion-mode="replacement"],
.comment-mark[data-comment-suggestion-mode="rewrite"],
.comment-mark[data-comment-suggestion-mode="direct-replacement"],
.comment-mark[data-comment-suggestion-mode="direct"] { background: rgba(101,164,123,0.20); border-bottom: 2px solid rgba(101,164,123,0.95); }
nav .comment-mark,
.article-outline .comment-mark,
#article-outline .comment-mark,
nav.toc .comment-mark,
[data-review-outline] .comment-mark { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.comment-mark[data-comment-feedback-kind="strength"] { background: rgba(34,197,94,0.20); border-bottom-color: rgba(34,197,94,0.9); }
.comment-mark[data-comment-feedback-kind="major_revision"] { background: rgba(239,68,68,0.20); border-bottom-color: rgba(239,68,68,0.92); }
.comment-mark[data-comment-feedback-kind="minor_revision"] { background: rgba(245,158,11,0.22); border-bottom-color: rgba(245,158,11,0.92); }
.comment-mark[data-comment-feedback-kind="question"] { background: rgba(59,130,246,0.20); border-bottom-color: rgba(59,130,246,0.9); }
.comment-mark[data-comment-feedback-kind="editorial_note"] { background: rgba(168,85,247,0.18); border-bottom-color: rgba(168,85,247,0.88); }
.comment-block { display: block; border-left: 3px solid rgba(255,193,7,0.72); padding-left: 10px; margin-left: -13px; }
.comment-mark[data-comment-resolved="1"] { background: transparent; border-bottom: 1px dotted rgba(255,193,7,0.3); }
.comment-mark.comment-active,
.comment-block.comment-active {
  background: rgba(242,243,245,0.18) !important;
  border-color: rgba(242,243,245,0.82) !important;
  box-shadow: 0 0 0 3px rgba(242,243,245,0.18);
  outline: 2px solid rgba(242,243,245,0.78);
  outline-offset: 3px;
}
.comment-jump-hit {
  animation: commentJumpPulse 2.2s ease-out;
  background: rgba(242,243,245,0.14) !important;
  box-shadow: 0 0 0 3px rgba(242,243,245,0.38), 0 0 0 8px rgba(242,243,245,0.10);
  outline: 2px solid rgba(242,243,245,0.82);
  outline-offset: 4px;
  scroll-margin-block: 40vh;
}
@keyframes commentJumpPulse {
  0% { box-shadow: 0 0 0 4px rgba(242,243,245,0.78), 0 0 0 12px rgba(242,243,245,0.18); }
  70% { box-shadow: 0 0 0 3px rgba(242,243,245,0.36), 0 0 0 8px rgba(242,243,245,0.08); }
  100% { box-shadow: 0 0 0 2px rgba(242,243,245,0), 0 0 0 0 rgba(242,243,245,0); }
}

.llm-comments-rail {
  position: absolute;
  top: 0;
  min-height: 100%;
  pointer-events: none;
  z-index: 35;
}
.llm-comments-rail[hidden] { display: none; }
.llm-comments-rail-inner {
  position: relative;
  min-height: 100%;
}
.llm-comment-note {
  --comment-kind: #7f8996;
  position: absolute;
  left: 0;
  width: 300px;
  max-height: 280px;
  overflow: auto;
  pointer-events: auto;
  background: rgba(24,27,32,0.98);
  border: 1px solid rgba(255,255,255,0.11);
  border-left: 3px solid var(--comment-kind);
  border-radius: 5px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.30);
  padding: 10px 11px;
  font-size: 12px;
  cursor: pointer;
}
.llm-comment-note.comment-feedback-strength { --comment-kind: #65a47b; }
.llm-comment-note.comment-feedback-major_revision { --comment-kind: #c57171; }
.llm-comment-note.comment-feedback-minor_revision { --comment-kind: #bd9558; }
.llm-comment-note.comment-feedback-question { --comment-kind: #718fad; }
.llm-comment-note.comment-feedback-editorial_note { --comment-kind: #9482a5; }
.llm-comment-note:hover {
  border-top-color: rgba(255,255,255,0.18);
  border-right-color: rgba(255,255,255,0.18);
  border-bottom-color: rgba(255,255,255,0.18);
  background: #1d2228;
}
.llm-comment-meta {
  margin-bottom: 6px;
  color: #98a2ae;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.llm-comment-quote {
  margin-bottom: 7px;
  padding-left: 8px;
  border-left: 2px solid #59636f;
  color: #adb5bf;
  background: rgba(255,255,255,0.025);
  font-style: normal;
  line-height: 1.45;
}
.llm-comment-body {
  color: var(--text);
  line-height: 1.45;
  white-space: pre-wrap;
}
.llm-comment-suggestion {
  margin-top: 8px;
  padding: 4px 0 4px 9px;
  border-left: 2px solid #bd9558;
  white-space: pre-wrap;
  line-height: 1.45;
}
.llm-comment-actions {
  display: flex;
  gap: 5px;
  margin-top: 9px;
}
.llm-comment-actions button {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
}
.llm-comment-actions button:hover {
  background: rgba(255,255,255,0.07);
}
.llm-comments-empty {
  position: absolute;
  top: 16px;
  left: 0;
  width: 300px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 7px;
  color: var(--muted);
  background: rgba(255,255,255,0.03);
  font-size: 12px;
}
@media (max-width: 600px) {
  .comments-panel { top: 48px; width: calc(100vw - 8px); max-width: none; }
  .comments-panel header { align-items: flex-start; }
  .comments-panel-header-actions { flex-wrap: wrap; }
  .comments-panel header [data-review-profile], .comments-panel header [data-review-notifications] { max-width: 94px; }
}
.highlight {
  background: rgba(250, 204, 21, 0.24);
  border-radius: 2px;
  padding: 0 2px;
}

.live-editor-highlight,
mark[data-live-format="highlight"] {
  background: rgba(250, 204, 21, 0.30);
  color: inherit;
  border-radius: 0.16em;
  padding: 0 0.08em;
}

u[data-live-format="underline"] {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

/* Track changes markers */
.track-insert { color: #22c55e; text-decoration: underline; text-decoration-color: rgba(34,197,94,0.5); }
.track-delete { color: #ef4444; text-decoration: line-through; text-decoration-color: rgba(239,68,68,0.7); background: rgba(239,68,68,0.08); }
/* Footnote styling */
sup.footnote-ref a { color: var(--accent); text-decoration: none; }
section.footnotes { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--border); font-size: 0.9em; }
section.footnotes h2 { font-size: 1.1em; margin-bottom: 0.5em; }
a.footnote-back { text-decoration: none; opacity: 0.5; }

/* Claim badges (Phase 5.1) */
.claims-panel { position: fixed; top: 70px; right: 20px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; z-index: 9000; width: 360px; max-height: 70vh; display: flex; flex-direction: column; box-shadow: 0 6px 24px rgba(0,0,0,0.4); color: var(--text); }
.claims-panel[hidden] { display: none; }
.claims-panel header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.claims-panel header h4 { margin: 0; font-size: 13px; }
.claims-panel header button { background: transparent; border: none; color: var(--text); font-size: 18px; cursor: pointer; }
.claims-actions { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.claims-actions button { background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text); padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.claims-list { overflow-y: auto; padding: 6px 8px; flex: 1; }
.claims-empty { padding: 12px; opacity: 0.7; font-size: 13px; }
.claim-item { border: 1px solid var(--border); border-radius: 6px; padding: 8px; margin-bottom: 6px; background: rgba(255,255,255,0.02); }
.claim-text { font-size: 12px; line-height: 1.4; margin-bottom: 6px; }
.claim-actions { display: flex; gap: 4px; }
.claim-actions button { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 2px 8px; border-radius: 3px; cursor: pointer; font-size: 11px; }
.claim-actions button:hover { background: rgba(255,255,255,0.08); }
/* In-iframe claim highlight (injected by preview CSS — this is the host fallback) */
.claim-unsubstantiated { border-bottom: 2px dashed #e06c75; background: rgba(224,108,117,0.08); }

/* Citation verifier (Phase 5.4) */
.cv-panel { position: fixed; top: 70px; right: 20px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; z-index: 9000; width: 380px; max-height: 70vh; display: flex; flex-direction: column; box-shadow: 0 6px 24px rgba(0,0,0,0.4); color: var(--text); }
.cv-panel[hidden] { display: none; }
.cv-panel header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.cv-panel header h4 { margin: 0; font-size: 13px; }
.cv-panel header button { background: transparent; border: none; color: var(--text); font-size: 18px; cursor: pointer; }
.cv-actions { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.cv-actions button { background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text); padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.cv-list { overflow-y: auto; padding: 6px 8px; flex: 1; }
.cv-empty { padding: 12px; opacity: 0.7; font-size: 13px; }
.cv-item { border: 1px solid var(--border); border-radius: 6px; padding: 8px; margin-bottom: 6px; background: rgba(255,255,255,0.02); }
.cv-text { font-size: 12px; font-family: ui-monospace, monospace; margin-bottom: 4px; }
.cv-issues { margin: 4px 0; padding-left: 18px; font-size: 11px; color: #f59e0b; }
.cv-buttons { display: flex; gap: 4px; }
.cv-buttons button { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 2px 8px; border-radius: 3px; cursor: pointer; font-size: 11px; }
.cv-buttons button:hover { background: rgba(255,255,255,0.08); }
a.citation-suspect { background: rgba(245,158,11,0.18); outline: 1px dashed #f59e0b; }

/* Version diff viewer (Phase 9.3) */
.vdiff-panel { position: fixed; top: 60px; right: 20px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; z-index: 9000; width: 720px; max-width: 90vw; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 6px 24px rgba(0,0,0,0.4); color: var(--text); }
.vdiff-panel[hidden] { display: none; }
.vdiff-panel header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.vdiff-panel header h4 { margin: 0; font-size: 13px; }
.vdiff-panel header button { background: transparent; border: none; color: var(--text); font-size: 18px; cursor: pointer; }
.vdiff-pickers { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 12px; flex-wrap: wrap; }
.vdiff-pickers select { background: rgba(255,255,255,0.05); color: var(--text); border: 1px solid var(--border); padding: 3px 6px; border-radius: 4px; }
.vdiff-pickers button { background: rgba(255,255,255,0.08); border: 1px solid var(--border); color: var(--text); padding: 4px 10px; border-radius: 4px; cursor: pointer; }
.vdiff-output { overflow: auto; padding: 8px 12px; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.4; flex: 1; white-space: pre; }
.vdiff-add { background: rgba(34,197,94,0.12); color: #22c55e; }
.vdiff-del { background: rgba(239,68,68,0.12); color: #ef4444; text-decoration: line-through; text-decoration-color: rgba(239,68,68,0.5); }
.vdiff-eq { opacity: 0.75; }

/* Context menu tabs + disabled state */
.editor-ctx-menu { min-width: 260px; max-width: 320px; padding: 0; }
.editor-ctx-menu .ctx-tabs { display: flex; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.15); }
.editor-ctx-menu .ctx-tabs button { flex: 1; padding: 6px 4px; font-size: 11px; text-align: center; border-radius: 0; border: none; color: var(--text); opacity: 0.7; }
.editor-ctx-menu .ctx-tabs button.active { opacity: 1; background: rgba(242,243,245,0.12); border-bottom: 2px solid #f2f3f5; }
.editor-ctx-menu .ctx-body { padding: 4px 0; max-height: 380px; overflow-y: auto; }
.editor-ctx-menu button.disabled { opacity: 0.4; cursor: not-allowed; }
.editor-ctx-menu button.disabled:hover { background: transparent; }
.annotation-proposal-panel {
  position: fixed;
  top: 74px;
  right: 20px;
  z-index: 9600;
  width: min(420px, calc(100vw - 40px));
  max-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 42px rgba(0, 0, 0, 0.42);
  color: var(--text);
  font-size: 13px;
}
.annotation-proposal-panel[hidden] { display: none; }
.annotation-proposal-panel header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.annotation-proposal-panel header div {
  display: grid;
  gap: 2px;
}
.annotation-proposal-panel header strong {
  font-size: 13px;
}
.annotation-proposal-panel header span,
.annotation-proposal-label {
  color: var(--muted);
  font-size: 11px;
}
.annotation-proposal-panel header button {
  align-self: start;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
}
.annotation-proposal-body {
  display: grid;
  gap: 8px;
  min-height: 0;
  padding: 12px;
  overflow: auto;
}
.annotation-proposal-body blockquote,
.annotation-proposal-body pre {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  line-height: 1.45;
}
.annotation-proposal-loading {
  color: var(--muted);
  font-size: 12px;
}
.annotation-proposal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.annotation-proposal-actions button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  padding: 5px 9px;
  font-size: 12px;
}
.annotation-proposal-actions button:hover {
  background: rgba(242, 243, 245, 0.10);
}

/* Dictionary popover */
.dict-popover { position: fixed; z-index: 9600; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 0; min-width: 240px; max-width: 340px; box-shadow: 0 8px 28px rgba(0,0,0,0.5); color: var(--text); font-size: 13px; }
.dict-popover[hidden] { display: none; }
.dict-popover header { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.dict-popover header h4 { margin: 0; font-size: 12px; flex: 1; }
.dict-popover .dict-backend { font-size: 10px; opacity: 0.7; text-transform: uppercase; padding: 1px 6px; background: rgba(242,243,245,0.10); border-radius: 3px; }
.dict-popover .dict-close { background: transparent; border: none; color: var(--text); font-size: 16px; cursor: pointer; padding: 0 4px; }
.dict-popover .dict-items { list-style: none; margin: 0; padding: 6px 0; }
.dict-popover .dict-items li { margin: 0; }
.dict-popover .dict-items button { width: 100%; text-align: left; background: transparent; border: none; color: var(--text); padding: 5px 12px; cursor: pointer; font-size: 13px; }
.dict-popover .dict-items button:hover:not(:disabled) { background: rgba(242,243,245,0.10); }
.dict-popover .dict-items button:disabled { cursor: default; opacity: 0.7; }
.dict-popover .dict-text { padding: 8px 12px; line-height: 1.5; }
/* AI backend selector in toolbar */
#aiBackendSelect,
#articleReviewJournalSelect { background: rgba(255,255,255,0.05); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-size: 12px; margin: 0 4px; }

.ribbon-command-group #aiBackendSelect,
.ribbon-command-group #articleReviewJournalSelect {
  min-height: 30px;
  margin: 0;
}

/* Audio widget additions */
.audio-btn.prev-section, .audio-btn.next-section { font-size: 10px; }
.audio-section-label { font-size: 11px; opacity: 0.75; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 4px; flex-shrink: 1; }

.runtime-capability-disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.writer-style-terminal.runtime-capability-disabled {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.025);
}

/* AI targeted editing */
#aiSelectionPromptBar {
  position: fixed;
  z-index: 100000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 18px 42px var(--ui-shadow);
  backdrop-filter: blur(12px);
  max-width: min(720px, calc(100vw - 24px));
}
#aiSelectionPromptBar[hidden] { display: none; }
#aiSelectionPromptBar input {
  width: 245px;
  min-width: 180px;
  border: 1px solid var(--border);
  background: var(--ui-control);
  color: var(--text);
  border-radius: 10px;
  padding: 7px 9px;
  font: 500 12px/1.2 ui-sans-serif, system-ui, sans-serif;
}
#aiSelectionPromptBar button {
  border: 1px solid rgba(242, 243, 245, 0.28);
  background: rgba(242, 243, 245, 0.10);
  color: var(--active-page-text);
  border-radius: 999px;
  padding: 7px 9px;
  font: 700 11px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
::highlight(ai-selection-target) {
  background: rgba(242, 243, 245, 0.24);
  color: inherit;
}
.ai-selection-target-fallback {
  background: rgba(242, 243, 245, 0.18);
  box-shadow: 0 0 0 3px rgba(242, 243, 245, 0.16);
  border-radius: 4px;
}
.ai-inline-editor-comment {
  margin: 8px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(242, 243, 245, 0.28);
  border-left: 4px solid rgba(242, 243, 245, 0.68);
  border-radius: 10px;
  background: rgba(242, 243, 245, 0.075);
  color: var(--text);
  font: 500 12px/1.45 ui-sans-serif, system-ui, sans-serif;
}
.ai-inline-editor-comment button {
  float: right;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
}
#aiDraftRail .ai-draft-meta {
  font-size: 11px;
  color: var(--muted);
  margin: 6px 0 8px;
}
#aiDraftRail .ai-draft-safety {
  font-size: 11px;
  margin: 6px 0 8px;
}
#aiDraftRail .ai-draft-safety.safe { color: #166534; }
#aiDraftRail .ai-draft-safety.warn { color: #92400e; }
#aiDraftRail .ai-draft-safety.block {
  color: #991b1b;
  font-weight: 700;
}
#aiDraftRail .ai-draft-history {
  margin-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  padding-top: 8px;
}
#aiDraftRail .ai-draft-history summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--muted);
}
#aiDraftRail .ai-draft-history-list {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  max-height: 160px;
  overflow: auto;
}
#aiDraftRail .ai-draft-history-item {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  padding: 6px;
  background: rgba(248, 250, 252, 0.72);
  font-size: 11px;
}
#aiDraftRail ins {
  background: rgba(34, 197, 94, 0.16);
  color: #166534;
  text-decoration: none;
  border-radius: 3px;
}
#aiDraftRail del {
  background: rgba(248, 113, 113, 0.16);
  color: #991b1b;
  text-decoration-thickness: 2px;
}
.foucauldian-readiness-notification {
  position: fixed;
  z-index: 10050;
  top: 20px;
  right: 20px;
  width: min(430px, calc(100vw - 40px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  padding: 18px 46px 18px 18px;
  border: 1px solid rgba(16, 185, 129, 0.38);
  border-radius: 8px;
  background: rgba(16, 16, 16, 0.97);
  color: #e8fff7;
  box-shadow: none;
}
.foucauldian-readiness-notification strong,
.foucauldian-readiness-notification span {
  display: block;
}
.foucauldian-readiness-notification strong {
  margin-bottom: 5px;
  color: #6ee7b7;
  font-size: 14px;
}
.foucauldian-readiness-notification span {
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.45;
}
.foucauldian-readiness-notification-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.foucauldian-readiness-notification button {
  border: 1px solid #10b981;
  border-radius: 8px;
  padding: 7px 11px;
  background: #059669;
  color: #fff;
  font: 700 12px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.foucauldian-readiness-notification button.secondary {
  border-color: rgba(148, 163, 184, 0.42);
  background: rgba(51, 65, 85, 0.7);
}
.foucauldian-readiness-notification button.dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  padding: 6px 9px;
  background: transparent;
  color: #94a3b8;
  font-size: 19px;
}
.foucauldian-watcher-upgrade-notification {
  border-color: rgba(245, 158, 11, 0.52);
}
.foucauldian-watcher-upgrade-notification strong {
  color: #fbbf24;
}
.foucauldian-watcher-upgrade-notification button:not(.dismiss) {
  border-color: #f59e0b;
  background: #b45309;
}

/* Primary Agent Chat workspace restored from the preserved pre-publish snapshot.
   The !important rules below must beat shared panel display rules that are
   intentionally declared later for every other workspace mode. */
.workspace-body.agent-mode {
  grid-template-columns: minmax(0, 1fr);
  background: var(--bg);
}

.workspace-body.agent-mode > :not(.agent-chat-dock):not(.agent-issues-dialog) { display: none !important; }
body:has(.workspace-body.agent-mode) .agent-chat-fab { display: none !important; }

.workspace-body.agent-mode > .agent-chat-dock {
  position: relative;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  z-index: auto;
}

.workspace-body.agent-mode > .agent-chat-dock .agent-chat-workbench {
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
}

.workspace-body.agent-mode > .agent-chat-dock #btnAgentChatClose {
  display: none;
}

.workspace-body.agent-mode:not(.agent-issues-mode) > .agent-issues-dialog,
.workspace-body.agent-mode.agent-issues-mode > .agent-chat-dock {
  display: none !important;
}

@media (max-width: 900px) {
  .workspace-body.agent-mode > .agent-chat-dock .agent-chat-workbench {
    grid-template-columns: 1fr;
    grid-template-rows: 72px minmax(0, 1fr);
  }
}

.agent-issues-dialog {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--panel);
  color: var(--text);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.agent-issues-dialog[hidden] { display: none; }

.agent-issues-header {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--ribbon-raised);
}

.agent-issues-header h2 { margin: 0; font-size: 15px; letter-spacing: 0; }
.agent-issues-summary { margin-top: 2px; color: var(--muted); font-size: 11px; }
.agent-issues-header-actions { display: flex; align-items: center; gap: 8px; }
.agent-issues-header button,
.agent-issues-toolbar button,
.agent-issue-detail button,
.agent-issue-create-form button {
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 10px;
  background: var(--ui-control);
  color: var(--text);
  cursor: pointer;
}
.agent-issues-header .icon-button { width: 32px; padding: 0; display: grid; place-items: center; }
.agent-issues-header .icon-button .icon { width: 15px; height: 15px; }
.agent-issues-header button:hover,
.agent-issues-toolbar button:hover,
.agent-issue-detail button:hover,
.agent-issue-create-form button:hover { border-color: var(--accent); background: var(--ui-control-hover); }
.agent-issue-create-form .primary-action,
.agent-issue-reply-form .primary-action { background: var(--active-page-bg); border-color: var(--accent); color: var(--active-page-text); }

.agent-quality-dashboard {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.agent-quality-summary { min-height: 38px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 600; list-style: none; }
.agent-quality-summary::-webkit-details-marker { display: none; }
.agent-quality-summary::after { content: '⌄'; color: var(--muted); font-size: 15px; transform: rotate(0); transition: transform 120ms ease; }
.agent-quality-dashboard[open] .agent-quality-summary::after { transform: rotate(180deg); }
.agent-quality-summary > span:last-child { margin-left: auto; font-size: 10px; font-weight: 500; }
.agent-quality-summary:hover { background: var(--ui-control-hover); color: var(--text); }
.agent-quality-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.agent-quality-content { border-top: 1px solid var(--border); }
.agent-quality-toolbar { min-height: 34px; padding: 4px 12px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; border-bottom: 1px solid var(--border); }
.agent-quality-windows { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; }
.agent-quality-windows button { min-height: 23px; border: 0; border-radius: 4px; padding: 3px 8px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 9px; }
.agent-quality-windows button:hover { background: var(--ui-control-hover); color: var(--text); }
.agent-quality-windows button.active { background: var(--active-page-bg); color: var(--active-page-text); }
.agent-quality-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.agent-quality-metrics > div { min-width: 0; min-height: 68px; padding: 10px 16px; display: grid; grid-template-rows: auto 1fr auto; gap: 2px; border-right: 1px solid var(--border); }
.agent-quality-metrics > div:last-child { border-right: 0; }
.agent-quality-metrics span { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.agent-quality-dashboard strong { align-self: center; color: var(--text); font-size: 19px; line-height: 1.1; letter-spacing: 0; }
.agent-quality-dashboard small { color: var(--muted); font-size: 9px; line-height: 1.25; overflow-wrap: anywhere; }

.agent-issues-layout { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(270px, 300px) minmax(0, 1fr) minmax(200px, 240px); }
.agent-issues-sidebar { min-width: 0; min-height: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--bg); }
.agent-issues-toolbar { padding: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border); }
.agent-issues-filters { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; }
.agent-issues-filters button { min-height: 27px; border: 0; background: transparent; color: var(--muted); padding: 4px 8px; }
.agent-issues-filters button.active { background: var(--active-page-bg); color: var(--active-page-text); }
.agent-issues-query { display: grid; gap: 8px; padding: 0 10px 10px; border-bottom: 1px solid var(--border); }
.agent-issues-search { min-height: 32px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid var(--border); border-radius: 5px; background: var(--ui-control); color: var(--muted); }
.agent-issues-search:focus-within { border-color: var(--accent); }
.agent-issues-search .icon { width: 14px; height: 14px; flex: 0 0 auto; }
.agent-issues-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 11px; }
.agent-issues-select-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.agent-issues-select-filters label { display: grid; gap: 3px; min-width: 0; color: var(--muted); font-size: 10px; }
.agent-issues-select-filters select { width: 100%; min-width: 0; height: 28px; border: 1px solid var(--border); border-radius: 5px; background: var(--ui-control); color: var(--text); padding: 0 5px; font: inherit; font-size: 10px; }
.agent-issues-list { min-height: 0; overflow: auto; padding: 6px; }
.agent-issue-row { width: 100%; display: grid; gap: 6px; text-align: left; padding: 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); cursor: pointer; }
.agent-issue-row:hover { background: var(--ui-control); }
.agent-issue-row.active { border-color: var(--accent); background: var(--active-page-bg); color: var(--active-page-text); }
.agent-issue-row-title { font-size: 12px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.agent-issue-row-meta { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.agent-issue-assigned { color: var(--accent-dark); }
.agent-issue-stale { padding: 1px 5px; border-radius: 999px; background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.agent-issue-status { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.agent-issue-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.agent-issue-status.closed::before { background: var(--muted); }
.agent-issue-list-empty, .agent-issue-empty { color: var(--muted); font-size: 12px; padding: 24px; }

.agent-issue-create-form { padding: 12px; display: grid; gap: 10px; border-bottom: 1px solid var(--border); overflow: auto; }
.agent-issue-create-form[hidden] { display: none; }
.agent-issue-create-form label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.agent-issue-advanced-fields { border: 1px solid var(--border); border-radius: 6px; background: var(--ui-control); }
.agent-issue-advanced-fields > summary { min-height: 34px; display: flex; align-items: center; padding: 0 10px; color: var(--text); cursor: pointer; font-size: 10px; font-weight: 600; list-style: none; }
.agent-issue-advanced-fields > summary::-webkit-details-marker { display: none; }
.agent-issue-advanced-fields > summary::after { content: '⌄'; margin-left: auto; color: var(--muted); font-size: 14px; transition: transform 120ms ease; }
.agent-issue-advanced-fields[open] > summary::after { transform: rotate(180deg); }
.agent-issue-advanced-fields > div { display: grid; gap: 9px; padding: 10px; border-top: 1px solid var(--border); }
.agent-issue-create-form input,
.agent-issue-create-form textarea,
.agent-issue-reply-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text);
  padding: 8px 9px;
  resize: vertical;
  font: inherit;
  line-height: 1.4;
}
.agent-issue-form-actions { display: flex; justify-content: flex-end; gap: 8px; }

.agent-issue-detail { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--panel); }
.agent-issue-detail-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--border); display: grid; gap: 9px; }
.agent-issue-detail-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.agent-issue-detail h3 { margin: 0; font-size: 17px; line-height: 1.35; letter-spacing: 0; }
.agent-issue-detail-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.agent-issue-opener-state { color: var(--muted); font-size: 10px; line-height: 1.4; text-align: right; }
.agent-issue-detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.agent-issue-topic,
.agent-issue-owner-badge { min-height: 20px; display: inline-flex; align-items: center; padding: 2px 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--ui-control); color: var(--text); }
.agent-issue-owner-badge { border-color: var(--accent); background: var(--active-page-bg); color: var(--accent-dark); }
.agent-issue-owner-badge { color: var(--active-page-text); }
.agent-issue-owner-badge.muted { border-color: var(--border); background: transparent; color: var(--muted); }
.agent-issue-help { padding: 9px 10px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--text); font-size: 11px; line-height: 1.45; }
.agent-issue-resolution-form { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--accent); border-radius: 6px; background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.agent-issue-resolution-form[hidden] { display: none; }
.agent-issue-resolution-form label { color: var(--text); font-size: 11px; font-weight: 700; }
.agent-issue-resolution-form textarea,
.agent-issue-resolution-form select { width: 100%; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); padding: 9px; resize: vertical; font: inherit; line-height: 1.45; }
.agent-issue-resolution-actions { display: flex; justify-content: flex-end; gap: 8px; }
.agent-issue-discussion { min-height: 0; flex: 1; overflow: auto; padding: 0 18px; }
.agent-issue-message { padding: 15px 0; border-bottom: 1px solid var(--border); }
.agent-issue-message-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: var(--muted); font-size: 10px; margin-bottom: 7px; overflow-wrap: anywhere; }
.agent-issue-message-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.55; }
.agent-answer-accepted { margin: 10px 0; padding: 14px; border: 1px solid var(--success); border-radius: 6px; background: color-mix(in srgb, var(--success) 12%, var(--panel)); }
.agent-accepted-badge { padding: 2px 6px; border-radius: 999px; background: var(--success); color: var(--bg); font-weight: 700; }
.agent-accept-answer { margin-top: 10px; border-color: var(--success) !important; color: var(--success) !important; }
.agent-response-intent { padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-dark); font-weight: 700; text-transform: capitalize; }
.agent-targeted-response { display: grid; gap: 9px; margin: 0; }
.agent-targeted-response > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
.agent-targeted-response dt { color: var(--muted); font-size: 10px; font-weight: 700; }
.agent-targeted-response dd { margin: 0; color: var(--text); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-issue-event { margin: 12px 0; padding: 12px; border: 1px solid var(--success); border-radius: 6px; background: color-mix(in srgb, var(--success) 10%, var(--panel)); }
.agent-issue-event .agent-issue-message-body { color: var(--text); }
.agent-issue-event-label { margin-right: 2px; padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); font-weight: 700; }
.agent-issue-reply-form { display: grid; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--border); background: var(--ribbon-raised); }
.agent-issue-reply-actions { display: flex; justify-content: flex-end; }
.agent-targeted-reply-form { max-height: 44%; overflow: auto; }
.agent-reply-target { display: grid; gap: 3px; padding: 8px 10px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.agent-reply-target strong { color: var(--accent-dark); font-size: 10px; }
.agent-reply-target span { color: var(--text); font-size: 11px; line-height: 1.4; }
.agent-targeted-reply-grid { display: grid; grid-template-columns: minmax(150px, 0.7fr) minmax(220px, 1.3fr); gap: 8px 10px; }
.agent-targeted-reply-grid label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; }
.agent-targeted-reply-grid label.wide { grid-column: 1 / -1; }
.agent-targeted-reply-grid input,
.agent-targeted-reply-grid select,
.agent-targeted-reply-grid textarea { width: 100%; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); padding: 7px 8px; resize: vertical; font: inherit; line-height: 1.4; }
.agent-issue-closed-note { padding: 12px 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; background: var(--ribbon-raised); }
.agent-issue-error { color: var(--error); font-size: 11px; padding: 10px; }

.agent-issue-activity {
  min-width: 0;
  overflow: auto;
  border-left: 1px solid var(--border);
  background: var(--bg);
  padding: 16px 14px;
}
.agent-issue-activity-empty { color: var(--muted); font-size: 11px; padding: 8px 2px; }
.agent-issue-activity-section { padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid var(--border); }
.agent-issue-activity-section h3 { margin: 0 0 11px; font-size: 11px; letter-spacing: 0; }
.agent-issue-facts { display: grid; gap: 10px; margin: 0; }
.agent-issue-facts > div { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.agent-issue-facts dt { color: var(--muted); font-size: 10px; }
.agent-issue-facts dd { margin: 0; color: var(--text); font-size: 10px; text-align: right; }
.agent-issue-participants { display: grid; gap: 9px; }
.agent-issue-participants > div { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; font-size: 10px; }
.agent-issue-participants > div > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-issue-routing { display: grid; gap: 8px; }
.agent-issue-routing > div { display: flex; flex-wrap: wrap; gap: 5px; }
.agent-issue-routing > div > span { padding: 2px 6px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: 9px; }
.agent-issue-routing p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.agent-participant-avatar { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--ui-control); color: var(--text); font-weight: 700; }
.agent-issue-muted { color: var(--muted); font-size: 10px; }
.agent-issue-live-state { display: flex; align-items: center; gap: 8px; color: var(--accent-dark); font-size: 10px; border-bottom: 0; }
.agent-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: none; }

.ribbon-tabs .sidebar-action--agent.has-unread::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: none;
}

.agent-ribbon-context-copy { min-width: 180px; display: grid; gap: 2px; padding: 2px 6px; }
.agent-ribbon-context-copy strong { color: var(--text); font-size: 11px; font-weight: 600; }
.agent-ribbon-context-copy > span { color: var(--muted); font-size: 10px; }

@media (max-width: 1050px) {
  .agent-issues-layout { grid-template-columns: minmax(250px, 32%) minmax(0, 1fr); }
  .agent-issue-activity { display: none; }
}

@media (max-width: 760px) {
  .agent-quality-summary { padding-inline: 10px; }
  .agent-quality-toolbar { padding: 4px 10px; }
  .agent-quality-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-quality-metrics > div { min-height: 58px; padding: 8px 12px; }
  .agent-quality-metrics > div:nth-child(2) { border-right: 0; }
  .agent-quality-metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .agent-issues-layout { grid-template-columns: 1fr; grid-template-rows: minmax(190px, 38%) minmax(0, 1fr); }
  .agent-issues-sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
  .agent-issues-select-filters { grid-template-columns: repeat(3, minmax(72px, 1fr)); overflow-x: auto; }
  .agent-issue-detail { overflow: auto; }
  .agent-issue-discussion { flex: 0 0 auto; overflow: visible; }
  .agent-issue-detail-title-row { align-items: stretch; flex-direction: column; }
  .agent-issue-detail-actions { justify-content: flex-start; }
  .agent-issue-opener-state { text-align: left; }
  .agent-issue-resolution-actions { align-items: stretch; flex-direction: column-reverse; }
  .agent-issue-resolution-actions button { width: 100%; }
  .agent-targeted-reply-form { max-height: 48%; padding: 10px 12px; }
  .agent-targeted-reply-grid { grid-template-columns: 1fr; }
  .agent-targeted-reply-grid label.wide { grid-column: auto; }
}

.analysis-health-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: #171717;
  color: #dedede;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.analysis-health-badge--blocked,
.analysis-health-badge--error { border-left: 2px solid #d28b8f; }
.analysis-health-badge--ready-with-warnings,
.analysis-health-badge--stale { border-left: 2px solid #c5a66f; }
.analysis-health-badge--complete { border-left: 2px solid #b9b9b9; }
.analysis-health-badge--not-generated,
.analysis-health-badge--missing,
.analysis-health-badge--loading,
.analysis-health-badge--unassessed { color: rgba(242, 243, 245, 0.68); }

.ribbon-tool-button[data-analysis-status="blocked"],
.ribbon-tool-button[data-analysis-status="not_generated"] { border-color: rgba(210,139,143,0.52); }
.ribbon-tool-button[data-analysis-status="ready_with_warnings"],
.ribbon-tool-button[data-analysis-status="stale"] { border-color: rgba(197,166,111,0.52); }
#revalidateAnalysisButton[data-running="true"],
#revalidateAllAnalysisButton[data-running="true"] { border-color: rgba(222,222,222,0.48); color: #f2f2f2; }

.analysis-batch-status {
  align-self: center;
  max-width: 150px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.15;
  white-space: normal;
}
.analysis-batch-status[data-status="complete"] { color: #b9b9b9; }
.analysis-batch-status[data-status="warning"] { color: #c5a66f; }
.analysis-batch-status[data-status="error"] { color: #d28b8f; }

/* ==========================================================================
   Enhanced Zen Fullscreen Editing Mode (Canvas Only without Ribbon)
   ========================================================================== */
body.editor-zen-mode,
html.editor-zen-mode,
.app-shell.editor-zen-mode {
  overflow: hidden !important;
}

.app-shell.editor-zen-mode .workspace-header,
.app-shell.editor-zen-mode .workspace-ribbon,
.app-shell[data-editor-zen-mode="true"] .workspace-header,
.app-shell[data-editor-zen-mode="true"] .workspace-ribbon {
  display: none !important;
}

.app-shell.editor-zen-mode .workspace {
  grid-template-rows: 1fr !important;
  padding: 0 !important;
  height: 100vh !important;
  min-height: 100vh !important;
}

.app-shell.editor-zen-mode #editorWorkspaceContainer,
.app-shell.editor-zen-mode .editor-split-container {
  height: 100vh !important;
  max-height: 100vh !important;
}

.floating-zen-exit-button {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(23, 25, 29, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: var(--text, #eef2f7);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transition: opacity 0.3s ease, transform 0.2s ease, background 0.2s ease;
  transform: translateX(-50%);
  opacity: 0.85;
}

.floating-zen-exit-button[hidden] {
  display: none !important;
}

.floating-zen-exit-button:hover {
  opacity: 1;
  background: rgba(35, 39, 47, 0.96);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateX(-50%) translateY(-1px);
}

.floating-zen-exit-button .zen-exit-kbd {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--muted, #a4adba);
}

.spelling-popover,
.spelling-autocomplete,
.spelling-dictionary-panel {
  position: fixed;
  z-index: 100000;
  width: min(280px, calc(100vw - 24px));
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 18px 48px var(--ui-shadow);
}

.spelling-popover[hidden],
.spelling-autocomplete[hidden],
.spelling-dictionary-panel[hidden] {
  display: none !important;
}

.spelling-popover-title {
  padding: 4px 6px 7px;
  color: #f1b8bf;
  font-weight: 650;
}

.spelling-popover-list,
.spelling-popover-actions,
.spelling-autocomplete {
  display: grid;
  gap: 4px;
}

.spelling-popover-actions {
  grid-template-columns: 1fr 1fr;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 6px;
}

.spelling-popover button,
.spelling-autocomplete button,
.spelling-dictionary-panel button,
.spelling-dictionary-panel input,
.spelling-dictionary-panel select {
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.spelling-popover button:hover,
.spelling-popover button:focus-visible,
.spelling-autocomplete button:hover,
.spelling-autocomplete button:focus-visible,
.spelling-dictionary-panel button:hover,
.spelling-dictionary-panel button:focus-visible,
.editor-ctx-menu [data-ctx^="spell:"]:hover,
.editor-ctx-menu [data-ctx^="spell:"]:focus-visible {
  border-color: rgba(242, 243, 245, 0.28);
  background: rgba(242, 243, 245, 0.10);
  outline: none;
}

.spelling-dictionary-panel {
  top: 72px;
  right: 18px;
  width: min(460px, calc(100vw - 36px));
  max-height: min(640px, calc(100vh - 110px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  overflow: hidden;
}

.spelling-dictionary-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.spelling-dictionary-panel form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 104px 56px;
  gap: 6px;
}

.spelling-dictionary-panel input,
.spelling-dictionary-panel select,
.spelling-dictionary-transfer textarea {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
}

.spelling-dictionary-panel section {
  min-height: 0;
  overflow: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 8px;
}

.spelling-dictionary-panel h4 {
  margin: 0 0 6px;
  color: var(--neutral-muted, #a4adba);
  font-size: 12px;
}

.spelling-dictionary-panel ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spelling-dictionary-panel li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 32px;
}

.spelling-dictionary-panel li.empty {
  display: block;
  color: var(--neutral-muted, #a4adba);
}

.spelling-dictionary-panel li span,
.spelling-dictionary-panel li em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spelling-dictionary-panel li em {
  color: var(--neutral-text, #f2f3f5);
  font-style: normal;
}

.spelling-dictionary-transfer {
  display: grid;
  gap: 6px;
  overflow: visible;
}

.spelling-dictionary-transfer textarea {
  min-height: 74px;
  max-height: 140px;
  resize: vertical;
  border-radius: 6px;
  padding: 8px;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.spelling-dictionary-transfer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.spelling-dictionary-transfer p {
  min-height: 16px;
  margin: 0;
  color: var(--neutral-muted, #a4adba);
  font-size: 12px;
}

@media (max-width: 640px) {
  .spelling-dictionary-panel {
    left: 12px;
    right: 12px;
    width: auto;
  }

  .spelling-dictionary-panel form {
    grid-template-columns: 1fr;
  }

  .spelling-dictionary-panel li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .spelling-dictionary-panel li em {
    grid-column: 1 / -1;
  }
}

/* Edit review launcher */
.edit-review-launcher[hidden],
.edit-all-reviews-button[hidden],
.edit-review-launcher-item[hidden],
.data-source-launcher-group[hidden] {
  display: none !important;
}

.workspace-body.edit-launcher-open .document-panel {
  background: var(--neutral-canvas, #050608);
}

.workspace-body.data-launcher-open .document-panel {
  background: var(--neutral-canvas, #050608);
}

.app-shell.data-launcher-mode .ribbon-command-row {
  display: none;
}

.edit-review-launcher {
  display: grid;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: var(--neutral-canvas, #050608);
  color: var(--neutral-text, #f2f3f5);
}

.edit-review-launcher-inner {
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 5vh, 56px) clamp(18px, 4vw, 48px) 48px;
}

.edit-review-launcher-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--neutral-border, rgba(242, 243, 245, 0.14));
}

.edit-review-launcher-eyebrow {
  margin-bottom: 7px;
  color: var(--neutral-muted, rgba(242, 243, 245, 0.68));
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0;
}

.edit-review-launcher h2 {
  margin: 0;
  color: var(--neutral-active-text, #fff);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
}

.edit-review-launcher-header p {
  margin: 7px 0 0;
  color: var(--neutral-muted, rgba(242, 243, 245, 0.68));
  font-size: 13px;
}

.edit-review-launcher-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(320px, 40vw);
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--neutral-border, rgba(242, 243, 245, 0.14));
  border-radius: 6px;
  background: var(--neutral-panel, rgba(242, 243, 245, 0.045));
  color: var(--neutral-muted, rgba(242, 243, 245, 0.68));
}

.edit-review-launcher-search:focus-within {
  border-color: var(--neutral-border-strong, rgba(242, 243, 245, 0.28));
}

.edit-review-launcher-search .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.edit-review-launcher-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--neutral-text, #f2f3f5);
  font: inherit;
  font-size: 13px;
}

.workspace-launcher-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.workspace-launcher-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--neutral-border, rgba(242, 243, 245, 0.14));
  border-radius: 999px;
  background: var(--neutral-panel, rgba(242, 243, 245, 0.045));
  color: var(--neutral-muted, rgba(242, 243, 245, 0.76));
  font-size: 11px;
  white-space: nowrap;
}

.edit-review-launcher-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 20px;
}

.edit-review-launcher-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 72px;
  padding: 12px 13px;
  border: 1px solid var(--neutral-border, rgba(242, 243, 245, 0.14));
  border-radius: 6px;
  background: transparent;
  color: var(--neutral-text, #f2f3f5);
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.edit-review-launcher-item:hover:not(:disabled),
.edit-review-launcher-item:focus-visible {
  border-color: var(--neutral-border-strong, rgba(242, 243, 245, 0.28));
  background: var(--neutral-raised, rgba(242, 243, 245, 0.075));
  outline: none;
}

.edit-review-launcher-item.is-last-opened {
  background: var(--neutral-panel, rgba(242, 243, 245, 0.045));
}

.edit-review-launcher-item:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.edit-review-launcher-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--neutral-border, rgba(242, 243, 245, 0.14));
  border-radius: 5px;
  background: var(--neutral-panel, rgba(242, 243, 245, 0.045));
}

.edit-review-launcher-icon .icon {
  width: 16px;
  height: 16px;
}

.edit-review-launcher-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.edit-review-launcher-copy strong,
.edit-review-launcher-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-review-launcher-copy strong {
  color: var(--neutral-active-text, #fff);
  font-size: 13px;
  font-weight: 650;
}

.edit-review-launcher-copy span,
.edit-review-launcher-state {
  color: var(--neutral-muted, rgba(242, 243, 245, 0.68));
  font-size: 11px;
}

.edit-review-launcher-state {
  justify-self: end;
  padding-left: 8px;
  white-space: nowrap;
}

.edit-review-launcher-state.is-ready {
  color: var(--neutral-text, #f2f3f5);
}

.edit-review-launcher-empty {
  margin-top: 20px;
  padding: 32px 18px;
  border-top: 1px solid var(--neutral-border, rgba(242, 243, 245, 0.14));
  color: var(--neutral-muted, rgba(242, 243, 245, 0.68));
  text-align: center;
  font-size: 13px;
}

.ribbon-review-menu {
  align-items: stretch;
}

.edit-all-reviews-button {
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  align-self: stretch;
  min-height: 36px;
}

/* Data source launcher reuses the Edit launcher geometry and neutral palette. */
.data-source-launcher-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: min(430px, 48vw);
}

.data-source-launcher-actions .edit-review-launcher-search {
  width: min(320px, 34vw);
}

.data-source-launcher-browse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--neutral-border-strong, rgba(242, 243, 245, 0.28));
  border-radius: 6px;
  background: var(--neutral-panel, rgba(242, 243, 245, 0.045));
  color: var(--neutral-active-text, #fff);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.data-source-launcher-browse:hover,
.data-source-launcher-browse:focus-visible {
  background: var(--neutral-raised, rgba(242, 243, 245, 0.075));
  outline: none;
}

.data-source-launcher-browse .icon {
  width: 15px;
  height: 15px;
}

.data-source-launcher-status {
  min-height: 20px;
  padding-top: 10px;
  color: var(--neutral-muted, rgba(242, 243, 245, 0.68));
  font-size: 12px;
}

.data-source-launcher-feedback {
  min-height: 30px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.data-source-launcher-feedback .analysis-batch-status {
  max-width: min(440px, 52%);
  padding-top: 10px;
  text-align: right;
}

.data-source-launcher-status.is-error {
  color: var(--neutral-text, #f2f3f5);
}

.data-source-launcher-list {
  display: grid;
  gap: 22px;
}

.data-source-launcher-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
  border-bottom: 1px solid var(--neutral-border, rgba(242, 243, 245, 0.14));
}

.data-source-launcher-group-heading h3,
.data-source-launcher-group-heading span {
  margin: 0;
  color: var(--neutral-muted, rgba(242, 243, 245, 0.68));
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0;
}

.data-source-launcher-grid {
  padding-top: 10px;
}

.data-source-launcher-item.is-active {
  border-color: var(--neutral-border-strong, rgba(242, 243, 245, 0.28));
  background: var(--neutral-raised, rgba(242, 243, 245, 0.075));
}

.data-source-launcher-item.is-recent:not(.is-active) {
  background: var(--neutral-panel, rgba(242, 243, 245, 0.045));
}

.data-source-launcher[data-busy="true"] .data-source-launcher-list {
  opacity: 0.64;
}

.data-all-sources-button {
  min-width: max-content;
}

/* ── Mobile Editor Experience & Touch Focus ─────────────────── */
.mobile-editor-bar {
  display: none;
}

@media (max-width: 768px) {
  .mobile-editor-bar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 12px;
    background: var(--panel, #12161b);
    border-bottom: 1px solid var(--border, #2a313a);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  }

  .mobile-mode-btn {
    flex: 1;
    min-height: 36px;
    padding: 4px 8px;
    border: 1px solid var(--border, #2a313a);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text, #f4f6f8);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s ease;
  }

  .mobile-mode-btn:active {
    transform: scale(0.97);
  }

  .mobile-mode-btn.active {
    background: var(--accent, #8ab4f8) !important;
    color: #0b0d10 !important;
    border-color: var(--accent, #8ab4f8) !important;
  }

  .mobile-save-btn {
    background: rgba(74, 222, 128, 0.15) !important;
    border-color: rgba(74, 222, 128, 0.4) !important;
    color: #4ade80 !important;
    flex: 0 0 auto;
    min-width: 76px;
  }

  .mobile-save-btn:active {
    background: rgba(74, 222, 128, 0.3) !important;
  }

  /* Full-width responsive panels on mobile instead of cramped split */
  .editor-shell.split-view .editor-source-pane {
    display: none !important;
  }
  .editor-shell.split-view .editor-preview-pane {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .editor-shell.raw-only .editor-source-pane {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .editor-shell.raw-only .editor-preview-pane {
    display: none !important;
  }
  .editor-shell.preview-only .editor-source-pane {
    display: none !important;
  }
  .editor-shell.preview-only .editor-preview-pane {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ribbon scrolling on mobile so all controls are accessible */
  .ribbon-command-row {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .ribbon-view-command .ribbon-group-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
  }
}

/* ── User Profile & Sign Out Controls ───────────────────────── */
.user-profile-control {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.user-profile-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 140px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border, #2a313a);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text, #f4f6f8);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.15s ease;
}

.user-profile-button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent, #8ab4f8);
}

.user-profile-avatar {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.user-profile-avatar.initials {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(138, 180, 248, 0.2);
  color: #8ab4f8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid rgba(138, 180, 248, 0.45);
}

.user-profile-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-profile-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 220px;
  background: var(--panel, #12161b);
  border: 1px solid var(--border, #2a313a);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  padding: 12px;
  z-index: 10500;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-profile-menu[hidden] {
  display: none !important;
}

.user-profile-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-profile-display-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #f4f6f8);
}

.user-profile-email {
  font-size: 11px;
  color: var(--muted, #9aa5b5);
  word-break: break-all;
}

.user-profile-role-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(138, 180, 248, 0.15);
  color: #8ab4f8;
  border: 1px solid rgba(138, 180, 248, 0.3);
  margin-top: 4px;
}

.user-profile-divider {
  height: 1px;
  background: var(--border, #2a313a);
  margin: 4px 0;
}

.user-profile-action {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text, #f4f6f8);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}

.sign-out-action {
  color: #f87171 !important;
}

.sign-out-action:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}


/* ── Citation & Quote Highlight on Superscript Click ────────── */
.citation-quote-highlight {
  background-color: rgba(250, 204, 21, 0.18) !important;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.4) !important;
  border-radius: 4px !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

.citation-active-anchor {
  outline: 2px solid #8ab4f8 !important;
  outline-offset: 2px !important;
  background: rgba(138, 180, 248, 0.35) !important;
  border-radius: 3px !important;
  color: #8ab4f8 !important;
  font-weight: 700 !important;
}

/* ── Always Display Sub-Bar Labels (Data & Analyse) ──────────── */
.workspace-ribbon[data-active-ribbon="data"] .ribbon-tool-button > span,
.workspace-ribbon[data-active-ribbon="paper"] .ribbon-tool-button > span,
.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="data"] .ribbon-tool-button > span,
.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="paper"] .ribbon-tool-button > span {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  display: inline-block !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.workspace-ribbon[data-active-ribbon="data"] .ribbon-tool-button,
.workspace-ribbon[data-active-ribbon="paper"] .ribbon-tool-button,
.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="data"] .ribbon-tool-button,
.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="paper"] .ribbon-tool-button {
  width: auto !important;
  min-width: 32px !important;
  min-height: 28px !important;
  padding: 4px 9px !important;
  gap: 5px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Horizontal scroll for command row so all subpages are accessible without disappearing */
.ribbon-row.ribbon-command-row {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  scrollbar-width: thin !important;
  -webkit-overflow-scrolling: touch !important;
}


/* ── Mobile Workspace Header Optimization & No-Overlap ──────── */
@media (max-width: 768px) {
  #userProfileControl #userProfileName {
    display: none !important;
  }
  #userProfileControl .user-profile-button {
    max-width: 36px !important;
    padding: 4px 6px !important;
    justify-content: center !important;
  }
  .workspace-context #workspaceTitle,
  .workspace-context .workspace-status-panel,
  .workspace-context .sidebar-window-button,
  .workspace-context #sidebarCollapseToggle {
    display: none !important;
  }
  .ribbon-tabs-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .ribbon-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    gap: 4px !important;
    overflow-x: auto !important;
  }
  .workspace-context {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
}

/* Guarantee Data & Analyse Sub-Bars are always displayed */
.workspace-ribbon[data-active-ribbon="data"] .ribbon-command-row,
.workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-row {
  display: flex !important;
}


/* Ribbon display density is independent from page-specific command groups.
   Compact keeps every command keyboard-accessible, while Minimized hides only
   the command band and leaves primary navigation and workspace context intact. */
.app-shell[data-ribbon-display-mode] .ribbon-tabs-row .sidebar-window-button,
.app-shell[data-ribbon-display-mode] .ribbon-tabs-row .sidebar-collapse-toggle {
  border-color: var(--border);
  background: var(--ui-control);
  color: var(--muted);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.app-shell[data-ribbon-display-mode] .ribbon-tabs-row .sidebar-window-button:hover,
.app-shell[data-ribbon-display-mode] .ribbon-tabs-row .sidebar-collapse-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background: var(--ui-control-hover);
  color: var(--text);
}

.app-shell[data-ribbon-display-mode="compact"] .ribbon-tabs-row .sidebar-window-button,
.app-shell[data-ribbon-display-mode="minimized"] .ribbon-tabs-row .sidebar-collapse-toggle {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  background: var(--ui-control-selected);
  color: var(--text);
}

.app-shell[data-ribbon-display-mode="compact"] .workspace-header {
  --ribbon-command-row-height: 67px;
  --ribbon-command-group-height: 50px;
  padding-block: 6px 8px;
}

.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon {
  gap: 5px;
}

.app-shell[data-ribbon-display-mode="compact"] .ribbon-tabs-row {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px;
}

.app-shell[data-ribbon-display-mode="compact"] .workspace-brand {
  display: none;
}

.app-shell[data-ribbon-display-mode="compact"] .workspace-context {
  min-width: 0;
  flex-wrap: nowrap;
}

.app-shell[data-ribbon-display-mode="compact"] .workspace-status-panel .collection-chip.muted {
  display: none;
}

.app-shell[data-ribbon-display-mode="compact"] .ribbon-tabs .sidebar-action {
  width: 36px;
  min-width: 36px;
  min-height: 32px;
  padding-inline: 0;
}

.app-shell[data-ribbon-display-mode="compact"] .ribbon-tabs .sidebar-action > span:not(.agent-issues-tab-count),
.app-shell[data-ribbon-display-mode="compact"] .settings-button > span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.app-shell[data-ribbon-display-mode="compact"] .ribbon-command-row {
  align-items: flex-start;
  gap: 5px;
  min-height: 0;
  padding: 5px;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 42%, transparent) transparent;
}

.app-shell[data-ribbon-display-mode="compact"] .ribbon-command-row::-webkit-scrollbar {
  display: block;
  width: 0;
  height: 5px;
}

.app-shell[data-ribbon-display-mode="compact"] .ribbon-command-row::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: color-mix(in srgb, var(--muted) 42%, transparent);
}

/* Expanded workspaces can still exceed the available width at the default
   100% interface scale. Keep every command reachable instead of clipping the
   trailing Data results groups at ordinary desktop widths. */
.app-shell[data-ribbon-display-mode="expanded"] .workspace-ribbon:is([data-active-ribbon="edit"], [data-active-ribbon="data"], [data-active-ribbon="coding"], [data-active-ribbon="agent"]) .ribbon-command-row {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 42%, transparent) transparent;
}

.app-shell[data-ribbon-display-mode="expanded"] .workspace-ribbon:is([data-active-ribbon="edit"], [data-active-ribbon="data"], [data-active-ribbon="coding"], [data-active-ribbon="agent"]) .ribbon-command-row::-webkit-scrollbar {
  display: block;
  width: 0;
  height: 6px;
}

.app-shell[data-ribbon-display-mode="expanded"] .workspace-ribbon:is([data-active-ribbon="edit"], [data-active-ribbon="data"], [data-active-ribbon="coding"], [data-active-ribbon="agent"]) .ribbon-command-row::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: color-mix(in srgb, var(--muted) 42%, transparent);
}

.app-shell[data-ribbon-display-mode="compact"] .ribbon-command-group,
.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="edit"] .ribbon-command-group.is-active:not(.ribbon-review-command):not(.ribbon-view-command),
.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-group.is-active.ribbon-analysis-command {
  height: var(--ribbon-command-group-height);
  min-height: var(--ribbon-command-group-height);
  max-height: var(--ribbon-command-group-height);
  gap: 3px;
  padding: 4px 6px 3px;
}

.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="edit"] .ribbon-command-group.is-active.ribbon-command-group--expanded,
.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-group.is-active.ribbon-analysis-command.ribbon-command-group--expanded {
  grid-template-rows: minmax(28px, auto) auto;
}

.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="edit"] .ribbon-command-group.is-active.ribbon-command-group--expanded > .ribbon-group-body,
.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-group.is-active.ribbon-analysis-command.ribbon-command-group--expanded > .ribbon-group-body {
  grid-template-rows: minmax(28px, auto) !important;
}

.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="edit"] .ribbon-command-group.is-active.ribbon-command-group--collapsed,
.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-group.is-active.ribbon-analysis-command.ribbon-command-group--collapsed {
  border-color: var(--border);
  background: var(--ui-control);
  color: var(--text);
}

.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="edit"] .ribbon-command-group.is-active.ribbon-command-group--collapsed:hover,
.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-group.is-active.ribbon-analysis-command.ribbon-command-group--collapsed:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: var(--ui-control-hover);
}

.app-shell[data-ribbon-display-mode="compact"] .ribbon-group-label,
.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="edit"] .ribbon-command-group.is-active:not(.ribbon-review-command):not(.ribbon-view-command) > .ribbon-group-label,
.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-group.is-active.ribbon-analysis-command.ribbon-command-group--collapsed > .ribbon-group-label {
  padding-top: 3px;
  font-size: 9px;
}

.app-shell[data-ribbon-display-mode="compact"] .ribbon-command-group .toolbar-button {
  min-height: 28px;
  padding: 5px 8px;
}

.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="data"] .ribbon-tool-button {
  position: relative;
  width: 32px;
  min-width: 32px;
  justify-content: center;
  gap: 0;
  padding-inline: 6px;
}

.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="data"] .ribbon-tool-button > span,
.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="coding"] .toolbar-button:not(.icon-only) > span,
.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="agent"] .agent-ribbon-context-copy > span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.app-shell[data-ribbon-automatic-compact="true"] .sidebar-window-button::after {
  content: '';
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.app-shell[data-ribbon-display-mode="compact"] .ribbon-review-command .ribbon-dropdown-trigger {
  min-height: 34px;
  padding-block: 5px;
}

.app-shell[data-ribbon-display-mode="compact"] .ribbon-review-menu {
  flex-basis: 220px;
  min-width: 170px;
}

.app-shell[data-ribbon-display-mode="minimized"] .workspace-header {
  padding-block: 6px;
}

.app-shell[data-ribbon-display-mode="minimized"] .workspace-ribbon {
  gap: 0;
}

.app-shell[data-ribbon-display-mode="minimized"] .ribbon-command-row {
  display: none !important;
}

/* Premium Analyse authoring ribbon. Academic routes remain available through
   one bounded Methods catalogue; report authoring stays in a stable-height
   command band instead of presenting a route-sized row of controls. */
.ribbon-analysis-route-source {
  display: none !important;
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-row {
  align-items: stretch;
  gap: 6px;
  max-height: var(--ribbon-command-row-height);
  overflow-y: hidden;
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-group.is-active.ribbon-analysis-command {
  border-color: color-mix(in srgb, var(--border) 82%, var(--text) 18%);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ui-control) 78%, transparent);
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-group.is-active.ribbon-analysis-command.ribbon-command-group--expanded {
  padding-inline: 7px;
  background: color-mix(in srgb, var(--ui-control) 88%, transparent);
}

.workspace-ribbon[data-active-ribbon="paper"] .ribbon-command-group.is-active.ribbon-analysis-command.ribbon-command-group--expanded > .ribbon-group-body {
  gap: 4px;
}

.app-shell[data-ribbon-display-mode="expanded"] .workspace-ribbon[data-active-ribbon="paper"] :is(.analyse-report-command, .analyse-insert-command, .analyse-actions-command, .analyse-method-catalog-command) > .ribbon-group-body > .ribbon-tool-button,
.app-shell[data-ribbon-display-mode="expanded"] .workspace-ribbon[data-active-ribbon="paper"] .analyse-actions-command .analyse-export-dropdown > .ribbon-tool-button {
  position: relative;
  width: auto;
  min-width: 34px;
  min-height: 32px;
  padding: 5px 7px;
  gap: 5px;
  border-radius: 5px;
}

.app-shell[data-ribbon-display-mode="expanded"] .workspace-ribbon[data-active-ribbon="paper"] :is(.analyse-report-command, .analyse-insert-command, .analyse-actions-command, .analyse-method-catalog-command) > .ribbon-group-body > .ribbon-tool-button > span,
.app-shell[data-ribbon-display-mode="expanded"] .workspace-ribbon[data-active-ribbon="paper"] .analyse-actions-command .analyse-export-dropdown > .ribbon-tool-button > span {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  color: currentColor;
  font-size: 10px;
  font-weight: 550;
  line-height: 1;
  white-space: nowrap;
}

.workspace-ribbon[data-active-ribbon="paper"] .analyse-report-command .analysis-health-badge {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 66px;
  max-width: 92px;
  min-height: 30px;
  padding: 4px 7px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-ribbon[data-active-ribbon="paper"] .analyse-insert-command .ribbon-tool-button {
  flex-direction: column;
  min-width: 38px !important;
  padding-inline: 5px !important;
  gap: 3px !important;
}

.workspace-ribbon[data-active-ribbon="paper"] .analyse-insert-command .ribbon-tool-button > .icon {
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  flex-basis: 15px;
}

.workspace-ribbon[data-active-ribbon="paper"] [data-analyse-studio-command^="mode-"][aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  background: var(--ui-control-selected);
  color: var(--text);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 72%, transparent);
}

.workspace-ribbon[data-active-ribbon="paper"] .analyse-export-dropdown {
  position: relative;
  display: inline-flex;
  margin-left: 0;
}

.analyse-export-menu {
  width: min(240px, calc(100vw - 24px));
}

.analyse-method-menu {
  box-sizing: border-box;
  width: min(720px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(560px, calc(100vh - 24px)) !important;
  padding: 10px;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-color: color-mix(in srgb, var(--border) 72%, var(--text) 28%);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32), 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent) inset;
}

.analyse-method-menu.open {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0 14px;
}

.analyse-method-section {
  min-width: 0;
  padding: 8px 0 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
}

.analyse-method-section-title {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.analyse-method-section-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  gap: 4px !important;
  min-width: 0;
}

.analyse-method-section-actions .analyse-method-item {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 30px;
  padding: 5px 22px 5px 7px !important;
  gap: 7px !important;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.analyse-method-section-actions .analyse-method-item:hover,
.analyse-method-section-actions .analyse-method-item:focus-visible,
.analyse-method-section-actions .analyse-method-item.active,
.analyse-method-section-actions .analyse-method-item.is-active {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  background: var(--ui-control-hover);
  outline: none;
}

.analyse-method-section-actions .analyse-method-item > .icon {
  display: block;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
}

.analyse-method-section-actions .analyse-method-item > span {
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  margin: 0 !important;
  overflow: hidden !important;
  clip: auto !important;
  clip-path: none !important;
  color: currentColor;
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analyse-method-section-actions .analyse-method-item[data-analysis-status]::after {
  top: 50% !important;
  right: 8px !important;
  width: 6px !important;
  height: 6px !important;
  transform: translateY(-50%);
}

.analyse-method-section-actions .ribbon-thematic-method {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 0 4px;
}

.analyse-method-section-actions .ribbon-thematic-method > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
}

.analyse-method-section-actions .ribbon-thematic-method .toolbar-select {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  font-size: 10px;
}

.analyse-export-menu .export-item {
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 3px;
  font-size: 11px;
}

.analyse-export-menu .export-item:hover,
.analyse-export-menu .export-item:focus-visible {
  background: var(--ui-control-hover);
  outline: none;
}

.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="paper"] .analyse-report-command .analysis-health-badge {
  width: 10px;
  min-width: 10px;
  max-width: 10px;
  min-height: 28px;
  padding: 0;
  overflow: hidden;
  border-width: 0 0 0 3px;
  border-radius: 2px;
  color: transparent;
}

.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="paper"] :is(.analyse-report-command, .analyse-insert-command, .analyse-actions-command, .analyse-method-catalog-command) > .ribbon-group-body > .ribbon-tool-button,
.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="paper"] .analyse-actions-command .analyse-export-dropdown > .ribbon-tool-button {
  width: 30px;
  min-width: 30px !important;
  min-height: 28px;
  padding: 5px !important;
  gap: 0 !important;
}

.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="paper"] :is(.analyse-report-command, .analyse-insert-command, .analyse-actions-command, .analyse-method-catalog-command) > .ribbon-group-body > .ribbon-tool-button > span,
.app-shell[data-ribbon-display-mode="compact"] .workspace-ribbon[data-active-ribbon="paper"] .analyse-actions-command .analyse-export-dropdown > .ribbon-tool-button > span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .analyse-method-menu.open {
    grid-template-columns: minmax(0, 1fr);
  }

  .analyse-method-section-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 1050px) {
  .app-shell[data-ribbon-display-mode="expanded"] .workspace-header {
    padding: 8px 10px 10px;
  }

  .app-shell[data-ribbon-display-mode="expanded"] .ribbon-tabs-row {
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 8px;
  }

  .app-shell[data-ribbon-display-mode="expanded"] .workspace-brand,
  .app-shell[data-ribbon-display-mode="expanded"] .workspace-header #workspaceTitle,
  .app-shell[data-ribbon-display-mode="expanded"] .workspace-status-panel {
    display: none;
  }

  .app-shell[data-ribbon-display-mode="expanded"] .ribbon-tabs {
    width: auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .app-shell[data-ribbon-display-mode="expanded"] .ribbon-tabs::-webkit-scrollbar {
    display: none;
  }

  .app-shell[data-ribbon-display-mode="expanded"] .workspace-context {
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  .app-shell[data-ribbon-display-mode="compact"] .ribbon-tabs-row,
  .app-shell[data-ribbon-display-mode="minimized"] .ribbon-tabs-row {
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 8px;
  }

  .app-shell[data-ribbon-display-mode="compact"] .workspace-context,
  .app-shell[data-ribbon-display-mode="minimized"] .workspace-context {
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  .app-shell[data-ribbon-display-mode="compact"] .workspace-header #workspaceTitle,
  .app-shell[data-ribbon-display-mode="compact"] .workspace-status-panel,
  .app-shell[data-ribbon-display-mode="minimized"] .workspace-brand,
  .app-shell[data-ribbon-display-mode="minimized"] .workspace-header #workspaceTitle,
  .app-shell[data-ribbon-display-mode="minimized"] .workspace-status-panel {
    display: none;
  }
}

@media (max-width: 760px) {
  .app-shell[data-ribbon-display-mode="compact"] .workspace-header {
    padding: 6px 8px 8px;
  }

  .app-shell[data-ribbon-display-mode="minimized"] .workspace-header {
    padding: 6px 8px;
  }

  .app-shell[data-ribbon-display-mode="compact"] .ribbon-tabs,
  .app-shell[data-ribbon-display-mode="minimized"] .ribbon-tabs {
    width: auto;
  }

  .app-shell[data-ribbon-display-mode="compact"] .ribbon-tabs .sidebar-action,
  .app-shell[data-ribbon-display-mode="minimized"] .ribbon-tabs .sidebar-action {
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
  }

  .app-shell[data-ribbon-display-mode="minimized"] .ribbon-tabs .sidebar-action > span:not(.agent-issues-tab-count),
  .app-shell[data-ribbon-display-mode="minimized"] .workspace-context .settings-button > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .app-shell[data-ribbon-display-mode="minimized"] .workspace-context .settings-button {
    width: 34px;
    min-width: 34px;
    justify-content: center;
    padding-inline: 0;
  }
}

@media (max-width: 760px) {
  .edit-review-launcher-inner {
    padding: 22px 14px 32px;
  }

  .edit-review-launcher-header {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .edit-review-launcher-search {
    width: 100%;
  }

  .edit-review-launcher-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .data-source-launcher-actions {
    align-items: stretch;
    flex-direction: column;
    min-width: 0;
    width: 100%;
  }

  .data-source-launcher-feedback {
    display: grid;
    gap: 0;
  }

  .data-source-launcher-feedback .analysis-batch-status {
    max-width: none;
    text-align: left;
  }

  .data-source-launcher-actions .edit-review-launcher-search,
  .data-source-launcher-browse {
    width: 100%;
  }
}

/* Keep the collection-reference refinements authoritative over the earlier
   legacy picker declarations while both contracts coexist. */
.citation-picker-panel {
  width: min(900px, calc(100vw - 32px));
  height: min(90vh, 820px);
  max-height: min(90vh, 820px);
  min-height: 0;
  overflow: hidden;
  background: var(--panel);
  color: var(--text);
}

.citation-picker-header,
.citation-picker-library-bar,
.citation-picker-options,
.citation-picker-evidence-options,
.citation-picker-selection,
.citation-picker-footer {
  flex: 0 0 auto;
}

.citation-picker-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.citation-picker-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--panel);
}

.citation-picker-options {
  grid-template-columns: minmax(120px, 0.8fr) minmax(150px, 1fr) minmax(150px, 1fr) auto;
}

.citation-picker-result {
  border-left: 3px solid transparent;
  padding: 9px 16px 9px 13px;
}

.citation-picker-result:hover,
.citation-picker-result.active {
  border-left-color: var(--muted);
  padding-left: 13px;
}

.citation-picker-result.selected {
  border-left-color: var(--accent);
  background: var(--ui-control-selected, var(--ui-control));
  padding-left: 13px;
}

@media (max-width: 680px) {
  .citation-picker-panel {
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
  }

  .citation-picker-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Review Document Manager (Google Docs / Windows Explorer style)
   ========================================================================== */

.review-manager-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 0 24px;
  flex-wrap: wrap;
}

.review-manager-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-manager-sort-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-manager-sort-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-muted, rgba(242, 243, 245, 0.68));
}

.review-manager-select {
  height: 36px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 12px;
  background: var(--neutral-panel, rgba(242, 243, 245, 0.045));
  border: 1px solid var(--neutral-border, rgba(242, 243, 245, 0.14));
  color: var(--neutral-text, #f2f3f5);
  outline: none;
}

.review-manager-select:focus {
  border-color: var(--neutral-border-strong, rgba(242, 243, 245, 0.28));
}

.review-manager-view-toggle {
  display: inline-flex;
  border: 1px solid var(--neutral-border, rgba(242, 243, 245, 0.14));
  border-radius: 6px;
  overflow: hidden;
  background: var(--neutral-panel, rgba(242, 243, 245, 0.045));
}

.review-view-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--neutral-muted, rgba(242, 243, 245, 0.68));
  transition: background 150ms ease, color 150ms ease;
}

.review-view-btn:hover {
  background: var(--neutral-raised, rgba(242, 243, 245, 0.075));
  color: var(--neutral-text, #f2f3f5);
}

.review-view-btn.active {
  background: var(--neutral-raised, rgba(242, 243, 245, 0.12));
  color: var(--neutral-active-text, #ffffff);
}

.review-view-btn .icon {
  width: 16px;
  height: 16px;
}

.review-manager-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 16px;
  font-weight: 650;
  font-size: 13px;
  border-radius: 6px;
}

.review-manager-new-btn .icon {
  width: 16px;
  height: 16px;
}

/* Review Grid View */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px;
}

.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  border: 1px solid var(--neutral-border, rgba(242, 243, 245, 0.14));
  background: var(--neutral-panel, #12161f);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  cursor: pointer;
  overflow: visible;
}

.review-card:hover {
  transform: translateY(-3px);
  border-color: var(--neutral-border-strong, rgba(242, 243, 245, 0.28));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.review-card.is-last-opened {
  border-color: rgba(96, 165, 250, 0.45);
}

.review-card.is-unavailable {
  opacity: 0.55;
}

.review-card--blank {
  border: 1.5px dashed var(--neutral-border, rgba(242, 243, 245, 0.2));
  background: rgba(242, 243, 245, 0.02);
}

.review-card--blank:hover {
  border-color: #60a5fa;
  background: rgba(59, 130, 246, 0.06);
}

.review-card-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 7px 7px 0 0;
  background: #080b10;
  display: grid;
  place-items: center;
}

.review-cover-svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.review-cover-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 7px 7px 0 0;
  transition: transform 220ms ease;
}

.review-card:hover .review-cover-img {
  transform: scale(1.025);
}

.review-cover-fallback {
  width: 100%;
  height: 100%;
}

.review-manager-cover-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.review-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
  backdrop-filter: blur(4px);
}

.badge-canonical {
  background: rgba(16, 185, 129, 0.22);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.badge-draft {
  background: rgba(59, 130, 246, 0.22);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.review-card-last-chip {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.75);
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(3px);
}

.review-card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 0 auto;
}

.review-card-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.review-card-title {
  font-size: 13px;
  font-weight: 650;
  color: var(--neutral-active-text, #ffffff);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.review-card-meta {
  font-size: 11px;
  color: var(--neutral-muted, rgba(242, 243, 245, 0.68));
  display: flex;
  align-items: center;
  gap: 4px;
}

.review-card-meta-text {
  font-size: 11px;
  color: var(--neutral-muted, rgba(242, 243, 245, 0.68));
}

.review-card-menu-anchor {
  position: relative;
  flex: 0 0 auto;
}

.review-menu-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--neutral-muted, rgba(242, 243, 245, 0.68));
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  transition: background 150ms ease, color 150ms ease;
}

.review-menu-btn:hover {
  background: var(--neutral-raised, rgba(242, 243, 245, 0.12));
  color: var(--neutral-active-text, #ffffff);
}

.review-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  background: #151b24;
  border: 1px solid var(--neutral-border-strong, rgba(242, 243, 245, 0.28));
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  min-width: 135px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review-dropdown-menu[hidden] {
  display: none !important;
}

.review-dropdown-menu button {
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--neutral-text, #f2f3f5);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 100ms ease;
}

.review-dropdown-menu button:hover {
  background: var(--neutral-raised, rgba(242, 243, 245, 0.08));
}

.review-dropdown-menu button.text-danger {
  color: #f87171;
}

.review-dropdown-menu button.text-danger:hover {
  background: rgba(239, 68, 68, 0.15);
}

.review-locked-icon {
  font-size: 12px;
  opacity: 0.55;
  padding: 2px;
  display: inline-block;
  user-select: none;
}

/* Review List Table */
.review-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--neutral-text, #f2f3f5);
  margin-top: 8px;
}

.review-list-table th {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--neutral-border, rgba(242, 243, 245, 0.14));
  color: var(--neutral-muted, rgba(242, 243, 245, 0.68));
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.review-list-table th.th-cover {
  width: 48px;
  padding-right: 0;
}

.review-list-table th.th-actions {
  text-align: right;
}

.review-list-row {
  border-bottom: 1px solid var(--neutral-border, rgba(242, 243, 245, 0.08));
  transition: background 100ms ease;
  cursor: pointer;
}

.review-list-row:hover {
  background: var(--neutral-raised, rgba(242, 243, 245, 0.045));
}

.review-list-row.is-last-opened {
  background: rgba(96, 165, 250, 0.04);
}

.review-list-row td {
  padding: 10px 14px;
  vertical-align: middle;
}

.review-list-row td.td-cover {
  padding-right: 0;
}

.review-mini-thumb {
  width: 32px;
  height: 42px;
  border-radius: 4px;
  overflow: hidden;
  background: #080b10;
  border: 1px solid var(--neutral-border, rgba(242, 243, 245, 0.14));
  display: grid;
  place-items: center;
}

.review-mini-thumb svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.review-mini-thumb img.review-cover-img,
.review-mini-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 3px;
}

.review-list-title-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.review-list-name {
  font-weight: 600;
  color: var(--neutral-active-text, #ffffff);
}

.review-list-sub {
  font-size: 11px;
  color: var(--neutral-muted, rgba(242, 243, 245, 0.68));
}

.review-list-actions-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
}

.btn-sm {
  min-height: 28px;
  padding: 0 10px;
  font-size: 11.5px;
  border-radius: 4px;
}

/* Modals */
.review-manager-modal-dialog {
  background: #151b24;
  border: 1px solid var(--neutral-border-strong, rgba(242, 243, 245, 0.28));
  border-radius: 10px;
  color: var(--neutral-text, #f2f3f5);
  padding: 0;
  max-width: 440px;
  width: 90vw;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65);
}

.review-manager-modal-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
}

.review-manager-modal-form {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.review-manager-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--neutral-border, rgba(242, 243, 245, 0.14));
}

.review-manager-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  color: #ffffff;
}

.review-manager-modal-close {
  background: transparent;
  border: none;
  color: var(--neutral-muted, rgba(242, 243, 245, 0.68));
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  border-radius: 4px;
}

.review-manager-modal-close:hover {
  background: var(--neutral-raised, rgba(242, 243, 245, 0.08));
  color: #ffffff;
}

.review-manager-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-manager-modal-message {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--neutral-text, #f2f3f5);
}

.review-manager-modal-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-muted, rgba(242, 243, 245, 0.68));
}

.review-manager-modal-input {
  height: 38px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 13px;
  border: 1px solid var(--neutral-border, rgba(242, 243, 245, 0.18));
  background: var(--neutral-panel, rgba(242, 243, 245, 0.045));
  color: var(--neutral-text, #f2f3f5);
  outline: none;
}

.review-manager-modal-input:focus {
  border-color: #60a5fa;
}

.review-manager-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--neutral-border, rgba(242, 243, 245, 0.14));
  background: var(--neutral-panel-soft, rgba(0, 0, 0, 0.2));
}

.btn.destructive {
  background: #dc2626;
  color: #ffffff;
}

.btn.destructive:hover {
  background: #b91c1c;
}

/* TTS Word-by-Word Highlight */
::highlight(tts-word-highlight) {
  background-color: #facc15;
  color: #0f172a;
}

.tts-word-highlight {
  background-color: #facc15 !important;
  color: #0f172a !important;
  border-radius: 2px;
  padding: 0 1px !important;
  margin: 0 !important;
  display: inline !important;
  box-shadow: 0 0 0 1.5px rgba(234, 179, 8, 0.4);
}

/* Share Collection Modal */
.share-collection-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-collection-modal[hidden] {
  display: none;
}
.share-collection-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}
.share-collection-panel {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: #111418;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  color: #f1f5f9;
  overflow: hidden;
  z-index: 1;
}
.share-collection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.share-collection-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.share-collection-header-title h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.share-collection-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.share-collection-close:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.08);
}
.share-collection-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.share-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  margin-bottom: 8px;
}
.share-invite-inputs {
  display: flex;
  gap: 8px;
}
.share-invite-inputs input[type="email"] {
  flex: 1;
  background: #090b0e;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 8px 12px;
  color: #f1f5f9;
  font-size: 13px;
}
.share-invite-inputs select {
  background: #090b0e;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 8px 10px;
  color: #f1f5f9;
  font-size: 13px;
  cursor: pointer;
}
.share-invite-message {
  margin-top: 8px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 4px;
}
.share-invite-message.success {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.share-invite-message.error {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.share-generated-link-section {
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  padding: 12px;
}
.share-link-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}
.share-link-row input {
  flex: 1;
  background: #090b0e;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 6px 10px;
  color: #38bdf8;
  font-family: monospace;
  font-size: 12px;
}
.share-link-hint {
  font-size: 11px;
  color: #94a3b8;
}
.share-members-list, .share-invites-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}
.share-member-row, .share-invite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 8px 12px;
}
.share-member-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.share-member-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2563eb;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.share-member-name {
  font-size: 13px;
  font-weight: 500;
}
.share-member-email {
  font-size: 11px;
  color: #94a3b8;
}
.share-role-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}
.share-role-badge.owner {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}
.share-role-badge.editor {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}
.share-role-badge.reviewer {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}
.share-role-badge.viewer {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}
.share-revoke-btn {
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
}
.share-revoke-btn:hover {
  background: rgba(239, 68, 68, 0.15);
}
.share-empty-state {
  font-size: 12px;
  color: #64748b;
  font-style: italic;
  padding: 4px 0;
}

.share-permission-legend {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.share-perm-item {
  font-size: 11px;
  color: #cbd5e1;
  display: flex;
  align-items: center;
}
.share-member-role-select {
  background: #090b0e;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 2px 6px;
  color: #f1f5f9;
  font-size: 11px;
  cursor: pointer;
}

/* Collaborator Live Presence Bar in Ribbon */
.collaborator-presence-bar {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  padding: 2px 4px;
}
.collaborator-avatar-pill {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #0b0d10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  position: relative;
  margin-left: -6px;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), z-index 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  user-select: none;
}
.collaborator-avatar-pill:first-child {
  margin-left: 0;
}
.collaborator-avatar-pill:hover {
  transform: scale(1.2) translateY(-2px);
  z-index: 20;
}
.collaborator-avatar-pill.is-editing::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 7px;
  height: 7px;
  background: #22c55e;
  border: 1.5px solid #0b0d10;
  border-radius: 50%;
}
.collaborator-presence-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #0f1318;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: #f1f5f9;
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  display: none;
}
.collaborator-avatar-pill:hover .collaborator-presence-tooltip {
  display: block;
}


/* Collaborator Role Badge in Ribbon */
.collaborator-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  margin-right: 6px;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  user-select: none;
}
.collaborator-role-badge.role-owner {
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.35);
  color: #facc15;
}
.collaborator-role-badge.role-editor {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}
.collaborator-role-badge.role-reviewer {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.35);
  color: #c084fc;
}
.collaborator-role-badge.role-viewer {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.25);
  color: #94a3b8;
}

/* Disabled live editor mode button */
.live-editor-mode-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: auto;
}

/* Author Provenance & Edit Fingerprint Hover Styling */
.scholary-authored-block {
  position: relative;
  border-left: 3px solid transparent;
  transition: border-left-color 0.15s ease;
}
.scholary-authored-block:hover,
.scholary-authored-block:focus-within {
  border-left-color: var(--author-color, #38bdf8) !important;
  padding-left: 6px;
}
.scholary-authored-block:hover::before {
  content: '👤 ' attr(data-author-name);
  position: absolute;
  top: -16px;
  right: 6px;
  background: #1e232a;
  border: 1px solid #334155;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  z-index: 15;
}

/* Tracked Insertions and Deletions */
ins[data-live-change] {
  background-color: rgba(34, 197, 94, 0.18);
  border-bottom: 2px solid #22c55e;
  color: #86efac;
  text-decoration: none;
  padding: 0 2px;
  border-radius: 2px;
  cursor: pointer;
}

del[data-live-change] {
  background-color: rgba(239, 68, 68, 0.18);
  color: #f87171;
  text-decoration: line-through;
  padding: 0 2px;
  border-radius: 2px;
  cursor: pointer;
}

/* Floating Review Card */
.live-change-review-card {
  position: absolute;
  z-index: 1000;
  display: none;
  flex-direction: column;
  gap: 6px;
  width: 280px;
  background: #181d24;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.65);
  font-size: 11px;
  color: #f1f5f9;
  pointer-events: auto;
}

.live-change-review-card.visible {
  display: flex;
}

.review-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.review-card-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.review-card-badge.badge-ins {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.review-card-badge.badge-del {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.review-card-name {
  color: #cbd5e1;
  margin-left: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-card-time {
  color: #64748b;
  font-size: 10px;
  margin-left: auto;
}

.review-card-preview {
  color: #94a3b8;
  font-style: italic;
  line-height: 1.4;
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

.review-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.review-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, transform 0.1s ease;
}

.review-action-btn:hover {
  transform: translateY(-1px);
}

.review-action-btn.accept-btn {
  background: #166534;
  color: #bbf7d0;
  border-color: #22c55e;
}

.review-action-btn.accept-btn:hover {
  background: #15803d;
}

.review-action-btn.reject-btn {
  background: #7f1d1d;
  color: #fecaca;
  border-color: #ef4444;
}

.review-action-btn.reject-btn:hover {
  background: #991b1b;
}

.review-card-status {
  color: #fbbf24;
  font-size: 10px;
  padding-top: 2px;
}