/* ================================================================
   literature-review.css  — v3 (Maven Bio / Elicit-grade UI)
   ================================================================ */

   *, *::before, *::after { padding: 0; margin: 0; box-sizing: border-box; }
   body, input, textarea, button, select {
     font-family: 'Geist', 'DM Sans', 'Inter', sans-serif;
     -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
   }
   a { text-decoration: none; } li { list-style: none; } html { overflow-x: hidden; }
   
:root {
  --brand-dark:       #2b1817;  
  --brand-dark-soft:  #3a201f;
  --brand-dark-light: #4a2a28;

  --sidebar-bg:        #f6f5f3;
  --sidebar-mid:       #2b1817; 
  --sidebar-light:     #ffffff;
  --sidebar-surface:   #ffffff;
  --sidebar-hover:     rgba(43, 24, 23, 0.06);
  --sidebar-active:    rgba(43, 24, 23, 0.10);
  --sidebar-border:    rgba(43, 24, 23, 0.10);

  --sidebar-ink:       #1f1a19;
  --sidebar-ink-soft:  #6b5f5b;
  --sidebar-ink-muted: #9a8f8a;

  --bg-page:     #fafaf9;
  --bg-surface:  #ffffff;
  --bg-elevated: #f2efea;
  --bg-input:    #ffffff;
  --bg-card:     #ffffff;

  --ink:         #1a1210;
  --ink-soft:    #5f5551;
  --ink-muted:   #8f817b;

  --border:        rgba(43, 24, 23, 0.10);
  --border-hover:  rgba(43, 24, 23, 0.18);
  --border-focus:  rgba(13, 167, 154, 0.45);
  --border-teal:   rgba(13, 167, 154, 0.25);

--teal:        #3c6e63;
--teal-dim:    #345f56;
--teal-soft:   rgba(60, 110, 99, 0.10);
--teal-glow:   rgba(60, 110, 99, 0.22);
--teal-border: rgba(60, 110, 99, 0.22);

  --amber:       #d97706;
  --amber-soft:  rgba(217,119,6,0.10);

  --red:         #dc2626;
  --red-soft:    rgba(220,38,38,0.10);

  --green:       #059669;
  --green-soft:  rgba(5,150,105,0.10);

  --purple:      #7c3aed;
  --purple-soft: rgba(124,58,237,0.10);

  --blue:        #2563eb;
  --blue-soft:   rgba(37,99,235,0.10);

  --r-pill:  30px;
  --r-card:  8px;
  --r-input: 8px;
  --r-sm:    8px;
  --r-xs:    8px;

  --shadow-card:  0 1px 4px rgba(43, 24, 23, 0.08),
                  0 4px 16px rgba(43, 24, 23, 0.06);
  --shadow-panel: 0 4px 24px rgba(43, 24, 23, 0.12);
  --glow-teal:    0 0 20px rgba(13,167,154,0.20);
}

   html, body { background: var(--sidebar-light); color: var(--ink); overflow-x: hidden; overflow-y: auto; }
   
   /* ── SIDEBAR ── */
   #sidebar {
     position: fixed;
     top: 0; left: 5px;
     padding-top: 5px;
     width: 230px;
     height: 99.5%;
     background: var(--sidebar-light);
     z-index: 2000;
     overflow-x: hidden;
     scrollbar-width: none;
     transition: width 0.28s cubic-bezier(0.4,0,0.2,1);
     display: flex;
     flex-direction: column;
     border: 1px solid var(--bg-elevated);
     border-radius: 8px;
     box-shadow: var(--shadow-card);
   }

   #sidebar::-webkit-scrollbar { display: none; }
   #sidebar.hide { width: 58px; }

   /* ── Brand row — expanded: logo + wordmark + toggle; collapsed: centered logo mark ── */
   .brand {
     height: 62px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 0;
     padding: 2 10px 0 14px;
     white-space: nowrap;
     overflow: hidden;
     flex-shrink: 0;
     position: relative;
   }

   .brand-left {
     display: flex;
     align-items: center;
     gap: 0px;
     min-width: 0;
     overflow: hidden;
     text-decoration: none;
     flex: 1;
   }

   .brand-mark {
     min-width: 30px; height: 30px;
     color: var(--ink); 
     display: flex; align-items: center; justify-content: center;
     font-weight: 800; font-size: 0.72rem; flex-shrink: 0;
   }


   .brand-name {
     font-size: 22px; font-weight: 700; color: var(--sidebar-ink);
     letter-spacing: -0.02em;
     overflow: hidden;
     max-width: 120px;
     transition: max-width 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.2s;
   }

   /* Toggle button lives inside brand row */
   .sidebar-toggle-btn {
     flex-shrink: 0;
     width: 28px; height: 28px;
     border-radius: 7px;
     background: transparent;
     border: none;
     color: var(--sidebar-ink-muted);
     display: flex; align-items: center; justify-content: center;
     cursor: pointer;
     font-size: 20px;
     opacity: 0.5;
     transition: background 0.16s, color 0.16s, opacity 0.18s;
   }
   .sidebar-toggle-btn:hover {
     background: var(--sidebar-hover);
     color: var(--sidebar-ink);
   }

   /* Collapsed state — center the mark, hide wordmark; toggle icon
      is absolutely positioned over the same spot and only fades in
      on hover, swapping places with the brand mark */
   #sidebar.hide .brand {
     padding: 0;
     justify-content: center;
     position: relative;
   }
   #sidebar.hide .brand-left {
     flex: 0 0 auto;
     justify-content: center;
     transition: opacity 0.16s;
   }
   #sidebar.hide .brand-name {
     max-width: 0;
     opacity: 0;
     pointer-events: none;
   }

   /* Toggle icon sits hidden on top of the brand mark; hovering the
      row fades the mark out and the toggle icon in */
   #sidebar.hide .sidebar-toggle-btn {
     position: absolute;
     inset: 0;
     margin: auto;
     opacity: 0;
     pointer-events: none;
   }
   #sidebar.hide .brand:hover .brand-left {
     opacity: 0;
   }
   #sidebar.hide .brand:hover .sidebar-toggle-btn {
     opacity: 1;
     pointer-events: auto;
   }

   #menuToggle { display: none !important; }
   #content nav { height: 0 !important; padding: 0 !important; overflow: hidden; }
   main { height: 100vh !important; }

   .side-menu { padding: 14px 7px; }
   .side-menu li { border-radius: var(--r-sm); margin-bottom: 2px; }
   .side-menu li a {
     display: flex; align-items: center; gap: 11px; padding: 9px 11px;
     color: var(--sidebar-ink-soft); font-size: 0.9rem; font-weight: 600;
     border-radius: var(--r-sm); white-space: nowrap; overflow: hidden;
     transition: color 0.18s, background 0.18s;
   }
   .side-menu li a .bx { font-size: 17px; flex-shrink: 0; }
   .side-menu li a:hover  { color: var(--sidebar-ink); background: var(--sidebar-hover); }
   .side-menu li.active a { color: var(--sidebar-ink); background: var(--sidebar-hover); }
   #sidebar.hide .side-menu li a .text { display: none; }
    #sidebar.hide .side-menu li a { justify-content: center;}

   /* New chat button — same row layout as .side-menu li a; only the
      icon itself sits inside a small grey circle */
   .sidebar-new-chat-btn {
     display: flex; align-items: center; gap: 11px; padding: 7px 6px;
     width: 100%; background: none; border: none; cursor: pointer;
color: var(--sidebar-ink-soft); font-size: 0.9rem; font-weight: 500;
     border-radius: var(--r-sm); white-space: nowrap; overflow: hidden;
     transition: color 0.18s, background 0.18s; margin-bottom: 2px;
   }
   .sidebar-new-chat-btn:hover { background: var(--sidebar-hover); color: var(--sidebar-ink); }

   .sidebar-new-chat-icon {
     display: flex; align-items: center; justify-content: center;
     width: 22px; height: 22px; flex-shrink: 0;
     border-radius: 50%;
     background: var(--sidebar-active);
     transition: background 0.18s;
   }
   .sidebar-new-chat-icon .bx { font-size: 14px; flex-shrink: 0; }

   #sidebar.hide .sidebar-new-chat-btn { justify-content: center; padding: 9px 0; }
   #sidebar.hide .sidebar-new-chat-btn .text { display: none; }

   /* ── SIDEBAR BOTTOM: settings + user ── */
   .sidebar-bottom {
     margin-top: auto;
     display: flex;
     flex-direction: column;
   }

   .bottom-menu { padding: 4px 7px 0; }

   .sidebar-divider {
     height: 1px;
     background: var(--sidebar-border);
     margin: 6px 12px;
     flex-shrink: 0;
   }

   /* User row */
   .sidebar-user {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 5px 5px 5px;
     min-height: 40px;
     overflow: hidden;
     cursor: pointer;
     transition: background 0.18s;
   }
   .sidebar-user:hover {
     background: var(--sidebar-hover);
   }

   /* Up/down chevron indicator — hints the row opens a menu */
   .sidebar-user-chevron {
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 16px;
     color: var(--sidebar-ink-muted);
   }
   .sidebar-user-chevron .bx {
     font-size: 13px;
     line-height: 0.6;
   }
   #sidebar.hide .sidebar-user-chevron {
     display: none;
   }

   /* Avatar circle button */
   .sidebar-avatar {
     flex-shrink: 0;
     width: 32px; height: 32px;
     border-radius: 50%;
     background: var(--teal-soft, rgba(13,167,154,0.12));
     color: var(--teal-dim, #0b8f84);
     font-size: 0.82rem; font-weight: 700;
     border: none; cursor: pointer;
     display: flex; align-items: center; justify-content: center;
     transition: box-shadow 0.18s, transform 0.15s;
     line-height: 1;
   }
   .sidebar-avatar:hover {
     box-shadow: 0 0 0 3px rgba(13,167,154,0.35);
     transform: scale(1.06);
   }

   /* Name + workspace — visible only in expanded mode */
   .sidebar-user-info {
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 1px;
     flex: 1; min-width: 0;
     opacity: 1;
     transition: opacity 0.18s;
     white-space: nowrap; overflow: hidden;
   }
   #sidebar.hide .sidebar-user-info {
     opacity: 0;
     pointer-events: none;
     width: 0;
   }

   .sidebar-user-name {
     font-size: 0.82rem; font-weight: 600;
     color: var(--sidebar-ink);
     overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   }

   .sidebar-user-workspace {
     font-size: 0.7rem; font-weight: 500;
     color: var(--sidebar-ink-muted);
     overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   }

   /* Inline logout icon */
   .sidebar-logout-inline {
     flex-shrink: 0;
     display: inline-flex; align-items: center; justify-content: center;
     width: 26px; height: 26px;
     background: transparent; border: none;
     color: var(--sidebar-ink-muted);
     border-radius: 6px; cursor: pointer; font-size: 15px;
     transition: color 0.18s, background 0.18s;
   }
   .sidebar-logout-inline:hover {
     color: #ef4444;
     background: rgba(239,68,68,0.12);
   }

   .sidebar-popup {
     position: fixed;
     left: 242px;
     bottom: 14px;
     width: 224px;
     background: var(--bg-card);
     border-radius: 12px;
     border: 1px solid var(--border);
     padding: 6px;
     z-index: 3000;
     opacity: 0;
     transform: translateY(6px) scale(0.97);
     pointer-events: none;
     transition: opacity 0.18s ease, transform 0.18s ease;
   }
   .sidebar-popup.open {
     opacity: 1;
     transform: translateY(0) scale(1);
     pointer-events: all;
   }

   .sidebar-popup-header {
     display: flex; align-items: center; gap: 10px;
     padding: 8px 10px 10px;
   }
   .sidebar-popup-avatar {
     width: 34px; height: 34px;
     border-radius: 50%;
     background: var(--teal-soft, rgba(13,167,154,0.12));
     color: var(--teal-dim, #0b8f84);
     font-size: 0.88rem; font-weight: 700;
     display: flex; align-items: center; justify-content: center;
     flex-shrink: 0;
   }
   .sidebar-popup-meta {
     display: flex; flex-direction: column; min-width: 0;
   }
   .sidebar-popup-name {
     font-size: 0.82rem; font-weight: 700;
     color: var(--sidebar-ink);
     white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
   }
   .sidebar-popup-email {
     font-size: 0.70rem;
     color: var(--sidebar-ink-muted);
     white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
   }
   .sidebar-popup-divider {
     height: 1px;
     background: var(--sidebar-border);
     margin: 4px 4px;
   }
   .sidebar-popup-item {
     display: flex; align-items: center; gap: 9px;
     width: 100%; padding: 8px 10px;
     border-radius: 8px;
     background: none; border: none;
     cursor: pointer; font-family: inherit;
     font-size: 0.82rem; font-weight: 500;
     color: var(--sidebar-ink-soft);
     text-decoration: none;
     transition: background 0.15s, color 0.15s;
   }
   .sidebar-popup-item .bx { font-size: 16px; flex-shrink: 0; }
   .sidebar-popup-item:hover {
     background: var(--sidebar-hover);
     color: var(--sidebar-ink);
   }
   .sidebar-popup-item.danger { color: rgba(239,68,68,0.75); }
   .sidebar-popup-item.danger:hover {
     background: rgba(239,68,68,0.10);
     color: #ef4444;
   }

   /* Transparent backdrop — catches outside clicks */
   .sidebar-popup-backdrop {
     position: fixed; inset: 0;
     z-index: 2999;
     display: none;
   }
   .sidebar-popup-backdrop.open { display: block; }

   /* ── CONTENT ── */
   #content {
     position: relative; width: calc(100% - 230px); left: 230px;
     transition: width 0.28s cubic-bezier(0.4,0,0.2,1), left 0.28s cubic-bezier(0.4,0,0.2,1);
     min-height: 100vh;
     display: flex; flex-direction: column;
   }
   #sidebar.hide ~ #content { width: calc(100% - 58px); left: 58px; }

   /* Popup repositions when sidebar is collapsed */
   #sidebar.hide ~ .sidebar-popup { left: 68px; }

   /* ── NAV ── */
   #content nav {
     height: 62px;
     padding: 0 22px; display: flex; align-items: center; gap: 14px;
     position: sticky; top: 0; z-index: 1000; 
   }

   #menuToggle { cursor: pointer; color: var(--ink-soft); font-size: 21px; transition: color 0.2s; }
   #menuToggle:hover { color: var(--ink); }
   .nav-spacer { flex: 1; }
   /* Retained for backward-compat on other pages */
   .user-controls { display: flex; align-items: center; gap: 8px; }
   .profile-name {
     display: inline-flex; align-items: center; gap: 7px;
     padding: 5px 14px; background: var(--bg-card);
     border: 1px solid var(--border); color: var(--ink);
     border-radius: var(--r-pill); font-size: 0.82rem; font-weight: 500;
   }
   .profile-name .bx { font-size: 15px; color: var(--teal); }
   .logout-btn {
     display: inline-flex; align-items: center; justify-content: center;
     width: 30px; height: 30px; background: var(--red-soft);
     border: 1px solid rgba(240,68,56,0.18); color: var(--red);
     border-radius: var(--r-pill); cursor: pointer; font-size: 17px; line-height: 0;
     transition: background 0.18s;
   }
   .logout-btn:hover { background: var(--red); color: white; border-color: var(--red); }
   
   /* ── MAIN ── */
   main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0 25px 25px;
  }

   .head-title {
     padding: 15px 0 20px; display: flex; align-items: flex-end;
     justify-content: space-between;
   }
   .head-title h1 {
     font-size: 26px; font-weight: 800; color: var(--ink);
     letter-spacing: -0.03em; line-height: 1.1;
   }
   .subtitle { font-size: 0.82rem; color: var(--ink-soft); margin-top: 4px; }
   .section-label {
     font-size: 0.67rem; font-weight: 700; letter-spacing: 0.09em;
      color: var(--ink-muted); margin-bottom: 11px;
   }
   
   /* ── ANIMATIONS ── */
   @keyframes fadeUp   { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
   @keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
   @keyframes slideInRight { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
   @keyframes slideInUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
   @keyframes spin     { to { transform:rotate(360deg); } }
   @keyframes pulsing  { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
   @keyframes pulse-dot { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
   @keyframes ai-dot-bounce { 0%,80%,100% { transform:translateY(0); opacity:0.45; } 40% { transform:translateY(-5px); opacity:1; } }
   @keyframes modalIn  { from { opacity:0; transform:scale(0.95) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }
   @keyframes stepSlideIn { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }
   @keyframes typewriterCursor { 0%,100% { opacity:1; } 50% { opacity:0; } }
   @keyframes reportPanelIn { from { opacity:0; transform:translateX(32px); } to { opacity:1; transform:translateX(0); } }
   @keyframes shimmer {
     0%   { background-position: -200% 0; }
     100% { background-position:  200% 0; }
   }
   
   .spinning { animation: spin 1s linear infinite; display: inline-block; }
   .pulsing  { animation: pulsing 1.2s ease-in-out infinite; }
   
   /* ── BUTTONS ── */
   .pill-btn {
     display: inline-flex; align-items: center; gap: 6px;
     padding: 8px 17px; border-radius: var(--r-pill);
     font-family: inherit; font-weight: 700; font-size: 0.8rem;
     cursor: pointer; border: none;
     transition: background 0.18s, box-shadow 0.18s, transform 0.1s;
   }
   .pill-btn:active { transform: scale(0.97); }
   .pill-btn.blue  { background: var(--teal-soft); color: var(--ink-muted); }
   .pill-btn.ghost { background: rgba(255,255,255,0.055); color: var(--ink-soft); border: 1px solid var(--border); }
   .pill-btn.ghost:hover { background: rgba(255,255,255,0.09); color: var(--ink); }
   .pill-btn.red   { background: var(--red-soft); color: var(--red); border: 1px solid rgba(240,68,56,0.18); }
   .pill-btn.red:hover { background: var(--red); color: white; }
   .pill-btn.sm    { padding: 5px 13px; font-size: 0.76rem; }
   .pill-btn.xs    { padding: 4px 10px; font-size: 0.72rem; font-weight: 600; }
   .pill-btn.danger-text { color: var(--red); }
   .pill-btn.danger-text:hover { background: var(--red-soft); color: var(--red); border-color: rgba(220,38,38,0.25); }
   
   .icon-btn-xs {
     width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border);
     background: none; color: var(--ink-muted); cursor: pointer;
     display: flex; align-items: center; justify-content: center;
     font-size: 0.82rem; transition: all 0.15s;
   }
   .icon-btn-xs:hover  { background: var(--bg-elevated); color: var(--ink); }
   .icon-btn-xs.active { background: var(--teal-soft); color: var(--teal); border-color: var(--teal); }
   
   .icon-btn-sm {
     width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border);
     background: none; color: var(--ink-muted); cursor: pointer;
     display: flex; align-items: center; justify-content: center;
     font-size: 0.88rem; transition: all 0.15s; flex-shrink: 0;
   }
   .icon-btn-sm:hover { background: var(--bg-elevated); color: var(--ink); border-color: var(--border-hover); }
   .icon-btn-sm.danger:hover { background: var(--red-soft); color: var(--red); border-color: rgba(240,68,56,0.22); }
   
   .text-btn {
     background: none; border: none; color: var(--teal); font-family: inherit;
     font-size: 0.72rem; font-weight: 600; cursor: pointer;
     display: inline-flex; align-items: center; gap: 3px;
     transition: opacity 0.15s; padding: 0;
   }
   .text-btn:hover { opacity: 0.75; }
   
   .ai-chip {
     font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em;
     padding: 2px 8px;
     background: linear-gradient(135deg, var(--teal-soft), rgba(139,92,246,0.08));
     border: 1px solid rgba(34,211,200,0.22); color: var(--teal); border-radius: 40px;
   }
   
   /* ── FORM ── */
   .form-field { margin-bottom: 1rem; }
   .form-field label {
     display: block; font-size: 0.66rem; font-weight: 700;
     letter-spacing: 0.08em; text-transform: uppercase;
     color: var(--ink-muted); margin-bottom: 0.38rem;
   }
   .form-field input, .form-field select, .form-field textarea {
     width: 100%; background: var(--bg-input); border: 1px solid var(--border);
     border-radius: var(--r-input); padding: 0.58rem 0.88rem;
     font-family: inherit; font-size: 0.86rem; color: var(--ink); outline: none;
     transition: border-color 0.18s, box-shadow 0.18s;
   }
   .form-field input::placeholder, .form-field textarea::placeholder { color: var(--ink-muted); }
   .form-field input:focus, .form-field select:focus, .form-field textarea:focus {
     border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--teal-glow);
   }
   .form-field select {
     appearance: none; -webkit-appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%233D5470' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
     background-repeat: no-repeat; background-position: right 0.88rem center;
     padding-right: 2rem; cursor: pointer;
   }
   .form-field select option { background: var(--navy); }
   .form-field textarea { resize: vertical; min-height: 68px; line-height: 1.6; }
   .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.72rem; }
   
   /* ── MODAL ── */
   .modal-overlay {
     display: none; position: fixed; inset: 0; z-index: 3000;
     background: rgba(0,0,0,0.7); backdrop-filter: blur(5px);
     align-items: center; justify-content: center;
   }
   .modal-overlay.visible { display: flex; }
   .modal {
     background: var(--bg-surface); border: 1px solid var(--border);
     border-radius: var(--r-card); padding: 26px;
     width: 40%; 
     animation: modalIn 0.22s ease;
     max-height: 90vh; overflow-y: auto;
     box-shadow: var(--shadow-panel);
   }
   .modal-header {
     display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px;
   }
   .modal-header h2 { font-size: 1.02rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
   .modal-close {
     width: 28px; height: 28px; border-radius: 50%; border: none;
     background: rgba(255,255,255,0.055); color: var(--ink-soft); cursor: pointer;
     display: flex; align-items: center; justify-content: center;
     font-size: 1.05rem; transition: background 0.18s, color 0.18s;
   }
   .modal-close:hover { background: var(--red-soft); color: var(--red); }
   .modal-footer {
     display: flex; justify-content: flex-end; gap: 8px;
     margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border);
   }

   /* ── CUSTOM EXPORT — APPROVAL MODALS ──
      Shared by the "N sources unapproved" partial-export modal and the
      "no sources approved" empty-state modal (literature-review.js,
      _confirmExportWithUnapproved / _showNoSourcesApprovedModal). */
   .export-approval-note {
     margin: 0 0 10px; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.55;
   }
   .export-approval-toggle {
     display: flex; align-items: center; gap: 6px; width: 100%;
     background: var(--bg-elevated); border: 1px solid var(--border);
     border-radius: var(--r-sm); padding: 8px 10px; margin: 0;
     font-family: inherit; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft);
     cursor: pointer; transition: background 0.15s, color 0.15s;
   }
   .export-approval-toggle:hover { background: var(--bg-card); color: var(--ink); border-color: var(--border-hover); }
   .export-approval-toggle .bx-chevron-right { transition: transform 0.15s; flex-shrink: 0; }
   .export-approval-toggle.open .bx-chevron-right { transform: rotate(90deg); }

   .export-approval-list {
     display: none; margin: 8px 0 14px; padding: 10px 12px 2px 1.4rem;
     max-height: 160px; overflow-y: auto; list-style: disc;
     font-size: 0.84rem; color: var(--ink-soft);
   }
   .export-approval-list.open { display: block; }
   .export-approval-list li { margin-bottom: 6px; display: flex; align-items: baseline; gap: 6px; }
   .export-approval-list li i.bx { color: var(--ink-muted); font-size: 0.8rem; flex-shrink: 0; }
   .export-approval-uid { color: var(--ink-muted); font-size: 0.78rem; white-space: nowrap; }

   .export-approval-footnote { margin: 0; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.55; }

   /* Empty state used when NO cited sources are approved — nothing can be
      exported, so this modal has no "proceed" action, just an explanation
      and the (collapsible) list of what still needs approving. */
   .export-approval-empty-icon {
     display: flex; align-items: center; justify-content: center;
     width: 44px; height: 44px; border-radius: 50%;
     background: var(--amber-soft); color: var(--amber);
     font-size: 1.35rem; margin: 0 auto 14px;
   }
   .export-approval-empty-note {
     margin: 0 0 14px; font-size: 0.86rem; color: var(--ink-soft);
     line-height: 1.55; text-align: center;
   }
   
   /* ── RIS MODAL ── */
   .dz-label {
     font-size: 0.64rem; font-weight: 700; text-transform: uppercase;
     letter-spacing: 0.08em; color: var(--ink-muted); margin-bottom: 0.35rem;
   }
   .drop-zone {
     display: flex; flex-direction: column; align-items: center; justify-content: center;
     gap: 6px; padding: 1.4rem 1rem; background: var(--bg-input);
     border: 1.5px dashed var(--border); border-radius: var(--r-sm);
     cursor: pointer; text-align: center;
     transition: border-color 0.18s, background 0.18s; margin-bottom: 8px;
   }
   .drop-zone:hover, .drop-zone.dragover { border-color: var(--teal-dim); background: var(--teal-soft); }
   .drop-zone .bx { font-size: 1.7rem; color: var(--ink-muted); }
   .drop-zone p  { font-size: 0.8rem; color: var(--ink-soft); margin: 0; }
   .drop-zone span { font-size: 0.68rem; color: var(--ink-muted); }
   .uploaded-file {
     display: flex; align-items: center; gap: 8px; padding: 7px 10px;
     background: var(--green-soft); border: 1px solid rgba(18,185,129,0.2);
     border-radius: var(--r-sm); font-size: 0.76rem; color: var(--green); margin-bottom: 8px;
   }
   .uploaded-file span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .remove-file {
     background: none; border: none; color: var(--ink-muted); cursor: pointer;
     font-size: 1rem; display: flex; align-items: center; transition: color 0.18s;
   }
   .remove-file:hover { color: var(--red); }
   .ris-notice {
     display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px;
     background: var(--blue-soft); border: 1px solid rgba(59,130,246,0.18);
     border-radius: var(--r-sm); font-size: 0.72rem; color: var(--ink-soft);
     line-height: 1.5; margin-top: 8px;
   }
   .ris-notice .bx { color: var(--blue); font-size: 0.88rem; flex-shrink: 0; margin-top: 1px; }
   
   /* ── HOME VIEW / PROJECTS ── */
   .projects-grid {
     display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 13px; margin-bottom: 38px;
   }
   .project-card {
     background: var(--bg-card); border: 1px solid var(--border);
     border-radius: var(--r-card); padding: 17px 19px; cursor: pointer;
     transition: border-color 0.2s, transform 0.18s, box-shadow 0.18s;
     position: relative; overflow: hidden;
     box-shadow: var(--shadow-card);
   }
   .project-card::before {
     content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
     opacity: 0; transition: opacity 0.2s;
   }
   .project-card:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-panel);
   }
   .project-card:hover::before { opacity: 1; }
   .pc-top-row  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
   .pc-status   { font-size: 0.63rem; font-weight: 700; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 20px; }
   .pcs-active  { background: var(--amber-soft); color: var(--amber);}
   .pcs-draft   { background: rgba(148,163,184,0.08); color: var(--ink-soft); border: 1px solid rgba(148,163,184,0.14); }
   .pcs-complete{ background: var(--teal-soft); color: var(--teal); }
   .pc-name  { font-size: 0.9rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 3px; }
   .pc-meta  { font-size: 0.73rem; color: var(--ink-soft); margin-bottom: 13px; line-height: 1.5; }
   .pc-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 11px; border-top: 1px solid var(--border); }
   .pc-date  { font-size: 0.7rem; color: var(--ink-muted); }
   .pc-actions { display: flex; align-items: center; gap: 6px; }
   .pc-edit-btn {
     display: inline-flex; align-items: center; justify-content: center;border-radius: 6px;
     border: 1px solid var(--border); background: transparent; width: 25px; height: 25px;
     color: var(--ink); cursor: pointer; font-size: 0.83rem;
     transition: all 0.15s;
   }
   .pc-edit-btn:hover { background: var(--teal-soft); color: var(--teal); border-color: var(--border-teal); }
   .pc-arrow { color: var(--ink-muted); font-size: 1rem; transition: color 0.2s, transform 0.2s; }
   .project-card:hover .pc-arrow { color: var(--teal); transform: translateX(3px); }
   .project-card-new {
     background: transparent; border: 1.5px dashed var(--border); border-radius: var(--r-card);
     padding: 18px; cursor: pointer;
     transition: border-color 0.2s, background 0.2s;
     display: flex; flex-direction: column; align-items: center;
     justify-content: center; gap: 9px; min-height: 118px; text-align: center;
   }
   .project-card-new:hover { border-color: var(--teal-dim); background: var(--teal-soft); }
   .project-card-new .bx { font-size: 1.7rem; color: var(--ink-muted); }
   .project-card-new p   { font-size: 0.82rem; color: var(--ink-soft); }
   
   /* ═══════════════════════════════════════════════════════════
      AI ASSISTANT SECTION — Elicit-grade chat UI
   ═══════════════════════════════════════════════════════════ */
   .ai-page-wrap {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex: 1;
    min-height: 0;
  }

   .ai-assistant-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
   }
   
   /* ── PAGE TOPBAR — sits at the top of #content, above main ── */
   .ai-page-topbar {
     display: flex; align-items: center; justify-content: space-between;
     height: 40px; padding: 0 25px;
     background: var(--bg-page);
     flex-shrink: 0;
   }
   .ai-page-topbar-left { display: flex; align-items: center; gap: 11px; }

   /* Hide the topbar entirely while the conversation pane is in its empty
      (welcome) state — nothing to title and no sources to toggle yet. */
   body:has(#aiConversationPane.is-empty) .ai-page-topbar {
     display: none;
   }

   .ai-topbar-title {
  font-size: 0.78rem; font-weight: 500;
  color: var(--ink-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 300px; padding-top: 25px; 
}
   .ai-assistant-icon {
     width: 36px; height: 36px; border-radius: 10px;
     background: linear-gradient(135deg, var(--teal-soft), rgba(139,92,246,0.10));
     border: 1px solid var(--border-teal);
     display: flex; align-items: center; justify-content: center;
     font-size: 1rem; color: var(--teal); flex-shrink: 0;
   }
   .ai-assistant-header h2 {
     font-size: 0.9rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em;
   }
   
   .ai-header-actions { display: flex; align-items: center; gap: 6px; }
   .ai-header-icon-btn {
     width: 32px; height: 32px; border-radius: 8px;
     border: 1px solid var(--border); background: none;
     color: var(--ink-muted); cursor: pointer; font-size: 0.95rem;
     display: flex; align-items: center; justify-content: center;
     transition: all 0.15s; position: relative;
   }
   .ai-header-icon-btn:hover { background: var(--bg-elevated); color: var(--ink); border-color: var(--border-hover); }
   .ai-header-icon-btn.active { background: var(--teal-soft); color: var(--teal); border-color: var(--border-teal); }
   .ai-refs-count {
     position: absolute; top: -4px; right: -4px;
     min-width: 15px; height: 15px; border-radius: 8px;
     background: var(--teal); color: white;
     font-size: 0.53rem; font-weight: 800;
     display: flex; align-items: center; justify-content: center; padding: 0 3px;
   }
   
   /* ── BODY ── */
   .ai-assistant-body {
     display: flex; flex: 1; min-height: 0; position: relative;
   }
   .ai-conversation-pane {
    flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%;
    max-width: 1000px; margin: 0 auto;
  }

  /* Empty state: centre thread content + input dock together */
  .ai-conversation-pane.is-empty {
    justify-content: center;
  }


  .ai-conversation-pane.is-empty .ai-thread {
    flex: 0 0 auto;
    overflow: visible;
    padding: 0;
  }
  .ai-conversation-pane.is-empty .ai-input-dock {
    width: 680px;
    max-width: 90%;
    padding: 0 0 8px;
  }
   
   /* ── THREAD ── */
   .ai-thread {
     flex: 1; overflow-y: auto; padding: 18px 20px; display: flex;
     flex-direction: column; gap: 14px; min-height: 0;
   }
   .ai-thread::-webkit-scrollbar { width: 3px; }
   .ai-thread::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
   
/* ── WELCOME STATE HEADING ── */
.ai-thread-empty .left {
  text-align: center;
  margin-bottom: 28px;
}

#welcomeHeading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 34px;
  font-weight: 700;
  color: var(--ink);
  opacity: 85%;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.welcome-logo {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--bg-page);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1.15rem;
}

   .ai-thread-empty {
     display: flex; flex-direction: column; align-items: center;
     justify-content: flex-end; gap: 0; padding: 0 20px 24px;
   }

   .ai-thread-empty .bx { font-size: 2rem; color: var(--ink-muted); opacity: 0.3; }
   
   .ai-suggestion-chips {
     display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; max-width: 560px;
   }

   .ai-suggestion {
     background: var(--bg-elevated); border: 1px solid var(--border);
     color: var(--ink-soft); font-family: inherit; font-size: 0.76rem; font-weight: 500;
     padding: 6px 13px; border-radius: var(--r-pill); cursor: pointer;
     transition: all 0.15s;
   }
   .ai-suggestion:hover { border-color: var(--border-teal); color: var(--teal); background: var(--teal-soft); }
   
   /* ── MESSAGES ── */
   .ai-message { display: flex; flex-direction: column; animation: fadeUp 0.18s ease; }
   .ai-message.user { align-items: flex-end; }
   .ai-message.assistant { align-items: flex-start; }
   
   .ai-msg-bubble {
     max-width: 84%; padding: 11px 14px; border-radius: 12px;
     font-size: 0.84rem; line-height: 1.7;
   }
   .ai-message.user .ai-msg-bubble {
     background: var(--bg-card); color: var(--ink); border-bottom-right-radius: 4px;
   }
   .ai-message.assistant .ai-msg-bubble {
     color: var(--ink); border-bottom-left-radius: 4px; max-width: 100%;
   }
   
   .ai-msg-content p { margin-bottom: 9px; }
   .ai-msg-content p:last-child { margin-bottom: 0; }
   .ai-msg-content strong { color: var(--ink); font-weight: 700; }

   .ai-msg-content h2.ai-resp-h2,
   .ai-msg-content h3.ai-resp-h3 {
     color: var(--ink);
     letter-spacing: -0.01em;
     line-height: 1.3;
     margin: 18px 0 6px;
   }
   .ai-msg-content h2.ai-resp-h2:first-child,
   .ai-msg-content h3.ai-resp-h3:first-child { margin-top: 2px; }
   .ai-msg-content h2.ai-resp-h2 {
     font-size: 0.92rem;
     font-weight: 700;
   }
   .ai-msg-content h3.ai-resp-h3 {
     font-size: 0.84rem;
     font-weight: 700;
   }
   /* Tighten gap when a heading immediately follows a paragraph */
   .ai-msg-content p + h2.ai-resp-h2,
   .ai-msg-content p + h3.ai-resp-h3 { margin-top: 14px; }

   .ai-msg-content ul.ai-resp-list {
     margin: 6px 0 12px; padding-left: 0; list-style: none;
   }
   .ai-msg-content ul.ai-resp-list:last-child { margin-bottom: 0; }
   .ai-msg-content ul.ai-resp-list li {
     position: relative;
     padding: 4px 0 4px 18px;
     margin-bottom: 2px;
     line-height: 1.6;
   }
   .ai-msg-content ul.ai-resp-list li:last-child { margin-bottom: 0; }
   .ai-msg-content ul.ai-resp-list li::before {
     content: '';
     position: absolute;
     left: 4px;
     top: 12px;
     width: 5px; height: 5px;
     border-radius: 50%;
     background: var(--ink-muted);
     flex-shrink: 0;
   }

   /* ── AI Markdown Tables ── */
   .ai-md-table-wrap {
     overflow-x: auto;
     margin: 12px 0 14px;
     border-radius: 10px;
     border: 1px solid var(--border);
   }
   .ai-md-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 0.78rem;
     color: var(--ink);
     background: var(--bg-surface);
   }
   .ai-md-table thead tr {
     background: var(--bg-elevated);
   }
   .ai-md-table thead th {
     padding: 9px 14px;
     text-align: left;
     font-size: 0.72rem;
     font-weight: 700;
     color: var(--ink-soft);
     white-space: nowrap;
   }
   .ai-md-table tbody tr {
     border-bottom: 1px solid var(--border);
     transition: background 0.12s;
   }
   .ai-md-table tbody tr:nth-child(even) {
     background: var(--bg-surface);
   }
   .ai-md-table tbody tr:last-child {
     border-bottom: none;
   }

   .ai-md-table td {
     padding: 8px 14px;
     vertical-align: top;
     color: var(--ink);
     line-height: 1.5;
   }
   /* Citation chips inside table cells stay legible */
   .ai-md-table .ai-cite-link {
     vertical-align: middle;
   }

   .ai-cite-link {
     display: inline-flex; align-items: center; justify-content: center;
     width: 17px; height: 17px; background: var(--bg-elevated); border-radius: 50%;
     color: var(--teal); font-size: 0.56rem; font-weight: 800; border: 1px solid var(--bg-page);
     cursor: pointer; transition: background 0.15s, color 0.15s, z-index 0s; padding: 0;
     vertical-align: middle; margin-right: -3.2px; text-decoration: none;
     flex-shrink: 0; position: relative; z-index: 1;
   }
   .ai-cite-link:last-of-type { margin-right: 2px; }
   .ai-cite-link:hover, .ai-cite-link.active {
     background: var(--teal); color: #fff; z-index: 10;
   }
   
   .ai-msg-pdf-badge {
     display: inline-flex; align-items: center; gap: 5px;
     font-size: 0.68rem; color: var(--ink-muted); margin-bottom: 7px;
   }
   .ai-msg-pdf-badge .bx { color: var(--red); }
   
   .ai-report-badge {
     display: inline-flex; align-items: center; gap: 6px;
     font-size: 0.68rem; font-weight: 700; color: var(--teal);
     background: var(--teal-soft); border: 1px solid var(--border-teal);
     padding: 3px 10px; border-radius: 20px; margin-bottom: 9px;
   }
   
   .ai-msg-actions { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
   .ai-msg-action-btn {
     display: inline-flex; align-items: center; gap: 4px;
     padding: 4px 10px; border-radius: var(--r-pill);
     border: 1px solid var(--border); background: none;
     color: var(--ink-muted); font-family: inherit; font-size: 0.7rem; font-weight: 600;
     cursor: pointer; transition: all 0.15s;
   }
   .ai-msg-action-btn:hover { background: var(--bg-elevated); color: var(--ink); border-color: var(--border-hover); }
   .ai-msg-action-btn.copied { background: var(--green-soft); color: var(--green); border-color: rgba(18,185,129,0.2); }
   .ai-msg-action-btn.open-report {
     background: var(--teal-soft); color: var(--teal); border-color: var(--border-teal);
   }
   .ai-msg-action-btn.open-report:hover { background: var(--teal); color: var(--navy); }
   .ai-msg-action-btn:disabled { opacity: 0.55; cursor: default; }
   .ai-msg-action-btn:disabled:hover { background: none; color: var(--ink-muted); border-color: var(--border); }
   
   /* ── THINKING ── */
   .ai-thinking { margin-bottom: 9px; }
   .ai-thinking-toggle {
     display: inline-flex; align-items: center; gap: 5px;
     background: none; border: none; color: var(--ink-muted);
     font-family: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer;
     padding: 0; transition: color 0.15s;
   }
   .ai-thinking-toggle .bx { transition: transform 0.2s; }
   .ai-thinking-toggle.open .bx { transform: rotate(180deg); }
   .ai-thinking-toggle:hover { color: var(--ink-soft); }
   .ai-thinking-steps { display: none; padding-top: 7px; }
   .ai-thinking-steps.visible { display: flex; flex-direction: column; gap: 4px; }
   .ai-thinking-step {
     display: flex; align-items: center; gap: 7px; font-size: 0.7rem; color: var(--ink-muted);
   }
   .step-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-muted); flex-shrink: 0; }
   .ai-thinking-step.done .step-dot { background: var(--green); }
   
   /* ── TYPEWRITER ── */
   .ai-typewriter-cursor {
     display: inline-block; width: 2px; height: 13px; background: var(--teal);
     border-radius: 1px; margin-left: 1px; vertical-align: text-bottom;
     animation: typewriterCursor 0.8s ease-in-out infinite;
   }
   
   /* ── PROGRESS INDICATOR — spinner + cycling stage text ── */
   .ai-progress-spinner-row {
     display: flex; align-items: center; gap: 10px;
     padding: 6px 2px;
   }
   .ai-progress-spinner {
     width: 16px; height: 16px; flex-shrink: 0;
     border: 2px solid var(--border); border-top-color: var(--teal);
     border-radius: 50%;
     animation: spin 0.7s linear infinite;
   }
   .ai-progress-spinner.done {
     border: none; background: var(--green);
     display: flex; align-items: center; justify-content: center;
     font-size: 0.5rem; color: #fff; animation: none;
   }
   .ai-progress-spinner.error {
     border-color: var(--red); border-top-color: var(--red);
     animation: none;
   }
   .ai-progress-spinner-text {
     font-size: 0.78rem; color: var(--ink-soft);
     transition: opacity 0.14s ease;
   }
   .ai-progress-spinner-text.swap { opacity: 0; }
   
   /* ── INPUT DOCK ── */
   .ai-input-dock {
     padding: 0 10px 10px;
     flex-shrink: 0;
     width: 700px;
     max-width: 100%;
     margin: 0 auto;
   }

   .ai-pdf-indicator {
     display: flex; align-items: center; gap: 7px; padding: 5px 10px;
     background: var(--red-soft); border: 1px solid rgba(240,68,56,0.18);
     border-radius: 7px; font-size: 0.72rem; color: var(--red); margin-bottom: 8px;
   }
   .ai-pdf-indicator .bx { flex-shrink: 0; }
   .ai-pdf-indicator span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .ai-pdf-remove {
     background: none; border: none; color: var(--red); cursor: pointer;
     font-size: 0.9rem; display: flex; align-items: center;
   }
   
   /* ── SS FILTERS ── */
   .ss-filters-panel {
     display: none; flex-wrap: wrap; gap: 8px;
     padding: 9px 12px; background: var(--bg-elevated);
     border: 1px solid var(--border); border-radius: 9px; margin-bottom: 9px;
   }
   .ss-filters-panel.visible { display: flex; animation: fadeUp 0.15s ease; }
   .ss-filter-group {
     display: flex; align-items: center; gap: 5px;
   }
   .ss-filter-label {
     font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
     letter-spacing: 0.06em; color: var(--ink-muted); white-space: nowrap;
   }
   .ss-filter-input {
     background: var(--bg-input); border: 1px solid var(--border);
     border-radius: 6px; padding: 4px 8px;
     font-family: inherit; font-size: 0.76rem; color: var(--ink); outline: none;
     transition: border-color 0.15s; width: 62px;
   }
   .ss-filter-input:focus { border-color: var(--border-focus); }
   .ss-filter-input::placeholder { color: var(--ink-muted); }
   .ss-filter-select {
     background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px;
     padding: 4px 24px 4px 8px; font-family: inherit; font-size: 0.76rem; color: var(--ink);
     outline: none; appearance: none; cursor: pointer;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%233D5470' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
     background-repeat: no-repeat; background-position: right 7px center;
     transition: border-color 0.15s;
   }
   .ss-filter-select option { background: var(--navy); }
   .ss-filter-select:focus { border-color: var(--border-focus); }
   
   /* ── INPUT BOX ── */
   .ai-input-box {
     background: var(--bg-input); border: 1px solid var(--border);
     border-radius: 16px; overflow: visible;
     transition: border-color 0.18s, box-shadow 0.18s;
     padding: 4px 14px 10px;
     box-shadow: 0 1px 2px rgba(43, 24, 23, 0.04), 0 6px 20px rgba(43, 24, 23, 0.09);
   }
   .ai-input-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--teal-glow), 0 1px 2px rgba(43, 24, 23, 0.04), 0 6px 20px rgba(43, 24, 23, 0.09); }
   .ai-textarea {
     width: 100%; background: none; border: none; outline: none;
     padding: 14px 4px 4px; color: var(--ink); font-family: inherit;
     font-size: 0.9rem; resize: none; display: block; line-height: 1.6;
   }
   .ai-textarea::placeholder { color: var(--ink-muted); }
   
   .ai-input-toolbar {
     display: flex; align-items: center; justify-content: space-between; width: 100%;
   }

   .ai-input-left-tools { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
   .ai-input-actions { display: flex; align-items: center; gap: 5px; }
   
   /* ── SCOPE & OUTPUT ACTIVE PILLS (toolbar) ── */
   .ai-settings-active-pills {
     display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
   }
   .ai-active-pill {
     display: inline-flex; align-items: center; gap: 4px;
     padding: 4px 10px; border-radius: var(--r-input);
     background: var(--teal-soft); border: 1px solid rgba(34,211,200,0.20);
     color: var(--teal); font-family: inherit; font-size: 0.68rem; font-weight: 700;
     cursor: pointer; transition: all 0.15s; white-space: nowrap; letter-spacing: 0.01em;
   }
   .ai-active-pill:hover {
     background: rgba(34,211,200,0.18); border-color: rgba(34,211,200,0.35);
     transform: translateY(-1px);
   }
   .ai-active-pill i { font-size: 0.72rem; }

   /* Hidden legacy elements — kept in DOM for JS compat */
   .ai-scope-wrap { display: none; }
   .ai-report-toggle-wrap { display: none; }
   /* But keep .ai-scope-option accessible for JS sync */
   .ai-scope-option { display: none; }

   /* ── PROJECT SCOPE PICKER (multi-select) ──────────────────────
      Trigger reuses .ai-active-pill's exact look; only the wrapper,
      dropdown and checklist are new. Sized to match .icon-btn-xs /
      .pill-btn.xs elsewhere in this toolbar — no separate scale. */
   .ai-projscope-wrap { position: relative; display: inline-flex; }
   .ai-projscope-btn.ai-active-pill { font-weight: 600; }
   .ai-projscope-btn i.bx-chevron-down {
     font-size: 0.62rem; margin-left: 1px; transition: transform 0.15s;
   }
   .ai-projscope-wrap.open .ai-projscope-btn i.bx-chevron-down { transform: rotate(180deg); }

   .ai-projscope-dropdown {
     position: absolute; bottom: calc(100% + 6px); left: 0; width: 220px; max-height: 280px;
     background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-sm);
     box-shadow: var(--shadow-panel); display: none; flex-direction: column;
     z-index: 60; overflow: hidden;
   }
   .ai-projscope-wrap.open .ai-projscope-dropdown { display: flex; }

   .ai-projscope-search-row { padding: 6px 6px 4px; border-bottom: 1px solid var(--border); }
   .ai-projscope-search {
     width: 100%; height: 26px; padding: 0 8px; border-radius: var(--r-xs);
     border: 1px solid var(--border); font-size: 0.74rem; font-family: inherit;
     outline: none; background: var(--bg-page); color: var(--ink);
   }
   .ai-projscope-search:focus { border-color: var(--border-focus); box-shadow: 0 0 0 2px var(--teal-glow); }

   .ai-projscope-quickrow { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid var(--border); }
   .ai-projscope-quickbtn {
     flex: 1; font-size: 0.66rem; font-weight: 600; padding: 3px 0; border-radius: 8px;
     border: 1px solid var(--border); background: var(--bg-page); color: var(--ink-soft);
     cursor: pointer; font-family: inherit; transition: all 0.15s;
   }
   .ai-projscope-quickbtn:hover { background: var(--teal-soft); color: var(--teal); border-color: var(--border-teal); }

   .ai-projscope-list { overflow-y: auto; flex: 1; padding: 4px; }
   .ai-projscope-item {
     display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: var(--r-input);
     cursor: pointer; font-size: 0.74rem; color: var(--ink);
   }
   .ai-projscope-item:hover { background: var(--teal-soft); }
   .ai-projscope-item input[type="checkbox"] {
     width: 13px; height: 13px; flex-shrink: 0; accent-color: var(--teal); cursor: pointer;
   }
   .ai-projscope-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .ai-projscope-item-count { font-size: 0.62rem; color: var(--ink-muted); flex-shrink: 0; }
   .ai-projscope-empty { padding: 14px 10px; text-align: center; font-size: 0.7rem; color: var(--ink-muted); }

   .ai-projscope-footer { display: flex; justify-content: flex-end; padding: 6px; border-top: 1px solid var(--border); }
   .ai-projscope-apply {
     font-size: 0.68rem; font-weight: 700; padding: 4px 12px; border-radius: var(--r-pill); border: none;
     background: var(--teal); color: #fff; cursor: pointer; font-family: inherit; transition: all 0.15s;
   }
   .ai-projscope-apply:hover { background: var(--teal-dim); box-shadow: var(--glow-teal); }

   /* ── Input action buttons ── */
   .ai-attach-btn {
     width: 27px; height: 27px; border-radius: 7px; border: 1px solid var(--border);
     background: none; color: var(--ink-muted); cursor: pointer;
     display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
     transition: all 0.15s;
   }
   .ai-attach-btn:hover { background: var(--bg-input); color: var(--ink); }
   .ai-send-btn {
     width: 30px; height: 30px; border-radius: 9px; border: none;
     background: var(--teal); color: var(--navy); cursor: pointer;
     display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
     transition: background 0.15s, box-shadow 0.15s, transform 0.1s; flex-shrink: 0; 
   }
   .ai-send-btn:hover { background: var(--teal-dim); box-shadow: var(--glow-teal); }
   .ai-send-btn:active { transform: scale(0.92); }
   .ai-send-btn:disabled { opacity: 0.3; }
   
   /* ── REFERENCE SIDEBAR ── */
   .ai-ref-sidebar {
     display: none; width: 285px; flex-direction: column;
     flex-shrink: 0; animation: slideInRight 0.2s ease;
   }
   .ai-ref-sidebar-header {
     display: flex; align-items: center; gap: 8px; padding: 12px 14px;
     border-bottom: 1px solid var(--border); font-size: 0.76rem; font-weight: 700;
     color: var(--ink); flex-shrink: 0;
   }
   .ai-ref-sidebar-header .bx { font-size: 0.88rem; color: var(--teal); }
   .ai-ref-sidebar-header span { flex: 1; }
   .ai-ref-sidebar-close {
     width: 22px; height: 22px; border-radius: 50%; border: none; background: none;
     color: var(--ink-muted); cursor: pointer; display: flex; align-items: center;
     justify-content: center; font-size: 0.88rem; transition: color 0.15s;
   }
   .ai-ref-sidebar-close:hover { color: var(--red); }
   .ai-ref-sidebar-body { flex: 1; overflow-y: auto; padding: 10px; }
   .ai-ref-sidebar-body::-webkit-scrollbar { width: 3px; }
   .ai-ref-sidebar-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
   .ai-ref-empty {
     display: flex; flex-direction: column; align-items: center;
     justify-content: center; gap: 8px; padding: 38px 18px; text-align: center;
   }
   .ai-ref-empty .bx { font-size: 1.4rem; color: var(--ink-muted); opacity: 0.3; }
   .ai-ref-empty p { font-size: 0.72rem; color: var(--ink-muted); line-height: 1.5; }
   .ai-ref-sidebar-list { display: flex; flex-direction: column; gap: 6px; }
   
   .ai-ref-card {
     display: flex; gap: 8px; padding: 9px 10px;
     background: var(--bg-surface); border: 1px solid var(--border);
     border-radius: 9px; transition: border-color 0.18s;
   }
   .ai-ref-card.highlighted { border-color: rgba(34,211,200,0.38); background: var(--teal-soft); }
   .ai-ref-num {
     min-width: 17px; height: 17px; border-radius: 5px; background: var(--bg-page);
     color: var(--ink); font-size: 0.58rem; font-weight: 800; 
     display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
   }
   .ai-ref-body { flex: 1; min-width: 0; }
   .ai-ref-uid {
     display: inline-flex; align-items: center;
     font-size: 0.62rem; font-weight: 800;
     color: var(--teal); background: var(--teal-soft);
     border-radius: 5px; padding: 1px 6px; margin-bottom: 4px;
   }
   .ai-ref-context { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
   .ai-ref-context-item {
     display: inline-flex; align-items: center; gap: 3px;
     font-size: 0.61rem; color: var(--ink-muted); line-height: 1.3;
   }
   .ai-ref-context-item .bx { font-size: 0.68rem; opacity: 0.7; }
   .ai-ref-title { font-size: 0.71rem; font-weight: 600; color: var(--ink); line-height: 1.4; margin-bottom: 2px; }
   .ai-ref-meta  { font-size: 0.63rem; color: var(--ink-muted); line-height: 1.4; }
   .ai-ref-doi   {
     font-size: 0.63rem; color: var(--teal);
     display: inline-flex; align-items: center; gap: 3px; margin-top: 3px;
   }
   .ai-ref-citations {
     display: inline-flex; align-items: center; gap: 3px;
     margin-top: 4px; font-size: 0.62rem; color: var(--ink-muted);
   }
   .ai-ref-citations .bx { font-size: 0.7rem; }
   
   /* ── REPORT SECTIONS (in thread) ── */
   .ai-report-section {
     border: 1px solid var(--border); border-radius: 9px; overflow: hidden;
     margin-bottom: 5px;
   }
   .ai-report-section-header {
     display: flex; align-items: center; justify-content: space-between;
     padding: 9px 13px; cursor: pointer; background: var(--bg-elevated);
     transition: background 0.15s; user-select: none;
   }
   .ai-report-section-header:hover { background: rgba(255,255,255,0.04); }
   .ai-report-section-title {
     display: flex; align-items: center; gap: 7px;
     font-size: 0.76rem; font-weight: 700; color: var(--ink);
   }
   .ai-report-section-title .bx { font-size: 0.82rem; color: var(--teal); }
   .ai-report-section-caret { font-size: 0.78rem; color: var(--ink-muted); transition: transform 0.2s; }
   .ai-report-section.open .ai-report-section-caret { transform: rotate(180deg); }
   .ai-report-section-body {
     display: none; padding: 11px 14px 13px;
     font-size: 0.81rem; color: var(--ink-soft); line-height: 1.75;
     border-top: 1px solid var(--border); background: var(--bg-surface);
   }
   .ai-report-section.open .ai-report-section-body { display: block; }
   .ai-report-section-body p { margin-bottom: 7px; }
   .ai-report-section-body p:last-child { margin-bottom: 0; }
   
   /* ── LOADING DOTS ── */
   .ai-msg-loading { display: flex; align-items: center; gap: 8px; color: var(--teal); font-size: 0.76rem; }
   .ai-dots span {
     display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--teal);
     margin: 0 1.5px; animation: ai-dot-bounce 1.2s ease-in-out infinite;
   }
   .ai-dots span:nth-child(2) { animation-delay: 0.2s; }
   .ai-dots span:nth-child(3) { animation-delay: 0.4s; }
   
   
   /* ── PROJECT VIEW ── */
   .proj-topbar {
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     align-items: center;
     gap: 12px;
     padding-bottom: 15px; 
     margin-top: -3px;
   }
   .breadcrumb { display: flex; align-items: center; gap: 7px; justify-self: start; min-width: 0; }
   .breadcrumb-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .back-btn {
     display: inline-flex; align-items: center; border-radius: var(--r-card);
   }

   .breadcrumb-sep     { color: var(--ink-muted); flex-shrink: 0; }
   .breadcrumb-current { font-size: 0.86rem; font-weight: 700; color: var(--ink); }
   .proj-actions { display: flex; align-items: center; gap: 7px; justify-self: end; }

   /* ── Workflow-stage dropdown (centred in the topbar) ──────────── */
   .proj-stage-dropdown { position: relative; justify-self: center;}

   .proj-stage-trigger {
     display: inline-flex; align-items: center; gap: 8px;
     height: 32px;
     padding: 0 14px;
     border-radius: 8px;
     border: 1px solid var(--border);
     background: var(--bg-page);
     color: var(--ink);
     font-family: inherit;
     font-size: var(--text-sm, 0.72rem);
     font-weight: 700;
     letter-spacing: 0.005em;
     cursor: pointer;
     white-space: nowrap;
     transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
   }
   .proj-stage-trigger:hover,
   .proj-stage-trigger.open {
     border-color: var(--border-hover);
     background: var(--bg-elevated);
   }
   .proj-stage-trigger:focus-visible {
     outline: none;
     box-shadow: 0 0 0 3px rgba(13, 167, 154, 0.22);
   }

   .proj-stage-dots { display: inline-flex; align-items: center; gap: 3px; }
   .psd-dot {
     width: 5px; height: 5px; border-radius: 999px;
     background: var(--border-hover);
     transition: background 0.16s ease, box-shadow 0.16s ease;
   }
   .psd-dot.filled { background: var(--teal); opacity: 0.5; }
   .psd-dot.active { opacity: 1; width: 15px;}

   .proj-stage-caret { font-size: 0.85rem; color: var(--ink-muted); transition: transform 0.16s ease; }
   .proj-stage-trigger.open .proj-stage-caret { transform: rotate(180deg); }

   .proj-stage-menu {
     display: none;
     position: absolute;
     top: calc(100% + 6px);
     left: 50%;
     transform: translateX(-50%);
     min-width: 210px;
     background: var(--bg-surface);
     border: 1px solid var(--border);
     border-radius: 8px;
     box-shadow: 0 12px 28px rgba(43,24,23,0.14);
     padding: 6px;
     z-index: 40;
   }
   .proj-stage-menu.open { display: block; }

   .proj-stage-item {
     display: flex; align-items: center; gap: 9px;
     width: 100%; padding: 8px 10px;
     border-radius: 1px; border: none; background: none;
     font-family: inherit; font-size: 0.76rem; font-weight: 600;
     color: var(--ink-soft); cursor: pointer; text-align: left;
     transition: background 0.14s ease, color 0.14s ease;
   }
   .proj-stage-item:hover:not(.disabled) { background: var(--bg-elevated); color: var(--ink); }
   .proj-stage-item.active { background: var(--teal-soft); color: var(--teal-dim); }
   .proj-stage-item.disabled { color: var(--ink-muted); cursor: not-allowed; opacity: 0.6; }

   .psi-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--border-hover); }
   .psi-dot.filled { background: var(--teal); opacity: 50%; }
   .psi-dot.active { background: var(--teal); opacity: 100%; }
   .psi-label { flex: 1; }
   .psi-soon {
     font-size: 0.58rem; font-weight: 700; text-transform: uppercase;
     letter-spacing: 0.03em; color: var(--ink-muted);
     background: var(--bg-elevated); padding: 2px 6px; border-radius: 999px;
     flex-shrink: 0;
   }

   /* Circular pending-count badge on the Summarisation row — same slot as
      the "Soon" pill on upcoming rows, but a filled circle carrying the
      count instead of a text label. Runs the batch directly on click. */
   .psi-run-count {
     flex-shrink: 0;
     display: inline-flex; align-items: center; justify-content: center;
     min-width: 18px; height: 18px; padding: 0 4px;
     border-radius: 50%; border: none;
     background: var(--teal-soft); color: var(--teal-dim);
     font-family: inherit; font-size: 0.62rem; font-weight: 800;
     line-height: 1; cursor: pointer;
     transition: background 0.14s ease, color 0.14s ease;
   }
   .psi-run-count:hover { background: var(--teal); color: #fff; }

   /* "Run" — appears next to the Summarisation row when the currently
      selected publication has a PDF but no summary yet, letting the
      reviewer jump straight into generation from the Import view. */
   .psi-run-btn {
     display: inline-flex; align-items: center; gap: 4px;
     flex-shrink: 0; margin-left: auto;
     padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border-teal, var(--teal));
     background: var(--teal-soft); color: var(--teal);
     font-family: inherit; font-size: 0.66rem; font-weight: 800;
     cursor: pointer; transition: background 0.14s ease, color 0.14s ease;
   }
   .psi-run-btn:hover { background: var(--teal); color: #fff; }
   .psi-run-btn i { font-size: 0.72rem; }

   /* Trailing chevron on the compact "Summarise All" action, Elicit-style */
   .pill-btn-chevron { font-size: 0.78rem !important; opacity: 0.65; margin-left: -1px; }

   /* ── Pending-summarisation chip (replaces the old corner badge) ──
      Sits inline inside the stage trigger, between the label and the
      chevron — visible only on the Summarisation stage (see
      _updateBatchSummariseBtnVisibility() in projects.js). Styled like
      the neutral DOI/status chips in the publication list (no border,
      bg-elevated fill) rather than a standalone colored button. Clicking
      it runs the batch straight away. */
   .proj-stage-run-chip {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     height: 18px;
     padding: 0 7px;
     border-radius: 4px;
     border: none;
     background: var(--bg-elevated);
     color: var(--ink-soft);
     font-family: inherit;
     font-size: 0.62rem;
     font-weight: 800;
     letter-spacing: 0.02em;
     line-height: 1;
     cursor: pointer;
     transition: background 0.14s ease, color 0.14s ease;
   }
   .proj-stage-run-chip:hover { background: var(--teal-soft); color: var(--teal-dim); }
   .proj-stage-run-chip:active { transform: scale(0.96); }
   .proj-stage-run-chip i { font-size: 0.68rem; }

   /* While a run is in flight, or showing its "done"/"nothing to do"
      result — icon + text replaces the static "Run" label (driven by
      batch-summarise.js). Only .running disables the click and spins
      the icon; .busy alone (done/nothing) stays clickable-looking but
      is re-rendered idle a few seconds later. */
   .proj-stage-run-chip.running { cursor: not-allowed; }
   .proj-stage-run-chip.running i { animation: psrb-spin 0.8s linear infinite; }
   .proj-stage-run-chip.busy .psrc-run-label { display: none; }

   /* ── Expanded state — the chip takes over the whole trigger pill ──
      While busy, the dots/label/chevron hide and the run chip grows to
      fill the pill's full width/height, becoming the sole visible
      content (rather than a small badge squeezed in next to the label).
      Toggled on #projStageTrigger alongside .busy on the chip itself —
      see _setBtnState() in batch-summarise.js. */
   .proj-stage-trigger.psrc-expanded {
     cursor: default;
   }
   .proj-stage-trigger.psrc-expanded .proj-stage-dots,
   .proj-stage-trigger.psrc-expanded .proj-stage-label,
   .proj-stage-trigger.psrc-expanded .proj-stage-caret {
     display: none;
   }
   .proj-stage-trigger.psrc-expanded .proj-stage-run-chip {
     flex: 1 1 auto;
     width: 100%;
     justify-content: center;
     gap: 6px;
     height: auto;
     padding: 0;
     background: transparent;
     font-size: var(--text-sm, 0.72rem);
     cursor: default;
   }
   .proj-stage-trigger.psrc-expanded .proj-stage-run-chip:hover {
     background: transparent;
     color: var(--ink-soft);
   }
   .proj-stage-trigger.psrc-expanded .proj-stage-run-chip i {
     font-size: 0.85rem;
   }

   @keyframes psrb-spin { to { transform: rotate(360deg); } }
   
   .proj-body {
     display: grid; grid-template-columns: 1fr minmax(360px, 440px);
     gap: 14px; align-items: stretch;
     height: calc(100vh - 80px); overflow: visible;
   }

   /* ── LEFT PANEL — publication list + import ──────────────────── */
   /* `order` puts the list visually on the right by default (see below)
      even though it comes second in the DOM (kept that way so the
      split-PDF view, which hides .left-panel and appends its pane after
      #rightPanel, needs no changes). */
   .left-panel { order: 2; display: flex; flex-direction: column; gap: 11px; min-height: 0; }
   .right-panel { order: 1; }

   /* ── IMPORT & PAGE SOURCES VIEW ──────────────────────────────────
      Activated via .proj-body--import (toggled by _applyProjViewMode()
      in projects.js when the topbar stage is set to "Import"). Flips the
      default Summarisation layout (wide detail left, slim list right)
      back to the classic reference-manager arrangement — slim source
      list on the left, publication detail filling the wide column on
      the right — same components, just re-ordered. */
   .proj-body--import {
     grid-template-columns: minmax(360px, 440px) 1fr;
   }
   .proj-body--import .left-panel  { order: 1; }
   .proj-body--import .right-panel { order: 2; }

   .panel-card {
     background: var(--bg-surface); border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--border, rgba(43,24,23,0.10)); 
     box-shadow: var(--shadow-card);
   }
   /* The publications card grows to fill the remaining column height so its
      list can scroll independently, Elicit-"paper sources"-style, while the
      Import card above keeps its natural height. */
   .panel-card.pub-list-card { flex: 1; display: flex; flex-direction: column; min-height: 0; }
   .panel-card-header {
     display: flex; align-items: center; justify-content: space-between;
     padding: 11px 13px; 
   }
   .panel-card-header h3 {
     font-size: 0.78rem; font-weight: 700; color: var(--ink);
     display: flex; align-items: center; gap: 6px;
   }
   .panel-card-header h3 .bx { font-size: 0.88rem; color: var(--teal); }
   /* ── Sources-stage topbar button (#importBtn) — opens a dropdown with
      "Upload RIS" / "Add manually" (#importActions). Replaces the old
      inline accordion that used to sit atop the publication list; same
      "labelled icon-btn-sm, ID+class so it wins the width tie against
      design-alignment.css" pattern as #asvFilterBtn / #sumFilterBtn
      (see abstract-screen.css / rule below), just with a caret since it
      opens a menu rather than toggling a filter. */
   .import-dropdown { position: relative; }
   #importBtn.import-btn {
     width: auto;
     gap: 6px;
     padding: 0 10px;
     font-family: inherit;
     font-size: 0.72rem;
     font-weight: 700;
     color: var(--ink-soft);
   }
   .import-btn-caret { font-size: 0.85rem; transition: transform 0.16s ease; }
   #importBtn.import-btn.open .import-btn-caret { transform: rotate(180deg); }
   #importBtn.import-btn.open,
   #importBtn.import-btn:hover {
     background: var(--bg-elevated); color: var(--ink); border-color: var(--border-hover);
   }

   .import-menu {
     display: none;
     position: absolute;
     top: calc(100% + 6px);
     right: 0;
     min-width: 180px;
     flex-direction: column;
     gap: 3px;
     background: var(--bg-surface);
     border: 1px solid var(--border);
     border-radius: 8px;
     box-shadow: 0 12px 28px rgba(43,24,23,0.14);
     padding: 6px;
     z-index: 40;
   }
   .import-menu.open { display: flex; }

   .import-trigger-btn {
     display: flex; align-items: center; gap: 8px; width: 100%;
     padding: 8px 10px; border-radius: 6px; border: none;
     background: none; color: var(--ink-soft); font-family: inherit;
     font-size: 0.76rem; font-weight: 600; cursor: pointer; text-align: left;
     transition: all 0.14s;
   }
   .import-trigger-btn .bx { font-size: 0.9rem; color: var(--teal); }
   .import-trigger-btn:hover { background: var(--teal-soft); color: var(--teal); }
   
   /* ── PUB LIST & FILTER ── */
   .pub-filter-bar {
     flex-shrink: 0;
     padding: 5px 8px;

   }
   /* Search row */
   .pf-search-row {
     display: flex; align-items: center; gap: 6px;
     padding: 7px 9px 6px;
     border-radius: 10px;
     border: 1px solid var(--border);
   }
   .pf-search-icon {
     font-size: 0.85rem; color: var(--ink-muted); flex-shrink: 0;
   }
   .pub-filter-input.pf-text-input {
     flex: 1; background: transparent; border: none;
     padding: 0; font-family: inherit; font-size: 0.75rem;
     color: var(--ink); outline: none;
   }
   .pub-filter-input.pf-text-input::placeholder { color: var(--ink-muted); }
   .pf-clear-btn {
     display: flex; align-items: center; justify-content: center;
     width: 18px; height: 18px; border-radius: 50%;
     border: none; background: var(--bg-elevated); color: var(--ink-muted);
     cursor: pointer; font-size: 0.78rem; flex-shrink: 0;
     transition: background 0.14s, color 0.14s;
   }
   .pf-clear-btn:hover { background: var(--border); color: var(--ink); }
   /* Chip row */
   .pf-chips-row {
     display: flex; flex-wrap: wrap; gap: 5px;
     padding: 10px 0px;
   }
   /* Small bg-page tag style — matches .pub-doi-chip on the publication
      detail header (Journal Article / date / search-tag pills) so the
      filter row reads as the same visual language as the tags it filters
      by, just made interactive with a teal active state. */
   .pf-chip {
     display: inline-flex; align-items: center; gap: 4px;
     height: 19px; padding: 0 8px; border-radius: 5px;
     border: none;
     background: var(--bg-page); color: var(--ink-muted);
     font-family: inherit; font-size: 0.63rem; font-weight: 700; letter-spacing: 0.02em;
     cursor: pointer; transition: all 0.14s; white-space: nowrap;
   }
   .pf-chip .bx { font-size: 0.72rem; }
   .pf-chip:hover { color: var(--ink); background: var(--bg-elevated); }
   .pf-chip.active {
     background: var(--teal-soft);
     color: var(--teal);
   }
   .pub-list { flex: 1; overflow-y: auto; min-height: 0; }
   .pub-list::-webkit-scrollbar { width: 3px; }
   .pub-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

   /* ── Summarisation-stage topbar filter dropdown (#sumFilterBtn) ──────────
      Same interaction pattern as the Abstract Screen stage's #asvFilterBtn
      (see abstract-screen.css) and Full-Text Screen's #ftsFilterBtn — a
      labelled toggle that opens a small menu ("All pending" / "Assigned to
      me") rather than a single-mode on/off chip. Selector is ID+class, not
      just .sum-filter-btn, because design-alignment.css loads after this
      stylesheet and would otherwise win the width tie on plain specificity,
      leaving the button clipped at icon-btn-sm's fixed 30px with the
      label/badge/caret overflowing. */
   .sum-filter-dropdown { position: relative; }
   #sumFilterBtn.sum-filter-btn {
     width: auto;
     gap: 6px;
     padding: 0 10px;
     font-family: inherit;
     font-size: 0.72rem;
     font-weight: 700;
     color: var(--ink-soft);
   }
   #sumFilterBtn.sum-filter-btn.open,
   #sumFilterBtn.sum-filter-btn:hover {
     background: var(--bg-elevated); color: var(--ink); border-color: var(--border-hover);
   }
   #sumFilterBtn.sum-filter-btn.active {
     background: var(--teal-soft); color: var(--teal); border-color: var(--teal-border);
   }
   .sum-filter-badge {
     display: inline-flex; align-items: center; justify-content: center;
     min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px;
     background: var(--bg-elevated); color: var(--ink-soft); font-size: 0.6rem; font-weight: 800;
     line-height: 1;
   }
   #sumFilterBtn.sum-filter-btn.active .sum-filter-badge {
     background: var(--teal); color: #fff;
   }
   .sum-filter-caret { font-size: 0.85rem; transition: transform 0.16s ease; }
   #sumFilterBtn.sum-filter-btn.open .sum-filter-caret { transform: rotate(180deg); }

   .sum-filter-menu {
     display: none;
     position: absolute;
     top: calc(100% + 6px);
     right: 0;
     min-width: 190px;
     flex-direction: column;
     gap: 3px;
     background: var(--bg-surface);
     border: 1px solid var(--border);
     border-radius: 8px;
     box-shadow: 0 12px 28px rgba(43,24,23,0.14);
     padding: 6px;
     z-index: 40;
   }
   .sum-filter-menu.open { display: flex; }
   .sum-filter-item {
     display: flex; align-items: center; gap: 8px; width: 100%;
     padding: 8px 10px; border-radius: 6px; border: none;
     background: none; color: var(--ink-soft); font-family: inherit;
     font-size: 0.76rem; font-weight: 600; cursor: pointer; text-align: left;
     transition: all 0.14s;
   }
   .sum-filter-item .bx { font-size: 0.9rem; color: var(--teal); flex-shrink: 0; }
   .sum-filter-item:hover { background: var(--teal-soft); color: var(--teal); }
   .sum-filter-item.active { background: var(--teal-soft); color: var(--teal); }
   .sum-filter-item-count {
     margin-left: auto; font-size: 0.66rem; font-weight: 800; color: var(--ink-muted);
   }
   .sum-filter-item.active .sum-filter-item-count { color: var(--teal); }

   /* ── PUB PAGINATION ── */
   .pub-pagination {
     display: flex; align-items: center; justify-content: space-between;
     padding: 7px 10px;
     border-top: 1px solid var(--border);
     background: var(--bg-page);
     border-radius: 0 0 var(--r-card) var(--r-card);
     gap: 6px;
     flex-shrink: 0;
   }
   .pub-pg-btn {
     display: flex; align-items: center; justify-content: center;
     width: 26px; height: 26px; border-radius: var(--r-xs);
     border: 1px solid var(--border); background: var(--bg-surface);
     color: var(--ink-soft); cursor: pointer; font-size: 0.9rem;
     transition: all 0.14s; flex-shrink: 0;
   }
   .pub-pg-btn:hover:not(:disabled) {
     border-color: var(--border-teal); color: var(--teal);
     background: var(--teal-soft);
   }
   .pub-pg-btn:disabled {
     opacity: 0.35; cursor: not-allowed;
   }
   .pub-pg-label {
     flex: 1; text-align: center;
     font-size: 0.68rem; font-weight: 600;
     color: var(--ink-muted); letter-spacing: 0.01em;
     white-space: nowrap;
   }
   
   .pub-item {
     padding: 10px 13px 10px 11px; cursor: pointer; transition: background 0.14s, border-color 0.18s;
     border-bottom: 1px solid var(--border);
     border-left: 2.5px solid transparent; /* status accent — see .status-* below */
   }
   .pub-item:last-child { border-bottom: none; }
   .pub-item:hover  { background: var(--bg-page); }
   .pub-item.active { background: var(--bg-page); }
   /* Status accent — a quiet left-edge tint instead of a separate colored
      chip in the header, so the row stays scannable without extra clutter. */

   .pub-item-header { display: flex; align-items: center; gap: 6px; min-width: 0; margin-bottom: 6px; flex-wrap: wrap; }
   .pub-uid {
     order: 1;
     display: inline-flex; align-items: center; justify-content: center;
     min-width: 23px; height: 17px; border-radius: 4px; background: var(--bg-page);
     color: var(--ink-muted); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em;
     padding: 0 5px; flex-shrink: 0;
     transition: background 0.18s, color 0.18s;
   }
   .pub-item.active .pub-uid{ background: var(--bg-elevated); color: var(--ink); }
  .pub-item.active .pub-doi-chip{ background: var(--bg-elevated); color: var(--ink); }
  .pub-item.active .pub-status-chip{ background: var(--bg-elevated); color: var(--ink); }
   .pub-doi-chip {
     order: 2;
     display: inline-flex; align-items: center; gap: 3px;
     height: 17px; border-radius: 4px; background: var(--bg-page);
     color: var(--ink-muted);
     font-size: 0.58rem; font-weight: 700; letter-spacing: 0.02em;
     padding: 0 6px; flex-shrink: 0; text-decoration: none; cursor: pointer;
     transition: background 0.14s, color 0.14s;
   }
   .pub-doi-chip:hover { background: var(--bg-elevated); color: var(--ink); }
   .pub-doi-chip i { font-size: 0.68rem; }
   /* Third chip: plain-text context/approval status (No Context / Pending /
      To Approve / Approved). No icon, and styled identically to the UID
      and DOI chips — same neutral pill, not a separate colored badge —
      so all three read as one consistent chip group. */
   .pub-status-chip {
     order: 3;
     display: inline-flex; align-items: center;
     height: 17px; border-radius: 4px; background: var(--bg-page);
     color: var(--ink-muted);
     font-size: 0.58rem; font-weight: 700; letter-spacing: 0.02em;
     padding: 0 6px; flex-shrink: 0; white-space: nowrap;
     transition: background 0.14s, color 0.14s;
   }
   /* Excluded pubs stay listed in Sources (see isExcludedFromPipeline /
      _computeFilteredPubList, literature-review.js) rather than
      disappearing — this chip is the one visual cue distinguishing them
      from an ordinary pending/approved source. */
   .pub-status-chip.excluded { background: var(--red-soft); color: var(--red); }
   .pub-item.active .pub-status-chip.excluded { background: var(--red-soft); color: var(--red); }
   /* "Attach PDF" chip — sits right after the status chip in the same
      Refid/status row, flagging a missing attachment without opening the
      pub. Amber like the other "needs action" affordances in the app. */
   .pub-status-chip.attach {
     order: 3; display: inline-flex; align-items: center; gap: 3px;
     background: var(--amber-soft); color: var(--amber);
   }
   .pub-status-chip.attach i { font-size: 0.68rem; }
   .pub-item.active .pub-status-chip.attach { background: var(--amber-soft); color: var(--amber); }
   .pub-item-header .pub-options-wrap { order: 4; margin-left: auto; }
   .pub-item-title {
     display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
     overflow: hidden; text-align: left;
     font-size: 0.78rem; font-weight: 600; color: var(--ink-soft);
     line-height: 1.42; transition: color 0.18s;
   }
   .pub-item.active .pub-item-title { color: var(--ink); font-weight: 700; }
   .pub-item-meta {
     font-size: 0.68rem; color: var(--ink-muted); font-weight: 500;
     margin-top: 5px; text-align: left;
     overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   }
   .pub-chevron {
     font-size: 0.85rem; color: var(--ink-muted); flex-shrink: 0;
     transition: transform 0.2s, color 0.18s;
   }
   .pub-item.active .pub-chevron { color: var(--teal); }
   
   /* ── RIGHT PANEL — pub detail ── */
   .right-panel {
     background: var(--bg-surface);
     border-radius: var(--r-card); min-height: 0;
     display: flex; flex-direction: column;
     overflow-y: auto; overflow-x: hidden;
     border: 1px solid var(--border, rgba(43,24,23,0.10)); 
     box-shadow: var(--shadow-card);
   }
   .right-empty-state { flex: 1; display: flex; align-items: center; justify-content: center; }
   .right-empty-inner {
     display: flex; flex-direction: column; align-items: center; gap: 9px;
     text-align: center; padding: 56px 28px;
   }
   .right-empty-inner .bx { font-size: 2.1rem; color: var(--ink-muted); opacity: 0.22; }
   .right-empty-inner h3 { font-size: 0.86rem; font-weight: 700; color: var(--ink-soft); }
   .right-empty-inner p  { font-size: 0.75rem; color: var(--ink-muted); line-height: 1.6; max-width: 235px; }
   .pub-detail { display: flex; flex-direction: column; flex: 1; animation: fadeUp 0.2s ease; }
   .pub-detail-header {
     padding: 15px 19px 11px; border-bottom: 1px solid var(--border);
     flex-shrink: 0; background: var(--bg-surface); overflow: visible;
   }
   .pub-detail-title-row {
     display: flex; align-items: center; justify-content: space-between;
     gap: 11px; min-width: 0; padding: 5px 0; 
   }

   .pub-detail-meta-line {
     display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
     font-size: 0.66rem; color: var(--ink-muted); font-weight: 500;
     min-width: 0; margin: 0px 0 8px 0;
   }
   .pub-detail-meta-text {
     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
     flex-shrink: 1;
   }
   .pub-detail-meta-line .pub-doi-chip { flex-shrink: 0; order: 0; }
   .pub-detail-meta-line .pub-doi-chip--removable { padding-right: 4px; gap: 4px; }
   .pub-detail-header-btns { display: flex; gap: 5px; flex-shrink: 0; }
   .pub-detail-title {
     font-size: 1rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em;
     line-height: 1.4; word-break: break-word;
     overflow-wrap: anywhere; white-space: normal;
   }

   .pub-detail-chips { display: flex; flex-wrap: wrap; gap: 5px; }

   .pub-chip-remove {
     display: inline-flex; align-items: center; justify-content: center;
     width: 12px; height: 12px;
     border: none; background: none; cursor: pointer;
     color: inherit; opacity: 0.6; padding: 0; margin: 0;
     border-radius: 50%;
     transition: opacity 0.12s, background 0.12s;
   }
   .pub-chip-remove:hover { opacity: 1; background: rgba(0,0,0,0.08); }
   .pub-chip-remove .bx { font-size: 0.62rem; }
   .pub-chip-add-btn .bx { font-size: 0.58rem;}

   .pub-chip-add-wrap {
     display: inline-flex; align-items: center;
   }
   .pub-chip-add-btn {
     display: inline-flex; align-items: center; justify-content: center;
     width: 17px; height: 17px;
     border-radius: 5px;
     border: 1px solid transparent;
     background: var(--bg-page);
     color: var(--ink-muted);
     cursor: pointer;
     padding: 0;
     line-height: 1;
     transition: border-color 0.14s, color 0.14s, background 0.14s;
   }
   .pub-chip-add-btn i {
     display: inline-flex; align-items: center; justify-content: center;
     line-height: 1;
   }
   .pub-chip-add-btn:hover {
     color: var(--ink);
     background: var(--bg-elevated);
   }
   .pub-chip-add-input {
     height: 17px;
     padding: 0 8px;
     border-radius: 5px;
     border: 1px solid transparent;
     background: var(--bg-page);
     color: var(--ink);
     font-family: inherit;
     font-size: 0.58rem;
     font-weight: 700;
     outline: none;
     width: 90px;
     transition: width 0.15s;
   }
   .pub-chip-add-input::placeholder { color: var(--ink);  }
   .pub-chip-add-input:focus { width: 110px; }

   /* ── RIS tag field ── */
   .ris-tag-field {
     margin: 12px 0 4px;
     display: flex;
     flex-direction: column;
     gap: 7px;
   }
   .ris-tag-label-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
   }
   .ris-tag-optional {
     font-weight: 400;
     opacity: 0.5;
     font-size: 0.72rem;
     text-transform: none;
     letter-spacing: 0;
   }
   .ris-tag-presets {
     display: flex;
     gap: 5px;
     flex-wrap: wrap;
   }
   .ris-tag-preset-btn {
     font-size: 0.63rem;
     font-weight: 600;
     font-family: inherit;
     padding: 2px 9px;
     border-radius: 20px;
     border: 1px solid var(--border);
     background: var(--bg-page);
     color: var(--ink-soft);
     cursor: pointer;
     transition: all 0.14s ease;
     line-height: 1.6;
   }
   .ris-tag-preset-btn:hover {
     border-color: rgba(217,119,6,0.35);
     background: rgba(217,119,6,0.07);
     color: var(--amber);
   }
   .ris-tag-preset-btn.active {
     border-color: rgba(217,119,6,0.40);
     background: rgba(217,119,6,0.10);
     color: var(--amber);
   }
   .ris-tag-input-wrap {
     position: relative;
     display: flex;
     align-items: center;
   }
   .ris-tag-icon {
     position: absolute;
     left: 10px;
     font-size: 0.85rem;
     color: var(--ink-muted);
     pointer-events: none;
   }
   .ris-tag-input {
     width: 100%;
     padding: 7px 10px 7px 30px;
     font-size: 0.78rem;
     font-family: inherit;
     border: 1px solid var(--border);
     border-radius: var(--r-input);
     background: var(--bg-input);
     color: var(--ink);
     outline: none;
     transition: border-color 0.15s ease, box-shadow 0.15s ease;
   }
   .ris-tag-input::placeholder { color: var(--ink-muted); }
   .ris-tag-input:focus {
     border-color: rgba(217,119,6,0.45);
     box-shadow: 0 0 0 3px rgba(217,119,6,0.08);
   }
   .ris-tag-preview {
     display: inline-flex;
     align-items: center;
     gap: 3px;
     font-size: 0.62rem;
     font-weight: 600;
     padding: 2px 9px;
     border-radius: 20px;
     background: rgba(217,119,6,0.08);
     color: var(--amber);
     border: 1px solid rgba(217,119,6,0.22);
     margin-left: 8px;
     white-space: nowrap;
     flex-shrink: 0;
   }
   
   .pub-detail-body { flex: 1; overflow-y: auto; padding: 0; }
   .pub-section { padding: 14px 19px; }

   .pub-section:last-child { border-bottom: none; }
   .pub-section-label {
     display: flex; align-items: center; gap: 5px; font-size: 0.70rem; font-weight: 700; color: var(--ink-muted); margin-bottom: 9px;
   }
   .pub-section-label .bx { font-size: 0.74rem; color: var(--teal); }
   .pub-section-label-row {
     display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px;
     padding: 5px; 
   }
   .pub-section-label-row .pub-section-label { margin-bottom: 0; }
   .pub-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
   /* ── Compact meta strip (replaces full Metadata section) ── */
   .pub-meta-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
   .pub-meta-strip .pub-meta-item.full { grid-column: 1 / -1; }
   .pub-meta-item {
     background: var(--bg-page); border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px;
   }
   .pub-meta-item.full { grid-column: 1 / -1; }
   .pmi-label { font-size: 0.7rem; font-weight: 700; color: var(--ink-muted); margin-bottom: 3px; }
   .pmi-val   { font-size: 0.76rem; color: var(--ink); font-weight: 500; line-height: 1.4; }
   .pmi-val a { color: var(--teal); }
   .pmi-val.muted { color: var(--ink-muted); font-style: italic; }
   .pub-abstract-text { font-size: 0.75rem; color: var(--ink); line-height: 1.75; padding-top: 2px; }
   .abstract-box, .pub-details-pdf, .pub-details-devices {
    background: var(--bg-page); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;}

   .pub-section--chips { padding-bottom: 5px; display: none; }
   .proj-body--import .pub-section--chips { display: block; }
   .pub-detail-chip-row {
     display: flex; align-items: center; justify-content: space-between;
     gap: 6px; margin-bottom: 4px;
   }

