.jira-board-filter-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.jira-board-filter-btns {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-left: 6px;
}

.jira-board-filter-btn {
  font-size: 11px;
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text2);
  cursor: pointer;
  transition: border-color .1s, background .1s, color .1s;
}
.jira-board-filter-btn:hover {
  border-color: #0052CC;
  background: rgba(0, 82, 204, .08);
  color: #0052CC;
}
/* ════════════════════════════════════════════════════════════════════════════
   ARE-Tool — Clean 3-mode UI
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:         #0d1117;
  --surface:    #161b22;
  --elevated:   #1c2128;
  --border:     #30363d;
  --focus:      #58a6ff;

  --text:       #e6edf3;
  --text2:      #8b949e;
  --text3:      #484f58;

  --blue:       #58a6ff;
  --blue-dim:   #1f3553;
  --green:      #3fb950;
  --green-dim:  #1a3a1f;
  --yellow:     #d29922;
  --yellow-dim: #3a2d10;
  --red:        #f85149;
  --red-dim:    #3a1a1a;
  --purple:     #bc8cff;
  --purple-dim: #2a1f40;

  --r:    6px;
  --r-sm: 4px;
  --r-lg: 10px;

  --hdr: 64px;
  --ftr: 28px;
  --font-mono: 'Consolas','Menlo','Monaco',monospace;
  --font: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Aliases that some rules reference — defined here so they resolve */
  --muted:    #8b949e;
  --base:     #1c2128;
  --surface2: #1c2128;
  --surface3: #21262d;
  --text1:    #e6edf3;
  --r-md:     8px;

  /* Shadow tokens */
  --shadow-sm: 0 1px 4px rgba(0,0,0,.30);
  --shadow:    0 4px 18px rgba(0,0,0,.42);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.55);

  /* Carrier brand colour */
  --carrier-color: #7eb9ff;
}

[data-theme="light"] {
  --bg:         #f6f8fa;
  --surface:    #ffffff;
  --elevated:   #eaeef2;
  --border:     #d0d7de;

  --text:       #1f2328;
  --text2:      #636c76;
  --text3:      #9198a1;

  --blue:       #0969da;
  --blue-dim:   #dbeafe;
  --green:      #1a7f37;
  --green-dim:  #d1fae5;
  --yellow:     #9a6700;
  --yellow-dim: #fef9c3;
  --red:        #cf222e;
  --red-dim:    #ffe4e6;
  --purple:     #8250df;
  --purple-dim: #ede9fe;

  --muted:    #636c76;
  --base:     #f0f2f5;
  --surface2: #eaeef2;
  --surface3: #cfd8e0;
  --text1:    #1f2328;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.09);
  --shadow:    0 4px 16px rgba(0,0,0,.12);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.18);

  --carrier-color: #003DA5;
  --focus: #0969da;
}

[data-theme="light"] .mode-tab.active {
  background: var(--blue-dim);
  color: var(--blue);
  border-color: var(--blue);
}

[data-theme="light"] #app-header {
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 var(--border);
}

/* Light-mode text legibility fixes */
[data-theme="light"] .brand-sub        { color: var(--text2); }
[data-theme="light"] .tab-desc         { opacity: .9; }
[data-theme="light"] .score-lbl        { color: var(--text2); }
[data-theme="light"] .score-ring-lbl   { color: var(--text2); }
[data-theme="light"] .req-group-title  { color: var(--text2); }
[data-theme="light"] .mode-tab         { color: var(--text2); }
[data-theme="light"] .mode-tab:hover   { color: var(--text); }

/* Run button: dark-blue background needs white text in light mode */
[data-theme="light"] .btn-run { color: #ffffff; }

/* Inputs: white background with visible border in light mode */
[data-theme="light"] input[type="text"],
[data-theme="light"] textarea {
  background: #ffffff;
  border-color: #c9d1d9;
}
[data-theme="light"] .extract-filter,
[data-theme="light"] .raw-req-add-input { background: #ffffff; border-color: #c9d1d9; }

/* Diagram wrapper: keep white for SVG clarity in both themes */
[data-theme="light"] .diagram-svg-wrap { background: #f8fafc; }

/* ── btn-sm size modifier ───────────────────────────────────────────────── */
.btn-sm { padding: 4px 10px !important; font-size: 11px !important; }

/* ── CARRIER LOGO ────────────────────────────────────────────────────────── */
.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.carrier-logo-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.carrier-logo-img {
  height: 36px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  display: block;
}

/* ── PROFESSIONAL POLISH ─────────────────────────────────────────────────── */
#app-header {
  box-shadow: var(--shadow-sm);
}

/* Cards get a subtle lift */
.analysis-card,
.quality-compare,
.extract-summary,
.gap-score-header,
.req-card,
.gap-card,
.refined-card {
  box-shadow: var(--shadow-sm);
}

/* Modals already have hardcoded shadows — upgrade them */
.rules-modal  { box-shadow: var(--shadow-lg); }
.chat-modal   { box-shadow: var(--shadow-lg); }
.wait-card    { box-shadow: var(--shadow-lg); }

/* Slightly warmer heading weight */
.input-header h2 { font-weight: 800; letter-spacing: -.01em; }

/* Panel input gets a subtle top border accent */
.panel-input { border-top: 3px solid var(--blue); }
[data-theme="light"] .panel-input { border-top-color: var(--blue); }

/* Footer: slightly more refined */
#app-footer { font-size: 11px; letter-spacing: .01em; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* ── SCROLLBAR ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── HEADER ──────────────────────────────────────────────────────────────── */
#app-header {
  height: 58px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 12px;
  flex-shrink: 0;
  z-index: 50;
}

.brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-left: 12px; border-left: 1px solid var(--border); }
.brand-icon { font-size: 22px; }
.brand-name { font-size: 15px; font-weight: 700; color: var(--blue); }
.brand-sub  { font-size: 10px; color: var(--text3); }

/* Mode navigation */
.mode-nav {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: center;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 1px;
}

.mode-tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
  min-width: 0;
  color: var(--text2);
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.02);
}
.mode-tab:hover { border-color: var(--blue); color: var(--text); }
.mode-tab.active {
  background: var(--blue-dim);
  border-color: var(--blue);
  color: var(--blue);
}
.tab-icon  { font-size: 14px; line-height: 1; }
.tab-label { font-size: 12px; font-weight: 700; }
.tab-desc  { display: none; }

.header-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text2);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 4px 8px;
  transition: border-color .15s, color .15s;
}
.theme-toggle:hover { border-color: var(--blue); color: var(--text); }

.mock-pill {
  background: var(--yellow-dim);
  color: var(--yellow);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .5px;
}

.conn-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text3);
  transition: background .3s;
}
.conn-dot.online  { background: var(--green); box-shadow: 0 0 5px var(--green); }
.conn-dot.offline { background: var(--red); }

/* ── MODE PANELS ─────────────────────────────────────────────────────────── */
.mode-panel {
  flex: 1;
  overflow: hidden;
  display: none;
}
.mode-panel.active { display: flex; flex-direction: column; padding: 10px; }

.panel-split {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: calc(100vh - 58px - var(--ftr) - 20px);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

/* Left input column */
.panel-input {
  width: 390px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.input-header h2 { font-size: 17px; font-weight: 700; margin-bottom: 5px; }
.input-header p  { font-size: 12px; color: var(--text2); line-height: 1.5; }

/* Right output column */
.panel-output {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  background: var(--surface);
}

/* ── FORM FIELDS ─────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 5px; }
.field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text2);
}
.req-mark { color: var(--red); }

input[type="text"], textarea {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  padding: 8px 10px;
  width: 100%;
  transition: border-color .15s;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--blue-dim);
}
textarea { resize: vertical; }

/* Collapsible section */
.collapsible { cursor: pointer; }
.collapsible summary {
  font-size: 12px;
  color: var(--blue);
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.collapsible summary::before { content: '+ '; }
.collapsible[open] summary::before { content: '− '; }

/* Run button */
.btn-run {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 20px;
  background: var(--blue);
  color: #000;
  border: none;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
  flex-shrink: 0;
}
.btn-run:hover { opacity: .85; }
.btn-run:disabled { opacity: .4; cursor: not-allowed; }
.btn-run-spin { animation: spin 1s linear infinite; display: inline-block; font-size: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-link {
  background: none;
  border: none;
  color: var(--blue);
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
}

/* ── METHODOLOGY TOGGLE ──────────────────────────────────────────────────── */
.method-toggle {
  display: flex;
  gap: 8px;
}

.method-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 12px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  transition: all .15s;
  color: var(--text2);
  text-align: center;
}
.method-btn:hover { border-color: var(--blue); color: var(--text); }
.method-btn.active {
  background: var(--blue-dim);
  border-color: var(--blue);
  color: var(--blue);
}
.method-icon { font-size: 16px; line-height: 1; }
.method-name { font-size: 12px; font-weight: 700; }
.method-desc { font-size: 10px; opacity: .7; }

/* ── CUSTOM STANDARD PANEL ───────────────────────────────────────────────── */
.custom-std-panel {
  margin-top: 10px;
  padding: 12px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.custom-std-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-std-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.custom-std-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
}

.custom-std-subtitle {
  font-size: 11px;
  font-weight: 400;
  color: var(--text3);
}

.custom-std-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.custom-std-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.custom-std-progress-step {
  font-size: 11px;
  color: var(--text);
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-std-progress-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  flex-shrink: 0;
  margin-left: 8px;
}

.custom-std-progress-track {
  height: 5px;
  background: var(--elevated);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.custom-std-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transition: width .4s ease;
}

.custom-std-progress-fill.indeterminate {
  width: 40% !important;
  animation: std-indeterminate 1.4s ease-in-out infinite;
}

@keyframes std-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

.custom-std-progress-status {
  font-size: 10px;
  color: var(--text2);
  opacity: .8;
}
.custom-std-progress-status.success { color: var(--green); opacity: 1; font-weight: 600; }
.custom-std-progress-status.error   { color: var(--red);   opacity: 1; font-weight: 600; }

.custom-std-retry-btn {
  margin-top: 6px;
  align-self: flex-start;
}

.custom-std-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.custom-std-empty {
  font-size: 11px;
  color: var(--text3, var(--text2));
  opacity: .7;
  margin: 0;
  text-align: center;
  padding: 8px 0;
}

.custom-std-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: border-color .15s;
  cursor: pointer;
}
.custom-std-item:hover { border-color: var(--blue); }
.custom-std-item.selected {
  border-color: var(--blue);
  background: var(--blue-dim);
}

.custom-std-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.custom-std-item-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-std-item-meta {
  font-size: 10px;
  color: var(--text2);
  opacity: .8;
}

.custom-std-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.custom-std-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.custom-std-badge.ready      { background: var(--green-dim, rgba(0,200,100,.15)); color: var(--green); }
.custom-std-badge.processing { background: var(--blue-dim); color: var(--blue); }
.custom-std-badge.uploaded   { background: var(--elevated); color: var(--text2); border: 1px solid var(--border); }

.custom-std-details-panel {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.custom-std-details-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  user-select: none;
  background: var(--elevated);
  list-style: none;
}

.custom-std-details-summary::-webkit-details-marker { display: none; }

.custom-std-details-chevron {
  font-size: 11px;
  color: var(--text3);
  transition: transform 0.18s ease;
}

.custom-std-details-panel[open] .custom-std-details-chevron {
  transform: rotate(90deg);
}

.custom-std-details-body {
  padding: 8px 12px 12px;
}

/* ── Mode bar (shown after standard + mode selected) ─────────────────────── */
.custom-std-mode-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--blue-dim, rgba(59,130,246,.1));
  border: 1px solid var(--blue, #3b82f6);
  border-radius: 6px;
  font-size: 12px;
}

.custom-std-mode-bar-label {
  font-weight: 600;
  color: var(--blue, #3b82f6);
}

.custom-std-mode-change-btn {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--text3);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  text-decoration: underline;
}

.custom-std-mode-change-btn:hover { color: var(--text2); }

/* ── Generic centred modal overlay (used by std-mode-modal) ─────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  position: relative;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
  background: var(--surface-1, #1e1e1e);
  border: 1px solid var(--border, #444);
  animation: modalFadeIn 0.18s ease;
}
@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.96) translateY(-8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
[data-theme="light"] .modal-box {
  background: #ffffff;
  border-color: #cdd5e0;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
}

/* ── Mode selection modal ────────────────────────────────────────────────── */
.std-mode-modal {
  width: min(420px, 92vw);
  padding: 0;
  overflow: hidden;
}

.std-mode-modal-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}

.std-mode-modal-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text1);
}

.std-mode-modal-std-name {
  font-size: 12px;
  color: var(--text3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

.std-mode-options {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px;
}

.std-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 12px;
  background: var(--elevated);
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 6px;
}

.std-mode-option:last-child { margin-bottom: 0; }

.std-mode-option:hover {
  border-color: var(--accent);
  background: var(--bg2);
}

.std-mode-option.active {
  border-color: var(--accent);
  background: var(--blue-dim, rgba(59,130,246,.08));
}

.std-mode-option-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.std-mode-option-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text1);
  margin-bottom: 4px;
}

.std-mode-option-desc {
  font-size: 11px;
  color: var(--text3);
  line-height: 1.5;
}

/* ── Compliance verdict card ─────────────────────────────────────────────── */
.compliance-verdict-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  margin-bottom: 0;
}

