/* ================================================================
   ANALYSIS OVERLAY — Full-screen progressive analysis experience
================================================================ */

/* Full-screen overlay */
#analysis-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--white);
  display: flex; flex-direction: column;
  font-family: var(--font-sans);
  transition: opacity 0.3s ease;
}
#analysis-overlay.hidden { display: none; }

/* Header bar */
.analysis-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.analysis-title {
  font-family: var(--font-serif);
  font-size: 1.1rem; font-weight: 600; color: var(--ink);
}
.analysis-meta {
  font-size: 0.78rem; color: var(--muted); margin-left: 0.75rem;
}
.analysis-header-left { display: flex; align-items: center; gap: 0.5rem; }
.analysis-actions { display: flex; gap: 0.5rem; }

/* Body — two columns */
.analysis-body {
  display: grid; grid-template-columns: 1fr 20rem;
  flex: 1; min-height: 0; overflow: hidden;
}

/* Left panel — checklist + feed */
.analysis-left {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 1rem;
  min-height: 0;
}
#analysis-hero { flex-shrink: 0; }
#analysis-checklist { flex: 1; overflow-y: auto; min-height: 0; }

/* Checklist */
.analysis-checklist-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0; font-size: 0.82rem; color: var(--mid);
  border-bottom: 1px solid var(--border-light, #f0f0f0);
}
.analysis-checklist-item:last-child { border-bottom: none; }
.acl-icon {
  width: 1.3rem; height: 1.3rem; flex-shrink: 0;
  border-radius: 50%; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; transition: all 0.3s ease;
}
.acl-icon.pending { background: transparent; }
.acl-icon.active {
  border-color: var(--gold); background: var(--gold);
  animation: acl-pulse 1.2s ease-in-out infinite;
}
.acl-icon.done { border-color: #27AE60; background: #27AE60; color: white; }
.acl-icon.failed { border-color: #C0392B; background: #C0392B; color: white; }
.acl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acl-name.active { color: var(--ink); font-weight: 500; }
.acl-name.done { color: var(--muted); }
.acl-result { font-size: 0.72rem; color: var(--muted); flex-shrink: 0; }
.acl-result.has-findings { color: var(--gold); }
.acl-findings {
  font-size: 0.75rem; color: var(--mid); padding: 0.25rem 0 0.25rem 2rem;
  line-height: 1.5; animation: afeed-in 0.3s ease;
}
.acl-findings.risk { color: #991B1B; }
.acl-findings.action { color: var(--gold); }

@keyframes acl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(201, 168, 76, 0); }
}

/* Feed messages */
.analysis-feed-msg {
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: 0.8rem; line-height: 1.5;
  animation: afeed-in 0.3s ease;
}
.afeed-hero {
  background: linear-gradient(135deg, #1A1A18 0%, #2A2A28 100%);
  color: var(--white); padding: 1rem 1.25rem;
  border-radius: var(--r-lg); margin-bottom: 0.5rem;
}
.afeed-hero .afeed-label { color: var(--gold); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 0.3rem; }
.afeed-finding { background: var(--surface); color: var(--ink); }
.afeed-action { background: #FDF8E8; color: var(--ink); border-left: 3px solid var(--gold); }
.afeed-risk { background: #FEF2F2; color: #991B1B; border-left: 3px solid #C0392B; }
.afeed-done { background: #F0FDF4; color: #166534; border-left: 3px solid #27AE60; }
@keyframes afeed-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }

/* Right panel — game */
.analysis-right {
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 1.5rem;
  background: #1A1A18;
}
#snake-canvas {
  border-radius: var(--r-md);
  background: #111;
  display: block;
}
#snake-score {
  color: var(--gold); font-size: 0.75rem; font-weight: 600;
  margin-top: 0.6rem; text-align: center;
}
#snake-instructions {
  color: #666; font-size: 0.68rem; margin-top: 0.3rem; text-align: center;
}

/* Summary card at completion */
.analysis-summary-card {
  background: linear-gradient(135deg, #1A1A18 0%, #2A2A28 100%);
  border: 1px solid var(--gold); border-radius: var(--r-lg);
  padding: 1.5rem; text-align: center; margin-top: 1rem;
  color: var(--white);
}
.analysis-summary-card h3 {
  font-family: var(--font-serif); font-size: 1.1rem;
  color: var(--gold); margin-bottom: 0.5rem;
}
.analysis-summary-stats {
  display: flex; gap: 1rem; justify-content: center;
  flex-wrap: wrap; margin: 0.75rem 0;
}
.analysis-stat {
  font-size: 0.78rem; color: var(--mid);
}
.analysis-stat strong { color: var(--gold); font-size: 1.1rem; display: block; }

/* Minimised pill */
#analysis-pill {
  position: fixed; bottom: 4.5rem; right: 1.5rem; z-index: 1001;
  background: var(--ink); color: var(--white);
  padding: 0.5rem 1rem; border-radius: 2rem;
  font-size: 0.78rem; font-weight: 500;
  cursor: pointer; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 0.6rem;
  transition: transform 0.2s ease;
}
#analysis-pill:hover { transform: scale(1.03); }
#analysis-pill.hidden { display: none; }
.analysis-pill-progress {
  width: 4rem; height: 4px; background: #333; border-radius: 2px; overflow: hidden;
}
.analysis-pill-bar {
  height: 100%; background: var(--gold); border-radius: 2px;
  transition: width 0.3s ease;
}

/* Shimmer on background when overlay is open */
#app.analysis-active {
  pointer-events: none; opacity: 0.3;
  filter: blur(2px); transition: all 0.3s ease;
}

