*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --maroon:#7B1A1A;
  --maroon-dark:#5C1313;
  --maroon-light:#9B2E2E;
  --cream:#FFF5F1;
  --cream-dark:#FAEAE3;
  --cream-deeper:#F5DDD3;
  --text-primary:#2D2D2D;
  --text-secondary:#6B6B6B;
  --text-light:#999;
  --white:#FFFFFF;
  --border:#E8D8D0;
  --border-light:#F0E4DE;
  --success:#2E7D32;
  --success-light:#E8F5E9;
  --warning:#F57C00;
  --shadow-sm:0 1px 3px rgba(123,26,26,0.08);
  --shadow-md:0 4px 16px rgba(123,26,26,0.1);
  --shadow-lg:0 8px 32px rgba(123,26,26,0.12);
  --radius:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --font-display:'Source Serif 4',Georgia,serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  --transition:0.25s cubic-bezier(0.4,0,0.2,1);
}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--text-primary);background:var(--cream);min-height:100vh;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;font-family:inherit;font-size:inherit}
input,textarea,select{font-family:inherit;font-size:inherit;outline:none}

/* ─── Page Management ─── */
.page{display:none;min-height:100vh;opacity:0;transition:opacity 0.3s ease}
.page.active{display:flex;opacity:1}

/* ─── Auth Pages ─── */
.auth-page{align-items:center;justify-content:center;background:linear-gradient(135deg,var(--cream) 0%,var(--cream-dark) 100%);position:relative;overflow:hidden}
.auth-page::before{content:'';position:absolute;top:-30%;right:-20%;width:600px;height:600px;background:radial-gradient(circle,rgba(123,26,26,0.04) 0%,transparent 70%);border-radius:50%}
.auth-page::after{content:'';position:absolute;bottom:-20%;left:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(123,26,26,0.03) 0%,transparent 70%);border-radius:50%}

.auth-card{background:var(--white);border-radius:var(--radius-xl);padding:48px;width:100%;max-width:440px;box-shadow:var(--shadow-lg);position:relative;z-index:1;border:1px solid var(--border-light)}
.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:36px;justify-content:center}
.auth-logo svg{width:28px;height:28px}
.auth-logo span{font-family:var(--font-body);font-weight:700;font-size:1.1rem;letter-spacing:0.5px;color:var(--maroon)}
.auth-title{font-family:var(--font-display);font-size:1.65rem;font-weight:700;text-align:center;margin-bottom:6px;color:var(--text-primary)}
.auth-subtitle{text-align:center;color:var(--text-secondary);margin-bottom:32px;font-size:0.92rem;line-height:1.5}

.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:0.82rem;font-weight:600;color:var(--text-primary);margin-bottom:6px;letter-spacing:0.3px;text-transform:uppercase}
.form-group input{width:100%;padding:12px 16px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--cream);transition:var(--transition);font-size:0.95rem;color:var(--text-primary)}
.form-group input:focus{border-color:var(--maroon);background:var(--white);box-shadow:0 0 0 3px rgba(123,26,26,0.08)}
.form-group input::placeholder{color:var(--text-light)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:var(--radius);font-weight:600;font-size:0.95rem;transition:var(--transition);letter-spacing:0.3px}
.btn-primary{background:var(--maroon);color:var(--white);width:100%;padding:14px}
.btn-primary:hover{background:var(--maroon-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{background:var(--cream);color:var(--maroon);border:1.5px solid var(--border)}
.btn-secondary:hover{background:var(--cream-dark);border-color:var(--maroon)}
.btn-ghost{background:transparent;color:var(--maroon);padding:8px 16px}
.btn-ghost:hover{background:var(--cream)}
.btn-sm{padding:8px 16px;font-size:0.85rem}
.btn-icon{width:36px;height:36px;padding:0;border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center}

.auth-footer{text-align:center;margin-top:24px;font-size:0.88rem;color:var(--text-secondary)}
.auth-footer a{color:var(--maroon);font-weight:600}
.auth-footer a:hover{text-decoration:underline}
.auth-divider{display:flex;align-items:center;gap:16px;margin:24px 0;color:var(--text-light);font-size:0.82rem}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* ─── App Shell ─── */
.app-page{flex-direction:column}
.app-header{background:var(--maroon);color:var(--white);padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.app-header-left{display:flex;align-items:center;gap:12px}
.app-header-left svg{width:22px;height:22px}
.app-header-left span{font-weight:700;font-size:0.95rem;letter-spacing:0.5px}
.header-nav{display:flex;gap:4px}
.header-nav a{padding:8px 16px;border-radius:var(--radius);font-size:0.88rem;font-weight:500;color:rgba(255,255,255,0.75);transition:var(--transition)}
.header-nav a:hover,.header-nav a.active{color:var(--white);background:rgba(255,255,255,0.12)}
.header-right{display:flex;align-items:center;gap:12px}
/* The avatar is identity display only — logout moved to its own labeled button */
.avatar{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:0.85rem;transition:var(--transition)}

/* Sign-out: clearly a button (icon + label), quiet on the maroon header until hovered */
.logout-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
  border-radius:var(--radius);background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.25);color:rgba(255,255,255,0.88);
  font-size:0.82rem;font-weight:600;letter-spacing:0.2px;transition:var(--transition)}
.logout-btn:hover{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.5);color:#fff}
.logout-btn svg{width:15px;height:15px;flex-shrink:0}
.avatar:hover{background:rgba(255,255,255,0.3)}

/* ─── Dashboard ─── */
.dashboard-content{flex:1;padding:32px;max-width:1200px;margin:0 auto;width:100%}
.dashboard-greeting{font-family:var(--font-display);font-size:1.75rem;font-weight:700;margin-bottom:4px}
.dashboard-sub{color:var(--text-secondary);margin-bottom:32px;font-size:0.95rem}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-bottom:36px}
.stat-card{background:var(--white);border-radius:var(--radius-lg);padding:24px;border:1px solid var(--border-light);transition:var(--transition)}
.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.stat-icon{width:42px;height:42px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:var(--cream)}
.stat-icon svg{width:20px;height:20px;color:var(--maroon)}
.stat-value{font-family:var(--font-display);font-size:1.85rem;font-weight:700;color:var(--text-primary);margin-bottom:2px}
.stat-label{color:var(--text-secondary);font-size:0.85rem;font-weight:500}