.compliance-pass    { background: rgba(0,200,100,.1);  border-color: var(--green, #22c55e); }
.compliance-partial { background: rgba(234,179,8,.1);  border-color: var(--yellow, #eab308); }
.compliance-fail    { background: rgba(239,68,68,.1);  border-color: var(--red, #ef4444); }

.compliance-verdict-badge {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
}
.compliance-pass    .compliance-verdict-badge { color: var(--green,  #22c55e); }
.compliance-partial .compliance-verdict-badge { color: var(--yellow, #eab308); }
.compliance-fail    .compliance-verdict-badge { color: var(--red,    #ef4444); }

.compliance-conf-badge {
  font-size: 11px;
  color: var(--text3);
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 8px;
}

.compliance-clause-ref {
  font-size: 11px;
  color: var(--text2);
  margin-left: auto;
}

.compliance-section {
  border: 1px solid var(--border);
  border-top: none;
  padding: 12px 14px;
}

.compliance-section:last-child {
  border-radius: 0 0 8px 8px;
}

.compliance-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

.compliance-req-text {
  font-size: 13px;
  color: var(--text2);
  font-style: italic;
  line-height: 1.6;
}

.compliance-gap-text {
  font-size: 12px;
  color: var(--text1);
  line-height: 1.65;
  margin-bottom: 8px;
}

.compliance-suggested {
  background: var(--elevated);
}

.compliance-suggested-text {
  font-size: 13px;
  color: var(--text1);
  line-height: 1.65;
  font-weight: 500;
}

.custom-std-delete-btn {
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1;
  opacity: .6;
  transition: opacity .15s, color .15s;
}
.custom-std-delete-btn:hover { opacity: 1; color: var(--red); }

.method-result-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--elevated);
  border: 1px solid var(--border);
  color: var(--text2);
  letter-spacing: .3px;
}

/* ── ? HELP BUTTON ────────────────────────────────────────────────────────── */
.input-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.input-header-row h2 { margin-bottom: 0; }

.rules-help-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--elevated);
  color: var(--text2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  line-height: 1;
}
.rules-help-btn:hover {
  background: var(--blue-dim);
  border-color: var(--blue);
  color: var(--blue);
}

/* ── RULES MODAL ─────────────────────────────────────────────────────────── */
.rules-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 70px 20px 20px 20px;
}
.rules-modal-overlay.hidden { display: none; }

.rules-modal {
  width: 520px;
  max-width: 95vw;
  max-height: calc(100vh - 100px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
  animation: modal-slide-in .18s ease;
}
@keyframes modal-slide-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rules-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.rules-modal-title    { font-size: 14px; font-weight: 700; color: var(--text); }
.rules-modal-subtitle { font-size: 11px; color: var(--text3); margin-top: 2px; }

.rules-modal-close {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  transition: background .1s;
  flex-shrink: 0;
  margin-top: -2px;
}
.rules-modal-close:hover { background: var(--elevated); color: var(--text); }

.rules-modal-body {
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── SHARED RULE LIST STYLES ─────────────────────────────────────────────── */
.rules-section { display: flex; flex-direction: column; gap: 6px; }
.rules-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text2);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.rule-grid { display: flex; flex-direction: column; gap: 3px; }

.rule-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  transition: background .1s;
}
.rule-item:hover { background: var(--elevated); }

.rule-num {
  font-size: 10px;
  font-weight: 700;
  color: var(--blue);
  min-width: 40px;
  flex-shrink: 0;
  padding-top: 2px;
  font-family: var(--font-mono);
}
.rule-text {
  font-size: 11px;
  color: var(--text2);
  line-height: 1.55;
}
.rule-text strong { color: var(--text); }

.ears-rule .rule-num.ears-num { color: var(--purple); }
.ears-rule:hover { background: var(--purple-dim); }

/* ── CATEGORY LEGEND ─────────────────────────────────────────────────────── */
.cat-legend {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 12px;
  font-size: 11px;
}
.legend-title { font-weight: 700; color: var(--text2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; font-size: 10px; }
.legend-grid  { display: flex; flex-wrap: wrap; gap: 6px; }
.legend-grid span {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 11px;
  color: var(--text2);
}

/* ── FILE DROP ZONE ──────────────────────────────────────────────────────── */
.drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--r);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s;
}
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--blue); }
.drop-icon { font-size: 28px; margin-bottom: 6px; }
.drop-zone p { font-size: 12px; color: var(--text2); margin-bottom: 2px; }
.drop-hint { font-size: 10px; color: var(--text3) !important; }

.file-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--green-dim);
  border: 1px solid var(--green);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--green);
  margin-top: 6px;
}

.process-upload-wrap {
  margin-top: 8px;
}

.uploaded-files-panel {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r);
  max-height: 200px;
  overflow: auto;
}

.uploaded-files-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}

.uploaded-empty {
  font-size: 12px;
  color: var(--text3);
  padding: 6px;
}

.uploaded-file-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
}

.uploaded-file-item {
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 7px 9px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.uploaded-file-item:hover {
  border-color: var(--blue);
}

.uploaded-file-item.active {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green-dim);
}

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

.uploaded-file-meta {
  font-size: 10px;
  color: var(--text3);
}

.uploaded-file-delete {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--red);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  cursor: pointer;
  font-size: 12px;
}

.uploaded-file-delete:hover {
  border-color: var(--red);
  background: var(--red-dim);
}

.wait-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: rgba(0, 0, 0, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.wait-card {
  width: min(420px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
}

.wait-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--blue);
  animation: wait-spin 0.9s linear infinite;
}

.wait-title {
  font-size: 16px;
  color: var(--text);
  font-weight: 700;
}

.wait-step {
  font-size: 12px;
  color: var(--text2);
  min-height: 18px;
}

.wait-percent {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
}

.wait-progress {
  height: 4px;
  background: var(--elevated);
  border-radius: 999px;
  overflow: hidden;
}

.wait-progress > span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  border-radius: 999px;
  transition: width .35s ease;
}

@keyframes wait-spin {
  to { transform: rotate(360deg); }
}

/* ── EMPTY STATE ─────────────────────────────────────────────────────────── */
.output-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  color: var(--text3);
  padding: 40px;
}
.empty-icon { font-size: 40px; }
.output-empty p { color: var(--text2); font-size: 13px; }

/* ── Refine thinking panel ─────────────────────────────────────────────── */
.refine-thinking {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  text-align: left;
}
.refine-thinking-header {
  font-size: 15px;
  font-weight: 600;
  color: var(--text1);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.refine-thinking-bot {
  font-size: 22px;
  animation: thinkingPulse 1.4s ease-in-out infinite;
}
@keyframes thinkingPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(0.92); }
}
.refine-thinking-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text2);
  padding: 6px 12px;
  border-radius: 8px;
  width: 100%;
  max-width: 360px;
  transition: color 0.2s, background 0.2s;
}
.refine-thinking-step.done {
  color: var(--text3);
}
.refine-thinking-step.active {
  color: var(--accent, #7c6fcd);
  background: color-mix(in srgb, var(--accent, #7c6fcd) 10%, transparent);
  font-weight: 500;
}
.refine-thinking-step .step-icon {
  font-size: 14px;
  min-width: 18px;
  text-align: center;
}
.refine-thinking-step.active .step-icon {
  display: inline-block;
  animation: spinIcon 0.9s linear infinite;
}
@keyframes spinIcon {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════════════════
   REFINE OUTPUT
   ══════════════════════════════════════════════════════════════════════════ */

.refine-result { display: flex; flex-direction: column; gap: 16px; }

/* Quality score bar */
.quality-compare {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
}
.score-box { text-align: center; min-width: 70px; }
.score-num {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}
.score-num.bad  { color: var(--red); }
.score-num.ok   { color: var(--yellow); }
.score-num.good { color: var(--green); }
.score-lbl { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.score-arrow { font-size: 20px; color: var(--text3); flex: 0; }
.score-divider { flex: 1; }

/* EARS badge */
.ears-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--purple-dim);
  border: 1px solid var(--purple);
  color: var(--purple);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
}

/* Refined requirement card */
.refined-card {
  background: var(--surface);
  border: 2px solid var(--green);
  border-radius: var(--r);
  padding: 16px;
}
.refined-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.refined-card-header h4 { flex: 1; font-size: 12px; color: var(--green); text-transform: uppercase; letter-spacing: .5px; }
.refined-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  font-style: italic;
}

/* Alternative version card */
.alt-card {
  border-color: var(--blue);
}
.alt-card .refined-card-header h4 { color: var(--blue); }
.alt-text {
  white-space: pre-line;
}
.alt-note {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--blue-dim);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--text2);
  line-height: 1.5;
  font-style: normal;
}
.btn-copy {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text2);
  cursor: pointer;
}
.btn-copy:hover { border-color: var(--blue); color: var(--blue); }

/* INCOSE analysis section */
.analysis-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
}
.analysis-card h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
}
.analysis-card h5 {
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  margin-bottom: 5px;
  margin-top: 10px;
}
.analysis-card h5:first-child { margin-top: 0; }
.analysis-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.analysis-list li {
  font-size: 12px;
  color: var(--text2);
  padding-left: 16px;
  position: relative;
}
.analysis-list li::before { content: '•'; position: absolute; left: 4px; color: var(--text3); }
.analysis-list.issues li::before  { content: '✗'; color: var(--red); }
.analysis-list.improvements li::before { content: '✓'; color: var(--green); }
.analysis-list.missing li::before { content: '⚠'; color: var(--yellow); }
.analysis-list.further li::before { content: '💡'; position: absolute; left: 0; }
.analysis-list.further li { padding-left: 20px; }

.refine-rationale-card {
  border-left: 3px solid var(--blue);
}

.refine-rationale-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.refine-rule-pills {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.refine-rule-pill {
  font-size: 10px;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1px 7px;
  color: var(--blue);
  background: var(--blue-dim);
}

.refine-rationale-note {
  font-size: 11px;
  color: var(--text3);
}

/* Inline score help button */
.score-help-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--elevated);
  color: var(--text3);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
  margin-left: 4px;
  align-self: center;
}
.score-help-btn:hover {
  background: var(--blue-dim);
  border-color: var(--blue);
  color: var(--blue);
}

.flags-row { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.flag-chip {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
}
.flag-ok   { background: var(--green-dim); color: var(--green); }
.flag-warn { background: var(--yellow-dim); color: var(--yellow); }
.flag-err  { background: var(--red-dim); color: var(--red); }

/* ── EARS pattern override selector (Refine tab) ── */
.ears-pattern-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg2);
}
.ears-pattern-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ears-pattern-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text1);
  white-space: nowrap;
  cursor: pointer;
}
.ears-pattern-row .field-select { flex: 1; }
.ears-pattern-hint {
  font-size: 11px;
  color: var(--text3);
  line-height: 1.45;
}
.ears-pattern-hint code {
  font-size: 10.5px;
  color: var(--text2);
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ── Check-only mode (Refine tab) ── */
.check-only-wrap { margin: 10px 0 4px; }

.check-only-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text2);
  cursor: pointer;
  user-select: none;
}
.check-only-toggle input { accent-color: var(--accent); cursor: pointer; }
.check-only-text strong { color: var(--text1); }

/* ── Rule audit card (check-only results) ── */
.rule-audit-card { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.rule-audit-assess { font-size: 12px; color: var(--text2); line-height: 1.5; margin: 4px 0 0; }

.rule-audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 6px;
}
.rule-audit-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text3);
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.rule-audit-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text2);
  vertical-align: top;
  line-height: 1.45;
}
.rule-audit-table tr:last-child td { border-bottom: none; }

.rule-pill-groups { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rule-pill-groups h5 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text3);
  margin: 0 0 4px;
}
.rule-pill-pass { color: var(--green); background: var(--green-dim); border-color: transparent; }
.rule-pill-na   { color: var(--text3); background: var(--bg2); }

/* ── Post-refine rule audit section (refined card) ── */
.analysis-card.post-audit-ok   { border-left: 3px solid var(--green); }
.analysis-card.post-audit-warn { border-left: 3px solid var(--yellow); }
.post-audit-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--text3);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 8px;
}
.post-audit-clean {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--green);
  margin: 4px 0 0;
}
.post-audit-ears {
  font-size: 12px;
  line-height: 1.45;
  margin: 4px 0 0;
}
.post-audit-ears.ok   { color: var(--green); }
.post-audit-ears.warn { color: var(--yellow); }

/* ── Edit-and-revalidate loop on the refined card ── */
.refine-edit-area { margin-top: 4px; }

.refine-edit-textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 10px;
  color: var(--text1);
  background: var(--bg2);
  border: 1px solid var(--accent);
  border-radius: 6px;
  resize: vertical;
}

.refine-edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.refine-edit-hint { font-size: 11px; color: var(--text3); font-style: italic; }

/* ══════════════════════════════════════════════════════════════════════════
   EXTRACT OUTPUT
   ══════════════════════════════════════════════════════════════════════════ */

.extract-result { display: flex; flex-direction: column; gap: 14px; }

.extract-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.extract-summary h4 { font-size: 15px; font-weight: 700; }
.extract-system-summary { font-size: 12px; color: var(--text2); line-height: 1.5; }