/* Responsive */
@media (max-width: 768px) {
  .analysis-body { grid-template-columns: 1fr; }
  .analysis-right { display: none; }
  #analysis-pill { bottom: 1rem; right: 1rem; }
}

/* ── Document Analysis module (analyse-doc) ─────────────────── */
/* No display rule on the module shell — owned by .module /
   .module.active in layout.css. Overriding it would make the analyse
   page render alongside the documents editor and grid. */

.analyse-upload {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  align-items: stretch;
  /* Cap reading width on large monitors so the dropzone, position
     picker, staged-file row, and quick-tip cards don't sprawl
     across a 27" viewport. Matches the .analyse-result max-width
     so switching between states doesn't reflow horizontally and
     left-edges align with the module header. */
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

/* Module header on the analyse-doc page — capped to the same width
   as the upload / result states so the title-and-subtitle column
   has a consistent left-edge with the content below. */
#analyse-doc-module-header {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

/* .analyse-dropzone, .analyse-tips — replaced by the .composer
   primitive in css/components.css (lex-design-system §C). */

/* Running state — display toggled inline by _aSetDisplay (none / flex). */
.analyse-running {
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 0;
  /* Match the rest of the analyse page so the loading screen
     doesn't visually shift when transitioning between states. */
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.analyse-running-file {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--ink);
}

.analyse-progress {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.analyse-progress-step {
  font-size: 0.875rem;
  color: var(--muted);
  padding: 0.55rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.analyse-progress-step::before {
  content: '○';
  color: var(--muted);
  font-size: 1.1rem;
}
.analyse-progress-step.active {
  color: var(--ink);
  border-color: var(--gold);
  background: var(--gold-bg);
}
.analyse-progress-step.active::before {
  content: '●';
  color: var(--gold);
  animation: pulse 1.4s ease-in-out infinite;
}

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

/* Result state — display toggled inline by _aSetDisplay (none / flex). */
.analyse-result {
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
  /* Cap on wide monitors so the 2-col grid (1fr + 22rem rail)
     stays within a comfortable reading band. Stacks under 1100px
     via the existing media query on .analyse-result-grid. */
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

/* .analyse-result-header — replaced by the back-link + collapsed
   composer strip + .page-header trio in css/components.css.
   The filename-summary span retains the .analyse-result-file id
   and is now rendered inside the strip. */

.analyse-result-body {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.75rem;
  font-size: 0.925rem;
  line-height: 1.65;
  color: var(--ink);
  overflow-y: auto;
}

.analyse-result-body h2 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--gold);
  margin: 1.2rem 0 0.4rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}
.analyse-result-body h2:first-child { margin-top: 0; }

.analyse-result-body p { margin: 0.55rem 0; }
.analyse-result-body ul, .analyse-result-body ol { margin: 0.5rem 0; padding-left: 1.4rem; }
.analyse-result-body li { margin: 0.25rem 0; }

.analyse-result-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.25rem;
}

/* .analyse-position-row — replaced by .composer-chip-select in
   css/components.css. The position picker is now a top-slot chip
   inside the composer rather than a separate gold band. */

/* Custom instruction field — lawyer-defined next step */
.analyse-custom-instruction {
  margin-top: 0.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.analyse-custom-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.analyse-custom-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}
.analyse-custom-input {
  flex: 1;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  resize: vertical;
  min-height: 2.6rem;
  transition: border-color var(--t);
}
.analyse-custom-input:focus { outline: none; border-color: var(--gold); }
.analyse-custom-row .btn { flex-shrink: 0; }
.analyse-custom-hint {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.4rem;
}

/* ════════════════════════════════════════════════════════════════
   ANALYSIS — Visual layout (.av-*)
   Each section is a card; renderer skips sections with no data.
════════════════════════════════════════════════════════════════ */

.av-hero {
  background: linear-gradient(135deg, var(--gold-bg) 0%, var(--white) 100%);
  border: 1px solid var(--gold-dim);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.75rem;
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}
.av-hero-icon {
  color: var(--gold);
  background: var(--white);
  border: 1px solid var(--gold-dim);
  border-radius: var(--r-md);
  padding: 0.65rem;
  flex-shrink: 0;
}
.av-hero-text { flex: 1; min-width: 0; }
.av-hero-type {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.av-hero-summary {
  font-size: 0.95rem;
  color: var(--mid);
  margin-top: 0.4rem;
  line-height: 1.5;
}

.av-section {
  margin-top: 1.5rem;
}

.av-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.av-section-title svg { color: var(--gold); }

/* ── Headline facts strip ──────────────────────────────────── */
.av-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.6rem;
}
.av-fact {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.7rem 0.85rem;
}
.av-fact-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}
.av-fact-value {
  font-size: 0.95rem;
  color: var(--ink);
  margin-top: 0.2rem;
  line-height: 1.35;
  font-weight: 500;
}

