/* ============================================================
   Workspace styles — landing, chat, account.
   Imported on top of /styles.css, so all CSS variables (--ink,
   --paper, --rule-soft, etc.) are inherited from there.
   ============================================================ */

/* ---------- Shared layout ---------- */
.ws-wrap { max-width: 1100px; margin: 0 auto; padding: 32px 40px 80px; }
.ws-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.ws-kicker { font-family: var(--mono); font-size: 11px; color: var(--accent-deep); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.ws-title { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.05; letter-spacing: -.012em; margin: 0 0 12px; color: var(--ink); }
.ws-sub { font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 620px; margin: 0; }

.ws-btn {
  display: inline-block; padding: 11px 22px;
  border: 1px solid var(--ink); border-radius: 4px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: background .2s ease;
}
.ws-btn:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); }
.ws-btn:disabled { opacity: .4; cursor: not-allowed; }

.ws-card { border: 1px solid var(--rule-soft); border-radius: 8px; padding: 24px 28px; background: var(--paper-2); }
.ws-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ws-card-title { font-family: var(--serif); font-weight: 400; font-size: 20px; margin: 0; color: var(--ink); }

.ws-list { display: flex; flex-direction: column; }
.ws-row-wrap { position: relative; border-bottom: 1px solid var(--rule-soft); }
.ws-row-wrap:last-child { border-bottom: none; }
.ws-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 14px 40px 14px 4px; text-decoration: none; color: var(--ink); transition: background .15s ease; }
.ws-row:hover { background: rgba(0,0,0,.02); }
.ws-row-title { font-size: 15px; line-height: 1.4; flex: 1; }
.ws-row-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); }
.ws-row-del {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  border: none; background: transparent; color: var(--ink-3);
  font-size: 16px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.ws-row-wrap:hover .ws-row-del { opacity: 1; }
.ws-row-del:hover { background: #b22222; color: white; }
.ws-row-del:disabled { opacity: .3; cursor: not-allowed; }

.ws-empty { padding: 30px 0; text-align: center; color: var(--ink-3); font-size: 14px; }
.ws-foot { margin-top: 32px; font-size: 13px; color: var(--ink-3); }

/* Section nav tiles — top-of-page jump targets. */
.ws-nav-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.ws-nav-tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--rule-soft); border-radius: 6px;
  background: var(--paper-2);
  text-decoration: none; color: var(--ink);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.ws-nav-tile:hover {
  border-color: var(--ink);
  background: var(--paper);
  transform: translateY(-1px);
}
.ws-nav-tile-name {
  font-family: var(--serif); font-size: 17px; font-weight: 500;
  color: var(--ink); letter-spacing: -.005em;
}
.ws-nav-tile-desc {
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  color: var(--ink-3); text-transform: uppercase;
}

/* Dashboard activity grid (workspace landing). */
.ws-dash-pending {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 1px solid #d49a3a; border-radius: 6px;
  background: #fdf3e0;
  margin-bottom: 16px;
  font-size: 13px; color: #5a3a10;
}
.ws-dash-pending-chip {
  text-decoration: none; color: #5a3a10;
  border-bottom: 1px dotted #d49a3a;
  font-family: var(--mono); font-size: 11px;
}
.ws-dash-pending-chip:hover { color: var(--ink); border-bottom-color: var(--ink); }

.ws-dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
@media (max-width: 900px) {
  .ws-dash-grid { grid-template-columns: 1fr; }
}

.ws-dash-card {
  border: 1px solid var(--rule-soft); border-radius: 8px;
  background: var(--paper-2);
  padding: 16px 18px;
  display: flex; flex-direction: column; min-height: 180px;
}
.ws-dash-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--rule-soft); padding-bottom: 10px;
}
.ws-dash-card-title {
  font-family: var(--serif); font-weight: 400; font-size: 16px;
  margin: 0; color: var(--ink); letter-spacing: -.005em;
}
.ws-dash-link {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
  text-decoration: none;
}
.ws-dash-link:hover { color: var(--accent-deep); }

.ws-dash-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  flex: 1;
}
.ws-dash-row {
  border-bottom: 1px solid var(--rule-soft);
}
.ws-dash-row:last-child { border-bottom: none; }
.ws-dash-row-link {
  display: flex; flex-direction: column; gap: 4px;
  padding: 9px 0;
  text-decoration: none; color: var(--ink);
}
.ws-dash-row-link:hover .ws-dash-row-title { color: var(--accent-deep); }
.ws-dash-row-title {
  font-family: var(--serif); font-size: 14px; line-height: 1.3;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-dash-row-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ws-dash-row-time {
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  color: var(--ink-3);
}
.ws-dash-empty {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  padding: 12px 0; line-height: 1.5;
}
.ws-dash-empty a { color: var(--accent-deep); text-decoration: none; }
.ws-dash-empty a:hover { text-decoration: underline; }

/* ---------- Active nav highlight ----------
   Removed — now lives globally in /styles.css with the lift-on-hover
   animation so every page (workspace, agents, marketing) shares the
   same nav behavior. */

/* ---------- Chat shell (sidebar + main pane) ---------- */
/* Lock the chat page so the body never scrolls. The messages list is
   the only thing inside the layout that can scroll vertically — the
   composer stays anchored at the bottom of the viewport, ChatGPT/
   Claude style. */
body.chat-page {
  height: 100vh;
  overflow: hidden;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
}
/* Auto-hiding nav — applies to any page that loads /nav-autohide.js
   (which adds `body.nav-autohide`). The chat page also gets it via
   the same body class for backward compatibility.
   `overflow: hidden` is intentionally only applied when the nav is
   COLLAPSING — at rest the nav must let child transforms (like the
   lift-on-hover on .nav-links a) extend beyond its bounding box,
   otherwise the hover animation gets clipped against the nav's edge. */
body.chat-page > .nav,
body.nav-autohide > .nav {
  flex-shrink: 0;
  transition: max-height .22s ease, opacity .22s ease, padding .22s ease, border-color .22s ease;
  max-height: 120px;
}
body.chat-page.nav-collapsed > .nav,
body.nav-autohide.nav-collapsed > .nav {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  overflow: hidden;
}

/* When the nav is auto-hidden, a thin hint strip appears at the very
   top of the viewport — a visual cue that the nav lives there and
   moving the cursor up will bring it back. */
body.chat-page.nav-collapsed::before,
body.nav-autohide.nav-collapsed::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to bottom, rgba(0,0,0,.08), transparent);
  pointer-events: none;
  z-index: 50;
}
/* Old toggle button (removed by JS at runtime, hidden defensively). */
.nav-toggle { display: none; }
body.chat-page > .chat-shell { flex: 1; min-height: 0; }
body.chat-page #grain { display: none; }   /* grain overlay would absolutely-position over scrolling content */
.chat-shell {
  --rail-width: 240px;
  display: grid;
  grid-template-columns: var(--rail-width) 6px 1fr;
  border-top: 1px solid var(--rule-soft);
  max-width: 1400px; margin: 0 auto; width: 100%;
  overflow: hidden;
}

/* Drag handle between sidebar and chat. Slim by default, highlights
   on hover, follows the cursor while dragging. */
.rail-resize {
  cursor: col-resize;
  background: transparent;
  position: relative;
  outline: none;
}
.rail-resize::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--rule-soft);
  width: 1px; left: 50%; transform: translateX(-50%);
  transition: background .15s ease, width .15s ease;
}
.rail-resize:hover::before,
.rail-resize:focus::before {
  background: var(--ink);
  width: 2px;
}
.chat-rail {
  border-right: 1px solid var(--rule-soft);
  background: var(--paper-2);
  padding: 18px 14px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.chat-rail-back { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; padding: 6px 8px; border-radius: 3px; }
.chat-rail-back:hover { background: rgba(0,0,0,.04); color: var(--ink); }
.chat-rail-new {
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule-soft); border-radius: 4px;
  padding: 10px 12px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.chat-rail-new:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chat-rail-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.rail-row-wrap { position: relative; }
.rail-row {
  display: block; padding: 8px 28px 8px 10px; border-radius: 4px;
  font-size: 13px; color: var(--ink-2); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-row:hover { background: rgba(0,0,0,.04); color: var(--ink); }
.rail-row.is-active { background: var(--ink); color: var(--paper); }
.rail-row-del {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  border: none; background: transparent; color: var(--ink-3);
  font-size: 13px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.rail-row-wrap:hover .rail-row-del { opacity: 1; }
.rail-row-del:hover { background: #b22222; color: white; }
.rail-row.is-active + .rail-row-del { color: var(--paper); }

.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; }
.chat-main > .chat-head { flex-shrink: 0; }
.chat-main > .chat-composer,
.chat-main > .chat-discl { flex-shrink: 0; }
.chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 28px; border-bottom: 1px solid var(--rule-soft);
  background: var(--paper-2);
}
.chat-title-input {
  flex: 1; border: none; background: transparent;
  font-family: var(--serif); font-size: 22px; line-height: 1.1; letter-spacing: -.01em; color: var(--ink);
  padding: 4px 0; outline: none;
}
.chat-title-input::placeholder { color: var(--ink-3); font-style: italic; }
.chat-title-input:focus { border-bottom: 1px solid var(--rule-soft); }
.chat-head-right { display: flex; align-items: center; gap: 10px; }
.chat-model-select {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  border: 1px solid var(--rule-soft); border-radius: 4px;
  background: var(--paper); color: var(--ink); padding: 6px 10px;
}
.chat-key-source { font-family: var(--mono); font-size: 10px; color: var(--accent-deep); letter-spacing: .06em; }

/* Project picker pill in chat header */
.chat-project-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--rule-soft); border-radius: 999px;
  background: var(--paper);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--ink-3);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.chat-project-pill:hover { border-color: var(--ink); color: var(--ink); }
.chat-project-pill.has-project { color: var(--ink); border-color: var(--accent-deep); }
.chat-project-pill-caret { font-size: 8px; opacity: .6; }