.cat-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cat-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  letter-spacing: .3px;
}
.cat-functional     { background: var(--blue-dim);   color: var(--blue); }
.cat-performance    { background: var(--purple-dim); color: var(--purple); }
.cat-safety         { background: var(--red-dim);    color: var(--red); }
.cat-security       { background: var(--yellow-dim); color: var(--yellow); }
.cat-interface      { background: var(--green-dim);  color: var(--green); }
.cat-environmental  { background: #1a2a1f; color: #56d364; }
.cat-reliability    { background: #1a1a3a; color: #9fa8da; }
.cat-maintainability{ background: #2a1a2a; color: #ce93d8; }
.cat-regulatory     { background: #2a2a1a; color: #fff176; }
.cat-constraint     { background: var(--elevated);  color: var(--text2); }
.cat-non_functional { background: var(--elevated);  color: var(--text2); }
.cat-system         { background: var(--blue-dim);  color: var(--blue); }
.cat-default        { background: var(--elevated);  color: var(--text2); }

.export-bar {
  display: flex;
  gap: 8px;
  align-items: center;
}
.extract-filter {
  flex: 1;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  color: var(--text);
  font-size: 12px;
}
.extract-filter:focus { outline: none; border-color: var(--focus); }

.req-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.req-group-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--text3);
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

.req-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 11px 13px;
  transition: border-color .1s;
}
.req-card:hover { border-color: var(--focus); }
.req-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.req-id { font-family: var(--font-mono); font-size: 11px; color: var(--blue); }
.req-card-text { font-size: 13px; color: var(--text); line-height: 1.5; }
.req-card-meta { font-size: 10px; color: var(--text3); margin-top: 5px; }
.req-card-parent { font-size: 10px; color: var(--text3); margin-top: 2px; font-family: var(--font-mono); }

/* Small badges */
.badge {
  display: inline-flex;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
}
.badge-L1 { background: var(--blue-dim);   color: var(--blue); }
.badge-L2 { background: var(--green-dim);  color: var(--green); }
.badge-L3 { background: var(--yellow-dim); color: var(--yellow); }
.badge-shall  { background: var(--blue-dim);   color: var(--blue); }
.badge-should { background: var(--yellow-dim); color: var(--yellow); }
.badge-may    { background: var(--elevated);   color: var(--text2); }

/* ══════════════════════════════════════════════════════════════════════════
   GAP OUTPUT
   ══════════════════════════════════════════════════════════════════════════ */

.gap-result { display: flex; flex-direction: column; gap: 16px; }

.cat-legend { display: none; }

.gap-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gap-input-meta-row {
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gap-input-meta {
  font-size: 11px;
  color: var(--text3);
}

.gap-quick-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gap-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gap-action-row .btn-run {
  flex: 1 1 240px;
}

.gap-msg {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 13px;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
}

.gap-msg.assistant {
  border-left: 3px solid var(--blue);
}

.gap-msg-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.gap-msg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

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

.gap-intent-chip {
  display: inline-block;
  margin-top: 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  color: var(--text3);
  background: var(--elevated);
}

.gap-chat-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gap-chatbot-status {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.gap-chatbot-box {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--elevated);
  padding: 10px;
}

.gap-chatbot-box.empty {
  background: var(--surface);
}

.gap-chatbot-head {
  font-size: 11px;
  color: var(--text2);
  margin-bottom: 6px;
}

.gap-chatbot-question {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
}

.gap-chatbot-context {
  margin-top: 5px;
  font-size: 11px;
  color: var(--text2);
}

#gap-chatbot-answer {
  width: 100%;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  padding: 8px;
  font-size: 12px;
  resize: vertical;
}

.gap-chatbot-guide {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text3);
}

.gap-template-title {
  margin-top: 9px;
  font-size: 11px;
  color: var(--text2);
}

.gap-template-list {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gap-template-chip {
  border: 1px dashed var(--border);
  background: var(--surface);
  color: var(--text2);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 10px;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}

.gap-template-chip:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-dim);
}

.gap-chatbot-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gap-full-review {
  margin-top: 10px;
}

.gap-full-review summary {
  cursor: pointer;
  color: var(--text2);
  font-size: 12px;
}

.gap-meta-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 5px;
}

.gap-meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  border: 1px solid var(--border);
  background: var(--elevated);
  color: var(--text2);
}

.gap-meta-chip.conf-high { border-color: var(--green-dim); color: var(--green); }
.gap-meta-chip.conf-medium { border-color: var(--yellow-dim); color: var(--yellow); }
.gap-meta-chip.conf-low { border-color: var(--red-dim); color: var(--red); }

.gap-meta-chip.asm-evidence-linked { border-color: var(--blue-dim); color: var(--blue); }
.gap-meta-chip.asm-assumption-based { border-color: var(--text3); color: var(--text2); }

.gap-meta-note {
  font-size: 11px;
  color: var(--text3);
  margin-bottom: 6px;
}

.gap-system-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}

.gap-diagram-output {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gap-diagram-block h5 {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--text);
}

.gap-flow-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gap-flow-item {
  border: 1px solid var(--border);
  background: var(--elevated);
  border-radius: var(--r-sm);
  padding: 9px;
}

.gap-flow-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.gap-flow-order {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--blue);
}

.gap-flow-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gap-flow-order {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--blue);
}

.gap-flow-ref {
  font-size: 10px;
  color: var(--text3);
}

.gap-flow-summary {
  font-size: 12px;
  color: var(--text);
}

.gap-flow-risk {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text2);
}

.gap-flow-q {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  color: var(--text2);
}

.gap-flow-item textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--text);
  padding: 7px 8px;
  font-size: 12px;
  resize: vertical;
  margin-top: 5px;
}

.gap-flow-confirm-row {
  margin-top: 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text2);
}

.gap-agentic-plan,
.gap-exec-details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px;
}

.gap-plan-header h4,
.gap-exec-details h4 {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--text);
}

.gap-plan-header p,
.gap-exec-overview {
  margin: 0;
  color: var(--text2);
  font-size: 12px;
  line-height: 1.5;
}

.gap-plan-steps,
.gap-exec-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.gap-plan-step,
.gap-exec-step {
  display: flex;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 10px;
  background: var(--elevated);
}

.gap-plan-step-id,
.gap-exec-step-id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--blue);
  flex-shrink: 0;
}

.gap-plan-step-title,
.gap-exec-step-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.gap-plan-step-purpose,
.gap-plan-step-output,
.gap-exec-step-purpose {
  font-size: 11px;
  color: var(--text2);
  line-height: 1.4;
}

.gap-plan-step-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gap-plan-inputs {
  margin-top: 12px;
}

.gap-plan-inputs h4,
.gap-plan-notes h4 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text2);
}

.gap-plan-input-row {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px;
  background: var(--elevated);
}

.gap-plan-input-row.missing {
  border-color: var(--yellow);
}

.gap-plan-input-row.provided {
  border-color: var(--green-dim);
}

.gap-plan-input-row label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text);
}

.gap-plan-input-row textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--text);
  padding: 7px 8px;
  font-size: 12px;
  resize: vertical;
}

.gap-plan-why {
  margin-top: 6px;
  color: var(--text3);
  font-size: 11px;
}

.gap-plan-ready {
  font-size: 12px;
  color: var(--green);
}

.gap-plan-metrics {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.gap-metric-chip {
  font-size: 10px;
  color: var(--text2);
  border: 1px solid var(--border);
  background: var(--elevated);
  border-radius: 999px;
  padding: 2px 8px;
}

.gap-metric-chip.warn {
  border-color: var(--yellow);
  color: var(--yellow);
}

.gap-metric-chip.ok {
  border-color: var(--green-dim);
  color: var(--green);
}

.gap-plan-notes {
  margin-top: 10px;
}

.gap-plan-notes ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text2);
  font-size: 12px;
}

.gap-plan-actions {
  margin-top: 10px;
}

.gap-exec-step-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gap-exec-notes {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gap-exec-note {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 10px;
  color: var(--text2);
  padding: 3px 8px;
}

.gap-tool-trace {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gap-tool-row {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--elevated);
  padding: 8px 9px;
}

.gap-tool-row.tool {
  border-left: 3px solid var(--blue);
}

.gap-tool-row.observation {
  border-left: 3px solid var(--green);
}

.gap-tool-row.thought {
  border-left: 3px solid var(--yellow);
}

.gap-tool-row.error {
  border-left: 3px solid var(--red);
}

.gap-tool-kind {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}

.gap-tool-body {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text2);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Score header */
.gap-score-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.score-ring {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 5px solid var(--border);
  position: relative;
}
.score-ring.high { border-color: var(--green); }
.score-ring.mid  { border-color: var(--yellow); }
.score-ring.low  { border-color: var(--red); }
.score-pct  { font-size: 26px; font-weight: 700; }
.score-ring.high .score-pct { color: var(--green); }
.score-ring.mid  .score-pct { color: var(--yellow); }
.score-ring.low  .score-pct { color: var(--red); }
.score-ring-lbl { font-size: 9px; color: var(--text3); text-transform: uppercase; }
.score-assessment { font-size: 13px; color: var(--text2); line-height: 1.6; flex: 1; }

/* Coverage grid */
.coverage-section h4,
.gaps-section h4,
.wf-section h4,
.rec-section h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text2);
  margin-bottom: 10px;
}

.coverage-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.coverage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.cov-icon { font-size: 14px; flex-shrink: 0; }
.cov-cat  { flex: 1; font-size: 13px; }
.cov-status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}
.cov-covered { background: var(--green-dim);  color: var(--green); }
.cov-partial  { background: var(--yellow-dim); color: var(--yellow); }
.cov-missing  { background: var(--red-dim);    color: var(--red); }
.cov-notes { font-size: 11px; color: var(--text3); max-width: 220px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

/* Gap cards */
.gap-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 13px 14px;
  margin-bottom: 8px;
}
.gap-card.critical { border-left: 3px solid var(--red); }
.gap-card.major    { border-left: 3px solid var(--yellow); }
.gap-card.minor    { border-left: 3px solid var(--text3); }
.gap-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.sev-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: .5px;
}
.sev-critical { background: var(--red-dim);    color: var(--red); }
.sev-major    { background: var(--yellow-dim); color: var(--yellow); }
.sev-minor    { background: var(--elevated);   color: var(--text2); }
.gap-title  { font-weight: 600; font-size: 13px; flex: 1; }
.gap-desc   { font-size: 12px; color: var(--text2); margin-bottom: 7px; line-height: 1.5; }
.gap-evidence {
  background: var(--elevated);
  border-radius: var(--r-sm);
  padding: 6px 9px;
  font-size: 11px;
  color: var(--text2);
}
.gap-evidence strong { color: var(--blue); display: block; margin-bottom: 1px; font-size: 10px; }

/* WF issues */
.wf-item {
  background: var(--surface);
  border: 1px solid var(--yellow-dim);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 12px;
}
.wf-req { font-family: var(--font-mono); font-size: 10px; color: var(--yellow); margin-bottom: 3px; }
.wf-desc { color: var(--text2); margin-bottom: 3px; }
.wf-sug  { color: var(--blue); font-size: 11px; }

/* Recommendations */
.rec-list { display: flex; flex-direction: column; gap: 5px; }
.rec-item {
  background: var(--surface);
  border: 1px solid var(--green-dim);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  font-size: 12px;
  color: var(--text2);
  display: flex;
  gap: 8px;
}
.rec-item::before { content: '→'; color: var(--green); flex-shrink: 0; }

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn-sec {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text2);
  cursor: pointer;
}
.btn-sec:hover { border-color: var(--blue); color: var(--blue); }

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
#app-footer {
  height: var(--ftr);
  background: var(--elevated);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  font-size: 11px;
  color: var(--text3);
  flex-shrink: 0;
}
#footer-time { margin-left: auto; }

/* ── TOASTS ──────────────────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 38px;
  right: 16px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 9px 14px;
  font-size: 12px;
  color: var(--text);
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
  animation: fadeIn .2s ease;
  max-width: 320px;
  pointer-events: auto;
}
.toast.success { border-color: var(--green); }
.toast.error   { border-color: var(--red); color: var(--red); }
.toast.warning { border-color: var(--yellow); color: var(--yellow); }
@keyframes fadeIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }

/* ── FEEDBACK BUTTONS ─────────────────────────────────────────────────────── */
.feedback-group {
  display: flex;
  gap: 2px;
  align-items: center;
}
.feedback-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
  opacity: .6;
}
.feedback-btn:hover:not(:disabled) { opacity: 1; border-color: var(--text3); }
.feedback-btn:disabled { cursor: default; opacity: .4; }
.feedback-btn.active-good { opacity: 1; border-color: var(--green); background: rgba(76,175,80,.12); }
.feedback-btn.active-bad  { opacity: 1; border-color: var(--red); background: rgba(244,67,54,.12); }