#pubAttachContextFooter { display: none; }
.pub-detail-chip-row:has(#pubAttachChip.active) #pubAttachContextFooter { display: flex; }

   .pub-detail-chip-row-left {
     display: flex; flex-wrap: wrap; gap: 6px;
   }
   .pub-detail-chip {
     display: inline-flex; align-items: center; gap: 5px;
     padding: 5px 11px; border-radius: 20px;
     border: 1px solid var(--border);
     background: var(--bg-surface); color: var(--ink-muted);
     font-family: inherit; font-size: 0.71rem; font-weight: 600;
     cursor: pointer; transition: all 0.14s; white-space: nowrap;
   }
   .pub-detail-chip .bx { font-size: 0.8rem; }
   .pub-detail-chip:hover { color: var(--ink); background: var(--bg-page); }
   .pub-detail-chip.active {
     color: var(--ink); background: var(--bg-page);
   }
   .pub-details-body {
     display: none; flex-direction: column; gap: 12px;
     padding: 14px 0 14px;
   }
   .pub-details-body.open { display: flex; }
   .pub-details-section-label-row {
     display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
   }

   #pubHistoryContent {
    background: var(--bg-page); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
   }

   .pub-details-sub-label {
     display: flex; align-items: center; gap: 5px;
     font-size: 0.7rem; font-weight: 700; color: var(--ink-muted);
   }
   .pub-details-sub-label .bx { font-size: 0.78rem; color: var(--teal); }

   /* ── Attachments & Devices section spacing ── */
   #pubAttachBody.pub-details-body { gap: 10px; }

   /* ── Device tags ── */
   .pub-details-devices { display: flex; flex-direction: column; }
   .pub-device-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; min-height: 0; }
   .pub-device-tag {
     display: inline-flex; align-items: center; gap: 4px;
     padding: 4px 6px 4px 8px;
     background: var(--green-soft); border: 1px solid rgba(18,185,129,0.22);
     border-radius: 20px; max-width: 260px; transition: border-color 0.15s;
     color: var(--ink); font-size: 0.71rem; font-weight: 500;
   }

   .pub-device-tag-remove {
     display: inline-flex; align-items: center; justify-content: center;
     width: 14px; height: 14px; border: none; background: none;
     color: var(--teal); cursor: pointer; padding: 0; border-radius: 50%;
     opacity: 0.7; transition: opacity 0.14s;
   }
   .pub-device-tag-remove:hover { opacity: 1; }
   .pub-device-tag-remove .bx { font-size: 0.78rem; }
   .pub-device-input-row { display: flex; }
   .pub-device-input {
     flex: 1; background: var(--bg-surface); border: 1px solid var(--border);
     border-radius: 7px; padding: 5px 9px; font-family: inherit; font-size: 0.75rem;
     color: var(--ink); outline: none; transition: border-color 0.18s;
   }
   .pub-device-input:focus { border-color: var(--border-focus); }
   .pub-device-input::placeholder { color: var(--ink-muted); }

   /* ── Custom Device Summaries: table ──────────────────────────── */
   /* overflow: visible (not auto) so the per-cell dropdown menu — which
      opens upward and is positioned absolutely — is never clipped by this
      container's edge. The table itself no longer scrolls; table-layout:
      fixed + percentage column widths keep it fluid to the container. */
   .pub-device-table-wrap {
     border: 1px solid var(--border);
     border-radius: 8px;
     overflow: visible;
     background: var(--bg-surface);
     margin-bottom: 8px;
   }

   .pub-device-table {
     width: 100%;
     table-layout: fixed;
     border-collapse: collapse;
   }
   .pub-device-table thead tr { border-bottom: 1px solid var(--border); }
   .pub-device-table thead th {
     padding: 7px 10px;
     text-align: left;
     font-size: 0.66rem;
     font-weight: 700;
     color: var(--ink-muted);
     white-space: nowrap;
     background: transparent;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .pub-device-table thead th.pdt-col-device { width: 17%; }
   .pub-device-table thead th.pdt-col-remove { width: 70px; }

   .pdt-row { border-bottom: 1px solid var(--border); transition: background 0.12s ease; }
   .pdt-row:last-child { border-bottom: none; }
   .pdt-row:hover { background: var(--bg-page); }

   .pub-device-table td { padding: 8px 10px; vertical-align: middle; }

   .pdt-device-name {
     font-size: 0.70rem;
     font-weight: 600;
     color: var(--ink);
     max-width: 0; 
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }

   .pdt-empty-row td {
     text-align: center;
     padding: 18px 10px;
     font-size: 0.72rem;
     color: var(--ink-muted);
     font-style: italic;
   }

   /* ── Custom Device Summaries: direct render of the submitted Device
      Data Matrix answer (see _ftsDeviceMatrixSummaryHtml,
      fulltext-screen.js) — question label, then one row per tagged
      device with its ticked data/benchmark chips as answer pills.
      Replaces the fixed Outcome/Performance/Safety/Sensor table above
      (.pub-device-table and friends, kept but no longer rendered into,
      per the project's minimal-footprint convention). ── */
   .fts-device-summary {
     border: 1px solid var(--border);
     border-radius: 8px;
     background: var(--bg-surface);
     padding: 12px 14px;
     margin-bottom: 8px;
   }
   .fts-device-summary-question {
     font-size: 0.72rem;
     font-weight: 700;
     color: var(--ink-soft);
     line-height: 1.4;
     margin-bottom: 10px;
   }
   .fts-device-summary-list {
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
   .fts-device-summary-row {
     display: grid;
     grid-template-columns: minmax(90px, 160px) 1fr;
     align-items: start;
     gap: 8px;
     padding: 6px 0;
     border-bottom: 1px solid var(--border);
   }
   .fts-device-summary-row:last-child { border-bottom: none; padding-bottom: 0; }
   .fts-device-summary-name {
     font-size: 0.70rem;
     font-weight: 600;
     color: var(--ink);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     padding-top: 2px;
   }
   /* Data column sits beside the device name instead of the name's own
      chips wrapping underneath it — each device gets its own aligned
      column of ticked data/benchmark chips, matching the table view's
      Device(s) / Data Type(s) column split (_ftsDeviceMatrixTdsHtml). */
   .fts-device-summary-data {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 4px;
     min-height: 22px;
   }
   .fts-device-summary-empty {
     text-align: center;
     padding: 18px 10px;
     font-size: 0.72rem;
     color: var(--ink-muted);
     font-style: italic;
   }
   .fts-device-summary-empty a { font-style: normal; }

   /* Cell: checkbox (main value) + source line beneath it */
   .pdt-cell-inner {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 4px;
   }
   .pdt-checkbox {
     width: 13px; height: 13px; margin: 0;
     accent-color: var(--teal); cursor: pointer;
   }
   .pdt-checkbox:disabled { cursor: default; opacity: 0.6; }

   .pdt-source-label {
     font-size: 0.64rem; font-weight: 600; color: var(--ink-muted);
   }
   .pdt-source-label--dim { opacity: 0.4; }

   .pdt-source-toggle {
     font-family: inherit; font-size: 0.64rem; font-weight: 600;
     color: var(--teal); background: none; border: none; padding: 0;
     cursor: pointer; text-decoration: underline; text-decoration-style: dotted;
     text-underline-offset: 2px; transition: color 0.14s;
   }
   .pdt-source-toggle:hover:not(:disabled) { color: var(--teal-dim); }
   .pdt-source-toggle:disabled {
     color: var(--ink-muted); text-decoration: none; cursor: default; opacity: 0.5;
   }
   .pdt-source-toggle--dim { color: var(--ink-muted); text-decoration: none; opacity: 0.45; }

   .pdt-remove-cell { text-align: right; }
   .pdt-remove-btn {
     font-family: inherit; font-size: 0.66rem; font-weight: 500;
     color: var(--ink-soft); background: none; border: none; padding: 2px 4px;
     cursor: pointer; transition: color 0.14s; white-space: nowrap;
   }
   .pdt-remove-btn:hover { color: var(--red); }

   /* PDF zone */
   .pdf-zone-empty {
     display: flex; flex-direction: column; align-items: center; justify-content: center;
     gap: 7px; padding: 18px; background: var(--bg-page);
     border: 1.5px dashed var(--border); border-radius: var(--r-sm);
     cursor: pointer; text-align: center; transition: border-color 0.18s, background 0.18s;
   }
   .pdf-zone-empty:hover { border-color: var(--teal-dim); background: var(--teal-soft); }
   .pdf-zone-empty .bx  { font-size: 1.35rem; color: var(--ink-muted); }
   .pdf-zone-empty p    { font-size: 0.74rem; color: var(--ink-soft); margin: 0; }
   .pdf-zone-empty span { font-size: 0.65rem; color: var(--ink-muted); }
   .pdf-zone-ready {
     display: flex; align-items: center; gap: 9px; padding: 10px 13px;
     background: var(--green-soft); border: 1px solid rgba(18,185,129,0.2); border-radius: var(--r-sm);
   }
   .pdf-zone-ready .bx { font-size: 1.25rem; color: var(--green); flex-shrink: 0; }
   .pdf-zone-ready-info { flex: 1; min-width: 0; }
   .pdf-zone-ready-name { font-size: 0.76rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .pdf-zone-ready-sub  { font-size: 0.65rem; color: var(--ink-muted); margin-top: 1px; }
   .pdf-zone-ready-actions { display: flex; gap: 4px; flex-shrink: 0; }
   .pdf-zone-uploading {
     display: flex; align-items: center; gap: 9px; padding: 10px 13px;
     background: var(--amber-soft); border: 1px solid rgba(245,158,11,0.2);
     border-radius: var(--r-sm); font-size: 0.75rem; color: var(--amber);
   }
   .pdf-zone-error {
     display: flex; align-items: center; gap: 9px; padding: 10px 13px;
     background: var(--red-soft); border: 1px solid rgba(240,68,56,0.18);
     border-radius: var(--r-sm); font-size: 0.75rem; color: var(--red);
   }

   /* ── ATTACHMENT CHIPS ── */
   .att-chips-row {
     display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
   }
   .att-chip {
     display: inline-flex; align-items: center; gap: 5px;
     padding: 4px 6px 4px 8px;
     background: var(--green-soft); border: 1px solid rgba(18,185,129,0.22);
     border-radius: 20px; max-width: 260px; transition: border-color 0.15s;
   }
   .att-chip:hover { border-color: rgba(18,185,129,0.45); }
   .att-chip--uploading {
     background: var(--amber-soft); border-color: rgba(245,158,11,0.22);
   }
   .att-chip-icon { font-size: 0.78rem; color: var(--green); flex-shrink: 0; }
   .att-chip--uploading .att-chip-icon { color: var(--amber); }
   .att-chip-name {
     font-size: 0.71rem; font-weight: 500; color: var(--ink);
     overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
     max-width: 160px;
   }
   .att-chip-status { font-size: 0.7rem; color: var(--amber); display: flex; align-items: center; }
   .att-chip-actions { display: flex; align-items: center; gap: 1px; flex-shrink: 0; }
   .att-chip-btn {
     display: inline-flex; align-items: center; justify-content: center;
     width: 20px; height: 20px; border-radius: 50%;
     border: none; background: transparent;
     color: var(--ink-muted); cursor: pointer; font-size: 0.68rem;
     transition: background 0.15s, color 0.15s;
     text-decoration: none;
   }
   .att-chip-btn:hover { background: rgba(0,0,0,0.07); color: var(--ink); }
   .att-chip-btn--remove:hover { background: var(--red-soft); color: var(--red); }
   .att-add-btn {
     display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
     padding: 5px 11px 5px 9px; border-radius: 20px; white-space: nowrap;
     border: 1px solid var(--border); background: transparent;
     color: var(--ink-muted); font-size: 0.68rem; font-weight: 500; cursor: pointer;
     transition: border-color 0.15s, color 0.15s, background 0.15s;
   }

   .att-add-btn:hover {
  border-color: var(--ink-muted, #8f817b);
  color: var(--ink, #1a1210);
  background: var(--bg-page, #f7f4f1);
}

   .att-add-btn .bx { font-size: 0.80rem; flex-shrink: 0; }

   /* ── SS RESULTS TABLE ── */
   .ss-results-table {
     width: 100%; border-collapse: collapse; font-size: 0.76rem; margin-top: 9px;
   }
   .ss-results-table th {
     font-size: 0.59rem; font-weight: 700; letter-spacing: 0.07em;
     color: var(--ink-muted); padding: 6px 10px; border-bottom: 1px solid var(--border);
     text-align: left; white-space: nowrap;
   }
   .ss-results-table td {
     padding: 8px 10px; border-bottom: 1px solid var(--border);
     color: var(--ink-soft); vertical-align: top;
   }
   .ss-results-table tr:hover td { background: rgba(255,255,255,0.02); }
   .ss-results-table tr:last-child td { border-bottom: none; }
   .ss-result-title { color: var(--ink); font-weight: 600; line-height: 1.4; }
   .ss-result-meta  { font-size: 0.66rem; color: var(--ink-muted); margin-top: 2px; }
   .ss-cite-badge {
     display: inline-flex; align-items: center; gap: 3px;
     font-size: 0.62rem; color: var(--ink-muted); white-space: nowrap;
   }
   .ss-cite-badge .bx { font-size: 0.7rem; }
   .ss-pdf-link {
     display: inline-flex; align-items: center; gap: 3px;
     color: var(--teal); font-size: 0.68rem; white-space: nowrap;
   }
   

   /* ================================================================
   PROMPT SETTINGS MODAL
   ================================================================ */

/* Settings button in input toolbar */
.ai-settings-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-xs);
  background: transparent; border: 1px solid var(--border);
  color: var(--ink-muted); font-size: 0.9rem; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  position: relative;
}
.ai-settings-btn:hover {
  background: rgba(255,255,255,0.06); color: var(--ink);
  border-color: var(--border-hover);
}
.ai-settings-btn.has-settings {
  color: var(--teal); border-color: var(--teal-border);
  background: var(--teal-soft);
}
/* Active dot when settings applied */
.ai-settings-btn.has-settings::after {
  content: '';
  position: absolute; top: 4px; right: 4px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal);
}

/* Modal header override for two-line header */
.pset-header-left {
  display: flex; align-items: flex-start; gap: 12px;
}
.pset-header-icon {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--teal-soft); border: 1px solid var(--teal-border);
  color: var(--teal); font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.pset-header-sub {
  font-size: 0.74rem; color: var(--ink-muted); margin-top: 2px;
}

/* Sections */
.pset-section { padding: 18px 0 4px; }
.pset-section-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.07em; color: var(--ink-soft);
  margin-bottom: 14px;
}
.pset-section-label i { font-size: 0.9rem; color: var(--teal); }
.pset-section-note {
  font-size: 0.68rem; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--ink-muted); margin-left: 4px;
}

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

/* Grid */
.pset-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Field */
.pset-field { display: flex; flex-direction: column; gap: 5px; }
.pset-field.full { grid-column: 1 / -1; }
.pset-label {
  font-size: 0.72rem; font-weight: 600; color: var(--ink-soft);
}
.pset-input, .pset-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-input); color: var(--ink);
  font-size: 0.8rem; padding: 7px 10px;
  transition: border-color 0.18s;
  width: 100%;
}
.pset-input:focus, .pset-select:focus {
  outline: none; border-color: var(--border-focus);
}
.pset-select { cursor: pointer; }
.pset-textarea {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-input); color: var(--ink);
  font-size: 0.8rem; padding: 9px 11px;
  transition: border-color 0.18s;
  width: 100%; resize: vertical; min-height: 70px;
  font-family: inherit; line-height: 1.55;
}
.pset-textarea:focus { outline: none; border-color: var(--border-focus); }
.pset-textarea::placeholder { color: var(--ink-muted); }