.section-title{font-family:var(--font-display);font-size:1.2rem;font-weight:700;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between}
.recent-list{display:flex;flex-direction:column;gap:8px}
.recent-item{background:var(--white);border-radius:var(--radius);padding:16px 20px;border:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;transition:var(--transition);cursor:pointer}
.recent-item:hover{box-shadow:var(--shadow-sm);border-color:var(--border)}
.recent-item-left{display:flex;align-items:center;gap:14px}
.recent-item-icon{width:36px;height:36px;border-radius:var(--radius);background:var(--cream);display:flex;align-items:center;justify-content:center}
.recent-item-icon svg{width:16px;height:16px;color:var(--maroon)}
.recent-item-name{font-weight:600;font-size:0.92rem}
.recent-item-meta{font-size:0.8rem;color:var(--text-secondary);margin-top:2px}
.recent-item-time{font-size:0.8rem;color:var(--text-light)}

/* ─── Empty States ─── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px;color:var(--text-secondary)}
.empty-state svg{width:56px;height:56px;color:var(--border);margin-bottom:16px;opacity:0.6}
.empty-state h3{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--text-primary);margin-bottom:6px}
.empty-state p{font-size:0.88rem;line-height:1.5;max-width:340px}
.empty-state .btn{margin-top:20px}

/* ─── Document Ingestion ─── */
.ingest-content{flex:1;padding:32px;max-width:900px;margin:0 auto;width:100%}
.ingest-title{font-family:var(--font-display);font-size:1.75rem;font-weight:700;margin-bottom:6px}
.ingest-sub{color:var(--text-secondary);margin-bottom:32px;font-size:0.95rem}

.ingest-form{background:var(--white);border-radius:var(--radius-xl);padding:36px;border:1px solid var(--border-light);margin-bottom:24px}
.ingest-form h3{font-family:var(--font-display);font-size:1.15rem;font-weight:700;margin-bottom:20px}

.upload-zone{border:2px dashed var(--border);border-radius:var(--radius-lg);padding:48px 24px;text-align:center;cursor:pointer;transition:var(--transition);background:var(--cream);margin-bottom:20px;position:relative}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--maroon);background:rgba(123,26,26,0.03)}
.upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer}
.upload-zone svg{width:40px;height:40px;color:var(--maroon);margin-bottom:12px;opacity:0.6}
.upload-zone p{font-weight:600;color:var(--text-primary);margin-bottom:4px}
.upload-zone span{font-size:0.82rem;color:var(--text-secondary)}

.file-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.file-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--cream);border-radius:var(--radius);border:1px solid var(--border-light)}
.file-item-icon{width:32px;height:32px;border-radius:6px;background:var(--maroon);display:flex;align-items:center;justify-content:center}
.file-item-icon svg{width:14px;height:14px;color:var(--white)}
.file-item-info{flex:1}
.file-item-name{font-weight:600;font-size:0.88rem}
.file-item-size{font-size:0.78rem;color:var(--text-secondary)}
.file-item-remove{color:var(--text-light);cursor:pointer;padding:4px;border-radius:4px;transition:var(--transition)}
.file-item-remove:hover{color:var(--maroon);background:var(--cream-dark)}

.collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:16px}
.collection-card{background:var(--white);border-radius:var(--radius-lg);padding:20px;border:1px solid var(--border-light);transition:var(--transition);cursor:pointer}
.collection-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.collection-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.collection-card-icon{width:38px;height:38px;border-radius:var(--radius);background:var(--cream);display:flex;align-items:center;justify-content:center}
.collection-card-icon svg{width:18px;height:18px;color:var(--maroon)}
.collection-card h4{font-weight:700;font-size:0.95rem;margin-bottom:4px}
.collection-card p{font-size:0.82rem;color:var(--text-secondary);line-height:1.4}
.collection-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-light);font-size:0.78rem;color:var(--text-light)}
.collection-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;background:var(--success-light);color:var(--success);font-size:0.75rem;font-weight:600}

/* ─── Chat Page ─── */
/* The chat page is a fixed-viewport app screen: the DOCUMENT must never
   scroll — only .chat-messages (and the sidebar list) scroll internally.
   #page-chat needs a DEFINITE height: with only min-height:100vh the column
   flex container sizes to its content, and .chat-page-body's flex:1 (basis 0)
   overrides its height rule — a long chat then grows the page to thousands
   of px, the inner scroller never engages, and scrolling moves the whole
   document, dragging the sidebar off-screen. */
#page-chat{height:100vh;max-height:100vh;overflow:hidden}
.chat-page-body{display:flex;flex:1;overflow:hidden;min-height:0}