/* ── CHAT MODAL ───────────────────────────────────────────────────────────── */
.chat-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-modal {
  background: #f7fbff;
  color: #142033;
  border: 1px solid #c7d8ee;
  border-radius: var(--r-md);
  width: 520px;
  max-width: calc(100vw - 40px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.jira-release-issue-modal {
  width: min(1220px, calc(100vw - 40px));
  max-width: min(1220px, calc(100vw - 40px));
  max-height: 88vh;
}
.jira-release-popup-body {
  flex: 1;
  overflow: auto;
  padding: 14px;
  background: var(--base);
}
.chat-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #c7d8ee;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
  flex-shrink: 0;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-bubble {
  max-width: 90%;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  line-height: 1.55;
}
.chat-bubble.bot {
  background: #eef5ff;
  border: 1px solid #c8daf5;
  color: #1b2c45;
  align-self: flex-start;
}
.chat-bubble.user {
  background: #1267d8;
  border: 1px solid #0f57b8;
  align-self: flex-end;
  color: #ffffff;
}
.detected-req-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.detected-req-list li {
  background: #ffffff;
  border: 1px solid #d4e2f5;
  border-left: 3px solid var(--blue);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 12px;
  color: #22324a;
}
.detected-req-list li strong {
  color: var(--blue);
  font-size: 11px;
  display: inline;
  margin-right: 4px;
}
.detected-req-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
.detected-req-check input[type="checkbox"] {
  margin-top: 2px;
  width: 15px;
  height: 15px;
  accent-color: var(--green);
  cursor: pointer;
  flex-shrink: 0;
}
.req-check-label {
  flex: 1;
  line-height: 1.4;
}
.check-hint {
  margin-top: 10px;
  font-size: 11px;
  color: #445670;
  font-style: italic;
  border-top: 1px solid #d6e4f7;
  padding-top: 8px;
}
.chat-diff-wrap {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-diff-head {
  font-size: 12px;
  color: var(--text2);
  font-weight: 600;
}
.chat-diff-card {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--base);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.chat-diff-card.numeric {
  border-left: 3px solid var(--yellow);
}
.chat-diff-title {
  color: var(--text2);
  font-weight: 600;
}
.chat-diff-row {
  color: var(--text2);
  line-height: 1.45;
}
.chat-diff-tag {
  display: inline-block;
  min-width: 48px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: 6px;
  color: var(--text3);
}
.chat-diff-tag.old { color: var(--red); }
.chat-diff-tag.new { color: var(--green); }
.chat-diff-remove {
  background: rgba(244, 67, 54, .14);
  border: 1px solid rgba(244, 67, 54, .35);
  border-radius: 4px;
  padding: 1px 4px;
}
.chat-diff-add {
  background: rgba(76, 175, 80, .14);
  border: 1px solid rgba(76, 175, 80, .35);
  border-radius: 4px;
  padding: 1px 4px;
}
.chat-diff-metrics {
  font-size: 11px;
  color: var(--yellow);
}
.chat-update-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-update-actions .btn-sm {
  padding: 5px 10px;
}
.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #c7d8ee;
  flex-shrink: 0;
}
.chat-input {
  flex: 1;
  background: #ffffff;
  border: 1px solid #b9cde6;
  border-radius: var(--r-sm);
  color: #17263e;
  padding: 8px 12px;
  font-size: 13px;
  outline: none;
}
.chat-input:focus { border-color: var(--blue); }
.chat-send-btn {
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.chat-send-btn:hover { opacity: .85; }
.chat-send-btn:disabled { opacity: .4; cursor: default; }
.chat-processing-hint {
  font-size: 11px;
  color: #3f5675;
  padding: 0 16px 10px;
}

[data-theme="light"] .chat-modal {
  background: #ffffff;
}

/* batch results section */
.batch-result-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  padding: 12px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}
.batch-result-header:first-child { border-top: none; margin-top: 0; }
.batch-req-section {
  border-top: 2px solid var(--border);
  margin-top: 20px;
  padding-top: 16px;
}
.batch-req-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.batch-req-label {
  font-size: 11px;
  color: var(--blue);
  font-weight: 600;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* Collapsible details panel for batch results */
.batch-details {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.batch-details[open] { border-color: var(--blue); }
.batch-details-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  background: var(--surface2);
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  user-select: none;
  list-style: none;
}
.batch-details-summary::-webkit-details-marker { display: none; }
.batch-details-summary::before {
  content: '▶';
  font-size: 9px;
  color: var(--text3);
  transition: transform .15s;
  flex-shrink: 0;
}
.batch-details[open] > .batch-details-summary::before { transform: rotate(90deg); }
.batch-details-summary:hover { background: var(--surface3); }
.batch-details-label { flex: 1; }
.batch-details > .quality-compare,
.batch-details > .flags-row,
.batch-details > .analysis-card {
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: 1px solid var(--border);
  border-bottom: none;
}
.batch-details > *:not(.batch-details-summary) {
  padding-left: 12px;
  padding-right: 12px;
}
.score-inline {
  font-size: 12px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface3);
}
.score-inline.good { color: var(--green); }
.score-inline.ok   { color: var(--yellow); }
.score-inline.bad  { color: var(--red); }

/* ── UTILITY ─────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.non-auth-banner {
  background: var(--yellow-dim);
  border: 1px solid var(--yellow);
  color: var(--yellow);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  font-size: 11px;
}

@media (max-width: 1100px) {
  #app-header {
    flex-wrap: wrap;
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .mode-nav {
    order: 3;
    width: 100%;
    justify-content: flex-start;
  }

  .mode-panel.active {
    padding: 8px;
  }

  /* Stacked layout: the split must keep filling the viewport (body/mode-panel
     are overflow:hidden — height:auto would grow past them and clip the output
     column). min-height:0 lets the output flex child shrink and scroll. */
  .panel-split {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }

  .panel-input {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 42vh;
    flex-shrink: 0;
  }

  .panel-output {
    min-height: 0;
  }
}

/* ── Raw Requirements Checklist ─────────────────────────────────────────────── */
.raw-reqs-section {
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.raw-reqs-header h4 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
}

.raw-reqs-sub {
  font-weight: 400;
  font-size: 12px;
  color: var(--text2);
}

.raw-reqs-hint {
  font-size: 12px;
  color: var(--text3);
  margin: 0;
}

.raw-reqs-controls {
  display: flex;
  gap: 10px;
}

.raw-reqs-header-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Check-only output (rule audit / conflict summary) shown inside the
   checklist section, right under its header */
.raw-check-results-box {
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  background: var(--bg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.raw-check-dismiss {
  align-self: flex-end;
  color: var(--text3);
}

.raw-reqs-check-top {
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

.raw-reqs-clear {
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--red, #e5534b);
}

.btn-link-sm {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-link-sm:hover { opacity: .75; }

.raw-reqs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.raw-req-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .1s, background .1s;
}

.raw-req-item:hover { border-color: var(--focus); background: var(--base); }

.raw-req-item input[type="checkbox"] {
  margin-top: 2px;
  width: 15px;
  height: 15px;
  accent-color: var(--green);
  cursor: pointer;
  flex-shrink: 0;
}

.raw-req-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
}

.raw-reqs-empty {
  font-size: 12px;
  color: var(--text3);
  font-style: italic;
  margin: 0;
}

.raw-reqs-add-row {
  display: flex;
  gap: 8px;
}

.raw-req-add-input {
  flex: 1;
  background: var(--base);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text);
}

.raw-req-add-input:focus {
  outline: none;
  border-color: var(--focus);
}

.raw-reqs-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.btn-approve-raw {
  background: var(--green) !important;
  padding: 8px 18px !important;
}

/* Refine options (methodology / EARS mandate / custom standard) */
.raw-reqs-refine-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  padding: 8px 0 2px;
}

.raw-opt {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.raw-opt label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text2);
}

.raw-req-split-btn {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

.raw-req-split-note {
  font-size: 11px;
  color: var(--text3);
  font-style: italic;
}

.raw-conflict-quotes {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text3);
  font-family: monospace;
}

.extract-refined-item { margin-bottom: 12px; }

/* ── PlantUML Diagram Section ─────────────────────────────────────────────── */

.diagram-section {
  margin-top: 28px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.diagram-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.diagram-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.diagram-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.diagram-type-select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--elevated);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.diagram-type-select:focus {
  outline: none;
  border-color: var(--focus);
}

.diagram-gen-btn {
  padding: 7px 16px !important;
  font-size: 13px !important;
}

.diagram-title-label {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px 0;
  font-style: italic;
}

.diagram-svg-wrap {
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 16px;
  overflow-x: auto;
  max-width: 100%;
  margin-bottom: 12px;
}

.diagram-svg-wrap svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.diagram-jar-warn {
  background: color-mix(in srgb, var(--yellow, #d29922) 12%, transparent);
  border: 1px solid var(--yellow, #d29922);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 12px;
}

.diagram-jar-warn p {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: var(--muted);
}

.diagram-jar-warn code {
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}

.diagram-code-details {
  margin-top: 10px;
}

.diagram-code-details summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  user-select: none;
  padding: 4px 0;
}

.diagram-code-details summary:hover {
  color: var(--text);
}

.diagram-code-block {
  position: relative;
  margin-top: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

.diagram-code-block .btn-sm {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 11px !important;
  padding: 3px 9px !important;
}

.diagram-code-block pre {
  margin: 0;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre;
}

.diagram-actions {
  margin: 8px 0 12px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.diagram-dl-label {
  font-size: 12px;
  color: var(--muted);
  margin-right: 2px;
}

/* ── JIRA INTEGRATION ───────────────────────────────────────────────────── */

#panel-jira {
  padding: 0;
}

.jira-project-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: calc(100vh - 162px);
}

.jira-project-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 8px;
  background: var(--elevated);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.jira-project-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}

.jira-project-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.jira-project-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.jira-project-type {
  font-size: 11px;
  color: var(--text2);
}

.jira-nav-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 2px solid #DFE1E6;
  padding: 0 8px;
  background: var(--bg);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-shrink: 0;
}

.jira-nav-bar::-webkit-scrollbar {
  display: none;
}

.jira-nav-tab {
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #44546F;
  font-size: 14px;
  font-weight: 400;
  padding: 0 12px;
  height: 40px;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 40px;
  transition: color .1s, background .1s, border-bottom-color .1s;
}

.jira-nav-tab:hover {
  background: rgba(9, 30, 66, .04);
  color: #172B4D;
  text-decoration: underline;
}

.jira-nav-tab.active {
  color: #0052CC;
  border-bottom-color: #0052CC;
  font-weight: 500;
}

.jira-panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.jira-subtab-panel {
  display: none;
  min-height: 0;
}

.jira-subtab-panel.active {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.jira-summary-hierarchy {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--elevated);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.jira-summary-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.jira-summary-node {
  display: inline-flex;
  align-items: center;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
}

.jira-summary-node:hover {
  filter: brightness(1.08);
}

.jira-summary-node:active {
  transform: translateY(1px);
}

.jira-summary-node:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.jira-summary-node-parent {
  color: #5E4DB2;
  border: 1px solid rgba(94, 77, 178, .35);
  background: rgba(94, 77, 178, .14);
}

.jira-summary-node-child {
  color: #0052CC;
  border: 1px solid rgba(0, 82, 204, .35);
  background: rgba(0, 82, 204, .12);
}

.jira-summary-node.active {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 0 0 2px rgba(56, 139, 253, .25);
}

.jira-summary-sep {
  color: var(--text2);
  font-size: 13px;
}

.jira-summary-cat-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: .3px;
}

.jira-summary-hint {
  font-size: 12px;
  color: var(--text2);
}

.jira-summary-node-selected {
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(0, 82, 204, .25);
}

.jira-summary-children {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
}

.jira-summary-children:empty {
  display: none;
}

.jira-summary-children-label {
  font-size: 11px;
  color: var(--text2);
  white-space: nowrap;
  flex-shrink: 0;
}

.jira-summary-child-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  padding: 3px 10px;
  cursor: pointer;
  transition: border-color .1s, background .1s;
  white-space: nowrap;
}

.jira-summary-child-chip:hover {
  border-color: #0052CC;
  background: rgba(0, 82, 204, .08);
  color: #0052CC;
}

.jira-summary-chip-board {
  border-color: var(--border);
  cursor: pointer;
}

.jira-summary-chip-board:hover {
  border-color: #0052CC;
  background: rgba(0, 82, 204, .06);
  color: inherit;
}

.jira-summary-child-chip.is-selected {
  border-color: #0052CC;
  background: rgba(0, 82, 204, .12);
  color: #003f9e;
}

.jira-summary-chip-key {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text2);
  background: var(--elevated);
  border-radius: 4px;
  padding: 1px 5px;
}

.jira-summary-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.jira-summary-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--elevated);
  padding: 12px;
}

.jira-summary-hero-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.jira-summary-hero-key {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--blue);
  background: rgba(0, 82, 204, .10);
  border: 1px solid rgba(0, 82, 204, .24);
  border-radius: 999px;
  padding: 2px 8px;
}

.jira-summary-hero h4 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  color: var(--text);
}

.jira-summary-hero p {
  margin: 0;
  font-size: 12px;
  color: var(--text2);
}

.jira-summary-hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}

.jira-summary-live,
.jira-summary-compat {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border: 1px solid var(--border);
}

.jira-summary-live {
  background: rgba(0, 135, 90, .12);
  color: #006644;
  border-color: rgba(0, 135, 90, .25);
}

.jira-summary-compat {
  background: rgba(0, 82, 204, .12);
  color: #0052CC;
  border-color: rgba(0, 82, 204, .26);
}

.jira-summary-sprint-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.jira-sprint-state-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
  padding: 3px 7px;
  border: 1px solid var(--border);
  text-transform: lowercase;
}

.jira-sprint-state-pill.jira-sprint-state-active {
  background: rgba(0, 135, 90, .12);
  color: #006644;
  border-color: rgba(0, 135, 90, .25);
}

.jira-sprint-state-pill.jira-sprint-state-closed,
.jira-sprint-state-pill.jira-sprint-state-completed {
  background: rgba(94, 108, 132, .14);
  color: #44546F;
  border-color: rgba(94, 108, 132, .3);
}

.jira-sprint-state-pill.jira-sprint-state-future {
  background: rgba(0, 82, 204, .12);
  color: #0052CC;
  border-color: rgba(0, 82, 204, .26);
}