.pset-char-hint {
  font-size: 0.67rem; color: var(--ink-muted); text-align: right;
  margin-top: -2px;
}

/* Radio group */
.pset-radio-group {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.pset-radio {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--ink-soft); font-size: 0.76rem; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.pset-radio i { font-size: 0.8rem; }
.pset-radio:hover { border-color: var(--border-hover); color: var(--ink); }
.pset-radio.active {
  background: var(--teal-soft); border-color: var(--teal-border);
  color: var(--teal);
}

.pset-footer { justify-content: space-between; }

/* ================================================================
   REPORT SAVE BUTTON (in report panel header)
   ================================================================ */
.report-save-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: var(--r-pill);
  background: var(--teal-soft); border: 1px solid var(--teal-border);
  color: var(--teal); font-size: 0.76rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.report-save-btn:hover { background: var(--teal-glow); }
.report-save-btn:active { transform: scale(0.97); }
.report-save-btn.saved {
  background: var(--green-soft); border-color: rgba(18,185,129,0.25);
  color: var(--green); pointer-events: none;
}
.report-save-btn i { font-size: 0.85rem; }

/* ================================================================
   REPORT SAVED TOAST
   ================================================================ */
.report-saved-toast {
  position: fixed; bottom: 28px; right: 28px; z-index: 9999;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: var(--r-card);
  background: var(--bg-elevated);
  border: 1px solid var(--green-soft);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  font-size: 0.8rem; color: var(--ink-soft);
  transform: translateY(20px); opacity: 0;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
}
.report-saved-toast.visible { transform: translateY(0); opacity: 1; }
.report-saved-toast i { font-size: 1rem; color: var(--green); }
.toast-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--teal); font-weight: 600;
  transition: opacity 0.15s;
}