/* Chat History Sidebar */
.chat-sidebar{width:280px;background:var(--white);border-right:1px solid var(--border-light);display:flex;flex-direction:column;flex-shrink:0;transition:margin-left 0.25s cubic-bezier(0.4,0,0.2,1)}

/* ─── Collapsible history sidebar ─── */
/* Slide out via negative margin (equal to the fixed width) so the sidebar's
   contents never reflow/squish mid-animation; .chat-page-body{overflow:hidden}
   clips it. visibility:hidden lands AFTER the slide (0.25s delay) so keyboard
   focus and screen readers skip the hidden panel; on expand the base rule has
   no visibility transition, so it becomes visible instantly and slides in. */
.chat-page-body.sidebar-collapsed .chat-sidebar{
  margin-left:-280px;
  visibility:hidden;
  transition:margin-left 0.25s cubic-bezier(0.4,0,0.2,1),visibility 0s linear 0.25s;
}

.sidebar-toggle-btn{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--radius);background:transparent;
  border:1.5px solid var(--border);color:var(--text-secondary);flex-shrink:0;
  transition:var(--transition)}
.sidebar-toggle-btn:hover{background:var(--cream);color:var(--maroon);border-color:var(--maroon)}
.sidebar-toggle-btn svg{width:16px;height:16px}
/* Filled icon state while hidden — a quiet hint that something can be reopened */
.sidebar-toggle-btn[aria-expanded="false"]{background:var(--cream-dark);color:var(--maroon)}
.chat-sidebar-header{padding:16px 20px;border-bottom:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between}
.chat-sidebar-header h3{font-size:0.9rem;font-weight:700;letter-spacing:0.3px}
.new-chat-btn{width:32px;height:32px;border-radius:var(--radius);background:var(--maroon);color:var(--white);display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.new-chat-btn:hover{background:var(--maroon-dark)}
.new-chat-btn svg{width:16px;height:16px}

.chat-sidebar-search{padding:12px 16px;position:relative}
.chat-sidebar-search input{width:100%;padding:9px 12px 9px 36px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--cream);font-size:0.85rem;transition:var(--transition)}
.chat-sidebar-search input:focus{border-color:var(--maroon);background:var(--white)}
.chat-sidebar-search svg{position:absolute;left:28px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-light);pointer-events:none}

.chat-history-list{flex:1;overflow-y:auto;padding:8px;overscroll-behavior:contain}
.chat-history-section{margin-bottom:16px}
.chat-history-section-title{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:var(--text-light);padding:4px 12px 8px}
.chat-history-item{padding:10px 12px;border-radius:var(--radius);cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:10px;margin-bottom:2px}
.chat-history-item:hover{background:var(--cream)}
.chat-history-item.active{background:var(--cream-dark);border:1px solid var(--border)}
.chat-history-item svg{width:15px;height:15px;color:var(--text-light);flex-shrink:0}
.chat-history-item span{font-size:0.85rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}

/* Kebab (⋮) per conversation row — hidden until hover so the sidebar stays
   quiet, but always reachable by keyboard (focus-visible) and pinned open
   while its menu is showing. */
.chat-item-menu-btn{flex-shrink:0;width:24px;height:24px;padding:0;border-radius:6px;background:transparent;color:var(--text-light);display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition)}
.chat-item-menu-btn svg{width:16px;height:16px;color:inherit}
.chat-history-item:hover .chat-item-menu-btn,
.chat-history-item.active .chat-item-menu-btn,
.chat-item-menu-btn:focus-visible,
.chat-item-menu-btn[aria-expanded="true"]{opacity:1}
.chat-item-menu-btn:hover{background:var(--cream-deeper);color:var(--text-primary)}

/* Floating menu opened by the kebab (fixed-position, single shared element) */
.chat-item-menu{position:fixed;z-index:10000;min-width:150px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:4px;animation:toastIn 0.15s ease}
.chat-item-menu-option{width:100%;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;background:transparent;font-size:0.85rem;font-weight:500;color:var(--text-primary);text-align:left}
.chat-item-menu-option svg{width:15px;height:15px;flex-shrink:0}
.chat-item-menu-option:hover,.chat-item-menu-option:focus-visible{background:var(--cream)}
.chat-item-menu-option.danger{color:#D32F2F}
.chat-item-menu-option.danger:hover,.chat-item-menu-option.danger:focus-visible{background:#FDECEA}

.chat-sidebar-empty{padding:24px 16px;text-align:center;color:var(--text-light);font-size:0.84rem;line-height:1.5}
.chat-sidebar-empty svg{width:32px;height:32px;margin:0 auto 10px;display:block;opacity:0.4}

/* Chat Main */
.chat-main{flex:1;display:flex;flex-direction:column;background:var(--cream);position:relative;min-width:0;min-height:0;transition:margin-right 0.3s ease}
/* When a citation is open, reserve space for the fixed panel so the chat
   stays fully visible (matches .citation-panel.open width). */
.chat-page-body.citation-open .chat-main{margin-right:clamp(500px, 50vw, 900px)}
.chat-top-bar{padding:12px 24px;border-bottom:1px solid var(--border-light);background:var(--white);display:flex;align-items:center;gap:16px;flex-shrink:0}
.chat-top-bar select{padding:9px 36px 9px 14px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--white);font-size:0.88rem;font-weight:600;color:var(--text-primary);appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B6B6B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;cursor:pointer;min-width:200px;transition:var(--transition)}
.chat-top-bar select:focus{border-color:var(--maroon)}
.chat-top-bar-label{font-size:0.82rem;color:var(--text-secondary);font-weight:500}

.chat-messages{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:20px;min-height:0;overscroll-behavior:contain}
.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px}
.chat-empty svg{width:56px;height:56px;color:var(--border);margin-bottom:16px}
.chat-empty h3{font-family:var(--font-display);font-size:1.3rem;font-weight:700;margin-bottom:6px}
.chat-empty p{color:var(--text-secondary);font-size:0.9rem;max-width:380px;line-height:1.5}