/* ── Parties (versus layout for adversarial) ───────────────── */
.av-parties-versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0.85rem;
}
.av-parties-side {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.av-parties-left { align-items: flex-end; text-align: right; }
.av-parties-right { align-items: flex-start; text-align: left; }
.av-parties-side-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.av-parties-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--gold);
  padding: 0 0.5rem;
}
.av-parties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.av-party {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.7rem 0.95rem;
  width: 100%;
  max-width: 22rem;
}
.av-party-role {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.25rem;
}
.av-party-name {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.av-party-details {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.3rem;
  line-height: 1.4;
}

/* ── Timeline (vertical, dot-on-line) ──────────────────────── */
.av-timeline {
  position: relative;
  padding-left: 1.4rem;
  border-left: 2px solid var(--border);
  margin-left: 0.5rem;
}
.av-tl-row {
  position: relative;
  padding: 0.5rem 0 0.85rem;
}
.av-tl-marker {
  position: absolute;
  left: -1.85rem;
  top: 0.65rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--border);
}
.av-tl-background .av-tl-marker { background: #B8B8B0; }
.av-tl-incident .av-tl-marker { background: #B23B3B; }
.av-tl-filing .av-tl-marker { background: var(--gold); }
.av-tl-deadline .av-tl-marker { background: #D6831A; }
.av-tl-milestone .av-tl-marker { background: var(--ink); }
.av-tl-date {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold);
}
.av-tl-label {
  font-size: 0.875rem;
  color: var(--ink);
  margin-top: 0.15rem;
  line-height: 1.4;
}

/* ── Card grids (claims, risks) ────────────────────────────── */
.av-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.6rem;
}
.av-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.85rem 1rem;
  position: relative;
}
.av-card-title {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  font-family: var(--font-serif);
}
.av-card-meta {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.25rem;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.av-card-badge {
  display: inline-block;
  background: var(--gold-bg);
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0.4rem;
}

/* ── Risks (severity-coded) ────────────────────────────────── */
.av-risk {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.85rem 1rem;
  border-left-width: 4px;
}
.av-risk-high { border-left-color: #B23B3B; background: #FBF4F4; }
.av-risk-medium { border-left-color: #D6831A; background: #FCF7F1; }
.av-risk-low { border-left-color: #6B8F4E; background: #F4F8F1; }
.av-risk-level {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  background: var(--white);
}
.av-risk-high .av-risk-level { color: #B23B3B; }
.av-risk-medium .av-risk-level { color: #D6831A; }
.av-risk-low .av-risk-level { color: #6B8F4E; }
.av-risk-title {
  font-size: 0.92rem;
  color: var(--ink);
  font-weight: 500;
  margin-top: 0.3rem;
}
.av-risk-note {
  font-size: 0.78rem;
  color: var(--mid);
  margin-top: 0.25rem;
  line-height: 1.45;
}
.av-risk-side {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.3rem;
  font-style: italic;
}

/* ── Obligations ───────────────────────────────────────────── */
.av-obligations {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.av-obligation {
  display: grid;
  grid-template-columns: minmax(7rem, auto) auto 1fr;
  align-items: center;
  gap: 0.7rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.65rem 0.95rem;
}
.av-obligation-party {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--gold);
  font-size: 0.875rem;
}
.av-obligation-arrow { color: var(--muted); }
.av-obligation-text {
  font-size: 0.875rem;
  color: var(--ink);
  line-height: 1.4;
}

/* ── Notable terms ─────────────────────────────────────────── */
.av-notable-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.av-notable {
  display: flex;
  gap: 0.7rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.75rem 0.95rem;
}
.av-notable-flag {
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.av-notable-body { flex: 1; min-width: 0; }
.av-notable-title {
  font-size: 0.92rem;
  color: var(--ink);
  font-weight: 500;
}
.av-notable-note {
  font-size: 0.8rem;
  color: var(--mid);
  margin-top: 0.2rem;
  line-height: 1.45;
}

/* ── Actions checklist ─────────────────────────────────────── */
.av-actions-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.av-action {
  display: flex;
  gap: 0.85rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.75rem 0.95rem;
  align-items: flex-start;
}
.av-action-num {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.av-action-high .av-action-num { background: #B23B3B; }
.av-action-medium .av-action-num { background: #D6831A; }
.av-action-low .av-action-num { background: #6B8F4E; }
.av-action-body { flex: 1; min-width: 0; }
.av-action-title {
  font-size: 0.92rem;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}
.av-action-meta {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.3rem;
  flex-wrap: wrap;
}
.av-action-deadline,
.av-action-priority {
  font-size: 0.7rem;
  color: var(--mid);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.1rem 0.45rem;
}
.av-action-deadline { color: var(--gold); border-color: var(--gold-dim); background: var(--gold-bg); }

/* ── Newcase modal — segmented tabs ────────────────────────── */
.analyse-newcase-tab {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--mid);
  font-size: 0.78rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all var(--t);
}
.analyse-newcase-tab.active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.analyse-newcase-tab:hover:not(.active) {
  border-color: var(--gold);
  color: var(--ink);
}

/* ════════════════════════════════════════════════════════════════
   ANALYSE-DOC RESULT GRID — 2-column with right rail.
   Stacks to single column under 1100px.
════════════════════════════════════════════════════════════════ */
.analyse-result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 1.5rem;
  align-items: start;
  margin-top: 1rem;
}
.analyse-result-main { min-width: 0; }
.analyse-result-rail {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
@media (max-width: 1100px) {
  .analyse-result-grid { grid-template-columns: 1fr; }
  .analyse-result-rail { position: static; max-height: none; }
}

.rail-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.85rem 0.95rem;
}
.rail-section-title {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 0.6rem;
}

/* ── Actions grid ────────────────────────────────────────────── */
/*
 * Single 3-column grid for every analysis action. AI-suggested
 * draft tiles flow into the same grid via #rail-suggestion-list
 * (display:contents wrapper) so the lawyer sees one unified place
 * to act on the analysis instead of two separate sections.
 */
.rail-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}
.rail-action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  padding: 0.7rem 0.4rem 0.55rem;
  min-height: 5.4rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  line-height: 1.25;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  transition: all var(--t);
}
.rail-action-tile:hover {
  border-color: var(--gold);
  background: var(--gold-bg);
}
.rail-action-tile svg {
  color: var(--gold);
  flex-shrink: 0;
}
.rail-action-tile-label {
  /* Cap labels at two lines so a long AI suggestion doesn't blow
     the tile out of proportion. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
/* Primary tile — Chat with packet. Drawn in solid ink so the
   lawyer's eye lands on it first. */
.rail-action-tile.is-primary {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.rail-action-tile.is-primary:hover {
  background: var(--mid);
  border-color: var(--mid);
}
.rail-action-tile.is-primary svg { color: var(--gold); }
/* AI-suggested draft tile — same shape, dashed accent border so
   it reads as "Lex thought of this for you" without hiding it
   inside a separate section. */
.rail-action-tile.is-suggestion {
  border-style: dashed;
  border-color: var(--gold-dim);
  color: var(--mid);
}
.rail-action-tile.is-suggestion:hover {
  color: var(--ink);
  border-color: var(--gold);
  background: var(--gold-bg);
}

/* ── Source documents ────────────────────────────────────────── */
.rail-doc-list {
  display: flex; flex-direction: column; gap: 0.35rem;
}
.rail-doc-row {
  display: grid;
  grid-template-columns: 2.1rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: left;
  transition: all var(--t);
}
.rail-doc-row:hover {
  border-color: var(--gold);
  background: var(--gold-bg);
}
.rail-doc-icon {
  width: 2.1rem; height: 2.1rem;
  border-radius: var(--r-sm);
  background: var(--gold-bg);
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rail-doc-main { min-width: 0; }
.rail-doc-name {
  font-size: 0.82rem;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-doc-meta {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.1rem;
}
.rail-doc-arrow { color: var(--muted); }
.rail-doc-row:hover .rail-doc-arrow { color: var(--gold); }

/* ── Suggestions list ────────────────────────────────────────── */
.rail-suggestion-list {
  display: flex; flex-direction: column; gap: 0.15rem;
}
.rail-suggestion {
  display: flex; align-items: flex-start; gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--mid);
  cursor: pointer;
  text-align: left;
  border-radius: var(--r-sm);
  transition: all var(--t);
  width: 100%;
}
.rail-suggestion:hover {
  color: var(--ink);
  background: var(--surface);
}
.rail-suggestion svg {
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 0.25rem;
}

/* ════════════════════════════════════════════════════════════════
   CHAT DRAWER — slides in from the right with the packet thread.
════════════════════════════════════════════════════════════════ */
.packet-drawer {
  position: fixed; inset: 0;
  z-index: 1100;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.25s;
}
.packet-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s linear 0s;
}
.packet-drawer-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.packet-drawer.is-open .packet-drawer-overlay { opacity: 1; }

.packet-drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(28rem, 90vw);
  background: var(--white);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 14px rgba(0, 0, 0, 0.08);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.packet-drawer.is-open .packet-drawer-panel { transform: translateX(0); }

.packet-drawer-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.packet-drawer-title {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-serif);
  font-size: 1rem; font-weight: 500;
  color: var(--ink);
  flex: 1; min-width: 0;
}
.packet-drawer-title svg { color: var(--gold); flex-shrink: 0; }
.packet-drawer-status {
  font-size: 0.7rem;
  color: var(--muted);
  padding: 0.18rem 0.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}
.packet-drawer-status.is-ready {
  color: var(--success, #2E7D52);
  background: #F1F8F4; border-color: #C9E1CF;
}
.packet-drawer-status.is-error {
  color: var(--danger, #B23B3B);
  background: #FBF4F4; border-color: #E0BFBF;
}

.packet-drawer-thread {
  flex: 1; overflow-y: auto;
  padding: 1rem;
  display: flex; flex-direction: column; gap: 0.85rem;
  background: var(--surface);
}
.packet-drawer-thread:empty::before {
  content: 'Ask anything across this packet — "is non-compete mentioned?", "find stock options", or a drafting prompt like "draft a counter-offer".';
  color: var(--muted);
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.55;
}

.packet-drawer-input-row {
  display: flex; gap: 0.5rem; align-items: flex-end;
  padding: 0.85rem 1rem 0.5rem;
  border-top: 1px solid var(--border);
}
.packet-drawer-input {
  flex: 1;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  background: var(--white);
  resize: none;
  line-height: 1.45;
}
.packet-drawer-input:focus {
  outline: none; border-color: var(--gold);
}
.packet-drawer-hint {
  padding: 0 1rem 0.85rem;
  font-size: 0.7rem;
  color: var(--muted);
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════
   SOURCE-DOC VIEWER MODAL
════════════════════════════════════════════════════════════════ */
.source-viewer-frame {
  width: 100%;
  height: 70vh;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.source-viewer-text {
  white-space: pre-wrap;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1rem;
  max-height: 70vh;
  overflow-y: auto;
}

/* ════════════════════════════════════════════════════════════════
   PACKET QUERY — legacy thread/chip styles still used inside the
   drawer thread (Q bubble, A card, citation chips).
════════════════════════════════════════════════════════════════ */
.packet-query {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.packet-query-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.packet-query-title {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
.packet-query-title svg { color: var(--gold); }
.packet-query-status {
  font-size: 0.72rem; color: var(--muted);
  padding: 0.2rem 0.55rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.packet-query-status.is-ready {
  color: var(--success, #2E7D52);
  background: #F1F8F4;
  border-color: #C9E1CF;
}
.packet-query-status.is-error {
  color: var(--danger, #B23B3B);
  background: #FBF4F4;
  border-color: #E0BFBF;
}

.packet-query-thread {
  display: flex; flex-direction: column; gap: 0.85rem;
  margin-bottom: 0.85rem;
}
.packet-query-thread:empty { display: none; }

.packet-query-msg {
  display: flex; flex-direction: column; gap: 0.4rem;
}
.packet-query-msg-q {
  align-self: flex-end;
  background: var(--ink);
  color: var(--white);
  padding: 0.55rem 0.85rem;
  border-radius: var(--r-md);
  font-size: 0.875rem;
  max-width: 80%;
  line-height: 1.45;
}
.packet-query-msg-a {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.7rem 0.95rem;
}
.packet-query-msg-a .msg-synthesis {
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.55;
}
.packet-query-msg-a .msg-chips {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: 0.6rem;
}
.packet-query-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  background: var(--gold-bg);
  color: var(--ink);
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all var(--t);
}
.packet-query-chip:hover {
  background: var(--gold);
  color: var(--white);
}
.packet-query-chip svg { color: var(--gold); }
.packet-query-chip:hover svg { color: var(--white); }

.packet-query-input-row {
  display: flex; gap: 0.5rem; align-items: center;
}
.packet-query-input {
  flex: 1;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  background: var(--white);
}
.packet-query-input:focus {
  outline: none; border-color: var(--gold);
}
.packet-query-hint {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  color: var(--muted);
  font-style: italic;
}

/* Modal: source page preview when a citation chip is clicked */
.packet-page-preview {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  line-height: 1.55;
  white-space: pre-wrap;
  max-height: 60vh;
  overflow-y: auto;
}
.packet-page-preview mark,
.packet-page-preview .pq-mark {
  background: var(--gold-bg);
  color: var(--ink);
  padding: 0 2px;
  border-radius: 2px;
}

/* ── Staged files — replaced by .composer-files / .composer-file-chip
   in css/components.css. Files now appear as compact chips inside
   the composer instead of a separate stacked-row block. The composer
   surface itself caps to 80rem via .analyse-upload's max-width
   below.
   ────────────────────────────────────────────────────────────── */