/* ═══════════════════════════════════════════════════════════
   REPORTS v3 — Card Homepage + Two-Panel Detail
═══════════════════════════════════════════════════════════ */

/* ── HOME VIEW ─────────────────────────────────────────── */
/* #viewHome is the plain wrapper <div> that .rp-home lives in. It needs
   to actually stretch to fill <main> — otherwise .rp-home's height:100%
   has nothing to resolve against, collapses to auto, and the empty
   state ends up top-aligned instead of centred in the pane. */
#viewHome {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.rp-home {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: visible;
}

.rp-home-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  flex-wrap: wrap;
  padding: 15px 0 20px;
}

.rp-home-topbar h1 {
  font-size: 1.5rem; font-weight: 800; color: var(--ink);
  letter-spacing: -0.03em; line-height: 1.1;
}

.rp-home-topbar .subtitle {
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-top: 3px;
}

.rp-home-search-wrap {
  position: relative;
  flex-shrink: 0;
}

.rp-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  font-size: 0.88rem;
  pointer-events: none;
}

.rp-search-input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 7px 14px 7px 32px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.8rem;
  outline: none;
  width: 220px;
  transition: border-color 0.18s, width 0.2s;
}

.rp-search-input::placeholder { color: var(--ink-muted); }
.rp-search-input:focus {
  border-color: var(--border-focus);
  width: 260px;
}