.msg{display:flex;gap:14px;max-width:800px;width:100%;margin:0 auto;animation:msgIn 0.3s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700}
.msg-user .msg-avatar{background:var(--maroon);color:var(--white)}
.msg-assistant .msg-avatar{background:var(--cream-deeper);color:var(--maroon)}
.msg-body{flex:1;min-width:0}
.msg-name{font-size:0.78rem;font-weight:700;margin-bottom:6px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-secondary)}
.msg-content{background:var(--white);border-radius:var(--radius-lg);padding:16px 20px;border:1px solid var(--border-light);line-height:1.65;font-size:0.93rem;position:relative;overflow-wrap:break-word;word-break:break-word;overflow-x:auto}
.msg-user .msg-content{background:var(--maroon);color:var(--white);border-color:var(--maroon)}
.msg-content[contenteditable="true"]{outline:2px solid var(--maroon);outline-offset:2px;background:var(--cream)}
.msg-content p{margin-bottom:8px}
.msg-content p:last-child{margin-bottom:0}

/* Gemini-style cited sentence: the sentence itself is the hyperlink. Blue
   underline at rest so it's instantly recognisable as a link; the whole
   sentence highlights blue on hover/focus. Separate cited sentences highlight
   independently, so two or more sources in one answer stay distinguishable. */