.jira-summary-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.jira-summary-stat {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jira-summary-stat-label {
  font-size: 11px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .35px;
}

.jira-summary-stat-value {
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  color: var(--text);
}

.jira-summary-stat-progress {
  position: relative;
  overflow: hidden;
}

.jira-summary-progress-track {
  height: 8px;
  border-radius: 999px;
  background: var(--elevated);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.jira-summary-progress-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.jira-summary-progress-fill.done {
  background: linear-gradient(90deg, #0D7A5F 0%, #36B37E 100%);
}

.jira-summary-progress-fill.active {
  background: linear-gradient(90deg, #4C9AFF 0%, #0052CC 100%);
}

.jira-summary-content-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(380px, 1.2fr);
  gap: 12px;
  min-height: 0;
}

.jira-summary-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.jira-summary-card {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.jira-summary-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--border);
}

.jira-summary-card-head h5 {
  margin: 0;
  font-size: 12px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .25px;
}

.jira-summary-card-body {
  padding: 9px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jira-summary-project-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.jira-summary-project-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #5E6C84;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.jira-summary-project-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jira-summary-project-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.jira-summary-project-meta strong {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jira-summary-project-meta span {
  font-size: 11px;
  color: var(--text2);
}

.jira-summary-prose {
  font-size: 12px;
  color: var(--text);
  line-height: 1.45;
  word-break: break-word;
}

.jira-summary-list {
  display: flex;
  flex-direction: column;
}

.jira-summary-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--border);
  min-height: 34px;
}

.jira-summary-list-row:last-child {
  border-bottom: 0;
}

.jira-summary-list-row.is-clickable {
  cursor: pointer;
  border-radius: 4px;
  padding-left: 6px;
  padding-right: 6px;
}

.jira-summary-list-row.is-clickable:hover {
  background: var(--elevated);
}

.jira-summary-list-row.is-selected {
  background: rgba(0, 82, 204, .10);
  box-shadow: inset 0 0 0 1px rgba(0, 82, 204, .25);
}

.jira-summary-list-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.jira-summary-list-right {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.jira-summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding: 5px 0;
}

.jira-summary-line:last-child {
  border-bottom: 0;
}

.jira-summary-line-main {
  font-size: 12px;
  color: var(--text);
}

.jira-summary-line-meta {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .25px;
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
  background: var(--elevated);
}

.jira-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 260px;
  padding: 40px;
}

.jira-placeholder-icon {
  font-size: 44px;
  line-height: 1;
  opacity: .45;
}

.jira-placeholder-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.jira-placeholder-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text2);
  text-align: center;
  max-width: 380px;
}

.jira-releases-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.1fr);
  gap: 12px;
}

.jira-releases-card {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.jira-releases-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.jira-releases-card-head h5 {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .25px;
  color: var(--text2);
}

.jira-releases-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.jira-release-detail-empty {
  color: var(--text2);
  font-size: 12px;
  min-height: 120px;
  display: flex;
  align-items: center;
}

.jira-releases-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.jira-release-flag {
  font-size: 12px;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.jira-releases-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 980px) {
  .jira-releases-grid {
    grid-template-columns: 1fr;
  }

  .jira-releases-form-grid {
    grid-template-columns: 1fr;
  }
}

.ease-workspace {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  flex: 1;
}

.ease-secondary-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--elevated);
  padding: 8px 10px;
  flex-shrink: 0;
}

.ease-view-tabs {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg);
}

.ease-view-tab {
  border: none;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
}

.ease-view-tab:last-child {
  border-right: none;
}

.ease-view-tab.active {
  color: #0052CC;
  background: rgba(9, 30, 66, .06);
}

.ease-toolbar-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.ease-toolbar-input {
  height: 30px;
  min-width: 110px;
  max-width: 170px;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  background: var(--bg);
}

.ease-hidden-field {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ease-workspace-body {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  display: grid;
  grid-template-columns: minmax(320px, 38%) minmax(0, 1fr);
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.ease-tree-sidebar {
  border-right: 1px solid var(--border);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.ease-details-main {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: auto;
}

.ease-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ease-pane-head h4 {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

.ease-pane-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ease-context-note {
  margin: 0;
  font-size: 12px;
  color: var(--text2);
}

/* ═══════════════════════════════════════════════════════════════════════
   Jira Issue View (JIV) — Item Details Panel
   ═══════════════════════════════════════════════════════════════════════ */

.jiv-view {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  overflow-y: auto;
}

/* ── Header ─────────────────────────────────────────────────────────── */

.jiv-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}

.jiv-breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text2);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.jiv-breadcrumb strong {
  color: var(--text);
  font-weight: 600;
}

.jiv-bc-sep {
  color: var(--text3, var(--text2));
  opacity: .5;
}

.jiv-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.jiv-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  flex: 1 1 0;
  min-width: 0;
  word-break: break-word;
}

.jiv-header-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  padding-top: 3px;
}

/* ── Key badge ───────────────────────────────────────────────────────── */

.jiv-key-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  background: rgba(0, 82, 204, .10);
  color: #0052CC;
  border: 1px solid rgba(0, 82, 204, .25);
  white-space: nowrap;
  letter-spacing: .3px;
}

/* ── Type badge ──────────────────────────────────────────────────────── */

.jiv-type-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  background: var(--elevated);
  color: var(--text2);
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* ── Status lozenges ────────────────────────────────────────────────── */

.jiv-status-lozenge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}

.jiv-status-todo {
  background: rgba(9, 30, 66, .08);
  color: #42526E;
}

.jiv-status-inprogress {
  background: rgba(0, 82, 204, .12);
  color: #0052CC;
}

.jiv-status-done {
  background: rgba(0, 135, 90, .13);
  color: #006644;
}

/* ── Description in header ──────────────────────────────────────────── */

.jiv-description {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
}

/* ── Accordion sections ─────────────────────────────────────────────── */

.jiv-sections {
  display: flex;
  flex-direction: column;
}

.jiv-section {
  border-bottom: 1px solid var(--border);
}

.jiv-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 20px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  transition: background .1s;
  user-select: none;
}

.jiv-section-header:hover {
  background: var(--elevated);
}

.jiv-section-arrow {
  font-size: 11px;
  color: var(--text2);
  width: 14px;
  flex-shrink: 0;
  transition: transform .15s;
}

.jiv-section-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.jiv-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: var(--elevated);
  color: var(--text2);
  border: 1px solid var(--border);
}

.jiv-section-body {
  padding: 4px 20px 14px 20px;
}

/* ── Fields grid inside Details section ─────────────────────────────── */

.jiv-field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.jiv-field:last-child {
  border-bottom: 0;
}

.jiv-field-label {
  color: var(--text2);
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
  min-width: 80px;
}

.jiv-field-value {
  color: var(--text);
  text-align: right;
  word-break: break-word;
  font-size: 12px;
}

/* ── Misc element helpers ───────────────────────────────────────────── */

.jiv-link {
  color: var(--blue);
  text-decoration: none;
  font-size: 12px;
}

.jiv-link:hover {
  text-decoration: underline;
}

.jiv-code {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--text);
}

.jiv-empty {
  font-size: 12px;
  color: var(--text2);
  font-style: italic;
  margin: 0;
}

.jiv-prose {
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Linked Issues list ─────────────────────────────────────────────── */

.jiv-linked-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jiv-link-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--blue);
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 4px 8px;
}

/* ── Revisions list ─────────────────────────────────────────────────── */

.jiv-revision-list {
  margin: 0;
  padding: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jiv-revision-item {
  font-size: 11px;
  color: var(--text);
  line-height: 1.4;
  border-left: 2px solid var(--border);
  padding-left: 8px;
  margin-left: -10px;
}

/* ── Comments ───────────────────────────────────────────────────────── */

.jiv-comment {
  font-size: 12px;
  color: var(--text);
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  line-height: 1.5;
  word-break: break-word;
  margin-bottom: 6px;
}

.jiv-comment:last-child {
  margin-bottom: 0;
}

/* ── Keep old helpers that are still referenced ─────────────────────── */

.ease-detail-text {
  font-size: 12px;
  color: var(--text);
  line-height: 1.45;
  word-break: break-word;
}

.ease-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ease-detail-full {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  padding: 10px;
}

.ease-detail-full h5 {
  margin: 0 0 6px 0;
  font-size: 12px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .2px;
}

.ease-detail-text {
  font-size: 12px;
  color: var(--text);
  line-height: 1.45;
  word-break: break-word;
}

.ease-detail-rich {
  font-size: 12px;
  color: var(--text);
  line-height: 1.45;
  word-break: break-word;
}

.ease-detail-rich img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--border);
  margin: 6px 0;
}

.ease-detail-rich a {
  color: var(--blue);
  text-decoration: underline;
}

.ease-error-banner {
  border: 1px solid rgba(248,81,73,.5);
  border-radius: var(--r-sm);
  background: rgba(248,81,73,.12);
  color: #ffb1ac;
  font-size: 12px;
  padding: 8px 10px;
}

.ease-advanced-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--elevated);
  padding: 8px;
  margin-top: 12px;
}

.ease-advanced-panel summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  user-select: none;
}

.ease-advanced-panel[open] summary {
  margin-bottom: 8px;
}

.ease-advanced-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
}

.ease-advanced-controls .ease-toolbar-input {
  width: 140px;
}

.ease-diagnostics-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--elevated);
  padding: 8px;
  margin-top: 8px;
}

.ease-diagnostics-panel summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  user-select: none;
}

.ease-diagnostics-panel[open] summary {
  margin-bottom: 8px;
}

.jira-ease-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--elevated);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.jira-ease-card-head h3 {
  margin: 0;
  font-size: 14px;
}

.jira-ease-card-head p {
  margin: 4px 0 0;
  color: var(--text2);
  font-size: 12px;
}

.jira-ease-grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.jira-ease-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jira-ease-actions-row.wrap {
  flex-wrap: wrap;
}

.jira-ease-depth-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  padding: 4px 8px;
}

.jira-ease-depth-wrap input {
  width: 56px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--elevated);
  color: var(--text);
  font-size: 12px;
  padding: 0 6px;
}

.jira-ease-depth-wrap input:focus {
  outline: none;
  border-color: var(--blue);
}

.jira-ease-include-jira-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  padding: 4px 8px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.jira-ease-include-jira-wrap input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--blue);
}

.jira-ease-hint {
  margin: 0;
  font-size: 12px;
  color: var(--text2);
}

.jira-ease-empty {
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text2);
  font-size: 12px;
  padding: 12px;
}

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

.jira-ease-kv-row {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jira-ease-kv-label {
  color: var(--text2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 700;
}

.jira-ease-kv-value {
  color: var(--text);
  font-size: 12px;
  word-break: break-word;
}

.jira-ease-diagnostics {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jira-ease-diagnostics-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
}

.jira-ease-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text3);
  display: inline-block;
}

.jira-ease-dot.good { background: var(--green); }
.jira-ease-dot.warn { background: var(--yellow); }
.jira-ease-dot.bad { background: var(--red); }

.ease-tree-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  padding: 8px;
  min-height: 0;
  flex: 1;
  overflow: auto;
}

.ease-tree-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.ease-tree-node:hover {
  background: var(--elevated);
}

.ease-tree-node.active {
  background: rgba(38, 132, 255, .14);
  outline: 1px solid rgba(38, 132, 255, .45);
}

.ease-tree-indent {
  display: inline-block;
  width: 14px;
  flex-shrink: 0;
}

.ease-tree-toggle {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}

.ease-tree-toggle:hover {
  background: var(--elevated);
  color: var(--text);
}

.ease-tree-toggle-spacer {
  width: 16px;
  height: 16px;
  display: inline-block;
  flex-shrink: 0;
}

.ease-tree-icon {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.ease-tree-label {
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ease-tree-meta {
  color: var(--text2);
  font-size: 11px;
  margin-left: auto;
  white-space: nowrap;
}

.ease-tree-error {
  color: var(--red);
  font-size: 11px;
}

.jira-toolbar {
  display: grid;
  grid-template-columns: 220px 220px 260px minmax(220px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--elevated);
}

.jira-board-filter-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jira-board-filter {
  min-height: 64px;
  padding: 4px 6px;
  font-size: 11px;
}

.jira-board-filter-status {
  font-size: 10px;
  color: var(--text2);
}

.jira-toolbar-field {
  margin: 0;
}

.jira-toolbar-search {
  width: 100%;
  height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  padding: 0 10px;
}

.jira-toolbar-search:focus {
  outline: none;
  border-color: var(--blue);
}

.jira-view-toggle {
  margin-left: 4px;
}

.btn-run-inline {
  margin: 0;
  width: auto;
  height: 32px;
  padding: 0 14px;
}

.jira-backlog-body {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
}

.jira-backlog-output {
  min-height: 0;
  height: 100%;
  overflow: auto;
  padding: 0;
}

.jira-create-panel {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--elevated);
  padding: 10px;
}

.jira-create-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  letter-spacing: .4px;
  text-transform: uppercase;
  margin: 2px 2px 10px;
}

.jira-create-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.jira-create-row > div {
  min-width: 0;
}