/* ── Project table ── */
.proj-table-wrap {
  flex: 1;
  border-radius: var(--r-card);
  border: 1px solid var(--border, rgba(43,24,23,0.10));
  overflow-y: auto;
  box-shadow: var(--shadow-card);
}
.proj-table-wrap::-webkit-scrollbar { width: 4px; }
.proj-table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.proj-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--bg-surface);
}

.proj-table thead tr {
  border-bottom: 1px solid var(--border);
}

.proj-table thead th {
  padding: 8px 12px 10px;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-muted);
  background: transparent;
}

.proj-table thead th.pt-col-num {width: 160px; }
.proj-table thead th.pt-col-status { width: 150px; }
.proj-table thead th.pt-col-actions { width: 70px; }
.proj-table thead th.pt-col-owner { width: 130px; }
.proj-table thead th.pt-col-title { width: 220px; }
.proj-table thead th.pt-col-desc { /* flex remaining */ }

.proj-table-row {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s ease;
}
.proj-table-row:last-child { border-bottom: none; }
.proj-table-row:hover { background: var(--sidebar-hover); }
.proj-table-row:hover .pc-arrow { color: var(--teal); transform: translateX(3px); }

/* Cells */
.proj-table td { padding: 13px 12px; vertical-align: middle; }

.pt-cell-title { }
.pt-title-text {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-title-sub {
  font-size: 0.68rem;
  color: var(--ink-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-cell-meta {
  font-size: 0.75rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-cell-desc {
  max-width: 0; /* forces text-overflow inside table-layout:fixed */
}
.pt-desc-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--ink-soft);
  min-width: 0;
}
.pt-desc-text i {
  font-size: 0.85rem;
  color: var(--ink-muted);
  flex-shrink: 0;
  line-height: 1;
}
.pt-desc-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.pt-cell-num {
  text-align: left;
}
.pt-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--bg-elevated);
  color: var(--ink-soft);
  border: 1px solid var(--border);
}
.pt-num.approved {
  background: var(--green-soft);
  color: var(--green);
  border-color: rgba(5,150,105,0.2);
}
.pt-num.awaiting {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: rgba(217,119,6,0.2);
}
.pt-num-zero {
  font-size: 0.72rem;
  color: var(--ink-muted);
  opacity: 0.45;
}
.pt-num-loading {
  font-size: 0.7rem;
  color: var(--ink-muted);
  opacity: 0.4;
  animation: ptPulse 1.2s ease-in-out infinite;
}
@keyframes ptPulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.15; }
}