/* Popover that appears below the pill */
.chat-project-popover {
  /* fixed (viewport-relative) so the JS that sets style.top/left from
     getBoundingClientRect lands at the pill, not at some offsetParent's
     left edge a thousand pixels to the right. */
  position: fixed;
  z-index: 100;
  width: 280px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(14,21,18,.14);
  padding: 8px;
}
.cpop-loading { padding: 12px; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.cpop-search {
  width: 100%; padding: 6px 8px;
  border: 1px solid var(--rule-soft); border-radius: 4px;
  font-family: var(--sans); font-size: 12.5px;
  margin-bottom: 6px;
}
.cpop-list { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.cpop-item {
  display: block; width: 100%;
  padding: 7px 10px;
  background: transparent; border: none; border-radius: 4px;
  text-align: left; font-size: 13px; color: var(--ink);
  cursor: pointer;
}
.cpop-item:hover { background: var(--paper-2); }
.cpop-item.is-current { font-weight: 500; color: var(--accent-deep); }
.cpop-empty { padding: 12px 10px; text-align: center; font-size: 12px; color: var(--ink-3); }
.cpop-divider { height: 1px; background: var(--rule-soft); margin: 6px 4px; }
.cpop-action {
  display: block; width: 100%;
  padding: 7px 10px;
  background: transparent; border: none; border-radius: 4px;
  text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-2);
  cursor: pointer;
}
.cpop-action:hover { background: var(--paper-2); color: var(--ink); }
.cpop-new { color: var(--accent-deep); }
.cpop-newform { padding: 4px 6px; }
.cpop-label { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.cpop-input { width: 100%; padding: 6px 8px; border: 1px solid var(--rule-soft); border-radius: 4px; font-family: var(--sans); font-size: 13px; }
.cpop-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.cpop-cancel, .cpop-create {
  padding: 5px 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  border-radius: 4px; cursor: pointer;
}
.cpop-cancel { background: transparent; border: 1px solid var(--rule-soft); color: var(--ink-3); }
.cpop-create { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.cpop-create:disabled { opacity: .5; cursor: not-allowed; }

.chat-messages {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 18px;
}
.chat-empty {
  text-align: center; color: var(--ink-3);
  font-family: var(--serif); font-size: 18px;
  margin-top: 60px;
}

/* Messages match the site's body type system. Same font (Geist sans),
   same size cadence as article body, slightly looser line-height for
   conversational reading. The user-message bubble is a softer "ink-on-
   paper-2" treatment instead of a hard dark bubble so it visually
   harmonizes with the rest of the site. */
.msg { max-width: 800px; font-family: var(--sans); }
.msg.user {
  align-self: flex-end;
  background: var(--paper-2);
  color: var(--ink);
  padding: 12px 18px;
  border: 1px solid var(--rule-soft);
  border-radius: 8px 8px 2px 8px;
}
.msg.user .msg-body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -.005em;
}
.msg.asst { align-self: flex-start; max-width: 100%; padding: 4px 0; }
.msg.asst .msg-body {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.65;
  letter-spacing: -.005em;
  color: var(--ink);
}
.msg-body strong { font-weight: 600; }
.msg-body em { font-style: italic; }
.msg-body code { font-family: var(--mono); font-size: 13px; background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 3px; }
.msg-body .msg-h1 { display: block; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.1; margin: 14px 0 6px; color: var(--ink); letter-spacing: -.012em; }
.msg-body .msg-h2 { display: block; font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.1; margin: 12px 0 4px; color: var(--ink); letter-spacing: -.01em; }
.msg-body .msg-h3 { display: block; font-family: var(--sans); font-weight: 600; font-size: 15.5px; margin: 10px 0 4px; color: var(--ink); }
.msg-error {
  display: inline-block;
  color: #722;
  background: rgba(178,34,34,.08);
  border: 1px solid rgba(178,34,34,.25);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  font-style: italic;
}
.cursor { display: inline-block; width: 8px; animation: blink 1s steps(2,start) infinite; color: var(--accent-deep); }
.cursor[hidden] { display: none !important; }
@keyframes blink { to { visibility: hidden; } }

.chat-composer {
  display: flex; gap: 12px; align-items: flex-end;
  padding: 16px 28px;
  border-top: 1px solid var(--rule-soft);
  background: var(--paper-2);
}
.chat-composer textarea {
  flex: 1; padding: 12px 14px;
  border: 1px solid var(--rule-soft); border-radius: 6px;
  font-family: var(--sans); font-size: 15px; line-height: 1.55; letter-spacing: -.005em;
  background: var(--paper); color: var(--ink);
  resize: vertical; min-height: 44px; max-height: 240px;
}
.chat-composer textarea:focus { outline: none; border-color: var(--ink); }
.chat-discl {
  margin: 0; padding: 6px 28px 14px;
  font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .04em;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule-soft);
}

/* Attachment chip rendered inside a user message bubble */
.msg-attach-row { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.msg-attach {
  display: inline-block;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em;
  padding: 2px 8px;
  background: rgba(255,255,255,.12); color: var(--paper);
  border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
}
/* User bubble is now light, so use ink-on-paper for attach chips */
.msg.user .msg-attach { background: rgba(0,0,0,.05); color: var(--ink-2); border-color: var(--rule-soft); }

/* Mobile collapse */
@media (max-width: 760px) {
  .chat-shell { grid-template-columns: 1fr; height: calc(100vh - 64px); }
  .chat-rail { display: none; }
  .ws-wrap { padding: 24px 18px 50px; }
  .ws-title { font-size: 30px; }
}

/* ---------- Library ---------- */
.ws-head-actions { display: flex; gap: 10px; }
.lib-toolbar { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.lib-toolbar input[type="search"] {
  flex: 1; max-width: 360px;
  padding: 8px 12px;
  border: 1px solid var(--rule-soft); border-radius: 4px;
  font-family: var(--sans); font-size: 13.5px;
  background: var(--paper); color: var(--ink);
}
.lib-toolbar input:focus { outline: none; border-color: var(--ink); }
.lib-back { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); text-decoration: none; }
.lib-back:hover { color: var(--ink); }

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.lib-card {
  position: relative;
  border: 1px solid var(--rule-soft); border-radius: 8px;
  background: var(--paper);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lib-card:hover { border-color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.lib-card-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 0 12px; }
.lib-badge {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: 2px 6px; border-radius: 3px;
}
.lib-card-del {
  width: 22px; height: 22px; border-radius: 50%;
  border: none; background: transparent; color: var(--ink-3);
  font-size: 14px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.lib-card:hover .lib-card-del { opacity: 1; }
.lib-card-del:hover { background: #b22222; color: white; }
.lib-card-link { display: block; padding: 8px 14px 14px; text-decoration: none; color: var(--ink); }
.lib-card-name { font-family: var(--sans); font-size: 14px; line-height: 1.4; font-weight: 500; min-height: 38px; word-break: break-word; }
.lib-card-meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .03em; margin-top: 6px; }
.lib-card-date { font-family: var(--mono); font-size: 10px; color: var(--ink-3); margin-top: 4px; }
.lib-card-redline {
  display: block; width: 100%;
  margin-top: 0; padding: 6px 12px;
  border: none; border-top: 1px solid var(--rule-soft);
  background: transparent; color: var(--accent-deep);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; text-align: center;
  transition: background .15s ease, color .15s ease;
}
.lib-card-redline:hover { background: var(--accent-deep); color: var(--paper); }
.lib-card { display: flex; flex-direction: column; }
.lib-card-link { flex: 1; }

/* Redline modal */
.rdln-explainer { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin: 0 0 14px; }
.rdln-status {
  margin-top: 12px; padding: 10px 14px;
  border-radius: 6px; font-size: 13px; line-height: 1.5;
}
.rdln-status.is-running { background: rgba(56,98,170,.08); color: #3862aa; border: 1px solid rgba(56,98,170,.25); }
.rdln-status.is-done    { background: rgba(10,125,87,.08); color: #0a7d57; border: 1px solid rgba(10,125,87,.25); }
.rdln-status.is-error   { background: rgba(178,34,34,.06); color: #722;    border: 1px solid rgba(178,34,34,.25); }
.rdln-status.is-warn    { background: rgba(184,127,0,.10); color: #b87f00; border: 1px solid rgba(184,127,0,.25); }

/* Per-edit review UI */
.rdln-summary { padding-bottom: 12px; border-bottom: 1px solid var(--rule-soft); margin-bottom: 14px; }
.rdln-summary-p { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin: 6px 0 10px; }
.rdln-bulkbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rdln-counter { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }
.rdln-edits-list { display: flex; flex-direction: column; gap: 12px; max-height: 50vh; overflow-y: auto; padding-right: 6px; }
.rdln-edit { padding: 12px 14px; border: 1px solid var(--rule-soft); border-radius: 6px; background: var(--paper); transition: background .15s, border-color .15s; }
.rdln-edit.is-accepted { background: rgba(10,125,87,.04); border-color: rgba(10,125,87,.4); }
.rdln-edit.is-rejected { background: rgba(178,34,34,.04); border-color: rgba(178,34,34,.4); opacity: .7; }
.rdln-edit-rationale { font-size: 13px; line-height: 1.5; color: var(--ink); margin-bottom: 8px; }
.rdln-edit-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.rdln-edit-from, .rdln-edit-to { padding: 8px 10px; border-radius: 4px; }
.rdln-edit-from { background: rgba(178,34,34,.06); }
.rdln-edit-to { background: rgba(10,125,87,.06); }
.rdln-edit-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 3px; }
.rdln-edit-text { font-family: var(--mono); font-size: 12px; line-height: 1.45; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.rdln-edit-empty { color: var(--ink-3); font-style: italic; font-family: var(--sans); }
.rdln-edit-actions { display: flex; gap: 6px; }
.rdln-btn-acc, .rdln-btn-rej, .rdln-btn-pen {
  padding: 4px 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  border: 1px solid var(--rule-soft); border-radius: 4px;
  background: var(--paper); color: var(--ink-3); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.rdln-btn-acc:hover, .rdln-btn-acc.is-on { background: #0a7d57; color: white; border-color: #0a7d57; }
.rdln-btn-rej:hover, .rdln-btn-rej.is-on { background: #b22222; color: white; border-color: #b22222; }
.rdln-btn-pen:hover, .rdln-btn-pen.is-on { background: var(--ink-2); color: white; border-color: var(--ink-2); }
.rdln-final-status { flex: 1; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.rdln-final-status.is-error { color: #b22222; }
.rdln-final-status .ws-btn { font-family: var(--mono); }

@media (max-width: 600px) {
  .rdln-edit-diff { grid-template-columns: 1fr; }
}

.lib-uploads {
  position: fixed; right: 24px; bottom: 24px;
  display: flex; flex-direction: column; gap: 8px; z-index: 100;
  max-width: 360px;
}
.lib-upload {
  background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 6px;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  font-size: 12px;
}
.lib-upload.is-done { border-color: var(--accent-deep); }
.lib-upload.is-error { border-color: #b22222; }
.lib-upload-name { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-upload-status { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .03em; }

/* ---------- Chat attachment picker (modal) ---------- */
.attach-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
}
.attach-modal[hidden] { display: none; }
.attach-modal-inner {
  background: var(--paper); border-radius: 10px;
  width: min(640px, 90vw); max-height: 80vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.attach-modal-head {
  padding: 16px 20px; border-bottom: 1px solid var(--rule-soft);
  display: flex; justify-content: space-between; align-items: center;
}
.attach-modal-title { font-family: var(--serif); font-size: 18px; margin: 0; color: var(--ink); }
.attach-modal-close { background: transparent; border: none; cursor: pointer; font-size: 22px; color: var(--ink-3); padding: 0 6px; }
.attach-modal-tabs { display: flex; gap: 4px; padding: 12px 20px 0; border-bottom: 1px solid var(--rule-soft); }
.attach-tab {
  background: transparent; border: none; cursor: pointer;
  padding: 8px 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
}
.attach-tab.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.attach-modal-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.attach-upload-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.attach-upload-hint { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .03em; }
.attach-upload-progress { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.attach-upload-progress:empty { display: none; }
.attach-upload-progress .lib-upload { box-shadow: none; }
.attach-search { width: 100%; padding: 8px 12px; border: 1px solid var(--rule-soft); border-radius: 4px; font-family: var(--sans); font-size: 13px; margin-bottom: 12px; }
.attach-list { display: flex; flex-direction: column; gap: 6px; }
.attach-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border: 1px solid var(--rule-soft); border-radius: 5px;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.attach-item:hover { border-color: var(--ink); background: var(--paper-2); }
.attach-item.is-selected { border-color: var(--accent-deep); background: rgba(184,127,0,.06); }
.attach-item-name { font-size: 13.5px; }
.attach-item-meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.attach-modal-foot { padding: 12px 20px; border-top: 1px solid var(--rule-soft); display: flex; justify-content: flex-end; gap: 8px; }

/* Attachment chip on the composer */
.composer-attachments { padding: 6px 28px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.composer-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: var(--mono); font-size: 11px;
  background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 999px;
  color: var(--ink);
}
.composer-chip-x { background: transparent; border: none; color: var(--ink-3); cursor: pointer; padding: 0; font-size: 13px; }
.composer-chip-x:hover { color: #b22222; }

/* Paperclip button in composer */
.composer-paperclip {
  flex-shrink: 0; width: 38px; height: 38px;
  border: 1px solid var(--rule-soft); border-radius: 6px;
  background: var(--paper); color: var(--ink-2);
  cursor: pointer; align-self: flex-end;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  transition: border-color .15s ease, color .15s ease;
}
.composer-paperclip:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- Tabular reviews ---------- */
.rv-status-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  margin-right: 8px;
}
.rv-status-done { background: rgba(10,125,87,.12); color: #0a7d57; }
.rv-status-run  { background: rgba(56,98,170,.14); color: #3862aa; }
.rv-status-err  { background: rgba(178,34,34,.14); color: #b22222; }
.rv-status-part { background: rgba(184,127,0,.16); color: #b87f00; }
.rv-status-pen  { background: rgba(0,0,0,.06);    color: var(--ink-3); }

/* New-review modal */
.rv-modal { width: min(720px, 92vw); max-height: 86vh; }
.rv-field { display: block; margin-bottom: 16px; }
.rv-field-label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.rv-field input[type="text"], .rv-field select, .rv-field textarea {
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--rule-soft); border-radius: 4px;
  font-family: var(--sans); font-size: 13.5px;
  background: var(--paper); color: var(--ink);
}
.rv-doc-list { max-height: 180px; overflow-y: auto; border: 1px solid var(--rule-soft); border-radius: 6px; padding: 4px; }
.rv-doc-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 4px; cursor: pointer; }
.rv-doc-item:hover { background: var(--paper-2); }
.rv-doc-name { flex: 1; font-size: 13px; }
.rv-doc-meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.rv-cols { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.rv-col-row { display: grid; grid-template-columns: 1fr 2fr 28px; gap: 8px; align-items: stretch; }
.rv-col-row .rv-col-name { padding: 6px 10px; border: 1px solid var(--rule-soft); border-radius: 4px; font-size: 13px; }
.rv-col-row .rv-col-prompt { padding: 6px 10px; border: 1px solid var(--rule-soft); border-radius: 4px; font-size: 12.5px; resize: vertical; min-height: 44px; }
.rv-col-del { background: transparent; border: 1px solid var(--rule-soft); border-radius: 4px; cursor: pointer; color: var(--ink-3); font-size: 14px; }
.rv-col-del:hover { background: #b22222; color: white; border-color: #b22222; }
.rv-add-col { background: transparent; border: 1px dashed var(--rule-soft); border-radius: 4px; padding: 6px 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); cursor: pointer; }
.rv-add-col:hover { color: var(--ink); border-color: var(--ink); }
.rv-foot-hint { font-family: var(--mono); font-size: 11px; color: var(--ink-3); flex: 1; }

/* Grid view */
.rv-shell { padding: 24px 32px 60px; max-width: 100%; overflow-x: auto; }
.rv-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.rv-back { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); text-decoration: none; }
.rv-back:hover { color: var(--ink); }
.rv-title { font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 0; color: var(--ink); }
.rv-head-meta { display: flex; align-items: center; gap: 8px; }
.rv-counter { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.rv-grid-wrap { border: 1px solid var(--rule-soft); border-radius: 8px; background: var(--paper); overflow: auto; max-width: 100%; }
.rv-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.rv-grid th, .rv-grid td { padding: 10px 12px; border-bottom: 1px solid var(--rule-soft); border-right: 1px solid var(--rule-soft); vertical-align: top; }
.rv-grid th:last-child, .rv-grid td:last-child { border-right: none; }
.rv-grid tr:last-child td { border-bottom: none; }
.rv-th { background: var(--paper-2); text-align: left; font-weight: 500; min-width: 200px; max-width: 320px; }
.rv-th-doc { width: 220px; }
.rv-th-name { font-family: var(--serif); font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.rv-th-prompt { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .02em; line-height: 1.45; max-height: 28px; overflow: hidden; }
.rv-td-doc { background: var(--paper-2); position: sticky; left: 0; z-index: 1; }
.rv-doc-row-name { font-weight: 500; word-break: break-word; }

.rv-cell { cursor: default; transition: background .12s ease; }
.rv-cell-done { cursor: pointer; }
.rv-cell-done:hover { background: var(--paper-2); }
.rv-cell-pending, .rv-cell-running { color: var(--ink-3); font-family: var(--mono); font-size: 11px; }
.rv-cell-error { color: #b22222; font-family: var(--mono); font-size: 11px; cursor: pointer; }
.rv-cell-answer { line-height: 1.45; word-break: break-word; }
.rv-cell-cite { margin-top: 6px; font-family: var(--mono); font-size: 10px; color: var(--accent-deep); letter-spacing: .03em; }
.rv-spin { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3862aa; margin-right: 6px; animation: rvpulse 1.2s ease-in-out infinite; vertical-align: middle; }
@keyframes rvpulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* New-review modal: client-role picker */
.rv-field-hint { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; margin-left: 6px; }
.rv-role-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rv-role-chip {
  padding: 4px 10px;
  font-family: var(--sans); font-size: 12px;
  background: var(--paper); color: var(--ink-2);
  border: 1px solid var(--rule-soft); border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.rv-role-chip:hover { border-color: var(--ink); color: var(--ink); }
.rv-role-chip.is-active { background: var(--accent-deep); color: var(--paper); border-color: var(--accent-deep); }

/* Auto-detected suggestion chips — visually distinguished from the
   default canonical chips so the user knows the AI proposed them. */
.rv-role-chip-suggested {
  background: rgba(184,127,0,.10);
  border-color: var(--accent-deep);
  color: var(--accent-deep);
  font-weight: 500;
}
.rv-role-chip-suggested:hover { background: var(--accent-deep); color: white; }
.rv-role-chip-suggested.is-active { background: var(--accent-deep); color: white; }

/* Banner showing the auto-detect result above the chip strip */
.rv-detect-banner {
  margin-top: 8px; padding: 8px 12px;
  font-size: 12.5px; line-height: 1.45;
  border-radius: 6px;
}
.rv-detect-banner.is-loading { background: rgba(56,98,170,.08); color: #3862aa; border: 1px solid rgba(56,98,170,.25); }
.rv-detect-banner.is-done    { background: rgba(10,125,87,.06); color: var(--ink); border: 1px solid rgba(10,125,87,.25); }
.rv-detect-banner.is-error   { background: rgba(178,34,34,.06); color: #722; border: 1px solid rgba(178,34,34,.25); }

/* New-review modal: kind picker */
.rv-kind-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rv-kind-opt {
  display: block; padding: 12px 14px;
  border: 1px solid var(--rule-soft); border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.rv-kind-opt:has(input:checked) { border-color: var(--accent-deep); background: rgba(184,127,0,.04); }
.rv-kind-opt input { margin-right: 6px; }
.rv-kind-title { font-family: var(--serif); font-size: 16px; color: var(--ink); margin-bottom: 4px; display: inline-block; }
.rv-kind-desc { font-size: 12px; color: var(--ink-2); line-height: 1.45; }

/* Redline-mode grid cells */
.rv-grid-redline .rv-cell { vertical-align: top; min-width: 220px; max-width: 280px; padding: 10px; }
.rv-cell-redline { cursor: pointer; position: relative; }
.rv-cell-redline.is-accepted { background: rgba(10,125,87,.04); border-left: 3px solid #0a7d57; }
.rv-cell-redline.is-rejected { background: rgba(178,34,34,.04); border-left: 3px solid #b22222; opacity: .7; }
.rv-cell-rationale { font-size: 12.5px; line-height: 1.45; color: var(--ink); margin-bottom: 6px; }
.rv-cell-mini-diff { display: grid; grid-template-columns: 1fr 16px 1fr; gap: 4px; align-items: start; font-family: var(--mono); font-size: 10.5px; line-height: 1.4; margin-bottom: 8px; }
.rv-cell-find { background: rgba(178,34,34,.06); padding: 4px 6px; border-radius: 3px; color: var(--ink-2); }
.rv-cell-replace { background: rgba(10,125,87,.06); padding: 4px 6px; border-radius: 3px; color: var(--ink-2); }
.rv-cell-arrow { text-align: center; color: var(--ink-3); padding-top: 2px; }
.rv-cell-actions { display: flex; gap: 4px; }
.rv-cell-acc, .rv-cell-rej {
  flex: 1; padding: 3px 0; font-size: 12px;
  border: 1px solid var(--rule-soft); border-radius: 3px;
  background: var(--paper); color: var(--ink-3); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.rv-cell-acc:hover, .rv-cell-acc.is-on { background: #0a7d57; color: white; border-color: #0a7d57; }
.rv-cell-rej:hover, .rv-cell-rej.is-on { background: #b22222; color: white; border-color: #b22222; }
.rv-cell-na { color: var(--ink-3); font-size: 12px; padding: 12px; }

/* Per-doc finalize column */
.rv-th-actions { width: 110px; text-align: center; }
.rv-td-actions { vertical-align: top; padding: 10px; text-align: center; }
.rv-finalize-btn {
  padding: 6px 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 4px;
  cursor: pointer; white-space: nowrap;
}
.rv-finalize-btn:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); }
.rv-finalize-btn:disabled { opacity: .35; cursor: not-allowed; }
.rv-finalized-link {
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 10.5px; color: var(--accent-deep);
  cursor: pointer; text-decoration: none;
}
.rv-finalized-link:hover { text-decoration: underline; }

/* Cell detail modal — redline variant with split panes */
.rv-redline-detail { width: min(1100px, 96vw); max-height: 88vh; }
.rv-redline-detail-body { display: grid; grid-template-columns: 380px 1fr; gap: 0; padding: 0; height: 80vh; }
.rv-redline-side { border-right: 1px solid var(--rule-soft); padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.rv-redline-side p { font-size: 13.5px; line-height: 1.55; color: var(--ink); margin: 4px 0 0; }
.rv-redline-from, .rv-redline-to { margin: 4px 0 0; padding: 10px 14px; border-radius: 4px; font-size: 13px; line-height: 1.5; font-style: normal; }
.rv-redline-from { background: rgba(178,34,34,.06); border-left: 3px solid #b22222; }
.rv-redline-to { background: rgba(10,125,87,.06); border-left: 3px solid #0a7d57; }
.rv-redline-actions { display: flex; gap: 8px; margin-top: auto; }
.rv-redline-actions button { flex: 1; padding: 8px 14px; font-size: 13px; }
.rv-redline-preview { padding: 18px 20px; overflow-y: auto; background: var(--paper-2); }
.rv-doc-preview { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 6px; padding: 24px 32px; margin-top: 6px; line-height: 1.6; font-size: 13.5px; color: var(--ink); max-height: 70vh; overflow-y: auto; }
.rv-doc-preview p { margin: 0 0 10px; }
.rv-doc-preview h1, .rv-doc-preview h2, .rv-doc-preview h3 { font-family: var(--serif); margin: 16px 0 8px; }
.rv-doc-highlight {
  background: #fff59d;
  padding: 1px 3px; border-radius: 2px;
  box-shadow: 0 0 0 2px #ffeb3b inset;
  cursor: help;
}
.rv-doc-nofind {
  background: rgba(184,127,0,.10); border-left: 3px solid #b87f00;
  padding: 8px 12px; margin: 0 0 10px;
  font-size: 12px; color: #b87f00;
}

@media (max-width: 900px) {
  .rv-redline-detail-body { grid-template-columns: 1fr; height: 80vh; }
  .rv-redline-side { border-right: none; border-bottom: 1px solid var(--rule-soft); }
}

/* View tabs (Document / Grid) and per-doc tabs */
.rv-view-tabs { margin-bottom: 14px; }
.rv-viewbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--rule-soft); }
.rv-viewpills { display: flex; gap: 4px; padding: 3px; background: var(--paper-2); border-radius: 6px; }
.rv-viewpill {
  padding: 6px 14px;
  background: transparent; border: none; border-radius: 4px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--ink-3); cursor: pointer;
  transition: background .15s, color .15s;
}
.rv-viewpill.is-active { background: var(--ink); color: var(--paper); }
.rv-viewpill:not(.is-active):hover { color: var(--ink); }

.rv-doctabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.rv-doctab {
  padding: 5px 12px;
  background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 4px;
  font-size: 12.5px; color: var(--ink-2); cursor: pointer;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.rv-doctab.is-active { background: var(--accent-deep); color: var(--paper); border-color: var(--accent-deep); }
.rv-doctab:not(.is-active):hover { border-color: var(--ink); color: var(--ink); }

/* Inline document view (default for both kinds).
   Fixed height that fits within the viewport so the page itself
   still scrolls (header/tabs/footer reachable via browser scroll).
   Inside, the sidebar and doc panel each have their own scroll —
   three scrollbars total. */
.rv-docview {
  display: grid;
  grid-template-columns: var(--rv-rail-width, 360px) 6px 1fr;
  grid-template-rows: 1fr;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--rule-soft); border-radius: 8px;
  height: 75vh;
  min-height: 540px;
  overflow: hidden;
}
/* Drag handle between sidebar and main doc area. Slim by default,
   thicker hover state for grab affordance. Sits in its own grid
   column so the mouse never overlaps the sidebar's scrollbar. */
.rv-rail-resize {
  cursor: col-resize;
  background: var(--rule-soft);
  position: relative;
  transition: background 0.15s ease;
  user-select: none;
}
.rv-rail-resize:hover,
.rv-rail-resize:focus {
  background: var(--accent-deep);
  outline: none;
}
/* Visual grip dots */
.rv-rail-resize::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2px; height: 32px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 1px;
}
.rv-rail-resize:hover::after,
.rv-rail-resize:focus::after {
  background: var(--paper);
}
.rv-docview-side {
  border-right: 1px solid var(--rule-soft);
  background: var(--paper-2);
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.rv-docview-side-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
}
.rv-docview-counter { color: var(--accent-deep); }
/* Single scrolling container that holds overview + bulk bar +
   findings list. Was: only .rv-live-findings scrolled, but with the
   new tall overview card the content was cut off. Now everything
   between header and footer scrolls together with a wide native
   scrollbar. */
.rv-docview-side-scroll {
  flex: 1; min-height: 0;
  overflow-y: scroll;
  scrollbar-width: auto;
  scrollbar-color: rgba(0,0,0,.4) rgba(0,0,0,.06);
}
.rv-docview-side-scroll::-webkit-scrollbar { width: 14px; }
.rv-docview-side-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,.04); }
.rv-docview-side-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.35);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 8px;
}
.rv-docview-side-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.55);
  background-clip: content-box;
}
.rv-docview-side .rv-live-findings { padding: 10px 12px; }
.rv-docview-side-foot {
  border-top: 1px solid var(--rule-soft);
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 6px;
  flex-shrink: 0;
}

/* Main doc area — scrolls internally with a wide, visible
   scrollbar so it reads as a primary scroll target instead of a
   hidden one. */
.rv-docview-main {
  position: relative;
  min-height: 0;
  overflow-y: scroll;        /* always show scrollbar so it doesn't shift content */
  padding: 24px 32px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);

  /* Firefox */
  scrollbar-width: auto;
  scrollbar-color: rgba(0,0,0,.4) rgba(0,0,0,.06);
}
/* Chromium / WebKit — make the doc panel scrollbar look like the
   browser's native (wide, visible thumb). */
.rv-docview-main::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}
.rv-docview-main::-webkit-scrollbar-track {
  background: rgba(0,0,0,.04);
  border-left: 1px solid var(--rule-soft);
}
.rv-docview-main::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.35);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 8px;
}
.rv-docview-main::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.55);
  background-clip: content-box;
}
.rv-live-finding-pending { opacity: .7; border-style: dashed; }

/* Per-document overview card — summary + red flags. Sits at the top
   of the findings sidebar in doc view. Auto-generated alongside the
   per-cell fanout. */
.rv-overview { padding: 0; flex-shrink: 0; }
.rv-overview-card {
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--paper);
}
.rv-overview-loading, .rv-overview-error {
  padding: 14px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: .04em;
  border-bottom: 1px solid var(--rule-soft);
}
.rv-overview-error { color: #b22222; }
.rv-overview-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.rv-overview-summary { margin-bottom: 12px; }
.rv-overview-summary-text { font-size: 14px; line-height: 1.6; color: var(--ink); }
.rv-overview-risks { display: flex; flex-direction: column; gap: 8px; }
.rv-risk {
  padding: 8px 10px;
  border-left: 3px solid var(--rule-soft);
  background: var(--paper-2);
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.rv-risk:hover { background: rgba(0,0,0,.04); }
.rv-risk-high   { border-left-color: #b22222; background: rgba(178,34,34,.04); }
.rv-risk-medium { border-left-color: #b87f00; background: rgba(184,127,0,.04); }
.rv-risk-low    { border-left-color: var(--ink-3); }
.rv-risk-head { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.rv-risk-sev {
  display: inline-block;
  font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .05em;
  padding: 1px 5px; border-radius: 2px;
}
.rv-risk-sev-high   { background: #b22222; color: white; }
.rv-risk-sev-medium { background: #b87f00; color: white; }
.rv-risk-sev-low    { background: var(--ink-3); color: white; }
.rv-risk-title { font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--ink); flex: 1; line-height: 1.35; }
.rv-risk-detail { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin-bottom: 4px; }
.rv-risk-quote {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
  color: var(--ink-3); padding: 5px 7px;
  background: rgba(0,0,0,.03); border-radius: 2px;
  border-left: 2px solid var(--rule-soft);
}
.rv-risk-page { color: var(--accent-deep); font-style: normal; }

/* Risk action buttons + inline rewrite-suggestion form. Lets the
   user spawn an AI rewrite of a flagged clause without leaving the
   sidebar. */
.rv-risk-actions { display: flex; gap: 6px; margin-top: 8px; }
.rv-risk-suggest-btn {
  padding: 5px 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  background: var(--paper);
  border: 1px solid var(--rule-soft); border-radius: 4px;
  color: var(--ink-2); cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.rv-risk-suggest-btn:hover {
  border-color: var(--accent-deep);
  color: var(--accent-deep);
  background: rgba(10,125,87,.04);
}
.rv-risk-suggest-form {
  margin-top: 8px;
  padding: 10px 10px 8px;
  border: 1px dashed var(--accent-deep); border-radius: 6px;
  background: rgba(10,125,87,.04);
  display: flex; flex-direction: column; gap: 8px;
}
.rv-risk-suggest-input {
  width: 100%; padding: 7px 9px;
  border: 1px solid var(--rule-soft); border-radius: 4px;
  font-family: var(--sans); font-size: 12.5px; line-height: 1.5;
  background: var(--paper); color: var(--ink);
  resize: vertical; min-height: 56px;
}
.rv-risk-suggest-input:focus { outline: none; border-color: var(--accent-deep); }
.rv-risk-suggest-actions { display: flex; gap: 6px; justify-content: flex-end; }
.rv-risk-suggest-cancel {
  padding: 4px 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  background: transparent; border: 1px solid var(--rule-soft); border-radius: 4px;
  color: var(--ink-3); cursor: pointer;
}
.rv-risk-suggest-cancel:hover { color: var(--ink); }
.rv-risk-suggest-go { padding: 4px 14px !important; font-size: 11px !important; }
.rv-risk-suggest-status {
  font-family: var(--mono); font-size: 10.5px;
  padding: 6px 8px; border-radius: 3px;
}
.rv-risk-suggest-status.is-running { background: rgba(56,98,170,.10); color: #3862aa; }
.rv-risk-suggest-status.is-error   { background: rgba(178,34,34,.10); color: #722; }
.rv-risk-suggest-result {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 6px; border-top: 1px dashed var(--rule-soft);
}
.rv-risk-suggest-block { display: flex; flex-direction: column; gap: 4px; }
.rv-risk-suggest-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.rv-risk-suggest-find {
  background: rgba(178,34,34,.06);
  border-left: 2px solid #c14040;
  padding: 6px 8px; border-radius: 0 3px 3px 0;
  font-family: var(--serif); font-size: 13px; line-height: 1.5;
  color: var(--ink-2);
}
.rv-risk-suggest-replace {
  background: rgba(10,125,87,.05);
  border-left: 2px solid #4a8a64;
  padding: 6px 8px; border-radius: 0 3px 3px 0;
  font-family: var(--serif); font-size: 13.5px; line-height: 1.55;
  color: var(--ink);
}
.rv-risk-suggest-copy {
  align-self: flex-start;
  margin-top: 4px;
  padding: 4px 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  background: var(--paper);
  border: 1px solid var(--rule-soft); border-radius: 4px;
  color: var(--ink-2); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.rv-risk-suggest-copy:hover { border-color: var(--ink); color: var(--ink); }
.rv-risk-suggest-rationale {
  font-size: 12px; line-height: 1.55; color: var(--ink-3);
  font-style: italic;
}

/* When the AI's rewrite suggestion is rendered inside a red-flag card,
   reuse the same finding-card chrome the saved findings use, but with
   a subtle "proposed, not saved yet" tint so the user understands
   they still need to Accept to commit it. */
.rv-live-finding-suggest {
  background: rgba(245, 218, 130, .07);
  border-left: 2px solid rgba(212, 168, 44, .55);
  padding-left: 10px;
  border-radius: 0 4px 4px 0;
}
.rv-live-finding-suggest .rv-live-finding-col {
  color: #8a6a14;
}

/* Bulk action bar (Accept all / Reject all / Reset) above the
   findings list. */
.rv-docview-bulkbar {
  display: flex; gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--paper);
  flex-shrink: 0;
}
.rv-docview-bulkbar button {
  flex: 1; padding: 5px 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  border: 1px solid var(--rule-soft); border-radius: 4px;
  background: var(--paper); color: var(--ink-3);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.rv-bulk-acc:hover { background: #0a7d57; color: white; border-color: #0a7d57; }
.rv-bulk-rej:hover { background: #b22222; color: white; border-color: #b22222; }
.rv-bulk-pen:hover { background: var(--ink-2); color: white; border-color: var(--ink-2); }

/* Per-cell "Refine with AI" — user types an instruction, AI rewrites
   the proposed replacement in-place. */
.rv-cell-refine-btn {
  padding: 4px 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  border: 1px solid var(--rule-soft); border-radius: 3px;
  background: var(--paper); color: var(--ink-3);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.rv-cell-refine-btn:hover { background: var(--accent-deep); color: white; border-color: var(--accent-deep); }
.rv-cell-refine-form {
  margin-top: 8px;
  padding: 10px 10px 8px;
  border: 1px dashed var(--accent-deep); border-radius: 6px;
  background: rgba(184,127,0,.04);
  display: flex; flex-direction: column; gap: 8px;
}
.rv-cell-refine-input {
  width: 100%; padding: 6px 8px;
  border: 1px solid var(--rule-soft); border-radius: 4px;
  font-family: var(--sans); font-size: 12px; line-height: 1.45;
  background: var(--paper); color: var(--ink);
  resize: vertical; min-height: 50px;
}
.rv-cell-refine-input:focus { outline: none; border-color: var(--accent-deep); }
.rv-cell-refine-actions { display: flex; gap: 6px; justify-content: flex-end; }
.rv-cell-refine-cancel {
  padding: 4px 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  background: transparent; border: 1px solid var(--rule-soft); border-radius: 4px;
  color: var(--ink-3); cursor: pointer;
}
.rv-cell-refine-cancel:hover { color: var(--ink); }
.rv-cell-refine-go { padding: 4px 12px !important; font-size: 11px !important; }
.rv-cell-refine-status { font-family: var(--mono); font-size: 10.5px; padding: 4px 6px; border-radius: 3px; }
.rv-cell-refine-status.is-running { background: rgba(56,98,170,.10); color: #3862aa; }
.rv-cell-refine-status.is-error   { background: rgba(178,34,34,.10); color: #722; }

@media (max-width: 760px) {
  .rv-docview { grid-template-columns: 1fr; height: auto; }
  .rv-docview-side { max-height: 40vh; border-right: none; border-bottom: 1px solid var(--rule-soft); }
  .rv-rail-resize { display: none; }
}

/* Live preview — full-screen "scanning the document" view */
.rv-live-modal { padding: 0; }
.rv-live-inner {
  width: 100vw; height: 100vh;
  background: var(--paper);
  display: flex; flex-direction: column;
}
.rv-live-head {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--paper-2);
}
.rv-live-close {
  background: transparent; border: none; color: var(--ink-3); cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 4px 8px;
}
.rv-live-close:hover { color: var(--ink); }
.rv-live-title { flex: 1; margin: 0; font-family: var(--serif); font-size: 18px; color: var(--ink); }
.rv-live-progress { font-family: var(--mono); font-size: 11px; color: var(--accent-deep); letter-spacing: .04em; }
.rv-live-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 360px 1fr;
}
.rv-live-side {
  border-right: 1px solid var(--rule-soft);
  background: var(--paper-2);
  overflow-y: auto;
  padding: 14px 16px;
}
.rv-live-side-head {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 8px;
}
.rv-live-findings { display: flex; flex-direction: column; gap: 10px; }
.rv-live-finding {
  padding: 10px 12px;
  border: 1px solid var(--rule-soft); border-radius: 6px;
  background: var(--paper);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.rv-live-finding:hover { border-color: var(--ink); }
.rv-live-finding.is-accepted { border-left: 3px solid #0a7d57; background: rgba(10,125,87,.04); }
.rv-live-finding.is-rejected { border-left: 3px solid #b22222; background: rgba(178,34,34,.04); opacity: .65; }
.rv-live-finding-na { opacity: .55; }
.rv-live-finding-na-text { font-style: italic; font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.rv-live-finding-col { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--accent-deep); margin-bottom: 5px; }
.rv-live-finding-rationale { font-size: 14px; line-height: 1.55; color: var(--ink); margin-bottom: 8px; }
.rv-live-finding-diff { display: grid; grid-template-columns: 1fr 14px 1fr; gap: 4px; align-items: start; font-family: var(--mono); font-size: 11.5px; line-height: 1.45; margin-bottom: 10px; }
.rv-live-finding-from { background: rgba(178,34,34,.06); padding: 5px 7px; border-radius: 3px; color: var(--ink-2); }
.rv-live-finding-to { background: rgba(10,125,87,.06); padding: 5px 7px; border-radius: 3px; color: var(--ink-2); }
.rv-live-finding-arrow { text-align: center; color: var(--ink-3); }
.rv-live-finding-actions { display: flex; gap: 4px; }
.rv-live-finding-actions button { flex: 1; padding: 5px 0; font-size: 11.5px; }

/* Header row — col-name on the left, minimize chevron on the right.
   Replaces the previous bare .rv-live-finding-col so every card has
   a manual minimize affordance regardless of its status. */
.rv-live-finding-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.rv-live-finding-head .rv-live-finding-col { margin-bottom: 0; }

/* Resolved-bar — the compact one-line summary that appears when a
   finding has been accepted or rejected. Hidden by default; shown
   only when card is BOTH collapsed AND resolved. */
.rv-live-finding-resolved-bar {
  display: none;
  align-items: center; justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-2);
}
.rv-live-finding-resolved-label { letter-spacing: .04em; }
.rv-live-finding.is-accepted .rv-live-finding-resolved-label { color: #0a7d57; }
.rv-live-finding.is-rejected .rv-live-finding-resolved-label { color: #b22222; }
.rv-live-finding-resolved-actions { display: inline-flex; gap: 4px; }
.rv-cell-undo {
  background: transparent;
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  padding: 2px 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--ink-2); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.rv-cell-undo:hover {
  border-color: var(--ink); color: var(--ink); background: rgba(0,0,0,.03);
}

/* Universal minimize/expand chevron used on finding cards AND risk
   cards. Rotates 180° when the parent card is collapsed so the
   triangle points the other way. */
.rv-card-toggle {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1;
  color: var(--ink-3); cursor: pointer;
  transition: color .15s, transform .2s ease;
}
.rv-card-toggle:hover { color: var(--ink); }
.rv-live-finding.is-collapsed .rv-card-toggle,
.rv-risk.is-collapsed .rv-card-toggle {
  transform: rotate(-90deg);
}

/* Collapsed-card rules — apply to both manually-minimized AND auto-
   collapsed-on-resolve cards. Hide the verbose body, leave just the
   header and (if resolved) the one-line status bar. */
.rv-live-finding.is-collapsed {
  padding: 7px 10px;
  opacity: 1;     /* override the .is-rejected dim so the bar stays readable */
}
.rv-live-finding.is-collapsed.is-rejected { opacity: .85; }
.rv-live-finding.is-collapsed .rv-live-finding-rationale,
.rv-live-finding.is-collapsed .rv-live-finding-diff,
.rv-live-finding.is-collapsed .rv-live-finding-actions,
.rv-live-finding.is-collapsed .rv-cell-refine-form {
  display: none;
}
.rv-live-finding.is-collapsed .rv-live-finding-head { margin-bottom: 0; }
.rv-live-finding.is-collapsed.is-accepted .rv-live-finding-resolved-bar,
.rv-live-finding.is-collapsed.is-rejected .rv-live-finding-resolved-bar {
  display: flex;
}

/* Risk cards — same pattern. Collapsed shows just the severity badge
   + title row; everything else (detail, quote, suggest button +
   form) is hidden until expanded. */
.rv-risk-head { display: flex; align-items: center; gap: 8px; }
.rv-risk-head .rv-risk-title { flex: 1; min-width: 0; }
.rv-risk.is-collapsed .rv-risk-detail,
.rv-risk.is-collapsed .rv-risk-quote,
.rv-risk.is-collapsed .rv-risk-actions,
.rv-risk.is-collapsed .rv-risk-suggest-form {
  display: none;
}

/* Red-flag finding cards — IDENTICAL chrome to user-defined finding
   cards. The only difference is in the title row: a colored severity
   pill + "RED FLAG" label sit alongside the title text. No left-edge
   accent border, no background tint — severity is conveyed by the
   pill alone so the rest of the card matches the user findings
   surrounding it. */
.rv-risk-col {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  /* All other typography inherits from .rv-live-finding-col so this
     row reads as just another column header, only with extra pills. */
}
.rv-risk-sev-pill {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rv-risk-sev-pill.rv-risk-sev-high   { background: #b22222; color: #fff; }
.rv-risk-sev-pill.rv-risk-sev-medium { background: #c98a14; color: #fff; }
.rv-risk-sev-pill.rv-risk-sev-low    { background: #6a7c8e; color: #fff; }
.rv-risk-flag-label {
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .08em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.rv-risk-title-text {
  flex: 1; min-width: 0;
  /* Inherit mono font / accent color / size / spacing from the
     parent .rv-live-finding-col so the title looks identical to a
     column header. Sentence case, not uppercased. */
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

.rv-live-doc {
  position: relative;
  overflow-y: auto;
  padding: 28px 36px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.rv-live-doc-body {
  background: var(--paper);
  max-width: 720px; margin: 0 auto;
  padding: 40px 56px;
  border: 1px solid var(--rule-soft); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  font-size: 14px; line-height: 1.7;
  max-height: none;
  overflow: visible;
  height: auto;        /* let content drive height; the parent .rv-docview-main scrolls */
}

/* Zoom toolbar — floats top-right inside .rv-docview-main. Three
   compact buttons: − [ % ] +. Sticky so it stays in view while
   scrolling the doc. */
.rv-doc-zoom-bar {
  position: sticky;
  top: 8px;
  margin-left: auto;
  margin-right: 8px;
  margin-bottom: -36px;       /* don't push the doc body down */
  z-index: 10;
  display: inline-flex;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  overflow: hidden;
  width: max-content;
  font-family: var(--mono);
  float: right;
}
.rv-doc-zoom-btn,
.rv-doc-zoom-level {
  border: none;
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
  padding: 5px 10px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  transition: background .12s ease, color .12s ease;
}
.rv-doc-zoom-btn {
  font-size: 16px;
  font-weight: 500;
  width: 32px;
}
.rv-doc-zoom-btn:hover,
.rv-doc-zoom-level:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.rv-doc-zoom-level {
  min-width: 56px;
  text-align: center;
  border-left: 1px solid var(--rule-soft);
  border-right: 1px solid var(--rule-soft);
  font-size: 11.5px;
  letter-spacing: .04em;
}
.rv-live-doc-body .rv-doc-preview-page {
  /* The HTML mammoth produced may not have margins on its outer
     elements; ensure paragraphs flow naturally and the doc body
     can grow as tall as needed inside the scrolling parent. */
  min-height: 100%;
}

/* Scanner sweep — visible while at least one cell is running */
.rv-live-scanner {
  position: absolute; left: 0; right: 0; top: 0;
  height: 0;
  pointer-events: none;
  z-index: 5;
}
.rv-live-scanner.is-active::before {
  content: '';
  position: absolute; left: 5%; right: 5%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-deep) 50%, transparent 100%);
  box-shadow: 0 0 20px var(--accent-deep);
  opacity: .55;
  animation: rv-scan-sweep 4s ease-in-out infinite;
}
@keyframes rv-scan-sweep {
  0%   { top: 0; opacity: 0; }
  10%  { opacity: .55; }
  50%  { top: 50vh; opacity: .55; }
  90%  { opacity: .55; }
  100% { top: 100vh; opacity: 0; }
}

/* Word-style tracked-changes preview in the doc body.
   Each proposed edit lays down two adjacent spans: rv-rdln-find
   wrapping the original text, rv-rdln-ins right after it carrying
   the proposed replacement. CSS controls visibility per status so
   the visual matches what a Word doc with track changes would
   show — and matches the FINAL output the user will send to
   opposing counsel. */
.rv-rdln-find, .rv-rdln-ins { transition: background .25s, color .25s, box-shadow .25s, opacity .25s; }

/* Pending — AI proposed it, user hasn't decided. Yellow highlight
   on the original; insertion hidden (it shows on hover via the
   sibling's title attr). */
.rv-rdln-find.is-pending {
  background: #fff59d;
  padding: 1px 2px; border-radius: 2px;
  box-shadow: 0 0 0 2px #ffeb3b inset;
  cursor: help;
}
.rv-rdln-ins.is-pending { display: none; }

/* Accepted — Word track-changes look. Original gets red strikethrough,
   the replacement is shown right next to it as a green underline so
   the user (and opposing counsel) can see exactly what changed. */
.rv-rdln-find.is-accepted {
  color: #b22222;
  text-decoration: line-through;
  text-decoration-color: rgba(178,34,34,.7);
  background: rgba(178,34,34,.06);
  padding: 1px 2px; border-radius: 2px;
}
.rv-rdln-ins.is-accepted {
  display: inline;
  color: #0a7d57;
  text-decoration: underline;
  text-decoration-color: rgba(10,125,87,.5);
  background: rgba(10,125,87,.08);
  padding: 1px 2px; border-radius: 2px;
  margin-left: 2px;
}

/* Rejected — text reads as if the AI never proposed anything. No
   markup, no highlight. Keeps the doc readable. */
.rv-rdln-find.is-rejected {
  background: transparent;
  box-shadow: none;
  color: inherit;
  padding: 0;
  text-decoration: none;
}
.rv-rdln-ins.is-rejected { display: none; }

/* Extraction (extraction-mode reviews) — blue, read-only. */
.rv-rdln-find.is-extraction {
  background: rgba(56,98,170,.12);
  padding: 1px 2px; border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(56,98,170,.5) inset;
}
.rv-rdln-ins.is-extraction { display: none; }

/* Pulse — when a finding lands for the first time during streaming */
.rv-rdln-find.is-pulse {
  animation: rv-finding-pulse 1.6s ease-out 1;
}
@keyframes rv-finding-pulse {
  0%   { background: #ffd54f; box-shadow: 0 0 0 6px rgba(255,213,79,.6) inset, 0 0 16px rgba(255,213,79,.7); transform: scale(1.02); }
  50%  { background: #fff59d; box-shadow: 0 0 0 4px rgba(255,213,79,.3) inset, 0 0 8px rgba(255,213,79,.4); transform: scale(1); }
  100% { background: #fff59d; box-shadow: 0 0 0 2px #ffeb3b inset; transform: scale(1); }
}

/* Flash on click — vivid orange burst, fades back to persistent color */
.rv-rdln-find.is-flash {
  animation: rv-finding-flash 1.6s ease-out 1;
  position: relative;
  z-index: 5;
}
@keyframes rv-finding-flash {
  0%   {
    background: #ff6f00;
    box-shadow: 0 0 0 5px #ff6f00 inset, 0 0 0 6px rgba(255,111,0,.55), 0 0 28px rgba(255,111,0,.85);
    transform: scale(1.06);
    color: white;
  }
  35%  {
    background: #ffa726;
    box-shadow: 0 0 0 4px #ff8f00 inset, 0 0 0 4px rgba(255,143,0,.35), 0 0 18px rgba(255,143,0,.6);
    transform: scale(1.03);
    color: var(--ink);
  }
  100% { transform: scale(1); }
}

/* Live-preview button on the row */
.rv-watch-btn {
  display: block;
  margin-bottom: 6px;
  padding: 5px 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  background: var(--paper); color: var(--accent-deep);
  border: 1px solid var(--accent-deep); border-radius: 4px;
  cursor: pointer; white-space: nowrap;
}
.rv-watch-btn:hover { background: var(--accent-deep); color: var(--paper); }

@media (max-width: 760px) {
  .rv-live-body { grid-template-columns: 1fr; }
  .rv-live-side { border-right: none; border-bottom: 1px solid var(--rule-soft); max-height: 35vh; }
}

/* Cell detail modal */
.rv-detail-body { display: flex; flex-direction: column; gap: 14px; }
.rv-detail-meta { font-size: 13px; color: var(--ink-2); }
.rv-detail-label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.rv-detail-q div, .rv-detail-a div { font-size: 14px; line-height: 1.55; }
.rv-detail-quote blockquote { margin: 0; padding: 12px 16px; border-left: 3px solid var(--accent-deep); background: var(--paper-2); font-size: 13.5px; line-height: 1.55; font-style: italic; }
.rv-detail-err pre { background: rgba(178,34,34,.06); padding: 10px; border-radius: 4px; font-size: 11.5px; overflow-x: auto; }

/* ---------- Project strip on workspace landing ---------- */
.proj-strip {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px; padding: 10px 14px;
  border: 1px dashed var(--rule-soft); border-radius: 8px;
  background: var(--paper-2);
}
.proj-strip-label { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .04em; flex-shrink: 0; }
.proj-strip-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.proj-strip-chip {
  display: inline-block; padding: 4px 12px;
  background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 999px;
  text-decoration: none; color: var(--ink-2);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.proj-strip-chip:hover { border-color: var(--ink); color: var(--ink); }
.proj-strip-chip.is-drop-target {
  background: var(--accent-deep); color: var(--paper); border-color: var(--accent-deep);
  transform: scale(1.04);
}
.proj-strip-new {
  background: transparent; border: 1px dashed var(--rule-soft); border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3);
  cursor: pointer;
}
.proj-strip-new:hover { color: var(--ink); border-color: var(--ink); }
.proj-strip-newform { display: inline-block; }
.proj-strip-newinput {
  padding: 4px 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  border: 1px solid var(--ink); border-radius: 999px;
  background: var(--paper); color: var(--ink);
  width: 220px;
}
.proj-strip-newinput:focus { outline: none; border-color: var(--accent-deep); }
.proj-strip-newinput.is-error { border-color: #b22222; }

/* Inline-edit project title */
.proj-title-input {
  font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.05; letter-spacing: -.012em;
  color: var(--ink);
  background: var(--paper);
  border: none;
  border-bottom: 2px solid var(--ink);
  outline: none;
  padding: 0 4px;
  width: 100%; max-width: 720px;
  margin-bottom: 12px;
}
.proj-title-input.is-error { border-bottom-color: #b22222; }

.ws-row-proj-badge {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-deep);
  margin-right: 8px; vertical-align: middle;
}
.ws-row-wrap {
  cursor: grab;
}
.ws-row-wrap.is-dragging { opacity: .4; cursor: grabbing; }

/* ---------- Projects ---------- */
.proj-card {
  display: block;
  padding: 18px 18px 14px;
  border: 1px solid var(--rule-soft); border-radius: 8px;
  background: var(--paper);
  text-decoration: none; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.proj-card:hover { border-color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.proj-card-name { font-family: var(--serif); font-size: 18px; line-height: 1.2; color: var(--ink); margin-bottom: 6px; }
.proj-card-desc { font-size: 13px; color: var(--ink-2); line-height: 1.5; min-height: 40px; max-height: 60px; overflow: hidden; }
.proj-card-meta { display: flex; gap: 14px; margin-top: 12px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .03em; }

/* Single-project view sections */
.proj-section { margin-bottom: 32px; }
.proj-section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-soft); }
.proj-section-title { font-family: var(--serif); font-size: 18px; margin: 0; color: var(--ink); }
.proj-count { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-left: 8px; letter-spacing: .04em; }

.ws-btn-secondary {
  display: inline-block; padding: 8px 14px;
  border: 1px solid var(--rule-soft); border-radius: 4px;
  background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: border-color .15s ease;
}
.ws-btn-secondary:hover:not(:disabled) { border-color: var(--ink); }

/* ---------- Workflows ---------- */
.wf-card-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.wf-card-kind {
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(0,0,0,.06); color: var(--ink-2);
}
.wf-card-curated {
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(184,127,0,.16); color: #b87f00;
}
.wf-card-practice {
  font-family: var(--mono); font-size: 10px; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(56,98,170,.10); color: #3862aa;
}
.wf-prompt {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.55;
  white-space: pre-wrap; word-wrap: break-word;
  padding: 16px 20px;
  background: var(--paper-2);
  border-radius: 6px;
  margin: 0;
}
.wf-cols { display: flex; flex-direction: column; gap: 12px; }
.wf-col {
  border-left: 3px solid var(--accent-deep);
  padding: 4px 14px;
}
.wf-col-name { font-family: var(--serif); font-size: 16px; color: var(--ink); margin-bottom: 2px; }
.wf-col-prompt { font-size: 13px; color: var(--ink-2); line-height: 1.5; }

.wf-kind-picker { display: flex; flex-direction: column; gap: 6px; }
.wf-kind-opt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }

#wf-prompt {
  width: 100%;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.55;
  padding: 12px 14px;
  border: 1px solid var(--rule-soft); border-radius: 6px;
  resize: vertical;
}

/* ---------- Account / BYOK ---------- */
.acct-byok-intro p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0 0 16px; }
.acct-byok-rows { display: flex; flex-direction: column; gap: 18px; }
.byok-row { padding: 16px 18px; border: 1px solid var(--rule-soft); border-radius: 6px; background: var(--paper); }
.byok-row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.byok-row-title { font-family: var(--serif); font-size: 16px; color: var(--ink); }
.byok-status { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--accent-deep); }
.byok-status.muted { color: var(--ink-3); }
.byok-status code { font-family: var(--mono); font-size: 11px; background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 2px; }
.byok-row-help { font-size: 12px; color: var(--ink-3); margin: 0 0 10px; }
.byok-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.byok-form input {
  flex: 1; min-width: 240px; padding: 8px 12px;
  border: 1px solid var(--rule-soft); border-radius: 4px;
  font-family: var(--mono); font-size: 12px;
  background: var(--paper-2); color: var(--ink);
}
.byok-form input:focus { outline: none; border-color: var(--ink); }
.byok-remove {
  background: var(--paper); color: var(--ink-3);
  border: 1px solid var(--rule-soft); border-radius: 4px;
  padding: 8px 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
}
.byok-remove:hover { background: #b22222; color: white; border-color: #b22222; }

/* ============================================================
   Compare two contracts (/workspace/compare/)
   ============================================================ */
.cmp-shell { max-width: 1100px; }

/* Modal: doc pickers side-by-side with a small "vs" between */
.cmp-doc-pickers {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: end;
  margin-top: 4px;
}
.cmp-doc-pickers .rv-field { margin: 0; }
.cmp-vs {
  font-family: var(--serif); font-style: italic;
  font-size: 18px; color: var(--ink-3);
  padding-bottom: 10px;
  text-align: center;
}

/* Detail header meta — your template vs theirs */
.cmp-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px; align-items: center;
  border: 1px solid var(--rule-soft); border-radius: 8px;
  background: var(--paper-2);
  padding: 14px 18px;
  margin-bottom: 22px;
}
.cmp-meta-doc { min-width: 0; }
.cmp-meta-doc > div {
  font-family: var(--serif); font-size: 16px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmp-meta-label {
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;
}
.cmp-meta-vs {
  font-family: var(--serif); font-style: italic;
  font-size: 18px; color: var(--ink-3);
}

/* Loading + error blocks */
.cmp-loading {
  display: flex; align-items: center; gap: 12px;
  padding: 32px; border: 1px dashed var(--rule-soft); border-radius: 8px;
  background: var(--paper-2); color: var(--ink-2); font-size: 14px;
}
.cmp-error {
  padding: 18px; border: 1px solid #c97070; border-radius: 8px;
  background: #fff3f3; color: #8a1f1f; font-size: 13px;
  font-family: var(--mono);
}

/* Diff list */
.cmp-diff-list { display: flex; flex-direction: column; gap: 14px; }

.cmp-diff {
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--rule-soft);
  border-radius: 8px;
  background: var(--paper-2);
  padding: 16px 20px;
  transition: border-color .15s ease, background .15s ease;
}
.cmp-diff-high   { border-left-color: #c14040; }
.cmp-diff-medium { border-left-color: #d49a3a; }
.cmp-diff-low    { border-left-color: #6a8caf; }
.cmp-diff-info   { border-left-color: var(--rule-soft); }

.cmp-choice-accept_proposed { background: rgba(40,140,90,.04); border-color: rgba(40,140,90,.4); }
.cmp-choice-keep_base       { background: rgba(180,120,40,.04); border-color: rgba(180,120,40,.4); }

.cmp-diff-head {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 8px;
}
.cmp-sev {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; padding: 3px 7px; border-radius: 3px;
  background: var(--paper); border: 1px solid var(--rule-soft);
  color: var(--ink-2);
}
.cmp-sev-high   { background: #fdecec; border-color: #c14040; color: #8a1f1f; }
.cmp-sev-medium { background: #fdf3e0; border-color: #d49a3a; color: #7a4f10; }
.cmp-sev-low    { background: #eaf1f9; border-color: #6a8caf; color: #2c4a6e; }
.cmp-sev-info   { background: var(--paper); }

.cmp-section {
  font-family: var(--serif); font-size: 16px; color: var(--ink);
  font-weight: 500;
}
.cmp-type {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 2px 6px; border: 1px solid var(--rule-soft); border-radius: 3px;
}
.cmp-rec {
  margin-left: auto;
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 3px;
  border: 1px solid var(--rule-soft);
}
.cmp-rec-accept   { background: #e8f4ed; border-color: #4a8a64; color: #1f5a37; }
.cmp-rec-reject   { background: #fdecec; border-color: #c14040; color: #8a1f1f; }
.cmp-rec-negotiate { background: #fdf3e0; border-color: #d49a3a; color: #7a4f10; }

.cmp-why {
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
  margin: 6px 0 14px;
  padding: 8px 12px; border-left: 2px solid var(--rule-soft);
  background: rgba(0,0,0,.02);
}

.cmp-diff-bodies {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 12px;
}
.cmp-side {
  border: 1px solid var(--rule-soft); border-radius: 6px;
  padding: 12px 14px; background: var(--paper);
}
.cmp-side-base     { border-left: 2px solid #6a8caf; }
.cmp-side-proposed { border-left: 2px solid #d49a3a; }
.cmp-side-label {
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.cmp-side blockquote {
  margin: 0; font-family: var(--serif); font-size: 14px;
  line-height: 1.55; color: var(--ink); white-space: pre-wrap;
}
.cmp-side-empty {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  font-style: italic; padding: 8px 0;
}

.cmp-diff-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  border-top: 1px solid var(--rule-soft); padding-top: 12px;
}
.cmp-action {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; padding: 7px 14px;
  border: 1px solid var(--rule-soft); border-radius: 4px;
  background: var(--paper); color: var(--ink-2); cursor: pointer;
  transition: all .15s ease;
}
.cmp-action:hover { border-color: var(--ink); color: var(--ink); }
.cmp-action-keep.is-on   { background: #fdf3e0; border-color: #d49a3a; color: #7a4f10; }
.cmp-action-accept.is-on { background: #e8f4ed; border-color: #4a8a64; color: #1f5a37; }
.cmp-action-pending.is-on { background: var(--paper-2); border-color: var(--ink-3); color: var(--ink); }

.ws-btn-secondary {
  display: inline-block; padding: 9px 18px;
  border: 1px solid var(--rule-soft); border-radius: 4px;
  background: var(--paper); color: var(--ink-2);
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: all .15s ease;
}
.ws-btn-secondary:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.ws-btn-secondary:disabled { opacity: .4; cursor: not-allowed; }

.rv-head-meta { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.rv-counter { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

@media (max-width: 720px) {
  .cmp-meta { grid-template-columns: 1fr; }
  .cmp-meta-vs { display: none; }
  .cmp-doc-pickers { grid-template-columns: 1fr; }
  .cmp-doc-pickers .cmp-vs { display: none; }
  .cmp-diff-bodies { grid-template-columns: 1fr; }
}

/* ============================================================
   Composer research toolbar (statutes / case law / bills toggles)
   Lives directly above the chat composer in /workspace/chat/.
   ============================================================ */
.composer-research-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--rule-soft); border-radius: 6px;
  background: var(--paper-2);
  flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px;
  transition: border-color .2s ease, background .2s ease;
}
.composer-research-bar.is-active {
  border-color: var(--accent-deep);
  background: rgba(56, 98, 170, 0.04);
}
.research-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 6px;
  cursor: pointer;
  user-select: none;
  border-radius: 3px;
}
.research-toggle:hover { background: rgba(0, 0, 0, .04); }
.research-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent-deep);
}
.research-toggle-label {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.research-toggle input:checked + .research-toggle-label {
  color: var(--ink); font-weight: 500;
}
.research-toggle-state {
  font-family: var(--mono); font-size: 11px;
  padding: 3px 6px;
  border: 1px solid var(--rule-soft); border-radius: 3px;
  background: var(--paper);
  color: var(--ink); cursor: pointer;
}
.research-toggle-state:focus { outline: none; border-color: var(--accent-deep); }
.research-toggle-state[hidden] { display: none !important; }

/* Custom tooltip for the research bar — replaces native title="" so
   the help text is properly styled, wrapped, and readable. The bubble
   is rendered as a single shared element appended to <body> and
   repositioned per target. */
.research-tip {
  position: fixed;
  z-index: 200;
  max-width: 300px;
  padding: 9px 12px;
  background: #1d1d1d;
  color: #f4f1e8;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 6px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .14s ease, transform .14s ease;
}
.research-tip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.research-tip b {
  font-weight: 600;
  color: #fff;
}
.research-tip::after {
  content: "";
  position: absolute;
  left: var(--tip-arrow-x, 50%);
  width: 0; height: 0;
  border: 6px solid transparent;
  transform: translateX(-50%);
}
.research-tip[data-placement="top"]::after {
  bottom: -10px;
  border-top-color: #1d1d1d;
  border-bottom-width: 0;
}
.research-tip[data-placement="bottom"]::after {
  top: -10px;
  border-bottom-color: #1d1d1d;
  border-top-width: 0;
}
.research-divider {
  display: inline-block;
  color: var(--rule-soft);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 300;
  margin: 0 2px;
  user-select: none;
}
.research-divider[hidden] { display: none !important; }
.research-state-label {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.research-state-label[hidden] { display: none !important; }

/* Each kind (Statutes / Case law / Bills) groups its State + Federal
   toggles together. The label sits to the left of the pair. */
.research-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.research-group-label {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-3);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-right: 2px;
}

/* ============================================================
   Privacy mode — chat-wide visual state
   ============================================================
   The Privacy toggle lives in the chat header (chat-privacy-toggle)
   instead of the research bar. When on, the entire chat container
   takes on an amber tint with a soft pulsing border, signaling to
   the user that every message is being abstracted before sending.
   No per-message badge needed — the chrome itself communicates it.
*/

/* Header toggle — sits next to the model selector */
.chat-privacy-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  background: var(--paper);
  cursor: pointer;
  user-select: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-2);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.chat-privacy-toggle:hover {
  border-color: #d49a3a;
}
.chat-privacy-toggle input[type="checkbox"] {
  margin: 0;
  accent-color: #d49a3a;
  cursor: pointer;
}
.chat-privacy-toggle input:checked ~ .chat-privacy-toggle-label {
  color: #7a4f10;
  font-weight: 600;
}
.chat-privacy-toggle:has(input:checked) {
  background: #fdf3e0;
  border-color: #d49a3a;
}
.chat-privacy-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chat-privacy-toggle-lock {
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  transition: background .15s ease, transform .2s ease;
}
.chat-privacy-toggle-lock:hover {
  background: rgba(212, 154, 58, 0.25);
  transform: scale(1.1);
}

/* Chat-wide privacy state. Applied to .chat-main when toggle is on. */
.chat-main.is-privacy-on {
  position: relative;
  background:
    linear-gradient(180deg, rgba(253, 243, 224, 0.55) 0%, rgba(253, 243, 224, 0.18) 60px, transparent 240px);
}
.chat-main.is-privacy-on::before {
  /* Animated amber border ribbon along the top — subtle pulsing
     sheen so the privacy state feels alive, not static. */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    #d49a3a 0%,
    #f6c878 25%,
    #d49a3a 50%,
    #f6c878 75%,
    #d49a3a 100%);
  background-size: 200% 100%;
  animation: privacy-shimmer 4s linear infinite;
  pointer-events: none;
  z-index: 5;
}
.chat-main.is-privacy-on::after {
  /* Bottom edge marker — subtle but matches the top */
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(212, 154, 58, 0.4);
  pointer-events: none;
}
@keyframes privacy-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* When Privacy mode just toggled on, briefly flash the whole chat
   so the user can't miss the visual change. */
.chat-main.is-privacy-just-toggled {
  animation: privacy-flash 1.4s ease-out 1;
}
@keyframes privacy-flash {
  0%   { box-shadow: inset 0 0 0 0 rgba(212, 154, 58, 0); background-color: rgba(253, 243, 224, 0); }
  20%  { box-shadow: inset 0 0 0 4px rgba(212, 154, 58, 0.5); background-color: rgba(253, 243, 224, 0.8); }
  100% { box-shadow: inset 0 0 0 0 rgba(212, 154, 58, 0); background-color: transparent; }
}

/* Composer area inside privacy chat — slightly tinted so the user
   knows what they're typing will be abstracted. */
.chat-main.is-privacy-on .chat-composer {
  border-color: #d49a3a;
  background: #fdf8eb;
}
.chat-main.is-privacy-on #composer-input {
  background: transparent;
}
.chat-main.is-privacy-on #composer-input::placeholder {
  color: #b07c1e;
  font-style: italic;
}

/* Subtle amber accent on user bubbles when privacy was applied to
   that specific send. Independent of the chat-wide state — survives
   even if the user toggles privacy off later. */
.msg.user[data-privacy="1"] .msg-body {
  border-left: 2px solid #d49a3a;
  padding-left: 10px;
}
.research-status {
  margin-left: auto;
  font-family: var(--mono); font-size: 10px;
  color: var(--accent-deep);
  letter-spacing: .04em;
}
.research-info {
  border: 1px solid var(--rule-soft); border-radius: 50%;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); cursor: pointer;
  font-family: var(--serif); font-style: italic;
  font-size: 11px; color: var(--ink-3);
}
.research-info:hover { border-color: var(--accent-deep); color: var(--accent-deep); }

/* ============================================================
   Inline citation verification badges
   ============================================================ */
.cite-badge {
  display: inline-block;
  margin-left: 2px;
  padding: 1px 4px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 9px;
  vertical-align: super;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  line-height: 1;
}
.cite-badge.cite-verified {
  background: #e8f4ed; color: #1f5a37; border-color: #4a8a64;
}
.cite-badge.cite-secondary {
  background: #fdf3e0; color: #7a4f10; border-color: #d49a3a;
}
.cite-badge.cite-pending_amendment {
  background: #ffeacc; color: #8a4f1f; border-color: #e07f1f;
}
.cite-badge.cite-amended_enacted {
  background: #fdecec; color: #8a1f1f; border-color: #c14040;
  font-weight: 700;
}
.cite-badge.cite-unverified {
  background: #fdecec; color: #8a1f1f; border-color: #c14040;
}
.cite-badge.cite-pending {
  background: #f3f3f3; color: var(--ink-3); border-color: var(--rule-soft);
}

/* Citation verification summary pill — sits below an assistant
   message, very compact. Click to expand the full citation
   verification list in a modal. */
.msg-verify-pill {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px; padding: 2px 7px 2px 7px;
  border: 1px solid var(--rule-soft); border-radius: 3px;
  background: var(--paper-2);
  font-family: var(--mono); font-size: 9px; color: var(--ink-3);
  letter-spacing: .03em;
  line-height: 1.3;
  vertical-align: middle;
}
.msg-verify-pill.is-complete {
  background: #e8f4ed; border-color: #4a8a64; color: #1f5a37;
}
.msg-verify-pill.is-error,
.msg-verify-pill.is-timeout {
  background: #fdf3e0; border-color: #d49a3a; color: #7a4f10;
}
.msg-verify-pill.msg-verify-clickable {
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.msg-verify-pill.msg-verify-clickable:hover {
  border-color: #1f5a37;
  background: #d8eadf;
}
.msg-verify-caret {
  font-size: 8px;
  margin-left: 2px;
  opacity: .6;
}

/* Citation popup modal — fullscreen overlay with centered card. */
.cite-modal[hidden] { display: none !important; }
.cite-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.cite-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(20, 25, 35, 0.45);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.cite-modal-inner {
  position: relative;
  width: min(640px, 100%);
  max-height: 80vh;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule-soft); border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .25);
  overflow: hidden;
}
.cite-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--paper-2);
}
.cite-modal-title {
  font-family: var(--serif); font-size: 16px; font-weight: 500;
  margin: 0; color: var(--ink); letter-spacing: -.005em;
}
.cite-modal-close {
  border: none; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink-3);
  padding: 0 4px;
}
.cite-modal-close:hover { color: var(--ink); }
.cite-modal-body {
  overflow-y: auto;
  padding: 12px 18px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.cite-modal-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--rule-soft); border-radius: 5px;
  background: var(--paper-2);
  align-items: start;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cite-modal-row.is-focus {
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 2px rgba(56, 98, 170, 0.12);
}
.cite-modal-row-verified         { border-left: 3px solid #4a8a64; }
.cite-modal-row-secondary        { border-left: 3px solid #d49a3a; }
.cite-modal-row-pending_amendment { border-left: 3px solid #e07f1f; }
.cite-modal-row-amended_enacted  { border-left: 3px solid #c14040; background: #fdecec; }
.cite-modal-row-unverified       { border-left: 3px solid #c14040; }
.cite-modal-row-pending          { border-left: 3px solid var(--rule-soft); }
.cite-modal-icon {
  font-size: 16px;
  text-align: center;
  line-height: 1.4;
}
.cite-modal-content { min-width: 0; }
.cite-modal-raw {
  font-family: var(--serif); font-size: 14px; font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
  word-break: break-word;
}
.cite-modal-status {
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  color: var(--ink-3); text-transform: uppercase;
  margin-bottom: 6px;
}
.cite-modal-note {
  font-size: 12px; line-height: 1.5;
  padding: 6px 10px;
  border-left: 2px solid var(--ink-3);
  background: rgba(0,0,0,.03);
  color: var(--ink-2);
  margin-bottom: 6px;
  border-radius: 0 3px 3px 0;
}
.cite-modal-link {
  display: inline-block;
  font-family: var(--mono); font-size: 11px;
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent-deep);
  margin-top: 2px;
  word-break: break-all;
}
.cite-modal-link:hover {
  color: var(--ink);
  border-bottom-style: solid;
}
body.cite-modal-open { overflow: hidden; }

@media (max-width: 600px) {
  .cite-modal { padding: 12px; }
  .cite-modal-inner { max-height: 92vh; }
}

@media (max-width: 600px) {
  .composer-research-bar { gap: 8px; padding: 6px 8px; }
  .research-status { width: 100%; margin-left: 0; }
}

/* ============================================================
   Inline links + footnote refs in chat responses
   ============================================================ */
.msg-footref {
  display: inline-block;
  margin: 0 1px 0 2px;
  vertical-align: super;
  line-height: 1;
}
.msg-footref a {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  color: var(--accent-deep);
  text-decoration: none;
  letter-spacing: .04em;
}
.msg-footref a:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--paper);
}
/* Pending state — used by the streaming-render optimistic
   placeholder so the user sees a chip immediately instead of the
   raw URL chars accumulating, before the closing `)` arrives.
   Visually identical to the resolved chip, but slightly faded so
   it's not interactive yet. */
.msg-footref-pending a {
  cursor: default;
  opacity: 0.7;
  background: var(--paper-2);
}
.msg-footref-pending a:hover {
  background: var(--paper-2);
  border-color: var(--rule-soft);
  color: var(--accent-deep);
}
.msg-link-pending {
  color: var(--accent-deep);
  opacity: 0.7;
  text-decoration: underline;
  text-decoration-style: dotted;
  cursor: default;
}

.msg-link {
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.msg-link:hover { color: var(--ink); }

.msg-url {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  word-break: keep-all;
}
.msg-url:hover {
  color: var(--accent-deep);
  text-decoration-style: solid;
}

/* ============================================================
   Phase indicator — Claude / ChatGPT-style "what's happening
   right now" line. Single rotating spinner + a phase message
   that fades between activities as the server reports progress.
   Disappears entirely once the model starts streaming text.
   ============================================================ */
.msg-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 6px 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-style: italic;
  color: var(--ink-3);
  line-height: 1.2;
  letter-spacing: .01em;
  opacity: 1;
  transition: opacity 0.22s ease;
}
/* The author rule above has the same specificity as the UA's
   `[hidden] { display: none }`, but loads later, so it wins —
   meaning `el.hidden = true` would NOT actually hide the
   indicator. Explicit override below gives `[hidden]` higher
   specificity (0,2,0 vs 0,1,0) so it wins. */
.msg-status[hidden] { display: none !important; }
/* Pop-in: applied briefly when the indicator first reveals. JS
   adds the class while element has hidden=false, then removes it
   on next frame so opacity transitions 0 → 1. */
.msg-status.is-entering { opacity: 0; }
/* Vanish: applied when the indicator is being hidden entirely.
   The whole row fades out before display:none. */
.msg-status.is-vanishing { opacity: 0; }

.msg-status-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--rule-soft);
  border-top-color: var(--accent-deep);
  border-radius: 50%;
  animation: msg-status-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes msg-status-spin {
  to { transform: rotate(360deg); }
}

.msg-status-text {
  display: inline-block;
  opacity: 1;
  transition: opacity 0.18s ease;
}
/* Text-only fade for phase swaps. The parent stays at opacity 1
   so the spinner keeps spinning visibly while the text crossfades. */
.msg-status.is-fading .msg-status-text { opacity: 0; }

/* ============================================================
   Copy-response button on assistant messages
   ============================================================ */
.msg-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--rule-soft);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.msg.asst:hover .msg-actions,
.msg.asst:focus-within .msg-actions {
  opacity: 1;
}
.msg-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.msg-copy:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.msg-copy.is-copied {
  border-color: #4a8a64;
  background: #e8f4ed;
  color: #1f5a37;
}
.msg-copy svg {
  flex-shrink: 0;
}

/* ============================================================
 * Vault — per-user RAG knowledge base UI
 * ============================================================ */

.vault-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.vault-kind-filter {
  font-family: var(--mono); font-size: 11.5px;
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--rule-soft); border-radius: 4px;
  background: var(--paper); color: var(--ink); cursor: pointer;
}

.vault-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
}
.vault-layout:has(.vault-detail:not([hidden])) {
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 480px);
}

/* Vault list — line items, one row per vault item. Optimised for
   scanning hundreds of items: clear columns, hover highlight, click
   anywhere on the row (not the checkbox) to open the detail panel. */
.vault-list-wrap { display: flex; flex-direction: column; }
.vault-list-head, .vault-row {
  display: grid;
  grid-template-columns: 36px 110px minmax(220px, 1fr) minmax(120px, 1.2fr) 80px 130px;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--rule-soft);
}
.vault-list-head {
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  position: sticky;
  top: 0;
  z-index: 4;
}
.vault-row {
  background: var(--paper);
  cursor: pointer;
  transition: background .12s;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
}
.vault-row:hover { background: var(--paper-2); }
.vault-row.is-selected { background: rgba(56, 98, 170, .04); }
.vault-row-check { display: flex; align-items: center; justify-content: center; }
.vault-row-check input { cursor: pointer; }
.vault-col-kind { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vault-col-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vault-row-title {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vault-row-summary {
  font-family: var(--sans); font-size: 12px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vault-col-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  overflow: hidden;
}
.vault-col-meta {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vault-col-empty { color: var(--ink-3); font-size: 12px; }
.vault-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  background: var(--paper-2); border: 1px solid var(--rule-soft);
  padding: 1px 6px; border-radius: 3px; color: var(--ink-3);
  white-space: nowrap;
}

/* Sticky bulk-action bar — shown when at least one row is checked */
.vault-bulk-bar {
  position: sticky;
  top: 56px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin: 0 0 12px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 13px;
}
.vault-bulk-bar[hidden] { display: none; }
.vault-bulk-count {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  margin-right: auto;
}
.vault-bulk-bar .ws-btn {
  background: transparent;
  color: var(--paper);
  border-color: rgba(255,255,255,.3);
}
.vault-bulk-bar .ws-btn:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.6);
}

.vault-bulk-progress {
  padding: 10px 16px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  letter-spacing: .03em;
}

/* Tabs in the Add modal (paste vs upload) */
.vault-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 18px;
}
.vault-tab {
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.vault-tab.is-active { color: var(--ink); border-bottom-color: var(--accent-deep); }
.vault-tab:hover { color: var(--ink); }
.vault-tab-panel[hidden] { display: none; }

.vault-modal-upload-status {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-2);
  padding: 8px 10px;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  margin-top: 10px;
}

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

/* In-flight upload strip — one card per file, sticky just under
   the toolbar. Shows live status: "Uploading…" → "OCR running 3/5
   chunks · 60%" → "✓ 12k chars · Added to Vault". */
.vault-uploads-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
}
.vault-uploads-strip[hidden] { display: none; }
.vault-upload-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 140px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--accent-deep);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 13px;
  transition: border-color .25s, background .25s;
}
.vault-upload-row.is-done {
  border-left-color: #4a8a64;
  background: rgba(10, 125, 87, .04);
}
.vault-upload-row.is-failed {
  border-left-color: #b22222;
  background: rgba(178, 34, 34, .04);
}
.vault-upload-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--accent-deep);
}
.vault-upload-row.is-done .vault-upload-spinner { color: #1f5a37; }
.vault-upload-row.is-failed .vault-upload-spinner { color: #b22222; }
.vault-upload-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vault-upload-name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vault-upload-status {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vault-upload-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--paper-2);
  overflow: hidden;
  position: relative;
}
.vault-upload-bar-fill {
  height: 100%;
  background: var(--accent-deep);
  width: 0%;
  transition: width .35s ease;
  border-radius: 3px;
}
.vault-upload-row.is-done .vault-upload-bar-fill { background: #4a8a64; }
.vault-upload-row.is-failed .vault-upload-bar-fill { background: #b22222; }

/* Bulk-import destination picker (3 large click cards) */
.vault-bulk-dest-options {
  display: flex; flex-direction: column; gap: 8px;
}
.vault-bulk-dest-option {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.vault-bulk-dest-option:hover {
  border-color: var(--ink);
  background: var(--paper-2);
}
.vault-bulk-dest-option:focus { outline: 2px solid var(--accent-deep); outline-offset: 1px; }

.vault-kind-badge {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 2px;
  background: var(--paper-2); color: var(--ink-2);
  border: 1px solid var(--rule-soft);
}
.vault-kind-badge.vault-kind-document       { background: rgba(56, 98, 170, .08);  color: #2b4d83; border-color: rgba(56, 98, 170, .25); }
.vault-kind-badge.vault-kind-chat           { background: rgba(10, 125, 87, .08);  color: #0a7d57; border-color: rgba(10, 125, 87, .25); }
.vault-kind-badge.vault-kind-review_finding { background: rgba(178, 34, 34, .07);  color: #b22222; border-color: rgba(178, 34, 34, .22); }
.vault-kind-badge.vault-kind-manual_note    { background: rgba(184, 127, 0, .08);  color: #8a5a00; border-color: rgba(184, 127, 0, .28); }

.vault-pin-dot { font-size: 11px; }
.vault-arch-chip {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; background: var(--paper-2);
  border: 1px solid var(--rule-soft); padding: 1px 5px; border-radius: 2px;
  color: var(--ink-3);
}
.vault-score {
  margin-left: auto; font-family: var(--mono); font-size: 10px;
  color: var(--accent-deep); letter-spacing: .04em;
}

.vault-empty {
  padding: 40px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6;
  font-family: var(--sans); max-width: 540px;
}
.vault-empty p { margin: 0 0 8px; }

.vault-detail {
  position: relative;
  border-left: 1px solid var(--rule-soft);
  padding: 18px 22px;
  background: var(--paper);
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}
.vault-detail-close {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px;
  border: 1px solid var(--rule-soft); border-radius: 4px;
  background: var(--paper-2); color: var(--ink-3);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.vault-detail-close:hover { color: var(--ink); border-color: var(--ink); }
.vault-detail-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-3); letter-spacing: .04em; margin-bottom: 10px;
}
.vault-detail-title {
  font-family: var(--serif); font-size: 22px; font-weight: 400;
  line-height: 1.25; margin: 0 0 12px; color: var(--ink);
}
.vault-detail-summary {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.5;
  color: var(--ink-2); font-style: italic; margin: 8px 0 14px;
}
.vault-detail-actions { display: flex; gap: 6px; margin: 14px 0; }
.vault-detail-delete { color: #b22222 !important; }
.vault-detail-delete:hover { border-color: #b22222 !important; background: rgba(178,34,34,.04) !important; }
.vault-detail-content {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
  color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--rule-soft); border-radius: 4px;
  padding: 12px 14px; white-space: pre-wrap; word-break: break-word;
  max-height: 600px; overflow-y: auto;
}

/* Generic modal — used by Vault add-note + settings dialogs */
.ws-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.ws-modal[hidden] { display: none; }
.ws-modal-inner {
  background: var(--paper); border-radius: 8px;
  max-width: 640px; width: 100%;
  max-height: calc(100vh - 60px); overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.ws-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 22px; border-bottom: 1px solid var(--rule-soft);
}
.ws-modal-head h2 { font-family: var(--serif); font-size: 19px; font-weight: 400; margin: 0; }
.ws-modal-close {
  width: 32px; height: 32px;
  background: var(--paper-2); border: 1px solid var(--rule-soft);
  border-radius: 4px; color: var(--ink-3);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.ws-modal-close:hover { color: var(--ink); border-color: var(--ink); }
.ws-modal-body { padding: 18px 22px 22px; }
.ws-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

.vault-form-label {
  display: block;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 6px; margin-top: 14px;
}
.vault-form-label:first-child, .vault-form-label:first-of-type { margin-top: 0; }
.vault-form-hint {
  font-family: var(--sans); font-size: 11.5px; color: var(--ink-3);
  font-style: italic; text-transform: none; letter-spacing: 0; margin-left: 4px;
}
.vault-form-input {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--rule-soft); border-radius: 4px;
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 13px;
}
.vault-form-input:focus { outline: none; border-color: var(--ink); }
.vault-form-textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--rule-soft); border-radius: 4px;
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 13px; line-height: 1.5;
  resize: vertical; min-height: 180px;
}
.vault-form-textarea:focus { outline: none; border-color: var(--ink); }

.vault-provider-radios { display: flex; flex-direction: column; gap: 6px; }
.vault-provider-radio {
  display: grid; grid-template-columns: 18px 1fr;
  align-items: center; gap: 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--rule-soft); border-radius: 4px;
  cursor: pointer; transition: border-color .15s;
}
.vault-provider-radio:hover { border-color: var(--ink); }
.vault-provider-radio input { margin: 0; cursor: pointer; }
.vault-provider-name {
  font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  color: var(--ink); grid-column: 2;
}
.vault-provider-meta {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-3); letter-spacing: .03em; grid-column: 2;
}

.vault-checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  margin: 8px 0; cursor: pointer; line-height: 1.5;
}
.vault-checkbox input { margin: 3px 0 0 0; cursor: pointer; }

.save-to-vault-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  background: transparent; border: 1px solid var(--rule-soft); border-radius: 4px;
  color: var(--ink-2); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.save-to-vault-btn:hover { border-color: var(--ink); color: var(--ink); background: rgba(0,0,0,.03); }
.save-to-vault-btn.is-saved {
  border-color: #4a8a64; background: rgba(10,125,87,.06);
  color: #1f5a37; cursor: default;
}
/* SVG bookmark glyph replaces the 💾 emoji — inherits currentColor so it
   tracks with the button's hover/saved states. */
.save-to-vault-btn { display: inline-flex; align-items: center; gap: 5px; }
.save-to-vault-btn svg { width: 11px; height: 11px; flex-shrink: 0; }

/* 8th research-bar toggle — icon ships inline as SVG, not as an emoji
   pseudo-element, so it inherits currentColor (matches whatever stroke
   the surrounding mono text uses on hover / active states). */
.research-toggle-vault .research-toggle-label {
  display: inline-flex; align-items: center; gap: 5px;
}
.research-toggle-icon { width: 12px; height: 12px; flex-shrink: 0; }

/* ---- Top "back to workspace" pill ----
   Sits near the top of every workspace sub-page so the user
   always has a one-click return to the dashboard without scrolling
   to the page footer. Same monospace caption style as the rest
   of the workspace metadata. Subtle when idle, accents on hover. */
.ws-back-pill {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 14px 0 18px 0;
  padding: 6px 12px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper, transparent);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.ws-back-pill:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.ws-back-pill .ws-back-arrow {
  font-size: 13px; line-height: 1;
}

/* ---- Show all / Show fewer toggle for the dashboard chat list ----
   Sits at the bottom of the chat list when there are more chats
   than the initial cap. Reads as a quiet caption that becomes a
   pill on hover, matching the back-pill aesthetic. */
.chats-toggle-all {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
  border: none;
  border-top: 1px dashed var(--rule-soft);
  cursor: pointer;
  text-align: center;
  transition: color .15s, background .15s;
}
.chats-toggle-all:hover {
  color: var(--accent-deep, #3862aa);
  background: rgba(56, 98, 170, .04);
}

/* ============================================================
   MOBILE — site-wide workspace mobile pass
   ============================================================
   All rules below are additive — they extend behavior at narrow
   viewports without modifying any of the default desktop rules
   above. Breakpoint conventions: 768px tablet, 600px phone, 480px
   small phone. Touch-specific tweaks use (pointer: coarse). */

/* Review-table cells — drop min-widths and add a soft right-edge
   scroll shadow so users notice there's more content to swipe to.
   Without this, on a 375px phone the cells force horizontal scroll
   immediately and there's no visual hint. */
@media (max-width: 600px) {
  .rv-shell {
    padding: 18px 14px 50px;
    position: relative;
  }
  .rv-th,
  .rv-grid-redline .rv-cell { min-width: 130px !important; max-width: 200px !important; }
  .rv-grid th, .rv-grid td { padding: 8px 10px; }
  .rv-grid { font-size: 12.5px; }
  /* Scroll-hint gradient — fades from transparent to paper on the
     right edge of horizontally-scrollable tables so users have a
     visual cue. position:sticky on the gradient layer keeps it
     pinned to the viewport. */
  .rv-grid-wrap {
    position: relative;
    background-image:
      linear-gradient(to right, transparent calc(100% - 18px), rgba(0,0,0,.05) 100%);
    background-attachment: local, scroll;
  }
}

/* Modal footers — stack buttons full-width below 480px so the
   primary CTA is thumb-reachable instead of crammed next to a
   Cancel button. column-reverse puts primary on top. */
@media (max-width: 480px) {
  .attach-modal-foot,
  .cite-modal-foot {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .attach-modal-foot button,
  .attach-modal-foot a,
  .cite-modal-foot button,
  .cite-modal-foot a {
    width: 100% !important;
    min-height: 40px;
  }
}

/* Touch-target sizing for buttons that have padding too small for
   fingers. Applies regardless of viewport — anywhere a touch
   device is being used. */
@media (pointer: coarse) {
  /* Workspace primary buttons — ensure they meet 36px minimum. */
  .ws-btn, .ws-btn-secondary, .ws-btn-ghost {
    min-height: 36px;
  }
}