/* View toggle active state */
.active-toggle { border-color: var(--blue) !important; color: var(--blue) !important; }
.toggle-row { display: flex; gap: 8px; flex-wrap: wrap; }
.opt-mark { color: var(--text2); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Section divider inside left panel */
.section-divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* Select fields */
.field-select {
  width: 100%;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 12px;
  padding: 6px 8px;
}
[data-theme="light"] .field-select { background: #ffffff; border-color: #c9d1d9; }

.jira-dynamic-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jira-dynamic-fields .field {
  margin-bottom: 0;
}

.jira-dynamic-fields .hint {
  font-size: 11px;
  color: var(--text2);
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   JIRA-LIKE UI
   ══════════════════════════════════════════════════════════════════════════ */

/* Issue type icon — small coloured square */
.jira-type-sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 3px;
  font-size: 9px; font-weight: 800; color: #fff;
  flex-shrink: 0; letter-spacing: 0;
}

/* Status lozenge */
.jira-lozenge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; white-space: nowrap;
}

/* ── Issue List ── */
.jira-issue-list { display: flex; flex-direction: column; }

.jira-backlog-list {
  padding: 8px;
  gap: 8px;
}

.jira-sprint-group-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.jira-sprint-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--elevated);
  border-bottom: 1px solid var(--border);
}

.jira-sprint-toggle {
  border: none;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  width: 16px;
  font-size: 10px;
  line-height: 1;
  padding: 0;
}

.jira-sprint-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.jira-sprint-state {
  margin-left: 4px;
  font-size: 10px;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 1px 7px;
  border: 1px solid var(--border);
  color: var(--text2);
}

.jira-sprint-state.active {
  border-color: #0052cc;
  color: #0052cc;
  background: rgba(0, 82, 204, .1);
}

.jira-sprint-state.future,
.jira-sprint-state.backlog {
  border-color: var(--border);
  color: var(--text2);
  background: var(--bg);
}

.jira-sprint-count,
.jira-sprint-points {
  margin-left: auto;
  font-size: 10px;
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  background: var(--bg);
}

.jira-sprint-points {
  margin-left: 0;
}

.jira-sprint-group {
  background: var(--bg);
}

.jira-issue-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer; font-size: 12px; min-height: 36px;
  transition: background .1s;
}
.jira-issue-row:hover { background: var(--elevated); }

.jira-row-left  { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.jira-row-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.jira-row-key {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--blue); font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.jira-row-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }

.jira-story-pts {
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: 3px; padding: 1px 5px; font-size: 10px;
  font-weight: 600; color: var(--text2); white-space: nowrap;
}

.jira-prio-sm { font-size: 14px; flex-shrink: 0; }

.jira-avatar-circle {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff;
  background: #5B6C9B; flex-shrink: 0; overflow: hidden;
}
.jira-avatar-circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.jira-tree-toggle {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  font-size: 10px; color: var(--text2); line-height: 1; flex-shrink: 0;
  width: 14px; text-align: center;
}
.jira-tree-toggle:hover { color: var(--text); }
.jira-children { border-left: 2px solid var(--border); }

/* ── Kanban ── */
.jira-kanban-board {
  display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 8px;
  align-items: flex-start;
}
.jira-kanban-col {
  flex: 0 0 220px; background: var(--elevated);
  border-radius: var(--r-sm); padding: 0;
  border: 1px solid var(--border); overflow: hidden;
}
.jira-kanban-col-header {
  padding: 8px 12px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: var(--text2);
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.jira-col-count {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 1px 6px; font-size: 10px;
}
.jira-kanban-cards { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.jira-kanban-card {
  background: var(--bg); border-radius: 4px;
  border: 1px solid var(--border); padding: 8px;
  cursor: pointer; transition: border-color .1s, box-shadow .1s;
}
.jira-kanban-card:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); }
.jira-card-key  { font-family: var(--font-mono); font-size: 10px; color: var(--blue); margin-bottom: 4px; }
.jira-card-summary { font-size: 12px; line-height: 1.4; margin-bottom: 6px; }
.jira-card-meta { font-size: 10px; color: var(--text2); display: flex; align-items: center; gap: 6px; }

@media (max-width: 1200px) {
  .jira-ease-kv {
    grid-template-columns: 1fr;
  }

  .jira-summary-node {
    max-width: none;
  }

  .ease-detail-grid {
    grid-template-columns: 1fr;
  }

  .jira-summary-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jira-summary-content-grid {
    grid-template-columns: 1fr;
  }

  .ease-secondary-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .ease-toolbar-controls {
    flex-wrap: wrap;
  }

  .ease-workspace-body {
    grid-template-columns: 1fr;
  }

  .ease-tree-sidebar {
    min-height: 300px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .jira-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .jira-view-toggle,
  .btn-run-inline {
    grid-column: span 1;
  }
  .jira-board-filter-wrap,
  .jira-toolbar-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .jira-summary-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .jira-summary-hero-side {
    align-items: flex-start;
    text-align: left;
  }

  .jira-summary-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .jira-project-shell {
    height: auto;
  }
  .jira-backlog-body {
    grid-template-columns: 1fr;
  }
}

/* ── Issue Detail (two-column layout) ── */
.jd-view { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

.jd-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 8px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.jd-back-btn {
  background: none; border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text2); font-size: 12px; padding: 3px 10px; cursor: pointer;
}
.jd-back-btn:hover { background: var(--elevated); color: var(--text); }
.jd-breadcrumb { font-size: 11px; color: var(--text2); display: flex; gap: 6px; align-items: center; }
.jd-breadcrumb-key { font-family: var(--font-mono); color: var(--blue); font-weight: 600; }
.jd-refine-req-btn { margin-left: auto; }

/* Jira load-more row */
.jira-load-more-row { display: flex; justify-content: center; padding: 12px 0; }

/* Jira Req Refine Modal content */
.jira-refine-preview { margin-top: 16px; }
.jira-refine-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text3); margin-bottom: 6px; }
.jira-refine-refined-text { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--text); margin-bottom: 10px; }
.jira-refine-scores { font-size: 11px; color: var(--text3); margin-bottom: 10px; }
.jira-refine-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.jd-layout {
  display: flex; flex: 1; overflow: hidden;
  gap: 0;
}

.jd-main {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 16px;
}

.jd-sidebar {
  width: 240px; flex-shrink: 0;
  border-left: 1px solid var(--border);
  overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 14px;
}

.jd-type-row { display: flex; align-items: center; gap: 6px; }
.jd-type-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 4px;
  font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.jd-type-label { font-size: 12px; color: var(--text2); }

.jd-title {
  font-size: 18px; font-weight: 700; line-height: 1.35;
  color: var(--text); margin: 0;
}
.jd-title-edit { margin-left: 8px; vertical-align: middle; }