.pt-cell-status { }
.pt-cell-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 65px;
  text-align: center;
}


/* Empty state — structural layout only. Typography (icon size, heading,
   paragraph) is centralised in design-alignment.css Section 23 "EMPTY
   STATES" so every empty state in the app (Projects home, Reports,
   AI reference panel, Full Text conflicts, etc.) shares one definition.
   Do not redeclare .rp-empty-state i / h3 / p here — add new empty-state
   variants to the shared selector list in design-alignment.css instead. */
.rp-empty-state {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.rp-empty-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}


/* ── DETAIL VIEW ─────────────────────────────────────────── */
.rp-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Detail topbar */
.rp-detail-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0px;
  background: var(--bg-page);
  flex-shrink: 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.rp-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background: none;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
}

.rp-back-btn:hover { background: var(--bg-elevated); color: var(--ink); border-color: var(--border-hover); }
.rp-back-btn i { font-size: 0.88rem; }

.rp-detail-title-wrap {
  flex: 1;
  min-width: 0;
}

.rp-detail-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.rp-detail-topbar-right {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.rp-panel-toggle-btn {
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  transition: all 0.15s;
}

.rp-panel-toggle-btn:hover { background: var(--bg-elevated); color: var(--ink); border-color: var(--border-hover); }
.rp-panel-toggle-btn.active { background: var(--teal-soft); color: var(--teal); border-color: var(--teal-border); }

/* Detail split */
.rp-detail-split {
  display: grid;
  grid-template-columns: 1fr 300px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  transition: grid-template-columns 0.28s cubic-bezier(0.4,0,0.2,1);
  gap: 5px;
}

.rp-detail-split.panel-collapsed {
  grid-template-columns: 1fr 0px;
}

/* Left — report content */
.rp-content-col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: var(--bg-surface);
  border-radius: 20px;
}

.rp-content-meta {
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  background: var(--bg-surface);
  font-size: 0.7rem;
  color: var(--ink-muted);
}

.rp-content-toc {
  padding: 9px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-surface);
}

.rp-content-body {
  overflow-y: auto;
  padding: 26px 28px 48px;
  flex: 1;
  scroll-behavior: smooth;
}

.rp-content-body::-webkit-scrollbar { width: 4px; }
.rp-content-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* rd-section still works from original CSS */

/* Right panel (reuse existing rrp styles) */
.rp-right-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-surface);
  min-width: 0;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1);
  border-radius: 20px;
}

.rp-detail-split.panel-collapsed .rp-right-panel {
  border-left: none;
  pointer-events: none;
  opacity: 0;
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .rp-detail-split {
    grid-template-columns: 1fr;
  }
  .rp-right-panel {
    display: none;
  }
  .rp-panel-toggle-btn { display: none; }
}

@media (max-width: 640px) {
  .proj-table-wrap { overflow-x: auto; }
  .proj-table { min-width: 640px; }
  .rp-home-topbar { padding: 16px 16px 14px; }
  .rp-detail-topbar { padding: 10px 12px; }
  .rp-content-body { padding: 18px 16px 40px; }
}
/* ================================================================
   ENHANCED AI REASONING STEPS — v4
   ================================================================ */

/* ── REASONING CARD (replaces progress card) ── */
.ai-reasoning-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  min-width: 280px;
  max-width: 540px;
  animation: fadeUp 0.2s ease;
}

.ai-reasoning-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.ai-reasoning-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--teal-soft), rgba(139,92,246,0.10));
  border: 1px solid var(--teal-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--teal); flex-shrink: 0;
}

.ai-reasoning-title {
  font-size: 0.8rem; font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em;
}

.ai-reasoning-subtitle {
  font-size: 0.68rem; color: var(--ink-muted); margin-top: 2px;
  transition: opacity 0.2s;
}

/* ── STEP LIST ── */
.ai-reasoning-steps {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ai-reasoning-step {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.73rem;
  color: var(--ink-muted);
  transition: all 0.25s ease;
  animation: stepSlideIn 0.2s ease both;
}

.ai-reasoning-step.pending {
  opacity: 0.45;
}

.ai-reasoning-step.active {
  color: var(--ink);
  background: rgba(34,211,200,0.06);
}

.ai-reasoning-step.done {
  color: var(--ink-soft);
}

.ai-step-check {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.55rem;
  flex-shrink: 0;
  margin-top: 0.5px;
  transition: all 0.25s ease;
  position: relative;
}

.ai-reasoning-step.active .ai-step-check {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.ai-reasoning-step.active .ai-step-check::after {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  animation: pulsing 0.9s ease-in-out infinite;
}

.ai-reasoning-step.done .ai-step-check {
  background: var(--green);
  border-color: rgba(18,185,129,0.4);
  color: white;
}

.ai-step-text {
  flex: 1;
  line-height: 1.45;
  padding-top: 1px;
}

.ai-step-duration {
  font-size: 0.6rem;
  color: var(--ink-muted);
  white-space: nowrap;
  padding-top: 2px;
  opacity: 0;
  transition: opacity 0.3s;
}

.ai-reasoning-step.done .ai-step-duration {
  opacity: 1;
}

/* ── PROMPT REFINE BANNER ── */
.ai-prompt-refine-wrap {
  border: 1px solid var(--teal-border);
  background: linear-gradient(135deg, var(--teal-soft), rgba(139,92,246,0.05));
  border-radius: 12px;
  padding: 13px 15px;
  margin-bottom: 10px;
  animation: fadeUp 0.22s ease;
}

.ai-prompt-refine-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--teal); margin-bottom: 10px;
}

.ai-prompt-refine-label i { font-size: 0.8rem; }

.ai-prompt-refine-desc {
  font-size: 0.73rem; color: var(--ink-soft); margin-bottom: 10px;
  line-height: 1.5;
}

.ai-refine-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-refine-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--teal-border);
  background: rgba(34,211,200,0.08);
  color: var(--teal);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  line-height: 1.35;
}

.ai-refine-chip:hover {
  background: var(--teal);
  color: var(--navy);
  border-color: var(--teal);
}

.ai-refine-chip i { font-size: 0.78rem; flex-shrink: 0; }



/* Settings section headers */
.pset-panel-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.pset-panel-title {
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 4px !important;
}

.pset-panel-desc {
  font-size: 0.71rem !important;
  color: var(--ink-muted) !important;
  margin-bottom: 0 !important;
  line-height: 1.55 !important;
}

/* Active filter indicator on settings button */
.ai-settings-btn {
  position: relative;
}

.settings-active-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 14px; height: 14px;
  border-radius: 7px;
  background: var(--teal);
  color: var(--navy);
  font-size: 0.5rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 0 2px;
  display: none;
}

.ai-settings-btn.has-settings .settings-active-count { display: flex; }

/* Model card improvements */
.pset-model-card {
  border-radius: 11px !important;
  transition: all 0.15s !important;
  gap: 13px !important;
}

.pset-model-badge {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 20px;
  font-size: 0.58rem; font-weight: 700;
  margin-top: 3px;
}

.pset-model-badge.fast { background: var(--green-soft); color: var(--green); }
.pset-model-badge.powerful { background: var(--purple-soft); color: var(--purple); }
.pset-model-badge.experimental { background: var(--amber-soft); color: var(--amber); }

/* Reasoning slider — visual bars fill on active */
.pset-reasoning-opt {
  border-radius: 10px !important;
  gap: 13px !important;
}

.pset-reasoning-bar span {
  transition: background 0.2s !important;
}

/* Filter pill chips in settings */
.pset-filter-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.pset-filter-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--teal-soft); border: 1px solid var(--teal-border);
  color: var(--teal); font-size: 0.67rem; font-weight: 600;
}

/* ================================================================
   RESPONSIVE / MOBILE — v4
   ================================================================ */

@media (max-width: 768px) {
  /* Sidebar collapses to icon-only on mobile */
  #sidebar {
    width: 58px !important;
    position: fixed;
    z-index: 2000;
  }

  #sidebar .brand-name,
  #sidebar .side-menu li a .text {
    display: none !important;
    opacity: 0 !important;
  }

  #content {
    width: calc(100% - 58px) !important;
    left: 58px !important;
  }

  /* Nav */
  #content nav {
    padding: 0 14px;
    gap: 10px;
  }

  .profile-name span { display: none; }
  .profile-name { padding: 5px 10px; }

  /* AI page */
  .ai-page-wrap { height: auto; min-height: calc(100vh - 62px); align-items: flex-start; }

  .ai-assistant-section { height: auto; }

  .ai-thread {
    min-height: 400px;
    max-height: 100vh;
  }

  .ai-msg-bubble { max-width: 92% !important; }

  .ai-input-toolbar {
    flex-wrap: wrap;
    padding-top: 10px;
  }

  .ai-input-left-tools { flex-wrap: wrap; gap: 5px; }

  /* Scope dropdown — full width on mobile */
  .ai-scope-dropdown { min-width: 180px; left: 0; right: auto; }

  /* Report type dropdown */
  .ai-report-type-dropdown { min-width: 200px; }

  /* Reference sidebar — slide over on mobile */
  .ai-ref-sidebar {
    position: fixed !important;
    top: 62px; right: 0; bottom: 0;
    width: 280px !important;
    z-index: 1500;
    background: var(--bg-surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-panel);
  }

  /* Projects grid */
  .projects-grid { grid-template-columns: 1fr; }

  /* Proj body — stack vertically */
  .proj-body {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .left-panel, .right-panel { max-width: 100%; }
  .proj-body--import .left-panel,
  .proj-body--import .right-panel { order: unset; }

  /* Settings modal */
  .prompt-settings-modal {
    width: 60% ;
    max-height: 95vh !important;
    border-radius: 16px 16px 0 0 !important;
    margin-top: 5px;
  }

  .pset-modal-body {
    flex-direction: column !important;
    min-height: auto !important;
  }

  .pset-tab-rail {
    width: 70% !important;
    flex-direction: row !important;
    overflow-x: auto;
    padding: 8px !important;
    gap: 4px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    scrollbar-width: none;
  }

  .pset-tab-rail::-webkit-scrollbar { display: none; }

  .pset-tab-btn {
    flex-direction: column !important;
    gap: 3px !important;
    padding: 7px 10px !important;
    font-size: 0.65rem !important;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 60px;
  }

  .pset-tab-btn i { font-size: 1rem !important; }
  .pset-tab-count { display: none !important; }

  /* Reports detail */
  .rp-detail-split {
    grid-template-columns: 1fr !important;
  }

  .rp-right-panel { display: none; }
  .rp-panel-toggle-btn { display: none; }

  .rp-content-body { padding: 18px 16px 48px; }

  /* Head title */
  .head-title { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Report cards */
  .proj-table-wrap { overflow-x: auto; }

  /* Reasoning card */
  .ai-reasoning-card { max-width: 100%; }
}

@media (max-width: 480px) {
  #content nav { padding: 0 10px; }
  main { padding: 0 10px; }

  .ai-thread { padding: 12px; }

  .ai-input-dock { padding: 8px; }

  .ai-send-btn { width: 34px; height: 34px; font-size: 1.1rem; }

  .pill-btn { padding: 7px 13px; font-size: 0.76rem; }

  /* Stack report detail header */
  .rp-detail-topbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }

  .rp-detail-topbar-right { gap: 5px; }

  .rp-home-topbar { flex-direction: column; align-items: flex-start; gap: 10px; }

  .rp-search-input { width: 100% !important; }
  .rp-home-search-wrap { width: 100%; }

  /* Prompt refine chips stack */
  .ai-refine-chips-row { flex-direction: column; }
  .ai-refine-chip { width: 100%; justify-content: flex-start; }
}

/* ── Sidebar mobile overlay toggle ── */
@media (max-width: 768px) {
  #sidebar.mobile-open {
    width: 230px !important;
    box-shadow: var(--shadow-panel);
  }

  #sidebar.mobile-open .brand-name,
  #sidebar.mobile-open .side-menu li a .text {
    display: block !important;
    opacity: 1 !important;
  }

  #sidebar.mobile-open ~ #content::before {
    content: '';
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1999;
  }
}