:root{ --link-blue:#1a73e8; }
.citation-sentence{
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  border-bottom:1px solid rgba(26,115,232,0.45);
  border-radius:2px;
  transition:var(--transition);
}
.citation-sentence:hover,
.citation-sentence:focus{
  color:var(--link-blue);
  background:rgba(26,115,232,0.09);
  border-bottom-color:var(--link-blue);
  box-shadow:0 0 0 2px rgba(26,115,232,0.09);
  outline:none;
}

/* "+N" indicator shown after a sentence that cites multiple sources. */
.citation-more{
  font-size:0.6rem;
  font-weight:700;
  line-height:1;
  color:var(--link-blue);
  background:rgba(26,115,232,0.10);
  border:1px solid rgba(26,115,232,0.30);
  border-radius:6px;
  padding:0 4px;
  margin-left:3px;
  vertical-align:super;
  cursor:pointer;
  user-select:none;
  transition:var(--transition);
}
.citation-more:hover,
.citation-more:focus{
  background:var(--link-blue);
  color:var(--white);
  border-color:var(--link-blue);
  outline:none;
}

/* Hovercard: clickable preview of every source cited on a sentence. */
.citation-hovercard{
  position:absolute;
  z-index:9999;
  display:none;
  flex-direction:column;
  gap:4px;
  padding:6px;
  width:340px;
  max-width:92vw;
  max-height:340px;
  overflow-y:auto;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:12px;
  box-shadow:var(--shadow-lg);
}
.citation-hovercard.open{ display:flex; }
.citation-card{
  padding:9px 11px;
  border-radius:8px;
  cursor:pointer;
  border:1px solid transparent;
  transition:var(--transition);
}
.citation-card:hover,
.citation-card:focus{
  background:var(--cream);
  border-color:var(--border-light);
  outline:none;
}
.citation-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.citation-card-file{
  font-weight:700;
  font-size:0.8rem;
  color:var(--text-primary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.citation-card-page{
  flex-shrink:0;
  font-size:0.68rem;
  font-weight:700;
  color:var(--link-blue);
  background:rgba(26,115,232,0.10);
  border-radius:6px;
  padding:1px 6px;
}
.citation-card-sec{
  font-size:0.72rem;
  color:var(--text-secondary);
  margin-top:3px;
}
.citation-card-snip{
  font-size:0.75rem;
  color:var(--text-secondary);
  margin-top:5px;
  line-height:1.45;
}

.msg-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.msg-actions button{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:6px;font-size:0.78rem;font-weight:600;color:var(--text-secondary);background:var(--cream);border:1px solid var(--border-light);transition:var(--transition)}
.msg-actions button:hover{background:var(--cream-dark);color:var(--maroon);border-color:var(--border)}
.msg-actions button svg{width:13px;height:13px}
.msg-actions .btn-regenerate{color:var(--maroon);background:rgba(123,26,26,0.06);border-color:rgba(123,26,26,0.15)}
.msg-actions .btn-regenerate:hover{background:rgba(123,26,26,0.12)}

/* Chat Input */
.chat-input-wrap{padding:16px 24px 20px;background:var(--cream);border-top:1px solid var(--border-light);flex-shrink:0}
.chat-input-box{max-width:800px;margin:0 auto;display:flex;gap:10px;align-items:flex-end;background:var(--white);border-radius:var(--radius-lg);padding:8px;border:1.5px solid var(--border);transition:var(--transition);box-shadow:var(--shadow-sm)}
.chat-input-box:focus-within{border-color:var(--maroon);box-shadow:0 0 0 3px rgba(123,26,26,0.08)}
.chat-input-box textarea{flex:1;border:none;resize:none;padding:8px 12px;font-size:0.93rem;line-height:1.5;background:transparent;min-height:24px;max-height:150px;color:var(--text-primary)}
.chat-input-box textarea::placeholder{color:var(--text-light)}
/* Answer-mode dropdown — sits inside the input box, left of the send button. */
.answer-mode-select{flex-shrink:0;align-self:center;border:1px solid var(--border);border-radius:var(--radius);background:var(--white);color:var(--text-secondary);font-size:0.82rem;font-weight:600;padding:7px 26px 7px 10px;cursor:pointer;transition:var(--transition);appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center;background-size:13px}
.answer-mode-select:hover{border-color:var(--maroon);color:var(--maroon)}
.answer-mode-select:focus{outline:none;border-color:var(--maroon);box-shadow:0 0 0 3px rgba(123,26,26,0.08)}
.answer-mode-hint{max-width:800px;margin:6px auto 0;font-size:0.75rem;color:var(--text-light);text-align:right;min-height:1em}

.chat-send-btn{width:40px;height:40px;border-radius:var(--radius);background:var(--maroon);color:var(--white);display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0}
.chat-send-btn:hover{background:var(--maroon-dark)}
.chat-send-btn:disabled{opacity:0.4;cursor:not-allowed}
.chat-send-btn svg{width:18px;height:18px}

/* External literature citations (research mode). Visually distinct from
   document citations: these leave the app for pubmed.ncbi.nlm.nih.gov, so they
   must never look like the in-app citation-panel links. */
.pubmed-cite{display:inline-flex;align-items:center;gap:3px;font-size:0.72rem;font-weight:700;line-height:1;vertical-align:super;padding:2px 6px;margin:0 2px;border-radius:10px;background:rgba(30,86,160,0.09);color:#1e56a0;border:1px solid rgba(30,86,160,0.22);text-decoration:none;transition:var(--transition);white-space:nowrap}
.pubmed-cite:hover{background:rgba(30,86,160,0.16);border-color:rgba(30,86,160,0.4)}
.pubmed-cite::after{content:"↗";font-size:0.68rem;opacity:0.75}

/* Citation Panel */
/* Fixed to the viewport's right edge (below the 56px header) so the panel
   opens in the EXACT same spot for every citation — independent of chat length
   or scroll position. The chat shifts left (see .citation-open) so nothing is
   hidden underneath. */
.citation-panel{position:fixed;top:56px;right:0;bottom:0;width:0;background:var(--white);border-left:1px solid var(--border-light);overflow:hidden;transition:width 0.3s ease;display:flex;flex-direction:column;z-index:200;box-shadow:-8px 0 24px rgba(0,0,0,0.08)}
.citation-panel.open { 
  /* Take up half the screen, but don't get smaller than 500px or larger than 900px */
  width: 50vw; 
  min-width: 500px;
  max-width: 900px;
}
.citation-panel-header{padding:16px 20px;border-bottom:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.citation-panel-header h3{font-size:0.9rem;font-weight:700}
.citation-panel-close{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:var(--transition);background:transparent}
.citation-panel-close:hover{background:var(--cream);color:var(--text-primary)}
.citation-panel-close svg{width:16px;height:16px}
.citation-panel-body {
  flex: 1;
  overflow: hidden; /* only the inner .pdf-scroll scrolls — keeps sizing robust */
  padding: 20px;
  display: flex;
  flex-direction: column; /* Force children to stack nicely */
  min-height: 0;
}
.citation-page {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  flex: 1; /* Stretch to fill the entire body height */
  min-height: 0;
}
.citation-page-title{font-family:var(--font-display);font-size:1.05rem;font-weight:700;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.citation-highlight{background:rgba(123,26,26,0.12);border-left:3px solid var(--maroon);padding:8px 12px;border-radius:0 6px 6px 0;margin:8px 0;display:block}
.citation-page-num{font-size:0.78rem;color:var(--text-light);margin-top:12px;font-weight:600}

/* ─── Loading spinner ─── */
.typing-indicator{display:flex;gap:5px;padding:8px 0}
.typing-indicator span{width:7px;height:7px;border-radius:50%;background:var(--maroon);opacity:0.4;animation:typing 1.4s infinite}
.typing-indicator span:nth-child(2){animation-delay:0.2s}
.typing-indicator span:nth-child(3){animation-delay:0.4s}
@keyframes typing{0%,60%,100%{opacity:0.4;transform:scale(1)}30%{opacity:1;transform:scale(1.2)}}

/* ─── Progress bar ─── */
.progress-bar{width:100%;height:6px;background:var(--cream-dark);border-radius:3px;overflow:hidden;margin-top:8px}
.progress-bar-fill{height:100%;background:var(--maroon);border-radius:3px;transition:width 0.5s ease;width:0%}


/* ─── Async feedback: button spinners, area loaders, skeletons ─── */
/* Every slow user action shows one of these so the UI is never a dead screen. */

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

/* Inline spinner that replaces a button label while its action is in flight.
   The button is disabled at the same time, which also stops double-submits. */
.btn-spinner{display:inline-block;width:15px;height:15px;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;animation:spin 0.65s linear infinite;
  flex-shrink:0;vertical-align:-2px}
.btn:disabled,.btn[disabled]{opacity:0.75;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.chat-send-btn:disabled{opacity:0.45;cursor:not-allowed}

/* Centered spinner + label for a whole panel/area (PDF viewer, chat thread). */
.area-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:40px 20px;color:var(--text-secondary);font-size:0.86rem;flex:1;min-height:120px}
.area-loader .btn-spinner{width:22px;height:22px;border-width:2.5px;color:var(--maroon)}

/* Shimmer placeholders — shown while lists/grids load so the UI never flashes a
   misleading "nothing here yet" empty state during a fetch. */
.skeleton{position:relative;overflow:hidden;background:var(--cream-dark);border-radius:var(--radius)}
.skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.65),transparent);
  animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.skeleton-line{height:11px;margin-bottom:8px}
.skeleton-card{background:var(--white);border:1px solid var(--border-light);
  border-radius:var(--radius-lg);padding:20px}
.skeleton-sidebar-item{height:38px;margin:0 8px 6px}

/* A collection card mid-delete: dimmed, non-interactive, spinner on top. */
.collection-card.is-deleting{position:relative;pointer-events:none;opacity:0.55}
.collection-card.is-deleting::after{content:'';position:absolute;top:50%;left:50%;
  width:26px;height:26px;margin:-13px 0 0 -13px;border:2.5px solid var(--maroon);
  border-right-color:transparent;border-radius:50%;animation:spin 0.65s linear infinite}

/* Respect users who ask the OS to reduce motion. */
@media (prefers-reduced-motion: reduce){
  .btn-spinner,.collection-card.is-deleting::after{animation-duration:2s}
  .skeleton::after{animation:none}
}

/* ─── Toast ─── */
.toast-container{position:fixed;top:72px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{padding:14px 20px;border-radius:var(--radius);background:var(--white);border:1px solid var(--border-light);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;font-size:0.88rem;font-weight:500;animation:toastIn 0.3s ease;max-width:360px}
.toast.success{border-left:4px solid var(--success)}
.toast.error{border-left:4px solid #D32F2F}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}

/* Undo toast — shown for the 5s window after a conversation delete */
.toast.undo{border-left:4px solid var(--maroon);transition:opacity 0.3s ease,transform 0.3s ease}
.toast-undo-text{flex:1}
.toast-undo-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;background:var(--maroon);color:var(--white);font-size:0.82rem;font-weight:600;letter-spacing:0.3px;transition:var(--transition);flex-shrink:0}
.toast-undo-btn:hover{background:var(--maroon-dark)}
.toast-undo-count{font-style:normal;font-weight:700;opacity:0.75;font-variant-numeric:tabular-nums;min-width:1ch;text-align:center}

/* ─── Confirm dialog (delete conversation) ─── */
.confirm-overlay{position:fixed;inset:0;z-index:10001;background:rgba(45,45,45,0.45);display:flex;align-items:center;justify-content:center;padding:24px;animation:confirmFade 0.15s ease}
@keyframes confirmFade{from{opacity:0}to{opacity:1}}
.confirm-dialog{background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--border-light);box-shadow:var(--shadow-lg);padding:24px 28px;width:100%;max-width:400px;animation:confirmPop 0.18s ease}
@keyframes confirmPop{from{opacity:0;transform:translateY(10px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.confirm-title{font-family:var(--font-display);font-size:1.15rem;font-weight:700;margin-bottom:8px;color:var(--text-primary)}
.confirm-body{font-size:0.9rem;color:var(--text-secondary);line-height:1.55;margin-bottom:20px;overflow-wrap:break-word}
.confirm-actions{display:flex;justify-content:flex-end;gap:10px}
.btn-danger{background:#D32F2F;color:var(--white)}
.btn-danger:hover{background:#B71C1C;box-shadow:var(--shadow-md)}

/* ─── Scrollbar ─── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-light)}

/* ─── Responsive ─── */
@media(max-width:768px){
  .chat-sidebar{display:none}
  .sidebar-toggle-btn{display:none}   /* sidebar can't show here — no dead button */
  .logout-btn span{display:none}      /* icon-only sign-out on small screens */
  .logout-btn{padding:7px 9px}
  .citation-panel{top:0}
  .citation-panel.open{width:100%;min-width:0;max-width:none}
  .chat-page-body.citation-open .chat-main{margin-right:0}
  .stats-grid{grid-template-columns:1fr}
  .auth-card{margin:16px;padding:32px 24px}
}

/* ─── Collection Delete Button ─── */
.collection-delete-btn {
  background: transparent;
  border: none;
  padding: 6px;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  color: var(--text-light);
}
.collection-delete-btn:hover {
  background: var(--cream-dark);
  color: var(--maroon);
}
.collection-delete-btn svg {
  width: 16px;
  height: 16px;
}

/* ─── Collection Document List ─── */
.collection-docs-list {
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.collection-doc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: var(--cream);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
}
.collection-doc-item svg {
  width: 14px;
  height: 14px;
  color: var(--maroon);
  flex-shrink: 0;
}
.collection-doc-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.collection-doc-more {
  font-size: 0.75rem;
  color: var(--text-light);
  font-weight: 600;
  padding-left: 4px;
  margin-top: 4px;
}
.collection-doc-empty {
  font-size: 0.8rem;
  color: var(--text-light);
  font-style: italic;
}

/* ─── Citation Pills in Chat ─── */
.msg-citations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.citation-pill {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--maroon);
  background: var(--cream-dark);
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: var(--transition);
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.citation-pill:hover {
  background: var(--maroon);
  color: var(--white);
  border-color: var(--maroon);
}

/* ─── Markdown formatting inside answer bodies ─── */
.msg-content h1,
.msg-content h2,
.msg-content h3,
.msg-content h4 {
  font-weight: 700;
  line-height: 1.3;
  margin: 14px 0 6px;
  color: var(--text-primary);
}
.msg-content h1 { font-size: 1.15rem; }
.msg-content h2 { font-size: 1.05rem; }
.msg-content h3 { font-size: 0.98rem; }
.msg-content h4 { font-size: 0.92rem; }
.msg-content ul,
.msg-content ol { margin: 6px 0 10px; padding-left: 22px; }
.msg-content li { margin-bottom: 4px; }
.msg-content code {
  background: var(--cream);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.85em;
}
.msg-content pre {
  background: var(--cream);
  padding: 12px;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 8px 0;
}
.msg-content pre code { background: transparent; padding: 0; }
.msg-content blockquote {
  border-left: 3px solid var(--border);
  margin: 8px 0;
  padding: 2px 0 2px 12px;
  color: var(--text-secondary);
}

/* Markdown tables (GFM) */
.msg-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
  font-size: 0.85rem;
  display: block;
  overflow-x: auto;
}
.msg-content th,
.msg-content td {
  border: 1px solid var(--border-light);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.msg-content thead th {
  background: var(--cream);
  font-weight: 700;
  color: var(--text-primary);
}
.msg-content tbody tr:nth-child(even) { background: var(--cream); }

/* ─── Expanded Citation Panel for PDFs ─── */
/* Increase the width from 420px to 600px so the PDF is readable */

.citation-snippet {
  background: var(--white);
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
  max-height: 250px; /* Give it a bit more room */
  overflow-y: auto;
}

.citation-pdf-container {
  flex: 1; 
  min-height: 600px;
  background: #E8E8E8;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow-y: auto; 
  overflow-x: hidden;
  position: relative;
  display: flex;
  justify-content: center; /* Centers the page horizontally */
  padding: 20px 0;
}

/* ─── Citation PDF viewer (robust full-height layout) ─── */
.citation-viewer {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;          /* let the inner scroll area own the overflow */
}
.citation-doc-info { flex-shrink: 0; padding-bottom: 12px; }
.citation-doc-name {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.citation-doc-meta {
  font-size: 0.78rem;
  color: var(--text-light);
  font-weight: 600;
  margin-top: 4px;
}
.pdf-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: #E8E8E8;
  border-radius: 0 0 var(--radius) var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;            /* centre the page horizontally */
  justify-content: safe center;   /* centre a short page; top-align + scroll a tall one (no clip) */
  padding: 20px 0;
}

.pdf-page-wrapper {
  position: relative;
  background: white;
  box-shadow: var(--shadow-md);
  flex-shrink: 0;          /* never stretch/shrink — keep true page proportions */
}
/* Block-level canvas removes the inline baseline gap under the page. */
.pdf-page-wrapper canvas {
  display: block;
}

.pdf-highlight-box {
  position: absolute;
  border: 2px solid #fbbc04; /* Google yellow */
  background: rgba(251, 188, 4, 0.25);
  pointer-events: none; /* Let users click text underneath */
  border-radius: 4px;
  z-index: 10;
  display: none;
  mix-blend-mode: multiply; /* NEW: Makes text underneath extra crisp! */
}

.pdf-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.pdf-toolbar button {
  background: var(--cream);
  border: 1px solid var(--border-light);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: var(--transition);
}
.pdf-toolbar button:hover:not(:disabled) {
  background: var(--maroon);
  color: var(--white);
  border-color: var(--maroon);
}
.pdf-toolbar button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pdf-page-info {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* ─── Source footer ───
   Shown only when an answer carries citations but no [Source N] markers to hang
   inline links on (a sandbox-computed answer, or the server's inferred-citation
   fallback). Without it that provenance never reaches the screen. */
.msg-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}
.msg-sources-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-light);
  margin-right: 2px;
}
.citation-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(123, 26, 26, 0.18);
  background: rgba(123, 26, 26, 0.05);
  color: var(--maroon);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.citation-source-chip:hover,
.citation-source-chip:focus-visible {
  background: rgba(123, 26, 26, 0.12);
  border-color: rgba(123, 26, 26, 0.4);
}
.citation-source-where {
  font-weight: 500;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

/* ─── Citation SHEET viewer (csv / xlsx / ods citations) ───
   Same shell as the PDF viewer (.citation-viewer + .pdf-toolbar), but the page
   canvas is replaced by a grid, and the audit panels below it keep their own
   scroll so the computation stays visible however many rows are on screen. */
.sheet-toolbar { gap: 12px; }
.sheet-pager { display: flex; gap: 6px; }
.sheet-select {
  background: var(--cream);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 180px;
}
.sheet-scroll {
  flex: 1;                 /* the grid is now the only body element — takes all
                              remaining height (it used to share it with the
                              audit panels below) */
  min-height: 0;
  overflow: auto;          /* the grid owns both axes — the panel never scrolls */
  background: var(--white);
  border: 1px solid var(--border-light);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.sheet-loading, .sheet-error {
  padding: 20px;
  font-size: 0.85rem;
  color: var(--text-light);
}
.sheet-error { color: #b00; }

.sheet-grid {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sheet-grid th, .sheet-grid td {
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 5px 10px;
  text-align: left;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--cream);
  font-weight: 700;
  color: var(--text-primary);
}
/* Row numbers are the anchor the subset's row index refers to — keep them
   pinned while the grid scrolls sideways. */
.sheet-grid .sheet-rownum {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--cream);
  color: var(--text-light);
  font-weight: 600;
  text-align: right;
  font-size: 0.72rem;
}
.sheet-grid thead .sheet-rownum { z-index: 3; }
.sheet-num { text-align: right; }

/* Excel-style letter above each column name — positional, so it is equally true
   of a CSV as of a workbook. */
.sheet-col-letter {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: 0.04em;
}
/* The analysis position, shown next to the file row so "row 8" is never
   ambiguous between what Excel shows and what the code addressed. */
.sheet-pos {
  display: block;
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--text-light);
  opacity: 0.75;
}
/* Gap marker between non-adjacent rows in the contributing-rows view. */
.sheet-gap > td {
  text-align: center;
  font-size: 0.68rem;
  color: var(--text-light);
  background: repeating-linear-gradient(
    45deg, transparent, transparent 5px,
    rgba(0, 0, 0, 0.025) 5px, rgba(0, 0, 0, 0.025) 10px);
}
.sheet-gap > .sheet-rownum { color: var(--text-light); }

/* ── Provenance emphasis ──────────────────────────────────────────────────
   Target column, target row, and their intersection — the spreadsheet
   crosshair. Only ever drawn from a verified, non-stale citation. */
.sheet-col-target { background: rgba(21, 101, 192, 0.14) !important; box-shadow: inset 0 -2px 0 #1565c0; }
.sheet-cell-col   { background: rgba(21, 101, 192, 0.05); }
.sheet-row-target > td, .sheet-row-target > th { background: rgba(251, 188, 4, 0.16); }
.sheet-cell-target {
  background: rgba(251, 188, 4, 0.45) !important;
  outline: 2px solid #f9a825;
  outline-offset: -2px;
  font-weight: 700;
}
/* Sample rows behind an aggregate. Deliberately NOT the cell colour: a weaker
   claim ("a sample of the contributing rows") gets a weaker mark. */
.sheet-row-sample > td, .sheet-row-sample > th { background: rgba(46, 125, 50, 0.10); }

/* The column that DECIDED the row (Age), next to the one the answer reports
   (PatientID). Blue = "what was compared", amber = "what was returned". */
.sheet-col-basis  { background: rgba(21, 101, 192, 0.10) !important; box-shadow: inset 0 -2px 0 rgba(21,101,192,0.55); }
.sheet-cell-basis {
  background: rgba(21, 101, 192, 0.28) !important;
  outline: 2px dashed #1565c0;
  outline-offset: -2px;
  font-weight: 700;
}
/* Rows tied with the cited one — equally valid answers, marked as such. */
.sheet-row-tied > td, .sheet-row-tied > th { background: rgba(249, 168, 37, 0.10); }

/* ── Provenance strip ─────────────────────────────────────────────────── */
.prov-strip {
  flex-shrink: 0;
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--maroon);
  border-radius: var(--radius);
  background: var(--white);
  margin-bottom: 10px;
}
.prov-cell  { border-left-color: #f9a825; }
.prov-agg   { border-left-color: #1565c0; }
.prov-stale { border-left-color: #b00; background: rgba(187, 0, 0, 0.04); }
.prov-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.prov-badge {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.prov-verified {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  color: #2e7d32;
  background: rgba(46, 125, 50, 0.12);
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
}
.prov-title { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); }
.prov-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--maroon);
  line-height: 1.2;
  margin: 2px 0 6px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.prov-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 6px; }
.prov-field { font-size: 0.74rem; color: var(--text-primary); }
.prov-field b {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-light);
}
.prov-dim { color: var(--text-light); font-style: italic; }
/* A tie makes the single highlighted row an incomplete answer — this warns
   before the note, not after it. */
.prov-tie {
  margin-bottom: 6px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.74rem;
  line-height: 1.45;
  background: rgba(249, 168, 37, 0.14);
  border: 1px solid rgba(249, 168, 37, 0.5);
  color: var(--text-primary);
}
.prov-tie b { display: block; margin-bottom: 2px; }
.prov-tie-btn {
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(249, 168, 37, 0.7);
  background: var(--white);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
}
.prov-tie-btn:hover { background: rgba(249, 168, 37, 0.25); }
.prov-has-ties { border-left-color: #f9a825; }
.prov-note {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-secondary);
  background: var(--cream);
  border-radius: 6px;
  padding: 7px 9px;
}
.sheet-view-toggle {
  font-size: 0.72rem !important;
  padding: 5px 9px !important;
}
.sheet-dl { font-weight: 700; }

/* ─── Message Charts (toggleable answer visualizations) ─── */
.msg-charts{margin-top:10px}
.chart-toggle-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;font-size:0.78rem;font-weight:600;color:var(--maroon);background:rgba(123,26,26,0.06);border:1px solid rgba(123,26,26,0.15);transition:var(--transition)}
.chart-toggle-btn:hover{background:rgba(123,26,26,0.12)}
.chart-toggle-btn svg{width:13px;height:13px}
.chart-toggle-btn .chart-chevron{transition:transform 0.2s ease}
.chart-toggle-btn.open .chart-chevron{transform:rotate(180deg)}
.chart-container{margin-top:10px;display:flex;flex-direction:column;gap:12px}
.chart-card{background:var(--white);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:16px 18px;box-shadow:var(--shadow-sm)}
.chart-title{font-size:0.86rem;font-weight:600;color:var(--text-primary);margin-bottom:10px}
.chart-legend{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px}
.chart-legend-item{display:inline-flex;align-items:center;gap:5px;font-size:0.75rem;color:var(--text-secondary)}
.chart-legend-swatch{width:10px;height:10px;border-radius:2px;display:inline-block}
.chart-svg{width:100%;height:auto;display:block}
.chart-svg text{font-family:var(--font-body)}