.jd-section { display: flex; flex-direction: column; gap: 8px; }
.jd-section-title {
  font-size: 11px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .5px;
  padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.jd-section-title-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.jd-description {
  font-size: 13px; line-height: 1.65; color: var(--text);
  white-space: pre-wrap; padding: 2px 0;
}
.jd-empty-field { color: var(--text2); font-style: italic; font-size: 12px; }

/* Child / linked issues */
.jd-child-issues { display: flex; flex-direction: column; gap: 4px; }
.jd-child-issue {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; font-size: 12px; transition: background .1s;
}
.jd-child-issue:hover { background: var(--elevated); }
.jd-child-key { font-family: var(--font-mono); color: var(--blue); font-size: 11px; font-weight: 600; flex-shrink: 0; }
.jd-child-summary { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jd-link-rel { font-size: 10px; color: var(--text2); flex-shrink: 0; }

/* Comments */
.jd-comments { display: flex; flex-direction: column; gap: 12px; }
.jd-comment { display: flex; flex-direction: column; gap: 4px; }
.jd-comment-header { display: flex; align-items: center; gap: 8px; }
.jd-comment-author { font-weight: 700; font-size: 12px; }
.jd-comment-date { font-size: 11px; color: var(--text2); }
.jd-comment-body { font-size: 12px; line-height: 1.55; color: var(--text); padding-left: 32px; }
.jd-no-comments { color: var(--text2); font-size: 12px; font-style: italic; }

.jd-comment-form { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.jd-comment-input {
  width: 100%; background: var(--elevated); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text); font-size: 12px;
  padding: 8px; resize: vertical; min-height: 60px; box-sizing: border-box;
}
.jd-comment-input:focus { outline: none; border-color: var(--blue); }
.jd-comment-submit-row { display: flex; justify-content: flex-end; }

/* Avatar */
.jd-avatar-initials {
  width: 24px; height: 24px; border-radius: 50%;
  background: #5B6C9B; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; flex-shrink: 0;
}
.jd-avatar-img {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}

/* Sidebar */
.jd-status-section { display: flex; flex-direction: column; gap: 8px; }
.jd-sidebar-lozenge {
  display: inline-block; padding: 4px 10px;
  border-radius: 3px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px; align-self: flex-start;
}
.jd-trans-row { display: flex; flex-wrap: wrap; gap: 4px; }
.jd-trans-btn {
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text); font-size: 11px;
  padding: 4px 10px; cursor: pointer; transition: background .1s;
}
.jd-trans-btn:hover { background: var(--bg2, var(--border)); }

.jd-details-section { display: flex; flex-direction: column; gap: 10px; }
.jd-details-title {
  font-size: 11px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .5px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.jd-field-row { display: flex; flex-direction: column; gap: 2px; }
.jd-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jd-field-label { font-size: 10px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .4px; }
.jd-field-value { font-size: 12px; color: var(--text); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.jd-field-action { display: inline-flex; align-items: center; }
.jd-inline-edit-btn {
  border: 1px solid var(--border);
  background: var(--elevated);
  color: var(--text2);
  border-radius: 4px;
  font-size: 11px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
}
.jd-inline-edit-btn:hover {
  background: var(--bg2, var(--border));
  color: var(--text);
}
.jd-unassigned { color: var(--text2); font-style: italic; }
.jd-person { display: flex; align-items: center; gap: 6px; }
.jd-priority { display: flex; align-items: center; gap: 4px; }
.jd-label {
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: 3px; padding: 1px 6px; font-size: 10px; font-weight: 600;
}

/* Attachments */
.jd-attachment {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0; font-size: 12px;
}
.jd-att-link { color: var(--blue); text-decoration: none; }
.jd-att-link:hover { text-decoration: underline; }
.jd-att-size { font-size: 10px; color: var(--text2); }


/* ── Detail-view inner tabs ── */
.jd-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 12px; flex-wrap: wrap; }
.jd-tab-btn {
  background: none; border: none; border-bottom: 3px solid transparent;
  padding: 7px 14px; font-size: 12px; cursor: pointer; color: var(--text2);
  margin-bottom: -2px; transition: color .15s, border-color .15s; white-space: nowrap;
}
.jd-tab-btn:hover { color: var(--text); }
.jd-tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }
.jd-tab-panel { display: none; }
.jd-tab-panel.active { display: block; }

/* ── Subtask table (jira2.py style) ── */
.jd-subtask-table { display: flex; flex-direction: column; font-size: 12px; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.jd-subtask-header, .jd-subtask-row {
  display: grid;
  grid-template-columns: 100px 1fr 120px 70px 110px 110px 110px 90px;
  gap: 6px; padding: 6px 10px; align-items: center;
}
.jd-subtask-header {
  background: var(--elevated); font-size: 10px; font-weight: 700;
  color: var(--text2); text-transform: uppercase; letter-spacing: .4px;
}
.jd-subtask-row { border-top: 1px solid var(--border); cursor: pointer; transition: background .1s; }
.jd-subtask-row:hover { background: var(--elevated); }
.jd-subtask-key { font-family: var(--font-mono); color: var(--blue); font-weight: 600; font-size: 11px; }
.jd-subtask-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jd-tt-val { font-size: 11px; color: var(--text2); }

/* ── Parent link in sidebar ── */
.jd-parent-link { font-family: var(--font-mono); color: var(--blue); font-size: 11px; font-weight: 600; cursor: pointer; }
.jd-parent-link:hover { text-decoration: underline; }

/* ── Inline time-tracking edit cells ── */
.jd-tt-cell {
  display: inline-flex; align-items: center; gap: 3px;
  cursor: pointer; border-radius: 3px; padding: 1px 4px;
  border: 1px dashed var(--border);
  transition: background .1s, border-color .1s;
}
.jd-tt-cell:hover { background: var(--elevated); border-color: var(--blue); }
.jd-tt-pencil { font-size: 9px; color: var(--text2); opacity: .4; transition: opacity .15s; }
.jd-tt-cell:hover .jd-tt-pencil { opacity: 1; }
.jd-tt-empty { color: var(--text2); }

.jd-tt-input {
  width: 90px; background: var(--bg); border: 2px solid var(--blue);
  border-radius: 3px; color: var(--text); font-size: 11px;
  padding: 2px 5px; outline: none;
}
.jd-tt-ok, .jd-tt-cancel {
  background: none; border: 1px solid var(--border);
  border-radius: 3px; cursor: pointer; font-size: 11px;
  padding: 1px 5px; line-height: 1.4; transition: background .1s;
}
.jd-tt-ok { color: #36B37E; }  .jd-tt-ok:hover { background: #E3FCEF; }
.jd-tt-cancel { color: var(--text2); } .jd-tt-cancel:hover { background: var(--elevated); }
.jd-tt-ok:disabled { opacity: .5; cursor: default; }

/* ═══════════════════════════════════════════════════════════════════════════
   TRACEABILITY MATRIX MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.tm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tm-overlay.hidden { display: none; }

.tm-modal {
  width: min(1180px, 96vw);
  max-height: 90vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
  animation: modal-slide-in .18s ease;
}

/* Header */
.tm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 12px;
}
.tm-header-left { display: flex; align-items: center; gap: 10px; }
.tm-icon { font-size: 20px; line-height: 1; }
.tm-title { font-size: 15px; font-weight: 700; color: var(--text); }
.tm-subtitle { font-size: 11px; color: var(--text3); margin-top: 2px; }
.tm-header-actions { display: flex; align-items: center; gap: 8px; }
.tm-close {
  background: none; border: none; color: var(--text2); font-size: 15px;
  cursor: pointer; padding: 3px 8px; border-radius: 6px; transition: background .12s;
}
.tm-close:hover { background: var(--elevated); color: var(--text); }

/* Body */
.tm-body {
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

/* Table */
.tm-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.tm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.tm-th {
  padding: 9px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text2);
  background: var(--elevated);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.tm-th-num  { width: 36px; text-align: center; }
.tm-th-req  { min-width: 380px; }

.tm-row { transition: background .1s; }
.tm-row-even { background: var(--surface); }
.tm-row-odd  { background: var(--bg); }
.tm-row:hover { background: var(--elevated) !important; }

.tm-td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tm-td-num    { text-align: center; color: var(--text3); font-size: 11px; }
.tm-td-id     { white-space: nowrap; }
.tm-td-req    { line-height: 1.55; white-space: normal; word-break: break-word; }
.tm-td-verify { white-space: nowrap; font-size: 11.5px; color: var(--text2); }

.tm-req-id {
  font-weight: 700;
  font-size: 12px;
  color: var(--text);
  font-family: monospace;
}
.tm-child-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 10px;
  background: rgba(88,166,255,.15);
  color: var(--accent, #58a6ff);
  vertical-align: middle;
}

/* Type badges */
.tm-type-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.tm-badge-func       { background: rgba(63,185,80,.15);  color: #3fb950; }
.tm-badge-nonfunc    { background: rgba(210,153,34,.15); color: #d29922; }
.tm-badge-constraint { background: rgba(248,81,73,.15);  color: #f85149; }
.tm-badge-interface  { background: rgba(88,166,255,.15); color: #58a6ff; }
.tm-badge-system     { background: rgba(163,113,247,.15);color: #a371f7; }

/* EARS badge */
.tm-ears-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  background: var(--elevated);
  color: var(--text2);
  white-space: nowrap;
}

/* Parent select */
.tm-parent-select {
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  min-width: 110px;
}

/* Hierarchy tree */
.tm-tree-section {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.tm-tree-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.tm-tree-view { display: flex; flex-direction: column; gap: 2px; }
.tm-tree-node {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 0;
  font-size: 12.5px;
  line-height: 1.5;
}
.tm-tree-root-icon { color: var(--accent, #58a6ff); font-size: 9px; flex-shrink: 0; }
.tm-tree-connector { color: var(--text3); font-size: 11px; flex-shrink: 0; }
.tm-tree-id {
  font-weight: 700;
  font-family: monospace;
  font-size: 11.5px;
  color: var(--text);
  white-space: nowrap;
}
.tm-tree-text { color: var(--text2); }

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURE DECOMPOSITION MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.fd-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 350;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fd-overlay.hidden { display: none; }

.fd-modal {
  width: min(860px, 96vw);
  max-height: 88vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 28px 72px rgba(0,0,0,.6);
  animation: modal-slide-in .18s ease;
}

/* Header */
.fd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.fd-header-left { display: flex; align-items: center; gap: 10px; }
.fd-icon   { font-size: 22px; line-height: 1; }
.fd-title  { font-size: 15px; font-weight: 700; color: var(--text); }
.fd-subtitle { font-size: 11px; color: var(--text3); margin-top: 2px; }
.fd-trend {
  margin-top: 5px;
  display: inline-flex;
  align-items: flex-end;
  gap: 7px;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
}
.fd-trend.hidden { display: none; }
.fd-trend-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .35px;
  line-height: 1;
}
.fd-trend-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  min-height: 22px;
}
.fd-trend-bar {
  width: 3px;
  border-radius: 2px;
  background: var(--text3);
  opacity: .9;
}
.fd-trend-bar.good { background: #3fb950; }
.fd-trend-bar.mid  { background: #d29922; }
.fd-trend-bar.bad  { background: #f85149; }
.fd-trend-text {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--text2);
  white-space: nowrap;
}
.fd-trend-text.up   { color: #3fb950; }
.fd-trend-text.down { color: #f85149; }
.fd-trend-text.flat { color: var(--text2); }
.fd-close {
  background: none; border: none; color: var(--text2); font-size: 15px;
  cursor: pointer; padding: 3px 8px; border-radius: 6px; transition: background .12s;
}
.fd-close:hover { background: var(--elevated); color: var(--text); }

/* Body */
.fd-body {
  overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 14px; flex: 1;
}

/* Eval banner */
.fd-eval-banner {
  border-radius: 8px; padding: 12px 16px; border: 1px solid var(--border);
}
.fd-eval-banner.hidden { display: none; }
.fd-eval-pass { background: rgba(63,185,80,.1);  border-color: #3fb950; }
.fd-eval-warn { background: rgba(210,153,34,.1); border-color: #d29922; }
.fd-eval-fail { background: rgba(248,81,73,.1);  border-color: #f85149; }
.fd-eval-score-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.fd-eval-score { font-size: 28px; font-weight: 800; color: var(--text); }
.fd-eval-label { font-size: 13px; font-weight: 600; color: var(--text); }
.fd-eval-summary { font-size: 12px; color: var(--text2); margin: 4px 0 6px; }
.fd-eval-issues  { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text2); display: flex; flex-direction: column; gap: 3px; }

/* Section titles */
.fd-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text2); margin-bottom: 8px;
}

/* Pairs */
.fd-pairs-section, .fd-questions-section {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px;
}
.fd-pairs-section.hidden, .fd-questions-section.hidden { display: none; }

.fd-pairs-list, .fd-questions-list { display: flex; flex-direction: column; gap: 6px; }

.fd-pair-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; flex-wrap: wrap;
}
.fd-pair-parent, .fd-pair-child {
  font-family: monospace; font-weight: 700; font-size: 12px; color: var(--text);
  background: var(--elevated); padding: 2px 7px; border-radius: 5px;
}
.fd-pair-arrow { color: var(--text3); font-size: 14px; }
.fd-pair-rationale { font-size: 11.5px; color: var(--text2); flex: 1; min-width: 120px; }

.fd-conf-badge {
  padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 700;
  white-space: nowrap;
}
.fd-conf-high { background: rgba(63,185,80,.15); color: #3fb950; }
.fd-conf-med  { background: rgba(210,153,34,.15); color: #d29922; }
.fd-conf-low  { background: rgba(248,81,73,.15);  color: #f85149; }

/* Questions */
.fd-question-row {
  display: flex; align-items: baseline; gap: 8px; font-size: 12.5px;
}
.fd-q-num  { font-weight: 700; color: var(--accent, #58a6ff); white-space: nowrap; font-size: 11px; }
.fd-q-text { color: var(--text); flex: 1; }
.fd-q-ids  { font-size: 11px; color: var(--text3); white-space: nowrap; }

/* Chat */
.fd-chat-section { display: flex; flex-direction: column; gap: 6px; }
.fd-chat-messages { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.fd-thinking { color: var(--text3); font-style: italic; font-size: 12px; }

/* Footer */
.fd-footer { border-top: 1px solid var(--border); padding: 12px 20px; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.fd-confirm-bar.hidden { display: none; }
.fd-confirm-btn { width: 100%; justify-content: center; }

.fd-input-row { display: flex; gap: 8px; }
.fd-input {
  flex: 1; padding: 8px 12px; font-size: 13px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); outline: none;
  transition: border-color .15s;
}
.fd-input:focus { border-color: var(--accent, #58a6ff); }
.fd-send-btn {
  padding: 8px 16px; background: var(--accent, #58a6ff); color: #fff;
  border: none; border-radius: 8px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: opacity .15s; white-space: nowrap;
}
.fd-send-btn:hover { opacity: .88; }
.fd-send-btn:disabled { opacity: .5; cursor: default; }

/* FD section hint */
.fd-section-hint {
  font-size: 10px;
  font-weight: 400;
  color: var(--text3);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}

/* Full Hierarchy Tree */
.fd-tree-section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.fd-tree-section.hidden { display: none; }

.fd-tree-container { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }

.fd-tree-node {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  transition: background .1s;
}
.fd-tree-node:hover { background: var(--elevated); }

.fd-tree-l1 { border-left: 3px solid #58a6ff; background: rgba(88,166,255,.05); }
.fd-tree-l2 { border-left: 3px solid #3fb950; background: rgba(63,185,80,.04); }
.fd-tree-l3 { border-left: 3px solid #d29922; background: rgba(210,153,34,.04); }

.fd-lvl-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 18px;
  border-radius: 4px;
  font-size: 10px; font-weight: 800;
  flex-shrink: 0;
  letter-spacing: .3px;
}
.fd-lvl-l1 { background: rgba(88,166,255,.2);  color: #58a6ff; }
.fd-lvl-l2 { background: rgba(63,185,80,.2);   color: #3fb950; }
.fd-lvl-l3 { background: rgba(210,153,34,.2);  color: #d29922; }

.fd-tree-node-id {
  font-family: monospace;
  font-weight: 700;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}
.fd-tree-node-text { color: var(--text2); flex: 1; }

@media (max-width: 740px) {
  .fd-trend { gap: 5px; padding: 2px 6px; }
  .fd-trend-label, .fd-trend-text { font-size: 9px; }
  .fd-trend-bar { width: 2px; }
}

/* ═══ Enhanced Conflict Modal ════════════════════════════════════════════════ */

#conflict-modal-overlay {
  padding: 20px;
}

.conflict-analysis-modal {
  max-width: 1300px !important;
  width: 96vw !important;
  max-height: calc(100vh - 40px) !important;
  height: calc(100vh - 40px);
}

.conflict-analysis-modal .rules-modal-body {
  flex: 1;
  min-height: 0;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  gap: 0;
}

/* ── Tab bar ─────────────────────────────────────────────────────────────── */

.conflict-tabs {
  display: flex;
  gap: 0;
  background: var(--elevated);
  border-bottom: 1px solid var(--border);
  padding: 0 8px;
  overflow-x: auto;
  scrollbar-width: none;           /* hide scrollbar — still scrollable */
  flex-shrink: 0;
}

.conflict-tabs::-webkit-scrollbar { display: none; }

.conflict-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 14px 9px;
  min-width: 110px;
  border: none;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
}

.conflict-tab:hover {
  color: var(--text);
  background: rgba(255,255,255,.04);
}

.conflict-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  background: rgba(88,166,255,.06);
}

.conflict-tab-icon {
  font-size: 16px;
  line-height: 1;
}

.conflict-tab-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.conflict-tab-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.conflict-tab-sublabel {
  font-size: 9.5px;
  font-weight: 400;
  opacity: 0.6;
  line-height: 1.1;
  text-align: center;
}

.conflict-tab-count {
  display: none;
  position: absolute;
  top: 6px;
  right: 8px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
  line-height: 1.4;
}

.conflict-tab-count:not(:empty) { display: block; }

/* ── Tab panels ─────────────────────────────────────────────────────────── */

.conflict-tab-panels {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.conflict-tab-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.conflict-tab-panel.hidden { display: none; }

.conflict-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  min-height: 0;
}

/* ── Chat section ───────────────────────────────────────────────────────── */

.conflict-chat-section {
  border-top: 1px solid var(--border);
  background: var(--elevated);
  padding: 10px 14px 12px;
  flex-shrink: 0;
}

.conflict-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}

.conflict-chat-hint {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.conflict-chat-context {
  font-size: 11px;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.conflict-chat-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

.conflict-chat-input {
  flex: 1;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}

.conflict-chat-input:focus { border-color: var(--blue); }

.conflict-chat-input::placeholder { color: var(--text3); }

/* Chat messages within each tab */
.conflict-tab-panel .chat-messages {
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 0;
  padding: 4px 0;
  min-height: 100px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
  .conflict-analysis-modal {
    max-width: 98vw !important;
    width: 98vw !important;
  }
  .conflict-tab { min-width: 90px; padding: 9px 10px 8px; }
}

@media (max-width: 920px) {
  .conflict-tab { min-width: 72px; padding: 8px 8px 7px; }
  .conflict-tab-sublabel { display: none; }
  .conflict-tab-label { font-size: 10px; }
  .conflict-chat-header { flex-direction: column; align-items: flex-start; gap: 3px; }
}

@media (max-width: 640px) {
  .conflict-analysis-modal {
    max-width: 100vw !important;
    width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  .conflict-tab-text {
    display: none;
  }

  .conflict-tab {
    padding: 8px;
  }
}

/* ── Conflict cards ─────────────────────────────────────────────────────── */

.conflict-summary-bar {
  font-size: 12px;
  color: var(--text2);
  padding: 8px 12px;
  background: var(--elevated);
  border-radius: 6px;
  margin-bottom: 10px;
  border-left: 3px solid var(--blue);
}

.conflict-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--sev, var(--border));
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--surface);
}

.conflict-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.conflict-severity-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid;
}

.conflict-card-num {
  font-size: 11px;
  color: var(--text3);
}

.conflict-reqs-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 10px;
}

.conflict-req-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: var(--elevated);
  border-radius: 6px;
  border: 1px solid var(--border);
  min-width: 0;
}

.conflict-req-id {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
}

.conflict-req-text {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.4;
  word-break: break-word;
}

.conflict-vs {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: var(--text3);
  flex-shrink: 0;
  padding: 0 2px;
}

.conflict-description {
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
  margin: 0 0 4px;
}

.conflict-affected {
  font-size: 11px;
  color: var(--text3);
  margin-top: 6px;
}

/* No-conflict placeholder */
.conflict-empty-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--elevated);
  border: 1px solid var(--border);
  color: var(--green);
  font-size: 13px;
  margin-top: 4px;
}

/* ── Proposed modifications section ────────────────────────────────────── */

.conflict-modifications {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--blue-dim);
  padding: 10px 14px 12px;
  flex-shrink: 0;
}

.conflict-modifications.hidden { display: none; }

.conflict-mods-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}

.conflict-mods-header > span:first-child {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
}

.conflict-mods-hint {
  font-size: 11px;
  color: var(--text3);
}

.conflict-mod-card {
  background: var(--surface);
  border: 1px solid var(--blue);
  border-radius: 7px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.conflict-mod-req-id {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 5px;
}

.conflict-mod-text {
  font-size: 12px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 9px;
  white-space: pre-wrap;
  word-break: break-word;
}

.conflict-mod-btns {
  display: flex;
  gap: 6px;
}

/* ── Diff view in modification cards ─────────────────────────────────────── */

.conflict-mod-diff {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.conflict-mod-old,
.conflict-mod-new {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.conflict-diff-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  min-width: 42px;
  text-align: center;
  line-height: 1.5;
}

.conflict-mod-old .conflict-diff-label {
  background: var(--red-dim);
  color: var(--red);
}

.conflict-mod-new .conflict-diff-label {
  background: var(--green-dim);
  color: var(--green);
}

.conflict-diff-text {
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.conflict-diff-del {
  text-decoration: line-through;
  opacity: 0.6;
  color: var(--text2);
}

.conflict-diff-add {
  color: var(--text);
  background: rgba(63, 185, 80, 0.08);
  border-radius: 3px;
  padding: 2px 4px;
}

.conflict-card-resolved {
  opacity: 0.45;
  position: relative;
  pointer-events: none;
}

.conflict-card-resolved::after {
  content: '✓ Resolved';
  position: absolute;
  top: 8px;
  right: 10px;
  background: var(--green);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  pointer-events: none;
}

/* ── Modal header accent line ────────────────────────────────────────────── */
.conflict-analysis-modal .rules-modal-header {
  border-top: 3px solid var(--blue);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface);
}

/* ─── Edit panel body ───────────────────────────────────────────────────── */
.conflict-edit-panel-body {
  padding: 14px 16px;
  overflow-y: auto;
  flex: 1;
}

/* ═══ Conflict Modal — Pre-Refine Footer ════════════════════════════════════ */

.conflict-prerefine-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--elevated);
  flex-shrink: 0;
}

.conflict-prerefine-footer.hidden {
  display: none;
}

.conflict-prerefine-msg {
  font-size: 13px;
  color: var(--text2);
  flex: 1;
}

.conflict-prerefine-btns {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ═══ Conflict Modal — Edit Requirements Tab ════════════════════════════════ */

.conflict-edit-panel-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}

.edit-panel-hint {
  font-size: 12px;
  color: var(--text3);
  margin-bottom: 16px;
  padding: 10px 12px;
  background: var(--surface2);
  border-radius: 6px;
  border-left: 3px solid var(--accent);
}

.req-edit-entry {
  margin-bottom: 14px;
}

.req-edit-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.req-edit-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
  font-family: inherit;
  color: var(--text1);
  background: var(--surface1);
  border: 1px solid var(--border);
  border-radius: 6px;
  resize: vertical;
  transition: border-color 0.15s;
}

.req-edit-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Centered notice overlay (middle-of-screen flash message) ───────────── */
.center-notice-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  pointer-events: none;
}
.center-notice-box {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 4px solid var(--green);
  border-radius: 10px;
  padding: 18px 26px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  max-width: 80%;
  text-align: center;
  animation: center-notice-pop 0.18s ease-out;
}
@keyframes center-notice-pop {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* Raw Requirements — "which section?" disambiguation prompt */
.disambig-box {
  border: 1px solid var(--yellow);
  background: var(--yellow-dim);
  border-radius: 8px;
  padding: 16px 18px;
  max-width: 820px;
}
.disambig-box h4 { margin: 0 0 8px; color: var(--text); }
.disambig-box p { margin: 0 0 10px; color: var(--text2); }
.disambig-headings strong { color: var(--text); }
.disambig-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.disambig-option {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.disambig-option:hover {
  border-color: var(--blue);
  background: var(--elevated);
}
.disambig-title { color: var(--text); font-weight: 600; }
.disambig-preview { color: var(--text2); font-size: 0.85em; }

/* Retrieved-sections panel + "View in source" */
.retr-sections {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  margin: 10px 0 14px;
  padding: 6px 12px;
}
.retr-sections > summary {
  cursor: pointer;
  color: var(--text2);
  font-size: 0.9em;
  padding: 4px 0;
  user-select: none;
}
.retr-sections-list { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; }
.retr-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--elevated);
}
.retr-section-title { color: var(--text); font-size: 0.85em; word-break: break-word; }
.retr-section-view { flex-shrink: 0; white-space: nowrap; }
.retr-section-block { display: flex; flex-direction: column; gap: 3px; }
.retr-subsections { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 2px 6px; border-left: 1px solid var(--border); }
.retr-subsection {
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text2);
  font-size: 0.82em;
  padding: 3px 8px;
  cursor: pointer;
  border-radius: 4px;
}
.retr-subsection:hover { color: var(--blue); background: var(--elevated); }
.retr-subsection::before { content: "› "; color: var(--text3); }

/* Source viewer modal */
.source-viewer-modal { max-width: 900px; width: 92vw; }
.source-viewer-body {
  max-height: 72vh;
  overflow-y: auto;
  padding: 16px 20px;
  line-height: 1.5;
}
.source-viewer-loading { color: var(--text2); padding: 24px; text-align: center; }
.source-viewer-body .src-h { color: var(--text); margin: 14px 0 6px; scroll-margin-top: 12px; }
.source-viewer-body .src-p { color: var(--text2); margin: 4px 0; }
.source-viewer-body .src-ul { color: var(--text2); margin: 4px 0 4px 18px; }
.source-viewer-body .src-table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
  font-size: 0.85em;
}
.source-viewer-body .src-table th,
.source-viewer-body .src-table td {
  border: 1px solid var(--border);
  padding: 4px 8px;
  text-align: left;
  color: var(--text);
}
.source-viewer-body .src-table th { background: var(--elevated); }
.source-viewer-body .src-h-highlight {
  background: var(--yellow-dim);
  border-left: 3px solid var(--yellow);
  padding-left: 8px;
  border-radius: 4px;
}

/* ── Compliance mode input toggle (Single Requirement | Upload SRS/SSRD) ─── */
.compliance-input-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.comp-input-btn {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border, #444);
  border-radius: 6px;
  background: var(--surface-2, #2a2a2a);
  color: var(--text-secondary, #aaa);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  text-align: center;
}
.comp-input-btn:hover { border-color: var(--accent, #4fa3f7); color: var(--text, #eee); }
.comp-input-btn.active {
  background: var(--accent, #4fa3f7);
  border-color: var(--accent, #4fa3f7);
  color: #fff;
}
[data-theme="light"] .comp-input-btn {
  background: #f0f4fa;
  color: #555;
  border-color: #cdd5e0;
}
[data-theme="light"] .comp-input-btn.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

/* ── SRS/SSRD upload area ───────────────────────────────────────────────────── */
.comp-srs-upload-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.btn-upload-srs {
  padding: 8px 14px;
  border: 1px dashed var(--accent, #4fa3f7);
  border-radius: 6px;
  background: transparent;
  color: var(--accent, #4fa3f7);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-upload-srs:hover { background: rgba(79,163,247,0.1); }
.comp-srs-filename {
  font-size: 0.82rem;
  color: var(--text-secondary, #aaa);
  font-style: italic;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comp-srs-progress {
  margin: 6px 0 10px;
}
.comp-srs-progress-track {
  height: 6px;
  background: var(--surface-3, #333);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.comp-srs-progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent, #4fa3f7);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.comp-srs-progress-step {
  font-size: 0.78rem;
  color: var(--text-secondary, #aaa);
}
.comp-srs-browse-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.btn-browse-srs {
  padding: 8px 16px;
  border: 1px solid var(--accent, #4fa3f7);
  border-radius: 6px;
  background: var(--surface-2, #2a2a2a);
  color: var(--accent, #4fa3f7);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-browse-srs:hover { background: rgba(79,163,247,0.12); }
.comp-srs-selected-label {
  font-size: 0.82rem;
  color: var(--green, #4ade80);
  font-weight: 500;
}

/* ── Source viewer compliance-mode additions ─────────────────────────────── */
.srs-compliance-banner {
  padding: 10px 16px;
  background: rgba(79,163,247,0.12);
  border-bottom: 1px solid var(--accent, #4fa3f7);
  font-size: 0.83rem;
  color: var(--accent, #4fa3f7);
  font-weight: 500;
  flex-shrink: 0;
}
.srs-compliance-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border, #444);
  background: var(--surface-2, #2a2a2a);
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}
.btn-compliance-check-section {
  padding: 9px 18px;
  background: var(--accent, #4fa3f7);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-compliance-check-section:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-compliance-check-section:not(:disabled):hover { opacity: 0.85; }

/* Clickable headings in compliance viewer mode */
.src-h.compliance-clickable {
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: -6px;
}
.src-h.compliance-clickable:hover {
  background: rgba(79,163,247,0.15);
  color: var(--accent, #4fa3f7);
}
.src-h.src-h-compliance-selected {
  background: rgba(79,163,247,0.25) !important;
  color: var(--accent, #4fa3f7) !important;
  border-left: 3px solid var(--accent, #4fa3f7);
  padding-left: 8px;
}

/* Source viewer modal layout — make it a flex column so footer sticks */
.source-viewer-modal {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.source-viewer-modal .rules-modal-body.source-viewer-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

[data-theme="light"] .srs-compliance-banner { background: rgba(59,130,246,0.08); }
[data-theme="light"] .srs-compliance-footer { background: #f0f4fa; border-top-color: #cdd5e0; }
[data-theme="light"] .btn-browse-srs { background: #fff; }

/* ── Topic count stepper (Generate Requirements multi-topic) ─────────────── */
.topic-count-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 10px;
}
.topic-count-label {
  font-size: 0.85rem;
  color: var(--text, #eee);
  font-weight: 500;
}
.topic-count-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-3, #383838);
  border: 1px solid var(--accent, #4fa3f7);
  border-radius: 6px;
  padding: 4px 12px;
}
.topic-count-btn {
  background: none;
  border: none;
  color: var(--text, #eee);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  transition: color 0.15s;
}
.topic-count-btn:hover { color: var(--accent, #4fa3f7); }
#topic-count-display {
  font-weight: 700;
  min-width: 20px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text, #eee);
}
[data-theme="light"] .topic-count-stepper {
  background: #fff;
  border-color: #3b82f6;
}
[data-theme="light"] .topic-count-btn { color: #1a1a2e; }
[data-theme="light"] #topic-count-display { color: #1a1a2e; }

/* ── Topic input rows ──────────────────────────────────────────────────────── */
.topic-input-row + .topic-input-row { margin-top: 8px; }
.topic-input-row input.topic-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border, #444);
  border-radius: 6px;
  background: var(--surface-2, #2a2a2a);
  color: var(--text, #eee);
  font-size: 0.9rem;
  transition: border-color 0.15s;
}
.topic-input-row input.topic-input:focus {
  outline: none;
  border-color: var(--accent, #4fa3f7);
}
[data-theme="light"] .topic-input-row input.topic-input {
  background: #f5f7fa;
  color: #1a1a2e;
  border-color: #cdd5e0;
}
[data-theme="light"] .topic-input-row input.topic-input:focus {
  border-color: #3b82f6;
}

/* ── Multi-topic results accordion ─────────────────────────────────────────── */
.multi-topic-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.multi-topic-block {
  border: 1px solid var(--border, #444);
  border-radius: 8px;
  overflow: hidden;
}
.multi-topic-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--surface-2, #2a2a2a);
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-weight: 600;
  font-size: 0.92rem;
}
.multi-topic-header::-webkit-details-marker { display: none; }
.multi-topic-chevron {
  font-size: 0.65rem;
  color: var(--text-secondary, #aaa);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.multi-topic-block[open] > .multi-topic-header .multi-topic-chevron {
  transform: rotate(90deg);
}
.multi-topic-icon { font-size: 0.95rem; flex-shrink: 0; }
.multi-topic-title { flex: 1; color: var(--text, #eee); }
.multi-topic-count {
  font-size: 0.75rem;
  background: var(--accent, #4fa3f7);
  color: #fff;
  border-radius: 10px;
  padding: 2px 9px;
  font-weight: 500;
  flex-shrink: 0;
}
.multi-topic-body {
  padding: 14px;
  background: var(--surface-1, #1e1e1e);
}
.multi-topic-error {
  color: var(--danger, #f87171);
  font-size: 0.88rem;
  padding: 8px 4px;
}
[data-theme="light"] .multi-topic-header {
  background: #f0f4fa;
}
[data-theme="light"] .multi-topic-body {
  background: #fff;
}
[data-theme="light"] .multi-topic-title { color: #1a1a2e; }
.source-viewer-body .src-section-highlight { background: rgba(210, 153, 34, 0.08); }