/* ── Thread suggestion chips responsive ── */
@media (max-width: 600px) {
  .ai-suggestion-chips { flex-direction: column; align-items: stretch; max-width: 100%; }
  .ai-suggestion { text-align: left; }
}

/* ── Welcome heading responsive ── */
@media (max-width: 480px) {
  #welcomeHeading { font-size: 22px !important; }
}


/* Model cards */
.pset-model-cards { display: flex; flex-direction: column; gap: 7px; }

.pset-model-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  cursor: pointer;
  transition: all 0.15s;
}

.pset-model-card:hover {
  border-color: var(--border-hover);
  background: rgba(255,255,255,0.03);
}

.pset-model-card.active {
  border-color: var(--teal-border);
  background: var(--teal-soft);
}

.pset-model-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
}

.pset-model-icon.flash { background: var(--amber-soft); color: var(--amber); }
.pset-model-icon.pro   { background: var(--purple-soft); color: var(--purple); }
.pset-model-icon.exp   { background: var(--green-soft);  color: var(--green); }

.pset-model-info { flex: 1; }
.pset-model-name { font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.pset-model-sub  { font-size: 0.66rem; color: var(--ink-muted); margin-top: 1px; }

.pset-model-badge {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 20px;
  font-size: 0.58rem; font-weight: 700; margin-top: 3px;
}
.pset-model-badge.fast        { background: var(--green-soft); color: var(--green); }
.pset-model-badge.powerful    { background: var(--purple-soft); color: var(--purple); }
.pset-model-badge.experimental{ background: var(--amber-soft); color: var(--amber); }

.pset-model-check {
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.5rem;
  transition: all 0.15s;
}

.pset-model-card.active .pset-model-check {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--navy);
}

/* Reasoning options */
.pset-reasoning-levels { display: flex; flex-direction: column; gap: 6px; }

.pset-reasoning-opt {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  cursor: pointer; transition: all 0.15s;
}

.pset-reasoning-opt:hover { border-color: var(--border-hover); }
.pset-reasoning-opt.active { border-color: var(--teal-border); background: var(--teal-soft); }

.pset-reasoning-bar { display: flex; gap: 3px; flex-shrink: 0; }

.pset-reasoning-bar span {
  width: 5px; border-radius: 2px;
  background: var(--border);
  transition: background 0.2s;
}

.pset-reasoning-bar span:nth-child(1) { height: 8px; }
.pset-reasoning-bar span:nth-child(2) { height: 12px; }
.pset-reasoning-bar span:nth-child(3) { height: 17px; }

.pset-reasoning-opt.active .pset-reasoning-bar span { background: var(--teal); }

/* Radio pill groups */
.pset-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pset-radio {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--ink-muted);
  font-family: inherit;
  font-size: 0.73rem; font-weight: 600;
  cursor: pointer; transition: all 0.14s;
}

.pset-radio i { font-size: 0.85rem; }
.pset-radio:hover { border-color: var(--border-hover); color: var(--ink); }
.pset-radio.active { background: var(--teal-soft); border-color: var(--teal-border); color: var(--teal); }

/* Scope list */
.pset-scope-list { display: flex; flex-direction: column; gap: 5px; }

.pset-scope-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  cursor: pointer; transition: all 0.14s;
  font-size: 0.78rem; color: var(--ink-soft);
}

.pset-scope-item:hover { border-color: var(--border-hover); color: var(--ink); }
.pset-scope-item.active { border-color: var(--teal-border); background: var(--teal-soft); color: var(--teal); }
.pset-scope-item i { font-size: 0.9rem; flex-shrink: 0; }

.pset-scope-check {
  margin-left: auto;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.5rem;
  transition: all 0.15s;
}

.pset-scope-item.active .pset-scope-check { background: var(--teal); border-color: var(--teal); color: var(--navy); }

/* Generate project toggle */
.pset-generate-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg-elevated);
  margin-top: 12px; cursor: pointer; transition: border-color 0.15s;
}

.pset-generate-toggle.active { border-color: var(--teal-border); background: var(--teal-soft); }
.pset-generate-left { display: flex; align-items: center; gap: 10px; }
.pset-generate-left i { font-size: 1rem; color: var(--teal); }
.pset-generate-label { font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.pset-generate-sub   { font-size: 0.66rem; color: var(--ink-muted); margin-top: 1px; }

.pset-toggle-pill {
  width: 36px; height: 20px; border-radius: 10px; border: none;
  background: var(--border); position: relative; cursor: pointer;
  transition: background 0.2s; flex-shrink: 0;
}

.pset-toggle-pill::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink-muted); transition: transform 0.2s, background 0.2s;
}

.pset-toggle-pill.on { background: var(--teal); }
.pset-toggle-pill.on::after { transform: translateX(16px); background: var(--navy); }

/* Output type cards (replaces report-type cards) */
.pset-output-types {
  display: flex; flex-direction: column; gap: 8px;
}

.pset-output-card {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 14px; border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  cursor: pointer; transition: all 0.14s;
  position: relative;
}

.pset-output-card:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.pset-output-card.active { border-color: var(--teal-border); background: var(--teal-soft); }

.pset-output-icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
  transition: transform 0.14s;
}
.pset-output-card:hover .pset-output-icon { transform: scale(1.06); }

.pset-output-body { flex: 1; min-width: 0; }
.pset-output-name { font-size: 0.78rem; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.pset-output-desc { font-size: 0.65rem; color: var(--ink-muted); line-height: 1.45; }

.pset-output-check {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
  transition: all 0.14s;
}
.pset-output-check i { font-size: 0.6rem; color: transparent; }
.pset-output-card.active .pset-output-check {
  background: var(--teal); border-color: var(--teal);
}
.pset-output-card.active .pset-output-check i { color: var(--navy); }

/* Legacy shim — old classes still referenced in HTML won't break */
.pset-report-types { display: none; }
.pset-report-type-card { display: none; }

/* Filters grid */
.pset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pset-field { display: flex; flex-direction: column; gap: 5px; }
.pset-field.full { grid-column: 1 / -1; }

.pset-label {
  font-size: 0.69rem;
  font-weight: 700;
  color: var(--ink-muted);
  letter-spacing: 0.05em;
}

.pset-input,
.pset-select,
.pset-textarea {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.78rem;
  padding: 8px 11px;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.pset-input:focus,
.pset-select:focus,
.pset-textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(34,211,200,0.12);
}

.pset-select option { background: var(--navy); }

.pset-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.55;
}

.pset-char-hint {
  font-size: 0.67rem;
  color: var(--ink-muted);
  text-align: right;
  margin-top: 4px;
  transition: color 0.2s;
}

/* Settings button active state */
.ai-settings-btn {
  position: relative;
}

.settings-active-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 14px; height: 14px;
  border-radius: 7px;
  background: var(--teal);
  color: var(--navy);
  font-size: 0.5rem; font-weight: 800;
  display: none;
  align-items: center; justify-content: center;
  padding: 0 2px;
}

.ai-settings-btn.has-settings .settings-active-count { display: flex; }

/* Filter badge pills */
.pset-filter-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-top: 10px;
}

.pset-filter-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--teal-soft); border: 1px solid var(--teal-border);
  color: var(--teal); font-size: 0.67rem; font-weight: 600;
}

/* ── Modal footer ── */
.pset-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 22px !important;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}

/* ── SPIN KEYFRAMES ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinning { animation: spin 0.85s linear infinite; }

/* ── MOBILE OVERRIDES FOR SETTINGS MODAL ── */
@media (max-width: 768px) {
  .prompt-settings-modal {
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 16px 16px 0 0 !important;
    margin-top: auto;
  }

  .pset-modal-body {
    flex-direction: column;
    min-height: auto;
    max-height: calc(92vh - 120px);
    background: var(--bg-card);
  }

  .pset-tab-rail {
    width: 100% !important;
    flex-direction: row !important;
    overflow-x: auto;
    padding: 8px !important;
    gap: 4px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    scrollbar-width: none;
  }

  .pset-tab-rail::-webkit-scrollbar { display: none; }

  .pset-tab-btn {
    flex-direction: column !important;
    gap: 3px !important;
    padding: 7px 10px !important;
    font-size: 0.63rem !important;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 56px;
    justify-content: center;
    align-items: center;
  }

  .pset-tab-btn i { font-size: 1rem !important; }
  .pset-tab-count { display: none !important; }

  .pset-output-types { gap: 6px; }
  .pset-grid { grid-template-columns: 1fr; }
  .pset-reasoning-preview { display: none; }

  .ai-refine-chip span {
    max-width: 220px;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .ai-refine-chips-row { flex-direction: column; }
  .ai-refine-chip { width: 100%; }
  .ai-reasoning-card { max-width: 100%; }
}

    /* Essential overrides — full styles in literature-review.css */
    .ai-report-generated-card {
      background: var(--bg-elevated); border: 1px solid var(--border);
      border-radius: 12px; padding: 16px 18px; margin-top: 4px;
      display: flex; align-items: center; gap: 14px; transition: border-color 0.2s;
    }
    .ai-report-generated-card:hover { border-color: var(--border-teal); }
    .ai-rgc-icon { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
    .ai-rgc-icon.report   { background: var(--teal-soft);   color: var(--teal); }
    .ai-rgc-icon.clinical { background: var(--teal-soft);   color: var(--teal); }
    .ai-rgc-icon.sota     { background: var(--blue-soft);   color: var(--blue); }
    .ai-rgc-icon.litsumm  { background: var(--purple-soft); color: var(--purple); }
    .ai-rgc-icon.mdrcer   { background: var(--amber-soft);  color: var(--amber); }
    .ai-rgc-info { flex: 1; min-width: 0; }
    .ai-rgc-label { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--teal); margin-bottom: 3px; }
    .ai-rgc-title { font-size: 0.86rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
    .ai-rgc-meta  { font-size: 0.69rem; color: var(--ink-muted); display: flex; gap: 10px; align-items: center; }
    .ai-rgc-actions { display: flex; gap: 6px; flex-shrink: 0; }
    .ai-rgc-open-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill); background: var(--teal); color: var(--navy); border: none; font-family: inherit; font-size: 0.76rem; font-weight: 700; cursor: pointer; transition: background 0.15s, box-shadow 0.15s; text-decoration: none; }
    .ai-rgc-open-btn:hover { background: var(--teal-dim); box-shadow: var(--glow-teal); }
    .ai-rgc-save-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: var(--r-pill); background: none; border: 1px solid var(--border); color: var(--ink-muted); font-family: inherit; font-size: 0.74rem; font-weight: 600; cursor: pointer; transition: all 0.15s; }
    .ai-rgc-save-btn:hover { border-color: var(--border-teal); color: var(--teal); background: var(--teal-soft); }
    .ai-rgc-save-btn.saved { background: var(--green-soft); color: var(--green); border-color: rgba(18,185,129,0.25); }
    .ai-rgc-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); font-size: 0.64rem; color: var(--ink-muted); }

    /* ── Active settings pill indicator in toolbar ── */
    .ai-settings-active-pills { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
    .ai-active-pill {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 9px; border-radius: var(--r-pill);
      background: var(--teal-soft); border: 1px solid rgba(20,184,166,0.25);
      color: var(--teal); font-size: 0.65rem; font-weight: 700;
      cursor: pointer; transition: all 0.15s; white-space: nowrap;
    }
    .ai-active-pill:hover { background: rgba(20,184,166,0.2); }
    .ai-active-pill i { font-size: 0.7rem; }

    /* ══════════════════════════════════════════
       CONVERSATION HISTORY SIDEBAR
    ══════════════════════════════════════════ */
    .ai-history-sidebar {
      display: none;
      width: 290px;
      flex-direction: column;
      flex-shrink: 0;
      border-left: 1px solid var(--border);
      background: var(--bg-page);
      animation: slideInRight 0.22s cubic-bezier(0.22, 1, 0.36, 1);
      position: relative;
    }

    .ai-history-sidebar.visible {
      display: flex;
    }

    .ai-history-sidebar-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 13px 14px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .ai-history-sidebar-header .header-icon {
      width: 26px; height: 26px;
      border-radius: 7px;
      background: var(--teal-soft);
      border: 1px solid var(--teal-border);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.75rem; color: var(--teal); flex-shrink: 0;
    }

    .ai-history-sidebar-header .header-title {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--ink);
      flex: 1;
    }

    .ai-history-sidebar-header .header-subtitle {
      font-size: 0.65rem;
      color: var(--ink-muted);
      margin-top: 1px;
    }

    .ai-history-close-btn {
      width: 24px; height: 24px;
      border-radius: 6px; border: none;
      background: none; color: var(--ink-muted);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      font-size: 0.9rem; transition: all 0.15s; flex-shrink: 0;
    }
    .ai-history-close-btn:hover { background: var(--red-soft); color: var(--red); }

    .ai-history-new-btn {
      display: flex;
      align-items: center;
      gap: 7px;
      margin: 10px 10px 6px;
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px dashed var(--border);
      background: none;
      color: var(--ink-muted);
      font-family: inherit;
      font-size: 0.74rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
      width: calc(100% - 20px);
      flex-shrink: 0;
    }
    .ai-history-new-btn:hover {
      border-color: var(--teal-border);
      color: var(--teal);
      background: var(--teal-soft);
    }
    .ai-history-new-btn i { font-size: 0.88rem; }

    .ai-history-section-label {
      font-size: 0.6rem;
      font-weight: 700;
      color: var(--ink-muted);
      padding: 8px 14px 4px;
      flex-shrink: 0;
    }

    .ai-history-list {
      flex: 1;
      overflow-y: auto;
      padding: 4px 8px 16px;
    }
    .ai-history-list::-webkit-scrollbar { width: 3px; }
    .ai-history-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    /* Individual session card */
    .ai-session-card {
      display: flex;
      align-items: flex-start;
      gap: 5px;
      padding: 5px 10px;
      border-radius: 9px;
      cursor: pointer;
      transition: all 0.15s;
      margin-bottom: 3px;
      position: relative;
    }

    .ai-session-card:hover {
      background: var(--sidebar-light);
    }

    .ai-session-card.active {
      background: var(--sidebar-light);
    }

    .ai-session-icon {
      width: 28px; height: 28px;
      border-radius: 7px;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.72rem; color: var(--ink-muted);
      flex-shrink: 0; margin-top: 1px;
      transition: all 0.15s;
    }
 
    .ai-session-body { flex: 1; min-width: 0; }

    .ai-session-title {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 0;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  display: block;
}


    .ai-session-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.62rem;
      color: var(--ink-muted);
    }
    .ai-session-meta-dot {
      width: 3px; height: 3px;
      border-radius: 50%;
      background: var(--ink-muted);
      opacity: 0.4;
    }

    .ai-session-turns-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 0.6rem;
      color: var(--ink-muted);
    }

    .ai-session-delete-btn {
      width: 20px; height: 20px;
      border-radius: 5px; border: none;
      background: transparent; color: var(--ink-muted);
      cursor: pointer; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.72rem; opacity: 0;
      transition: all 0.15s;
    }
    .ai-session-card:hover .ai-session-delete-btn { opacity: 1; }
    .ai-session-delete-btn:hover { background: var(--red-soft); color: var(--red); }

    /* Empty state */
    .ai-history-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 40px 20px;
      text-align: center;
    }
    .ai-history-empty i { font-size: 1.5rem; color: var(--ink-muted); opacity: 0.25; }
    .ai-history-empty p { font-size: 0.72rem; color: var(--ink-muted); line-height: 1.5; max-width: 180px; }

    /* ── History toggle button badge ── */
    .ai-history-count {
      position: absolute;
      top: -4px; right: -4px;
      min-width: 15px; height: 15px;
      border-radius: 8px;
      background: var(--purple);
      color: white;
      font-size: 0.53rem; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      padding: 0 3px;
    }

    /* Scope pill for session */
    .ai-session-scope-pill {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 1px 6px;
      border-radius: 10px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      font-size: 0.58rem;
      color: var(--ink-muted);
      margin-top: 4px;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .ai-session-card.active .ai-session-scope-pill {
      background: rgba(34,211,200,0.08);
      border-color: rgba(34,211,200,0.18);
      color: var(--teal);
    }

    /* ── Today / Earlier section dividers ── */
    .ai-history-date-divider {
      font-size: 0.6rem;
      font-weight: 700;
      color: var(--ink-muted);
      padding: 5px 10px 5px;
      opacity: 0.6;
    }

    /* Responsive — hide history sidebar on small screens */
    @media (max-width: 900px) {
      .ai-history-sidebar { display: none !important; }
    }
/* ================================================================
   USER MODAL — multi-state sliding panel
   Anchored bottom-left, just above the sidebar avatar row.
   States: 'default' → 'settings'
   Transition: inner track slides left to reveal settings panel.
================================================================ */

.sidebar-popup {
  width: 268px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

.sp-track {
  display: flex;
  width: 200%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-popup.state-settings .sp-track { transform: translateX(-50%); }

.sp-panel { width: 50%; flex-shrink: 0; }

/* Default state */
.sp-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--sidebar-border);
}
.sp-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--ink-soft);
  border: 2px solid var(--bg-surface);
  box-shadow: 0 1px 2px rgba(43,24,23,0.08);
  font-size: 0.88rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sp-meta { flex: 1; min-width: 0; }
.sp-name {
  font-size: 0.82rem; font-weight: 700; color: var(--sidebar-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-email {
  font-size: 0.70rem; color: var(--sidebar-ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sp-menu { padding: 6px; }
.sp-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 8px 10px;
  border-radius: 8px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 0.82rem; font-weight: 500;
  color: var(--sidebar-ink-soft);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.sp-item-left { display: flex; align-items: center; gap: 9px; }
.sp-item .bx { font-size: 15px; }
.sp-item:hover { background: var(--sidebar-hover); color: var(--sidebar-ink); }
.sp-item.danger { color: rgba(239,68,68,0.72); }
.sp-item.danger:hover { background: rgba(239,68,68,0.10); color: #ef4444; }
.sp-chevron { font-size: 13px; color: var(--sidebar-ink-muted); }

.sp-divider { height: 1px; background: var(--sidebar-border); margin: 4px 6px; }

/* Settings state */
.sp-settings-header {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px 10px;
  border-bottom: 1px solid var(--sidebar-border);
}
.sp-back-btn {
  width: 27px; height: 27px; border-radius: 8px;
  background: var(--sidebar-hover); border: none;
  color: var(--sidebar-ink-soft); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.sp-back-btn:hover { background: var(--sidebar-active); color: var(--sidebar-ink); }
.sp-settings-title { font-size: 0.83rem; font-weight: 700; color: var(--sidebar-ink); }

.sp-settings-body {
  padding: 10px;
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: none;
}
.sp-settings-body::-webkit-scrollbar { display: none; }

.sp-field-label {
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.07em; 
  color: var(--sidebar-ink-muted);
  padding: 0 3px; margin-bottom: 4px;
}

.sp-email-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--sidebar-border);
  border-radius: 8px;
  font-size: 0.79rem; color: var(--sidebar-ink-soft);
  margin-bottom: 12px;
}
.sp-email-row .bx { font-size: 13px; color: var(--sidebar-ink-muted); }

.sp-section { margin-bottom: 12px; }

.sp-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--sidebar-border);
  border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 0.81rem; font-weight: 500;
  color: var(--sidebar-ink-soft);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sp-trigger:hover { background: rgba(255,255,255,0.08); color: var(--sidebar-ink); }
.sp-trigger.active {
  border-color: rgba(13,167,154,0.35);
  color: var(--sidebar-ink);
  background: rgba(13,167,154,0.06);
}
.sp-trigger.danger-trigger { border-color: rgba(239,68,68,0.15); }
.sp-trigger.danger-trigger:hover {
  background: rgba(239,68,68,0.07);
  color: #ef4444;
  border-color: rgba(239,68,68,0.28);
}
.sp-trigger .bx { font-size: 14px; }

.sp-form {
  display: none;
  padding: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--sidebar-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  margin-top: -1px;
}
.sp-form.visible { display: block; }
.sp-form.danger-form { border-color: rgba(239,68,68,0.18); }

.sp-form input {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 0.81rem; color: var(--sidebar-ink);
  outline: none; font-family: inherit;
  margin-bottom: 8px;
  transition: border-color 0.18s;
}
.sp-form input:focus { border-color: rgba(13,167,154,0.50); }
.sp-form input::placeholder { color: var(--sidebar-ink-muted); }

.sp-form-note { font-size: 0.71rem; color: var(--sidebar-ink-muted); margin-bottom: 8px; line-height: 1.45; }
.sp-form-actions { display: flex; gap: 6px; }

.sp-btn {
  flex: 1; padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: var(--sidebar-ink-soft);
  font-size: 0.77rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.sp-btn:hover { background: rgba(255,255,255,0.12); color: var(--sidebar-ink); }
.sp-btn.primary { background: var(--teal); border-color: transparent; color: #fff; }
.sp-btn.primary:hover { background: var(--teal-dim); }
.sp-btn.red { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.18); color: #ef4444; }
.sp-btn.red:hover { background: rgba(239,68,68,0.24); }
.sp-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.sp-status { font-size: 0.71rem; min-height: 16px; padding: 4px 2px 0; transition: color 0.18s; }
.sp-status.success { color: #34d399; }
.sp-status.error   { color: #f87171; }

.sp-danger-note { font-size: 0.71rem; color: rgba(239,68,68,0.55); padding: 0 3px 5px; line-height: 1.4; }
/* ================================================================
   Sidebar conversation history dropdown
   ================================================================ */

/* Hide the old right-panel history sidebar entirely */
.ai-history-sidebar { display: none !important; }

/* Section wrapper — sits between side-menu and sidebar-bottom */
.sidebar-history {
  display: flex;
  flex-direction: column;
  padding: 0 7px;
  flex-shrink: 0;
}

/* Toggle row — styled like a nav item */
.sidebar-history-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: none;
  border: none;
  color: var(--sidebar-ink-soft);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: color 0.18s, background 0.18s;
}
.sidebar-history-toggle:hover {
  color: var(--sidebar-ink);
  background: var(--sidebar-hover);
}
.sidebar-history-toggle-left {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.sidebar-history-toggle-left .bx {
  font-size: 17px;
  flex-shrink: 0;
}

/* Chevron rotates when open */
.sidebar-history-chevron {
  font-size: 14px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-history-chevron.rotated { transform: rotate(-180deg); }

/* Session count badge */
.sidebar-history-badge { display: none !important; } .sidebar-history-badge-DISABLED {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--purple, #7c3aed);
  color: #fff;
  font-size: 0.52rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Collapsed sidebar: hide Recents entirely — no icon-only row */
#sidebar.hide .sidebar-history { display: none; }

/* Dropdown panel */
.sidebar-history-dropdown {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-history-dropdown.open { max-height: 420px; }

/* New conversation button */
.sidebar-history-new-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: calc(100% - 12px);
  margin: 5px 6px 3px;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px dashed var(--sidebar-border);
  background: none;
  color: var(--sidebar-ink-muted);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: all 0.15s;
}
.sidebar-history-new-btn:hover {
  border-color: rgba(13, 167, 154, 0.4);
  color: var(--teal);
  background: rgba(13, 167, 154, 0.07);
}

/* Scrollable session list */
.sidebar-history-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 2px 4px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-border) transparent;
}
.sidebar-history-list::-webkit-scrollbar { width: 3px; }
.sidebar-history-list::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 2px; }

/* Re-skin session cards for the dark sidebar */
.sidebar-history-list .ai-session-card {
  border-color: transparent;
  background: transparent;
}
.sidebar-history-list .ai-session-card:hover {
  background: var(--sidebar-hover);
  border-color: var(--sidebar-border);
}
.sidebar-history-list .ai-session-card.active {
  background: var(--sidebar-active);
  border-color: transparent;
}
.sidebar-history-list .ai-session-title {
  color: var(--sidebar-ink-soft);
  font-size: 0.72rem;
}

.sidebar-history-list .ai-session-meta    { color: var(--sidebar-ink-muted); }
.sidebar-history-list .ai-session-icon {
  background: rgba(255,255,255,0.06);
  border-color: var(--sidebar-border);
  color: var(--sidebar-ink-muted);
}

.sidebar-history-list .ai-session-delete-btn { color: var(--sidebar-ink-muted); }
.sidebar-history-list .ai-session-delete-btn:hover {
  background: rgba(220,38,38,0.15);
  color: #f87171;
}
.sidebar-history-list .ai-history-empty { padding: 20px 10px; }
.sidebar-history-list .ai-history-empty i,
.sidebar-history-list .ai-history-empty p  { color: var(--sidebar-ink-muted); }
.sidebar-history-list .ai-history-date-divider { color: var(--sidebar-ink-muted); }

/* Skeleton rows shown while conversationSessions hasn't loaded yet —
   removed by renderHistorySidebar() the first time it runs */
.skel-session-card {
  display: flex;
  align-items: center;
  padding: 7px 8px;
  margin: 1px 0;
}
.skel-session-card .skel-bar { width: 100%; height: 10px; }
.skel-session-card:nth-child(2) .skel-bar { width: 82%; }
.skel-session-card:nth-child(3) .skel-bar { width: 65%; }
.sidebar-history-list .ai-session-scope-pill {
  background: rgba(255,255,255,0.04);
  border-color: var(--sidebar-border);
  color: var(--sidebar-ink-muted);
}




.pub-custom-uid-input {
  width: 100%;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  transition: color 0.2s;
}
.pub-custom-uid-input::placeholder {
  color: var(--ink-muted);
  font-weight: 400;
  font-family: inherit;
  font-size: 0.76rem;
}
.pub-custom-uid-input.uid-saved {
  color: var(--teal);
}

    /* ── Workspace Library Bridge — UI styles ─────────────────── */

    /* Workspace banner */
    .ws-library-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: var(--surface, #f5f5f5);
      border: 1px solid var(--border, #e0e0e0);
      border-radius: 10px;
      padding: 10px 16px;
      margin-bottom: 16px;
      font-size: 0.82rem;
    }
    .ws-library-banner--denied {
      background: color-mix(in srgb, var(--red, #e53935) 6%, transparent);
      border-color: color-mix(in srgb, var(--red, #e53935) 25%, transparent);
      color: var(--red, #e53935);
      justify-content: flex-start;
    }
    .ws-banner-left  { display: flex; align-items: center; gap: 10px; }
    .ws-banner-right { display: flex; align-items: center; gap: 8px; }
    .ws-banner-icon  { font-size: 1.1rem; color: var(--ink-muted, #888); flex-shrink: 0; }
    .ws-banner-meta  { display: flex; flex-direction: column; gap: 1px; }
    .ws-banner-name  { font-weight: 600; color: var(--ink, #1a1a1a); font-size: 0.83rem; }
    .ws-banner-members { color: var(--ink-muted, #888); font-size: 0.75rem; }

    /* Role pill */
    .ws-role-pill {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 10px; border-radius: 20px;
      font-size: 0.74rem; font-weight: 600;
      border: 1px solid transparent;
    }
    .ws-role--owner  { background: color-mix(in srgb, var(--amber, #f59e0b) 12%, transparent); color: var(--amber, #f59e0b); border-color: color-mix(in srgb, var(--amber, #f59e0b) 25%, transparent); }
    .ws-role--editor { background: color-mix(in srgb, var(--teal,  #14b8a6) 12%, transparent); color: var(--teal,  #14b8a6); border-color: color-mix(in srgb, var(--teal,  #14b8a6) 25%, transparent); }
    .ws-role--viewer { background: color-mix(in srgb, var(--ink-muted, #888) 10%, transparent); color: var(--ink-muted, #888); border-color: color-mix(in srgb, var(--ink-muted, #888) 20%, transparent); }

    /* View-only badge injected below subtitle */
    .ws-readonly-badge {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 0.73rem; font-weight: 600;
      color: var(--ink-muted, #888);
      background: var(--surface, #f5f5f5);
      border: 1px solid var(--border, #e0e0e0);
      border-radius: 6px; padding: 2px 8px;
      margin-top: 6px;
    }

    /* Shared project rows */
    .proj-table-row--shared { opacity: 0.93; }
    .proj-table-row--shared:hover { opacity: 1; }

    /* Owner attribution inside title cell */
    .pt-title-wrap  { display: flex; flex-direction: column; gap: 5px; }
    .pt-owner-badge {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 0.7rem; color: var(--ink-muted, #888); font-weight: 500;
    }
    .pt-owner-avatar {
      flex-shrink: 0;
      width: 16px; height: 16px;
      border-radius: 50%;
      background: var(--bg-page);
      color: var(--ink-muted);
      font-size: 0.50rem;
      font-weight: 700;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border, #e5e8ed);
    }

    /* AI scope dropdown: shared project owner tag */
    .ai-scope-owner-tag {
      font-size: 0.7rem; color: var(--ink-muted, #888);
      margin-left: 4px; font-weight: 400;
    }

    /* Provenance badge — Created by / Updated by — below project name */
    .pt-provenance-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.69rem;
      color: var(--ink-muted, #888);
      font-weight: 400;
    }
    .pt-prov-avatar {
      flex-shrink: 0;
      width: 16px; height: 16px;
      border-radius: 50%;
      background: var(--teal, #0da79a);
      color: #fff;
      font-size: 0.60rem;
      font-weight: 700;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    /* Summary provenance footer — shown in pub detail panel */
    .pss-provenance-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px;
      padding: 8px 0 2px;
      margin-top: 8px;
      border-top: 1px solid var(--border, #e5e8ed);
      font-size: 0.71rem;
      color: var(--ink-muted, #8f817b);
    }
    .pss-prov-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .pss-prov-item i { font-size: 0.74rem; }
    .pss-prov-name  { font-weight: 500; color: var(--ink-soft, #5f5551); }
/* ================================================================
   Sidebar popup — logout confirmation overlay
   ================================================================ */

/* Panel 1 needs position:relative to anchor the overlay */
#spPanelDefault {
  position: relative;
  overflow: hidden;
}

/* The overlay sits over Panel 1, hidden by default, slides up on .state-logout */
.sp-logout-overlay {
  position: absolute;
  inset: 0;
  background: var(--sidebar-light, #fff);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 20px 20px;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}

/* Slide the overlay into view when popup has .state-logout */
.sidebar-popup.state-logout #spLogoutOverlay {
  transform: translateY(0);
}

.sp-logout-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(239, 68, 68, 0.10);
  display: flex; align-items: center; justify-content: center;
  color: #ef4444;
  font-size: 20px;
  margin-bottom: 4px;
}

.sp-logout-title {
  font-size: 0.88rem; font-weight: 700;
  color: var(--sidebar-ink, #1f1a19);
  text-align: center;
}

.sp-logout-sub {
  font-size: 0.73rem;
  color: var(--sidebar-ink-muted, #9a8f8a);
  text-align: center;
  line-height: 1.5;
  max-width: 200px;
  margin-bottom: 6px;
}

.sp-logout-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}

.sp-logout-cancel-btn {
  flex: 1;
  background: var(--sidebar-hover, rgba(43,24,23,0.06));
  border: 1px solid var(--sidebar-border, rgba(43,24,23,0.10));
  color: var(--sidebar-ink-soft, #6b5f5b);
  font-size: 0.80rem; font-weight: 600;
  padding: 8px 0;
  border-radius: 8px;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.sp-logout-cancel-btn:hover {
  background: var(--sidebar-active, rgba(43,24,23,0.10));
  color: var(--sidebar-ink, #1f1a19);
}

.sp-logout-confirm-btn {
  flex: 1;
  background: #ef4444;
  border: 1px solid transparent;
  color: #fff;
  font-size: 0.80rem; font-weight: 600;
  padding: 8px 0;
  border-radius: 8px;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s, opacity 0.15s;
}
.sp-logout-confirm-btn:hover { background: #dc2626; }
.sp-logout-confirm-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════
   DEVICE PICKER DROPDOWN  (replaces plain text input when workspace
   preset devices are available)
══════════════════════════════════════════════════════════════════ */
.pub-device-picker-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
}

.pub-device-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 9px;
  border-radius: 20px;
  border: 1px solid var(--border, #e8e3df);
  background: transparent;
  font-size: 0.68rem;
  font-weight: var(--fw-medium, 500);
  color: var(--ink-muted, #8f817b);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}

.pub-device-picker-btn:hover {
  border-color: var(--ink-muted, #8f817b);
  color: var(--ink, #1a1210);
  background: var(--bg-page, #f7f4f1);
}

.pub-device-picker-caret {
  font-size: 0.82rem;
  transition: transform 0.18s;
}

.pub-device-picker-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  left: auto;
  min-width: 210px;
  max-width: 280px;
  background: var(--bg-surface, #fff);
  border: 1.5px solid var(--border, #e8e3df);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.10);
  z-index: 500;
  overflow: hidden;
  animation: pickerFadeIn 0.12s ease;
}

@keyframes pickerFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pub-device-picker-list {
  max-height: 190px;
  overflow-y: auto;
  padding: 4px;
}

.pub-device-picker-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0; /* required for the ellipsis rule below to work inside a flex row */
  padding: 7px 10px;
  border: none;
  background: none;
  font-size: var(--text-sm, 0.72rem);
  font-weight: var(--fw-medium, 500);
  color: var(--ink, #1a1210);
  text-align: left;
  cursor: pointer;
  border-radius: 7px;
  font-family: inherit;
  transition: background 0.1s;
}

.pub-device-picker-option:hover {
  background: var(--bg-page, #f7f4f1);
}

.pub-device-picker-option .bx {
  font-size: 0.8rem;
  color: var(--ink-muted, #8f817b);
  flex-shrink: 0; /* icon keeps its size, never gets squeezed by long labels */
}

/* The label itself — single line, truncated with an ellipsis rather than
   wrapping onto a second line when the device name is long. */
.pub-device-picker-option span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pub-device-picker-empty {
  font-size: var(--text-xs, 0.68rem);
  color: var(--ink-muted, #8f817b);
  padding: 8px 12px;
  text-align: center;
}

.pub-device-picker-divider {
  height: 1px;
  background: var(--border, #e8e3df);
  margin: 2px 0;
}

.pub-device-picker-custom {
  padding: 6px;
}

.pub-device-picker-custom-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1.5px solid var(--border, #e8e3df);
  border-radius: 7px;
  font-size: var(--text-xs, 0.68rem);
  font-family: inherit;
  color: var(--ink, #1a1210);
  background: var(--bg-page, #f7f4f1);
  outline: none;
  transition: border-color 0.15s;
}

.pub-device-picker-custom-input:focus {
  border-color: var(--border-focus, #b0a9a4);
  background: var(--bg-surface, #fff);
}

.pub-device-picker-custom-input::placeholder {
  color: var(--ink-muted, #8f817b);
}

/* ── Pub-row "Options" trigger (Quarantine/Restore + Delete) ──────────
   Replaces the old bare delete-pub-btn — same "fades in on row hover"
   behaviour, but now opens a small dropdown (.pub-options-menu) instead
   of deleting immediately. .menu-open (added by togglePubOptionsMenu())
   keeps the trigger visible even after the pointer leaves the row to
   click into the open menu. */
.pub-options-wrap {
  position: relative;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}
.pub-item:hover .pub-options-wrap,
.pub-options-wrap.menu-open {
  opacity: 1;
  pointer-events: auto;
}
.options-pub-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0 !important;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.14s;
}
.options-pub-btn:hover,
.pub-options-wrap.menu-open .options-pub-btn {
  background: var(--bg-elevated);
  border-color: var(--border-hover);
  color: var(--ink);
}
.pub-options-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 176px;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(43,24,23,0.14);
  padding: 5px;
  z-index: 40;
}
.pub-options-menu.open { display: flex; }
.pub-options-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.14s;
  white-space: nowrap;
}
.pub-options-item .bx { font-size: 0.88rem; color: var(--teal); flex-shrink: 0; }
.pub-options-item:hover { background: var(--teal-soft); color: var(--teal); }
.pub-options-item.danger .bx { color: var(--red); }
.pub-options-item.danger:hover { background: var(--red-soft); color: var(--red); }

/* ── Quarantine toggle button (Sources-stage topbar) ───────────────────
   Same "labelled icon-btn-sm, ID+class so it wins the width tie against
   design-alignment.css" pattern as #importBtn / #sumFilterBtn above. */
#quarantineToggleBtn.quarantine-toggle-btn {
  width: auto;
  gap: 6px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
}
#quarantineToggleBtn.quarantine-toggle-btn.active {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal);
}

/* ── Centre workflow trigger while the quarantine list is showing ──────
   Quarantine isn't a workflow stage, so the dots + caret (which imply a
   clickable stage-pipeline dropdown) are hidden and the label reads
   plainly as "Quarantine" (text swapped in _syncQuarantineToggleUI()).
   The click/keydown guards in projects.html check for this class and
   skip toggleProjStageMenu() while it's present. */
.proj-stage-trigger.qv-locked {
  cursor: default;
}
.proj-stage-trigger.qv-locked .proj-stage-dots,
.proj-stage-trigger.qv-locked .proj-stage-caret {
  display: none;
}

/* ── Device Table: Cell & Dropdown Trigger ── */
.pdt-cell {
  position: relative; /* anchors the absolutely-positioned .pdt-dropdown-menu */
}
.pdt-cell-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
  padding: 5px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
  min-height: 32px;
}
.pdt-cell-dropdown-trigger:hover {
  background: var(--bg-page);
  border-color: var(--border);
}
.pdt-cell-caret {
  font-size: 0.85rem;
  color: var(--ink-muted);
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.pdt-cell-dropdown-trigger:hover .pdt-cell-caret {
  opacity: 1;
}

/* ── Device Table: Chips ── */
/* Both Benchmark and Other Evidence can be active at once, but the row now
   stays on a single line — flex-wrap: nowrap + overflow: hidden clips
   whatever doesn't fit rather than stacking chips onto a second line.
   min-width: 0 lets this flex item actually shrink inside the fixed-width
   table column instead of forcing the cell to overflow. */
.pdt-chip-group {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
.pdt-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 15px;
  font-size: 0.65rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.pdt-chip--evidence {
  background: var(--teal-soft);
  color: var(--teal);
  border: 1px solid var(--border-teal);
}
.pdt-chip--benchmark {
  background: rgba(124,92,191,0.10);
  color: #7c5cbf;
  border: 1px solid rgba(124,92,191,0.22);
}
.pdt-chip-placeholder {
  font-size: 0.65rem;
  color: var(--ink-muted);
  opacity: 0.5;
  font-style: italic;
  padding-left: 2px;
  white-space: nowrap;
}

/* ── Device Table: Dropdown Menu ──
   Opens upward (anchored to the bottom of the trigger, growing above it)
   so it's never clipped by the table's bottom edge and always renders on
   top of the "Add device" row and any content beneath it. */
.pdt-dropdown-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  top: auto;
  left: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.14);
  z-index: 200;
  min-width: 170px;
  padding: 4px;
}
.pdt-drop-item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s;
}
.pdt-drop-item:hover {
  background: var(--bg-page);
}
.pdt-drop-check {
  font-size: 0.95rem;
  color: var(--ink-muted);
  flex-shrink: 0;
  transition: color 0.15s;
}
.pdt-drop-item--active {
  background: var(--bg-page);
}
.pdt-drop-item--active .pdt-drop-check {
  color: var(--teal);
}
.pdt-drop-item--active[data-choice="bench"] .pdt-drop-check {
  color: #7c5cbf;
}
.pdt-drop-item--clear {
  color: var(--ink-muted);
  border-top: 1px solid var(--border);
  margin-top: 3px;
  border-radius: 0 0 4px 4px;
}
.pdt-drop-item--clear:hover {
  color: var(--red);
  background: var(--red-soft);
}