:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Source Serif 4', ui-serif, Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --color-bg: #FAFAF7;
  --color-bg-elevated: #FFFFFF;
  --color-fg: #1A1A1A;
  --color-fg-muted: #6B6864;
  --color-fg-subtle: #8A8682;
  --color-border: #E8E5DE;
  --color-border-strong: #C9C5BC;
  --color-accent: #B85450;
  --color-accent-fg: #FFFFFF;

  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
}

:root[data-theme='dark'] {
  --color-bg: #0F0F0F;
  --color-bg-elevated: #1A1A1A;
  --color-fg: #F0EFEA;
  --color-fg-muted: #8A8682;
  --color-fg-subtle: #6B6864;
  --color-border: #2A2826;
  --color-border-strong: #3A3835;
  --color-accent: #D87572;
  --color-accent-fg: #0F0F0F;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  height: 100%;
}

:root {
  /* Sidebar width is a CSS variable so JS can update it via drag-resize.
     Persisted to localStorage (key: chat-sidebar-width). */
  --sidebar-width: 280px;
}

body {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto auto auto auto auto;
  grid-template-areas:
    "sidebar header"
    "sidebar conversation"
    "sidebar topics"
    "sidebar sources"
    "sidebar attachments"
    "sidebar composer-area"
    "sidebar footnote";
  /* Exact 100vh (not min-height) so the grid is constrained to the viewport.
     Conversation row scrolls internally (see .conversation overflow rule);
     the composer + source-chips rows stay at the viewport bottom. Without
     this, long conversations push composer below the fold.
     100dvh handles Safari mobile's URL bar correctly — plain 100vh measures
     the wrong height when the URL bar is visible (private mode especially),
     pushing the composer + footnote rows off-screen. */
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.footnote { grid-area: footnote; }

.app-header { grid-area: header; padding: 1.25rem; }
.conversation {
  grid-area: conversation;
  padding: 2.5rem 1.25rem 1.5rem;
  /* Internal scroll: message history scrolls within its grid row instead of
     pushing the composer (and source-chips) below the viewport fold.
     min-height: 0 is required for the 1fr row to actually shrink below its
     intrinsic content size — without it, grid items default to min-content. */
  overflow-y: auto;
  min-height: 0;
}
.topic-chips { grid-area: topics; padding: 0.5rem 1.25rem; }
.composer { grid-area: composer-area; margin: 0 1.25rem 0.75rem; }
.footnote { grid-column: header; }

@media (max-width: 800px) {
  body {
    /* minmax(0, 1fr) — bare `1fr` defaults to minmax(auto, 1fr) which lets wide
       content (mermaid SVG) force the column wider than the viewport. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto auto auto auto auto;
    grid-template-areas:
      "header"
      "conversation"
      "topics"
      "sources"
      "attachments"
      "composer-area"
      "footnote";
    max-width: 760px;
    margin: 0 auto;
    padding: 0 1rem;
  }
  .app-header { padding: 1.25rem 0; }
  .conversation { padding: 1.5rem 0; }
  .topic-chips { padding: 0.5rem 0; }
  .composer { margin: 0 0 0.75rem; }
}

a { color: var(--color-accent); text-underline-offset: 2px; }
a:hover { text-decoration: underline; }

::selection { background: var(--color-accent); color: var(--color-accent-fg); }

/* Sidebar */
.sidebar {
  grid-area: sidebar;
  background: var(--color-bg-elevated);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  position: sticky;
  top: 0;
  overflow: hidden;
}

/* Drag handle for resizing the sidebar. Sits on the right edge, picks up
   col-resize cursor on hover. Hidden on mobile (collapsed layout). */
.sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
  z-index: 10;
  transition: background 120ms ease;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging {
  background: var(--color-accent, #1565c0);
  opacity: 0.4;
}
@media (max-width: 800px) {
  .sidebar-resize-handle { display: none; }
}

.sidebar-head {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.new-chat {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-fg);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.new-chat:hover {
  background: var(--color-bg);
  border-color: var(--color-border-strong);
}

/* Sidebar secondary action (Upload doc, future admin buttons) */
.sidebar-secondary-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px dashed var(--color-border);
  color: var(--color-fg-muted);
  font-family: inherit;
  font-size: 0.8125rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-top: 0.5rem;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.sidebar-secondary-btn:hover {
  border-color: var(--color-border-strong);
  border-style: solid;
  color: var(--color-fg);
  background: var(--color-bg);
}
.sidebar-secondary-btn[hidden] { display: none !important; }

/* Upload modal */
.upload-modal[hidden] { display: none; }
.upload-modal {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.upload-modal-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}
.upload-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.upload-modal-head h2 {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0;
}
.upload-modal-close {
  background: transparent;
  border: 0;
  color: var(--color-fg-muted);
  font-size: 1.25rem;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  line-height: 1;
}
.upload-modal-close:hover { color: var(--color-fg); background: var(--color-bg); }
.upload-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}
.upload-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-fg);
}
.upload-field > span:first-child {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}
.upload-field input[type='file'],
.upload-field input[type='text'] {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-fg);
  font-family: inherit;
  font-size: 0.875rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-md);
}
.upload-field input[type='text']:focus,
.upload-field input[type='file']:focus {
  outline: none;
  border-color: var(--color-border-strong);
}
.upload-field-row {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-fg-muted);
}
.upload-field-row input { margin-top: 0.15rem; }
.upload-hint {
  font-size: 0.75rem;
  color: var(--color-fg-muted);
}
.upload-optional {
  font-style: italic;
  font-weight: 400;
  color: var(--color-fg-subtle);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 0.3em;
}
.upload-status {
  font-size: 0.8125rem;
  color: var(--color-fg-muted);
  font-family: var(--font-sans);
  min-height: 1.2em;
}
.upload-status.upload-status-error { color: var(--color-accent); }
.upload-status.upload-status-success { color: #2e7d32; }
.upload-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.skill-select-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.skill-select-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
  flex-shrink: 0;
}
.skill-select {
  flex: 1;
  background: transparent;
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.35rem 0.5rem;
  font-family: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.skill-select:focus {
  outline: none;
  border-color: var(--color-border-strong);
}

.sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.sidebar-prompts {
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
  max-height: 40%;
  overflow-y: auto;
}
.sidebar-prompts-summary {
  padding: 0.625rem 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sidebar-prompts-summary::-webkit-details-marker { display: none; }
.sidebar-prompts-summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.4rem;
  transition: transform 120ms ease;
}
.sidebar-prompts[open] .sidebar-prompts-summary::before { transform: rotate(90deg); }
.sidebar-prompts-list { padding: 0 0.5rem 0.5rem; }
.sidebar-prompt {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-fg-muted);
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1.35;
  padding: 0.45rem 0.625rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-bottom: 0.125rem;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.sidebar-prompt:hover {
  background: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-fg);
}

/* Library panel — corpus catalog, topic → sources tree */
.sidebar-library {
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
  max-height: 45%;
  overflow-y: auto;
}
.sidebar-library-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sidebar-library-summary::-webkit-details-marker { display: none; }
.sidebar-library-summary > span:first-child::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.4rem;
  transition: transform 120ms ease;
}
.sidebar-library[open] .sidebar-library-summary > span:first-child::before {
  transform: rotate(90deg);
}
.sidebar-library-count {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-fg-subtle);
}
.sidebar-library-list { padding: 0 0.5rem 0.5rem; }
.library-jump-row {
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  padding: 0.2rem 0.15rem 0.45rem;
  margin-bottom: 0.2rem;
}
.library-jump-btn {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  font: inherit;
  font-size: 0.65rem;
  padding: 0.14rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
}
.library-jump-btn:hover {
  color: var(--color-fg);
  border-color: var(--color-border-strong);
}
.library-topic {
  margin-bottom: 0.25rem;
}
/* Domain wrapper — top-level grouping (Legal / Finance & SAP / Architecture
   / AI / Software Engineering / Personal). Matches the sidebar-artifacts
   summary visual register so the library reads as a peer of that panel. */
/* Domain row: select-all checkbox (sibling) + the <details>. Border lives on
   the row so the checkbox + disclosure share one separator. */
.library-domain-row {
  display: flex;
  align-items: flex-start;
  border-top: 1px solid var(--color-border);
}
.library-domain-row:first-of-type { border-top: none; }
.library-domain { flex: 1; min-width: 0; }
.library-domain-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-fg);
  cursor: pointer;
  user-select: none;
  list-style: none;
  gap: 0.5rem;
}
.library-domain-summary::-webkit-details-marker { display: none; }
.library-domain-summary::before {
  content: '▸';
  margin-right: 0.4rem;
  transition: transform 120ms ease;
  display: inline-block;
  color: var(--color-fg-subtle);
}
.library-domain[open] .library-domain-summary::before { transform: rotate(90deg); }
.library-domain-summary:hover { background: var(--color-bg); }
.library-domain-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-domain-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.library-domain-count {
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-subtle);
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--color-bg);
}
.library-domain-selectall {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.625rem 0.25rem 0 0.75rem;  /* align with summary's text baseline */
}
.library-domain-checkbox {
  cursor: pointer;
  margin: 0;
}

/* Topic row: the <details> + an optional trailing "Open" button (sibling, not
   a <summary> descendant). */
.library-topic-row {
  display: flex;
  align-items: flex-start;
}
.library-topic { flex: 1; min-width: 0; }
.library-topic-row > .library-topic-open { align-self: flex-start; margin-top: 0.4rem; }
.library-topic-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-fg);
  cursor: pointer;
  border-radius: var(--radius-md);
  list-style: none;
}

/* Category sub-grouping within a topic — sources organized by their
   primary Haiku-classified category (e.g., within legal_case_law:
   IP / Criminal / Constitutional / Corporate, etc.). Slightly indented
   relative to the topic summary so the hierarchy reads visually. */
/* Category row: select-all checkbox (sibling) + the <details>. The indent +
   left border that mark the sub-level live on the row, not the <details>. */
.library-category-row {
  display: flex;
  align-items: flex-start;
  margin-left: 0.5rem;
  border-left: 1px solid var(--color-border);
  padding-left: 0.4rem;
}
.library-category { flex: 1; min-width: 0; }
.library-category-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-fg-muted);
  cursor: pointer;
  list-style: none;
  gap: 0.4rem;
  user-select: none;
}
.library-category-summary::-webkit-details-marker { display: none; }
.library-category-summary::before {
  content: '▸';
  color: var(--color-fg-subtle);
  font-size: 0.7em;
  margin-right: 0.25rem;
  transition: transform 120ms ease;
  display: inline-block;
}
.library-category[open] .library-category-summary::before { transform: rotate(90deg); }
.library-category-summary:hover { background: var(--color-bg); }
.library-category-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-category-count {
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-subtle);
  font-size: 0.65rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: var(--color-bg);
}
.library-category-selectall {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding-top: 0.3rem;  /* align with category summary's text */
}
.library-category-checkbox {
  cursor: pointer;
  margin: 0;
}
.library-topic-summary::-webkit-details-marker { display: none; }
.library-topic-summary:hover { background: var(--color-bg); }
.library-topic-summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.3rem;
  font-size: 0.7em;
  color: var(--color-fg-subtle);
  transition: transform 120ms ease;
}
.library-topic[open] .library-topic-summary::before {
  transform: rotate(90deg);
}
.library-topic-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-topic-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.library-topic-open {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  font: inherit;
  font-size: 0.62rem;
  line-height: 1;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  cursor: pointer;
}
.library-topic-open:hover {
  color: var(--color-fg);
  border-color: var(--color-border-strong);
}
.library-topic-count {
  margin-left: 0.4rem;
  font-size: 0.6875rem;
  color: var(--color-fg-subtle);
  font-variant-numeric: tabular-nums;
}
.library-sources { padding: 0.15rem 0 0.25rem 1.25rem; }
.library-source {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: var(--color-fg-muted);
  border-radius: var(--radius-md);
  cursor: default;
}
.library-source:hover { background: var(--color-bg); color: var(--color-fg); }
.library-source-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.library-source-open {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  font: inherit;
  font-size: 0.62rem;
  line-height: 1;
  padding: 0.16rem 0.4rem;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}
.library-source-open:hover {
  color: var(--color-fg);
  border-color: var(--color-border-strong);
}
.library-source-count {
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-subtle);
  font-size: 0.7em;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Old read-only "pub" pseudo-badge superseded by the clickable
   .library-source-vis button (owner mode) — kept here for reference but
   suppressed so we don't get double-badges. Public-mode visitors see no
   indicator because all sources they can see are by definition public. */
.library-source[data-visibility='public']::after { display: none; }
.library-source-checkbox {
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

/* Owner-mode visibility chip — clickable, flips public ↔ private. Replaces
   the read-only ::after "pub" badge for owners. */
.library-source-vis {
  background: transparent;
  border: 1px solid var(--color-border);
  font: inherit;
  font-size: 0.6em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 0.25rem;
}
.library-source-vis-public {
  background: #d1e7dd;
  color: #0f5132;
  border-color: #badbcc;
}
.library-source-vis-private {
  background: #f8d7da;
  color: #842029;
  border-color: #f5c2c7;
}
.library-source-vis:hover {
  filter: brightness(0.95);
}

/* Library search row — input + selection summary at top of library panel */
.library-search-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem 0.3rem;
}
.library-search {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  background: var(--color-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.library-search:focus {
  outline: none;
  border-color: var(--color-accent, #1565c0);
}
.library-selection-summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: var(--color-fg-muted);
  white-space: nowrap;
}
.library-selection-clear {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  font: inherit;
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.library-selection-clear:hover { background: var(--color-bg); color: var(--color-fg); }
.library-empty {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--color-fg-muted);
  font-style: italic;
}

/* Source chips — pinned source documents shown above the composer.
   Mirrors topic-chips structure so the visual language is consistent.
   grid-area: sources places this in the body grid (between topics row
   and composer-area row) so it's always within the viewport instead of
   being auto-placed in an implicit row below the named grid. */
.source-chips {
  grid-area: sources;
  padding: 0.35rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.source-chips[hidden] { display: none; }
.source-chips-label {
  font-size: 0.7rem;
  color: var(--color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.source-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 1;
}
.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.2rem 0.5rem;
  font: inherit;
  font-size: 0.75rem;
  color: var(--color-fg);
  cursor: pointer;
  max-width: 280px;
}
.source-chip:hover { background: var(--color-bg-elevated, #1f2937); }

/* Per-turn attachment chips — mirror source-chips. Ephemeral docs grounding
   this conversation only. */
.attachment-chips {
  grid-area: attachments;
  padding: 0.35rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.attachment-chips[hidden] { display: none; }
.attachment-chips-label {
  font-size: 0.7rem;
  color: var(--color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.attachment-chips-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  color: var(--color-fg);
  max-width: 280px;
}
.attachment-chip.attachment-chip-error { border-color: #b00020; color: #b00020; }
.attachment-chip.attachment-chip-loading { opacity: 0.6; }
.attachment-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-chip-meta { color: var(--color-fg-muted); font-size: 0.7rem; flex: none; }
.attachment-chip-remove {
  border: none;
  background: none;
  color: var(--color-fg-muted);
  cursor: pointer;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  flex: none;
}
.attachment-chip-remove:hover { color: var(--color-fg); }
.attachment-budget { font-size: 0.7rem; color: var(--color-fg-muted); margin-left: auto; }
.attachment-budget.attachment-budget-warn { color: #b8860b; }
.attachment-budget.attachment-budget-block { color: #b00020; }
.composer-attach {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-fg-muted);
  cursor: pointer;
  padding: 0.35rem;
  border-radius: var(--radius-md);
  align-self: flex-end;
}
.composer-attach:hover { color: var(--color-fg); background: var(--color-bg-elevated, #1f2937); }
.composer.composer-dragover { outline: 2px dashed var(--color-accent, #4a9eff); outline-offset: 2px; }
/* Attachment citation — visually distinct from corpus citations. */
.cite-attached {
  font-size: 0.85em;
  color: var(--color-accent, #4a9eff);
  background: color-mix(in srgb, var(--color-accent, #4a9eff) 12%, transparent);
  border-radius: 3px;
  padding: 0 0.25em;
  white-space: nowrap;
}
.cite-attached::before { content: "\1F4CE "; opacity: 0.7; }
.source-chip-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.source-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  padding: 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-fg-muted);
  background: var(--color-bg, #0b0f17);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  line-height: 1.3;
}
.source-chip-remove {
  color: var(--color-fg-muted);
  font-size: 1em;
  line-height: 1;
}

/* Token-budget + injection-mode badge appended to the source-chips row */
.source-chip-status {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  color: var(--color-fg-muted);
  background: transparent;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  margin-left: 0.25rem;
  font-variant-numeric: tabular-nums;
}
.source-chip-status-inject {
  color: #2e7d32;
  border-color: #2e7d32;
  border-style: solid;
}
.source-chip-status-fallback {
  color: #b45309;
  border-color: #b45309;
}

/* Saved Artifacts sidebar panel — owner-only persistent confirmation +
   cleanup affordance. Layout mirrors the Library panel for consistency. */
.sidebar-artifacts { border-top: 1px solid var(--color-border); }
.sidebar-artifacts-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  font-size: 0.8rem;
  user-select: none;
  list-style: none;
}
.sidebar-artifacts-summary::-webkit-details-marker { display: none; }
.sidebar-artifacts-summary::before {
  content: '▸';
  margin-right: 0.4rem;
  transition: transform 120ms ease;
  display: inline-block;
}
.sidebar-artifacts[open] .sidebar-artifacts-summary::before { transform: rotate(90deg); }
.sidebar-artifacts-count {
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-subtle);
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--color-bg);
  transition: background 200ms ease, color 200ms ease;
}
.sidebar-artifacts-count.flash {
  background: var(--color-accent, #1565c0);
  color: white;
  animation: artifact-count-pulse 1.2s ease;
}
@keyframes artifact-count-pulse {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.3); }
  60% { transform: scale(1.0); }
}
.sidebar-artifacts-list { padding: 0 0.5rem 0.5rem; }
.artifacts-empty {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--color-fg-muted);
  font-style: italic;
}
.artifacts-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
}
.artifacts-row:hover { background: var(--color-bg); }
.artifacts-row-main { flex: 1; min-width: 0; }
.artifacts-row-title {
  color: var(--color-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.artifacts-row-meta {
  color: var(--color-fg-muted);
  font-size: 0.68rem;
  margin-top: 0.15rem;
}
.artifacts-row-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}
.artifacts-action {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  font: inherit;
  font-size: 0.65rem;
  padding: 0.15rem 0.35rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  line-height: 1;
}
.artifacts-action:hover { background: var(--color-bg-elevated); color: var(--color-fg); }
.artifacts-open {
  color: var(--color-accent, #1565c0);
  border-color: var(--color-accent, #1565c0);
}
.artifacts-open:hover {
  background: var(--color-accent, #1565c0);
  color: white;
}
/* For 'all'-mode artifacts, three open buttons (WP/slides/email) sit
   side by side. Tighten padding so they fit alongside copy + delete
   without wrapping. */
.artifacts-row-actions .artifacts-open[data-target] {
  padding: 0.12rem 0.3rem;
  font-size: 0.6rem;
}
.artifacts-delete { color: #c0392b; }
.artifacts-delete:hover { background: #fee; color: #c0392b; }

/* Bulk synthesis modal — processing + confirmation screen.
   Replaces the corner toast. Stays open until user dismisses. */
.synth-all-modal[hidden] { display: none; }
.synth-all-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.synth-all-modal-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 520px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
}
.synth-all-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.5rem;
}
.synth-all-modal-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-fg);
}
.synth-all-modal-close {
  background: transparent;
  border: none;
  color: var(--color-fg-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.synth-all-modal-body {
  padding: 0.75rem 1.25rem 1rem;
}
.synth-all-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 1.25rem 1rem;
}
/* These three sections use display: flex which would normally override the
   browser's UA `[hidden] { display: none }` rule. Explicit [hidden] rule
   at higher specificity (class + attribute) so toggling .hidden = true
   from JS actually hides them. Without this, error states leak through
   stale "success" labels (e.g. "✓ Downloaded" rows visible after a 502). */
.synth-all-progress[hidden],
.synth-all-result[hidden],
.synth-all-saved[hidden],
.synth-all-error[hidden] {
  display: none;
}
.synth-all-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
}
.synth-all-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent, #1565c0);
  border-radius: 50%;
  animation: synth-spin 0.8s linear infinite;
}
@keyframes synth-spin {
  to { transform: rotate(360deg); }
}
.synth-all-progress-text {
  margin: 0;
  color: var(--color-fg);
  text-align: center;
  font-size: 0.9rem;
}
.synth-all-elapsed {
  margin: 0;
  color: var(--color-fg-muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.synth-all-result { display: flex; flex-direction: column; gap: 0.75rem; }
.synth-all-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.synth-all-checklist li {
  color: #2e7d32;
  font-size: 0.9rem;
}
.synth-all-saved {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.synth-all-saved-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg-muted);
}
.synth-all-saved-id {
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  color: var(--color-fg);
  word-break: break-all;
}
.synth-all-saved-url-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg-muted);
  margin-top: 0.4rem;
}
.synth-all-saved-url {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.synth-all-saved-url code {
  font-size: 0.78rem;
  background: var(--color-bg-elevated);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  word-break: break-all;
  flex: 1;
  min-width: 220px;
}
.synth-all-copy-url {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  font: inherit;
  font-size: 0.75rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
}
.synth-all-copy-url:hover { background: var(--color-bg); color: var(--color-fg); }
.synth-all-saved-hint {
  font-size: 0.75rem;
  color: var(--color-fg-muted);
  margin: 0.25rem 0 0;
}
.synth-all-error {
  background: #fee;
  color: #842029;
  border: 1px solid #f5c2c7;
  border-radius: var(--radius-md);
  padding: 0.65rem 0.75rem;
  font-size: 0.85rem;
  white-space: pre-wrap;
}

/* High-confidence toggle — inline inside the source-chips row.
   Styled to be visually prominent so it's not missed against the source
   chips. Active state uses the accent color + filled background. */
.confidence-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--color-fg);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  font-weight: 500;
}
.confidence-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent, #1565c0);
}
/* Sidebar placement for the High-confidence toggle. Lives above the
   Saved artifacts panel — always visible in owner mode without scrolling.
   Replaces the easy-to-miss inline placement in the source-chips row. */
.sidebar-confidence {
  padding: 0.6rem 0.875rem;
  border-top: 1px solid var(--color-border);
}
.sidebar-confidence[hidden] { display: none; }
.sidebar-confidence-toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: 1.5px solid var(--color-accent, #1565c0);
  color: var(--color-accent, #1565c0);
  transition: background 120ms ease, color 120ms ease;
}
.sidebar-confidence-toggle:hover {
  background: var(--color-accent, #1565c0);
  color: white;
}
/* When the toggle is checked, the whole label "lights up" so the active
   state is obvious at a glance. */
.sidebar-confidence-toggle:has(input:checked) {
  background: var(--color-accent, #1565c0);
  color: white;
}
.sidebar-confidence-toggle:has(input:checked) .confidence-label-text {
  font-weight: 600;
}

/* Placeholder shown in the source-chips row when in owner mode but nothing
   is pinned yet. Keeps the row visible so the High-confidence toggle is
   always discoverable. */
.source-chips-empty {
  font-size: 0.75rem;
  color: var(--color-fg-muted);
  font-style: italic;
}

.sidebar-foot {
  padding: 0.625rem 1rem;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}
.sidebar-foot-note {
  font-size: 0.6875rem;
  color: var(--color-fg-subtle);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chat-row {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-bottom: 0.125rem;
  position: relative;
  transition: background 120ms ease;
}
.chat-row:hover { background: var(--color-bg); }
.chat-row[aria-current='true'] {
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  padding: calc(0.5rem - 1px) calc(0.625rem - 1px);
}

.chat-row-content { flex: 1; min-width: 0; }
.chat-row-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
}
.chat-row-title[contenteditable='true'] {
  white-space: normal;
  outline: 1px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.chat-row-meta {
  font-size: 0.6875rem;
  color: var(--color-fg-subtle);
  margin-top: 0.125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-row-delete {
  background: transparent;
  border: 0;
  color: var(--color-fg-subtle);
  cursor: pointer;
  padding: 0.125rem;
  border-radius: 4px;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
}
.chat-row:hover .chat-row-delete { opacity: 1; }
.chat-row-delete:hover {
  color: var(--color-accent);
  background: var(--color-bg-elevated);
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 19;
}

/* Toggle button visible on all viewports; behavior differs by width. */
.sidebar-toggle { display: inline-flex; }

/* Desktop collapse: grid drops the sidebar column, sidebar hides. */
body.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
}
body.sidebar-collapsed .sidebar {
  display: none;
}

@media (max-width: 800px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    /* 100dvh = dynamic viewport height (excludes mobile browser chrome).
       Falls back to 100vh in older browsers. */
    height: 100vh;
    height: 100dvh;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 200ms ease;
  }
  .sidebar.open { transform: translateX(0); }
  /* On mobile we use the drawer pattern, so ignore the desktop collapsed state. */
  body.sidebar-collapsed .sidebar { display: flex; }
}

/* Header */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: color-mix(in oklab, var(--color-bg) 90%, transparent);
  backdrop-filter: blur(8px);
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--color-fg);
}

.brand:hover { text-decoration: none; }

.brand img { height: 28px; width: auto; }

.brand-text {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 1.0625rem;
}

.icon-button {
  background: transparent;
  border: 0;
  color: var(--color-fg-muted);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  line-height: 1;
}

.icon-button:hover { color: var(--color-fg); background: var(--color-bg-elevated); }

[data-theme='light'] .theme-icon-dark,
[data-theme='dark'] .theme-icon-light { display: none; }

/* Export menu (popover from header download button) */
.export-wrap { position: relative; }
.export-menu[hidden] { display: none; }
.export-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 280px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0.375rem;
  z-index: 30;
}
.export-menu-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--color-fg);
  font-family: inherit;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 120ms ease;
}
/* `display: flex` above outranks the browser's UA `[hidden] { display: none }`
   rule on specificity, so synthesize-* items kept appearing in public mode
   despite `btn.hidden = true`. This higher-specificity rule restores the
   hide. Needed for the public-mode synthesis-menu gate to work. */
.export-menu-item[hidden] { display: none; }
.export-menu-item:hover { background: var(--color-bg); }
.export-menu-item strong {
  font-size: 0.875rem;
  font-weight: 600;
  display: block;
}
.export-menu-item span {
  font-size: 0.75rem;
  color: var(--color-fg-muted);
}

/* Conversation */
.conversation {
  flex: 1;
  padding: 2.5rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 0;
  min-width: 0;
  /* overflow-y for vertical scrolling of message history;
     overflow-x: hidden so a wide diagram can't grow the conversation past its
     grid track (clips visually — mermaid-block has its own internal scroll). */
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.welcome h1 {
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.75rem 0;
}

.welcome p {
  color: var(--color-fg-muted);
  margin: 0;
  line-height: 1.6;
}

.welcome em {
  color: var(--color-fg);
  font-style: normal;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  padding: 0.125rem 0.4rem;
  border-radius: var(--radius-md);
  font-size: 0.95em;
}

.message {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-width: 100%;
  min-width: 0;
  line-height: 1.65;
}

.message .role {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}

.message.user .role { color: var(--color-accent); }

.message .body {
  white-space: pre-wrap;
  word-wrap: break-word;
  min-width: 0;
}

.message.assistant .body {
  font-family: var(--font-serif), var(--font-sans);
  font-size: 1.0625rem;
}

/* Rendered Markdown inside assistant messages */
.message.assistant .body h1,
.message.assistant .body h2,
.message.assistant .body h3,
.message.assistant .body h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 1.25rem 0 0.5rem;
}
.message.assistant .body h1 { font-size: 1.4rem; }
.message.assistant .body h2 { font-size: 1.2rem; }
.message.assistant .body h3 { font-size: 1.05rem; }
.message.assistant .body h4 { font-size: 1rem; }

.message.assistant .body p { margin: 0.5rem 0; }
.message.assistant .body ul,
.message.assistant .body ol { padding-left: 1.25rem; margin: 0.5rem 0; }
.message.assistant .body li { margin: 0.2rem 0; }

.message.assistant .body code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  padding: 0.05em 0.35em;
  border-radius: 0.25rem;
}

.message.assistant .body pre {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.875rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.5;
  position: relative;
}
.message.assistant .body pre .code-copy {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease;
}
.message.assistant .body pre:hover .code-copy { opacity: 1; }
.message.assistant .body pre .code-copy:hover {
  border-color: var(--color-border-strong);
  color: var(--color-fg);
}
.message.assistant .body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
}

.message.assistant .body table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.75rem 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}
.message.assistant .body th,
.message.assistant .body td {
  border: 1px solid var(--color-border);
  padding: 0.4rem 0.6rem;
  text-align: left;
  vertical-align: top;
}
.message.assistant .body th {
  background: var(--color-bg-elevated);
  font-weight: 600;
}

.message.assistant .body blockquote {
  border-left: 3px solid var(--color-border-strong);
  margin: 0.75rem 0;
  padding: 0.25rem 0.875rem;
  color: var(--color-fg-muted);
}

/* Mermaid — preview fits the chat column. Use the Expand button (full-viewport
   modal) for detailed inspection of large diagrams.
   Diagrams are always rendered on a white canvas regardless of page theme so
   they look like clean exportable artifacts. */
.mermaid-block {
  margin: 0.875rem 0;
  padding: 0.625rem 0.625rem 1rem;
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 760px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.mermaid-viewport {
  width: 100%;
  max-width: 100%;
  max-height: min(44vh, 480px);
  overflow: auto;
  border-radius: calc(var(--radius-md) - 2px);
}
.mermaid-block svg,
.mermaid-viewport svg {
  max-width: 100% !important;
  height: auto;
  display: block;
  margin: 0 auto;
  overflow: visible;
  /* No forced width — let SVG render at viewBox-derived intrinsic size,
     capped at container width. Small diagrams stay small instead of
     getting stretched to fill the chat column. */
}
@media (max-width: 800px) {
  .mermaid-block {
    max-width: 100%;
  }
  .mermaid-viewport {
    max-height: min(36vh, 340px);
  }
}

/* Plotly charts — quantitative metrics across any domain (finance, arch, AI,
   legal). Mirrors mermaid-block chrome; Plotly's own modebar handles
   zoom/pan/download-PNG, so no custom action row. */
.plotly-block {
  margin: 0.875rem 0;
  padding: 0.625rem;
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.plotly-viewport {
  width: 100%;
  min-height: 320px;
}
.plotly-viewport .js-plotly-plot,
.plotly-viewport .plot-container {
  width: 100% !important;
}
.plotly-error-note {
  color: #b00020;
  font-size: 0.8rem;
  margin-bottom: 0.4rem;
}
@media (max-width: 800px) {
  .plotly-block { max-width: 100%; }
}
.preview-content .plotly-block {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  max-width: 100%;
}
.preview-content .plotly-viewport { min-height: 380px; }

/* Diagram modal — full-viewport view of a single diagram at natural size */
.diagram-modal[hidden] { display: none; }
.diagram-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: #0b0b0b;
  padding: 0;
}
.diagram-modal-content {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b0b0b;
}
.diagram-modal-content svg {
  max-width: none !important;
  width: max-content !important;
  height: auto;
  display: block;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  /* Pinch-zoom on touch devices */
  touch-action: pan-x pan-y pinch-zoom;
}
.diagram-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-fg);
  font-size: 1.25rem;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 51;
  display: flex;
  align-items: center;
  justify-content: center;
}
.diagram-modal-close:hover {
  background: var(--color-bg);
  border-color: var(--color-border-strong);
}

/* Synthesis preview modal — full viewport, structured for whitepaper/slide preview */
.preview-modal[hidden] { display: none; }
.preview-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}
.preview-header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}
.preview-titleblock { min-width: 0; flex: 1; }
.preview-title {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.125rem;
  letter-spacing: -0.01em;
}
.preview-subtitle {
  font-size: 0.8125rem;
  color: var(--color-fg-muted);
  margin: 0;
}
.preview-close {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  font-size: 1.25rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-close:hover {
  border-color: var(--color-border-strong);
  color: var(--color-fg);
}

.preview-body {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 1.5rem;
  display: flex;
  justify-content: center;
}
.preview-content {
  width: 100%;
  max-width: 720px;
  font-family: var(--font-serif), Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-fg);
}
.preview-content h1 { font-family: var(--font-sans); font-size: 1.75rem; font-weight: 700; margin: 0 0 1rem; letter-spacing: -0.02em; }
.preview-content h2 { font-family: var(--font-sans); font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
.preview-content h3 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; margin: 1.25rem 0 0.5rem; }
.preview-content p { margin: 0.6rem 0; }
.preview-content ul, .preview-content ol { padding-left: 1.5rem; }
.preview-content table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 0.9375rem; }
.preview-content th, .preview-content td { border: 1px solid var(--color-border); padding: 0.5rem 0.75rem; text-align: left; }
.preview-content th { background: var(--color-bg-elevated); font-weight: 600; }
.preview-content hr {
  border: 0;
  border-top: 2px dashed var(--color-border);
  margin: 2rem 0;
}
.preview-content hr::after {
  content: 'slide break';
  display: block;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
  margin-top: -0.7rem;
  background: var(--color-bg);
  padding: 0 0.5rem;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.preview-content pre {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  overflow-x: auto;
  font-size: 0.875rem;
}
.preview-content .mermaid-block {
  margin: 1rem 0;
  padding: 0.75rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  width: 100%;
  max-width: 100%;
}
.preview-content .mermaid-viewport {
  max-height: min(50vh, 520px);
}
.preview-content .mermaid-block svg { max-width: 100% !important; height: auto; }

.preview-edit {
  width: 100%;
  max-width: 720px;
  min-height: 60vh;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-fg);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  resize: vertical;
}

.preview-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}
.preview-status {
  font-size: 0.8125rem;
  color: var(--color-fg-muted);
  font-family: var(--font-sans);
}
.preview-actions-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.preview-action {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-fg);
  font-family: inherit;
  font-size: 0.8125rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.preview-action:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  background: var(--color-bg);
}
.preview-action:disabled { opacity: 0.4; cursor: not-allowed; }
.preview-action-primary {
  background: var(--color-fg);
  color: var(--color-bg);
  border-color: var(--color-fg);
}
.preview-action-primary:hover:not(:disabled) {
  opacity: 0.9;
  background: var(--color-fg);
  color: var(--color-bg);
}
/* Force mermaid's foreignObject HTML labels to its intended size — otherwise they
   inherit the assistant body's 17px serif and overflow the measured foreignObject. */
.mermaid-block foreignObject,
.mermaid-block foreignObject div,
.mermaid-block foreignObject span {
  font-size: 14px;
  line-height: 1.2;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
.mermaid-error { text-align: left; }
.mermaid-error-note {
  color: var(--color-accent);
  font-size: 0.8125rem;
  font-family: var(--font-sans);
  margin-bottom: 0.5rem;
}

.mermaid-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.625rem;
  font-family: var(--font-sans);
}

/* Bulk-synthesis status toast — bottom-right, non-blocking */
.synth-all-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 60;
  max-width: 360px;
  padding: 0.75rem 1rem;
  background: var(--color-bg-elevated, #1f2937);
  color: var(--color-fg, #f3f4f6);
  border: 1px solid var(--color-border, #374151);
  border-radius: var(--radius-md, 8px);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
.synth-all-toast-error {
  border-color: #b91c1c;
}
.mermaid-action {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}
.mermaid-action:hover {
  border-color: var(--color-border-strong);
  color: var(--color-fg);
}

.message.error .body {
  color: var(--color-accent);
  font-style: italic;
}

.cursor {
  display: inline-block;
  width: 0.5ch;
  background: var(--color-fg);
  animation: blink 1s steps(2, start) infinite;
  margin-left: 1px;
}

@keyframes blink { to { visibility: hidden; } }

/* Topic chips */
.topic-chips {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--color-border);
}

.topic-chips[hidden] { display: none; }

.topic-chips-label {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}

.topic-chips-row {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 0.25rem;
  flex: 1;
  min-width: 0;
}

.topic-chip {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1;
  padding: 0.375rem 0.625rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.topic-chip:hover {
  border-color: var(--color-border-strong);
  color: var(--color-fg);
}

.topic-chip[aria-pressed='true'] {
  background: var(--color-fg);
  color: var(--color-bg);
  border-color: var(--color-fg);
}

.topic-chip-count {
  margin-left: 0.3rem;
  color: var(--color-fg-subtle);
  font-variant-numeric: tabular-nums;
}

.topic-chip[aria-pressed='true'] .topic-chip-count {
  color: color-mix(in oklab, var(--color-bg) 70%, var(--color-fg));
}

/* Court filter — lives inside the library, under the Legal domain. "All courts"
   (comprehensive) + per-court chips that scope legal retrieval by court. */
.library-court-filter {
  padding: 0.4rem 0.5rem 0.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.library-court-filter-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}

.library-court-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.court-chip {
  background: transparent;
  border: 1px dashed var(--color-border);
  color: var(--color-fg-muted);
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1;
  padding: 0.375rem 0.625rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.court-chip:hover {
  border-color: var(--color-border-strong);
  color: var(--color-fg);
}

.court-chip[aria-pressed='true'] {
  background: var(--color-fg);
  color: var(--color-bg);
  border-style: solid;
  border-color: var(--color-fg);
}

.court-chip-count {
  margin-left: 0.3rem;
  color: var(--color-fg-subtle);
  font-variant-numeric: tabular-nums;
}

.court-chip[aria-pressed='true'] .court-chip-count {
  color: color-mix(in oklab, var(--color-bg) 70%, var(--color-fg));
}

/* "All courts" default chip — solid border (vs dashed individual courts) so it
   reads as the comprehensive baseline rather than a specific jurisdiction. */
.court-chip-all {
  border-style: solid;
}

/* Composer */
.composer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: sticky;
  bottom: 0;
}

.composer:focus-within {
  border-color: var(--color-border-strong);
}

.composer textarea {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  resize: none;
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  max-height: 200px;
  padding: 0.375rem 0.25rem;
}

.composer textarea::placeholder { color: var(--color-fg-subtle); }

.composer button {
  background: var(--color-fg);
  color: var(--color-bg);
  border: 0;
  border-radius: var(--radius-md);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 200ms ease;
}

.composer button:hover { opacity: 0.85; }
.composer button:disabled { opacity: 0.4; cursor: not-allowed; }

.footnote {
  grid-column: 2;
  text-align: center;
  margin: 0 0 1rem 0;
  padding: 0 1.25rem;
}

.footnote-grounding {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-fg-subtle);
}

/* Compact "keep in touch" links, consolidated onto the footer line. Plain text
   links with · separators — minimal real estate, shown on mobile too. */
.footnote-links {
  margin: 0.3rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  font-size: 0.75rem;
}

.footnote-links-label {
  color: var(--color-fg-subtle);
}

.footnote-links a {
  color: var(--color-fg-muted);
  font-weight: 600;
  text-decoration: none;
  transition: color 150ms ease;
}

.footnote-links a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.footnote-sep {
  color: var(--color-fg-subtle);
}

@media (max-width: 800px) {
  .footnote { grid-column: 1; padding: 0; }
  /* Drop the verbose lead on mobile — the three links carry the meaning. */
  .footnote-links-label { display: none; }
}

/* ---- Print / PDF export ------------------------------------------------- */

/* Print header hidden on screen */
.print-header { display: none; }

@media print {
  /* Hide all UI chrome */
  .sidebar,
  .sidebar-backdrop,
  .app-header,
  .topic-chips,
  .composer,
  .footnote,
  .mermaid-actions,
  .code-copy,
  .diagram-modal,
  .cursor {
    display: none !important;
  }

  /* Reset body to a single column document layout */
  html, body {
    background: white !important;
    color: black !important;
  }
  body {
    display: block !important;
    grid-template: none !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  body.sidebar-collapsed {
    grid-template-columns: none !important;
  }

  /* Print header (set visible by JS before print) */
  .print-header {
    display: block !important;
    border-bottom: 2px solid #000;
    padding: 0 0 0.75rem;
    margin: 0 0 1.5rem;
    page-break-after: avoid;
  }
  .print-kicker {
    margin: 0 0 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #666;
  }
  .print-title {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    letter-spacing: -0.01em;
  }
  .print-meta {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: #555;
    margin: 0;
  }
  .print-summary {
    margin: 0.45rem 0 0;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    color: #666;
    font-variant-numeric: tabular-nums;
  }

  /* Conversation: just a stack of messages */
  .conversation {
    overflow: visible !important;
    display: block !important;
    padding: 0 !important;
    max-height: none !important;
  }

  .welcome { display: none; }

  /* Message styling — whitepaper register */
  .message {
    page-break-inside: avoid;
    margin-bottom: 1.25rem;
    display: block !important;
  }
  .message .role {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #555 !important;
    margin-bottom: 0.25rem;
  }
  .message.user .role { color: #000 !important; }
  .message.assistant .role { color: #999 !important; }

  .message .body,
  .message.assistant .body {
    font-family: 'Source Serif 4', Georgia, serif !important;
    font-size: 11pt !important;
    line-height: 1.5 !important;
    color: black !important;
  }

  /* Headings: keep with following paragraph */
  .message.assistant .body h1,
  .message.assistant .body h2,
  .message.assistant .body h3,
  .message.assistant .body h4 {
    page-break-after: avoid;
    color: black !important;
  }

  /* Diagrams: keep on one page if they fit, vector-quality SVG */
  .mermaid-block {
    page-break-inside: avoid;
    background: white !important;
    border: 1px solid #999 !important;
    padding: 0.5rem !important;
  }
  .mermaid-block svg {
    /* Cap at container width so dense diagrams don't bleed off the page,
       but allow smaller diagrams to render at intrinsic size instead of
       being stretched. Same behavior as the screen rule. The whitepaper
       PDF (body.printing-preview class) gets a stricter 6.5in cap via a
       more-specific selector further down. */
    max-width: 100% !important;
    height: auto !important;
  }
  .mermaid-viewport {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Code blocks: wrap, don't overflow page */
  .message.assistant .body pre {
    page-break-inside: avoid;
    background: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    color: black !important;
  }
  .message.assistant .body pre code {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
  }
  .message.assistant .body code {
    background: #f5f5f5 !important;
    border: 1px solid #ddd !important;
  }

  /* Tables */
  .message.assistant .body table {
    page-break-inside: avoid;
  }
  .message.assistant .body th {
    background: #f0f0f0 !important;
  }

  /* Show URLs after links so they're useful in print */
  .message.assistant .body a[href]:after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    color: #555;
  }
  .message.assistant .body a[href^='#']:after,
  .message.assistant .body a[href^='/']:after {
    content: '';
  }

  /* Raw chat PDF template: tighter width and card-like message blocks for
     cleaner page rhythm when exporting conversation transcripts. */
  body.printing-raw-pdf .conversation,
  body.printing-raw-pdf .print-header {
    width: 100%;
    max-width: 6.7in;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.printing-raw-pdf .print-header {
    border-bottom: 1px solid #222;
    padding-bottom: 0.7rem;
    margin-bottom: 1rem;
  }
  body.printing-raw-pdf .message {
    border: 1px solid #d8d8d8;
    border-left-width: 4px;
    border-radius: 6px;
    padding: 0.6rem 0.75rem 0.7rem;
    margin: 0 0 0.85rem;
    background: #fff;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  body.printing-raw-pdf .message.user {
    border-left-color: #222;
    background: #fcfcfc;
  }
  body.printing-raw-pdf .message.assistant {
    border-left-color: #7b7b7b;
  }
  body.printing-raw-pdf .message .role {
    margin-bottom: 0.35rem;
  }
  body.printing-raw-pdf .message .body,
  body.printing-raw-pdf .message.assistant .body {
    font-size: 10.8pt !important;
    line-height: 1.48 !important;
  }
  body.printing-raw-pdf .message.assistant .body p {
    margin: 0.45em 0;
  }
  body.printing-raw-pdf .message.assistant .body pre {
    margin: 0.55rem 0;
    padding: 0.55rem;
  }
  body.printing-raw-pdf .message.assistant .body table {
    width: 100%;
    border-collapse: collapse;
  }
  body.printing-raw-pdf .message.assistant .body th,
  body.printing-raw-pdf .message.assistant .body td {
    padding: 0.3rem 0.38rem;
  }

  /* Page setup */
  @page {
    size: letter;
    margin: 0.75in;
  }

  /* When printing from the synthesis preview, hide everything else and print
     the preview content as the document. */
  body.printing-preview .conversation,
  body.printing-preview .print-header { display: none !important; }
  body.printing-preview .preview-modal {
    display: flex !important;
    position: static !important;
    background: white !important;
    inset: auto !important;
  }
  body.printing-preview .preview-header,
  body.printing-preview .preview-actions { display: none !important; }
  body.printing-preview .preview-body {
    overflow: visible !important;
    padding: 0 !important;
  }
  body.printing-preview .preview-content {
    max-width: none !important;
    color: black !important;
    background: white !important;
    width: 100% !important;
  }
  body.printing-preview .preview-content h1,
  body.printing-preview .preview-content h2,
  body.printing-preview .preview-content h3,
  body.printing-preview .preview-content h4 { color: black !important; }
  /* Slide deck mode: each top-level heading and each --- starts a new page */
  body.printing-preview .preview-modal.mode-slides .preview-content h1,
  body.printing-preview .preview-modal.mode-slides .preview-content hr {
    page-break-before: always;
  }
  body.printing-preview .preview-modal.mode-slides .preview-content > :first-child {
    page-break-before: auto;
  }
  /* Hide the "slide break" label decoration in print */
  body.printing-preview .preview-content hr::after { display: none !important; }
  body.printing-preview .preview-content hr {
    border: 0 !important;
    margin: 0 !important;
  }
  /* Mermaid in preview keeps its container border when printed */
  body.printing-preview .preview-content .mermaid-block {
    border: 1px solid #999 !important;
    background: white !important;
    page-break-inside: avoid;
  }
  body.printing-preview .preview-content .mermaid-block .mermaid-actions { display: none !important; }

  /* Centered print header for synthesized PDFs */
  body.printing-preview .preview-print-header {
    display: block !important;
    text-align: center;
    border-bottom: 1px solid #000;
    padding: 0 0 0.6rem;
    margin: 0 0 1.5rem;
    page-break-after: avoid;
  }
  body.printing-preview .pph-title {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: #000 !important;
    letter-spacing: -0.01em;
  }
  body.printing-preview .pph-meta {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    margin: 0.3rem 0 0;
    color: #555 !important;
  }
}

/* ---- Publish-to-docs modal --------------------------------------------- */
/* Compact form modal opened from the whitepaper preview. Mirrors upload-modal
   visual language so it feels like part of the same family. */
.publish-docs-modal[hidden] { display: none; }
.publish-docs-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.publish-docs-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 560px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
}
.publish-docs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.5rem;
}
.publish-docs-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-fg);
}
.publish-docs-close {
  background: transparent;
  border: none;
  color: var(--color-fg-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.publish-docs-form {
  padding: 0.5rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.publish-docs-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.publish-docs-field > span:first-child {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-fg);
}
.publish-docs-optional {
  font-weight: 400;
  font-style: italic;
  color: var(--color-fg-muted);
}
.publish-docs-field input,
.publish-docs-field textarea {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.6rem;
  background: var(--color-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
}
.publish-docs-field input:focus,
.publish-docs-field textarea:focus {
  outline: none;
  border-color: var(--color-accent, #1565c0);
}
/* Chart-mode toggle (static vs interactive). The .publish-docs-field input
   rule above styles text inputs — reset radios here so they render as native
   controls, not bordered boxes, and lay the labels out as rows. */
.publish-docs-charts {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.7rem 0.6rem;
  margin: 0;
}
.publish-docs-charts legend {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-fg);
  padding: 0 0.3rem;
}
.publish-docs-radio {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  padding: 0.25rem 0;
  cursor: pointer;
}
.publish-docs-charts input[type="radio"] {
  width: auto;
  margin: 0.15rem 0 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  flex: none;
  accent-color: var(--color-accent, #1565c0);
}
.publish-docs-hint {
  font-size: 0.7rem;
  color: var(--color-fg-muted);
}
.publish-docs-hint code {
  background: var(--color-bg);
  padding: 0.05rem 0.25rem;
  border-radius: 3px;
  font-size: 0.95em;
}
.publish-docs-info {
  font-size: 0.75rem;
  color: var(--color-fg-muted);
  background: var(--color-bg);
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent, #1565c0);
  line-height: 1.5;
}
.publish-docs-status {
  font-size: 0.85rem;
  color: var(--color-fg-muted);
  padding: 0.3rem 0;
  min-height: 1.5rem;
}
.publish-docs-status-error {
  color: #b45309;
}
.publish-docs-status-success {
  color: #15803d;
  word-break: break-all;
}
.publish-docs-status-success a {
  color: var(--color-accent, #1565c0);
}
.publish-docs-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* Print header in preview is hidden on screen */
.preview-print-header { display: none; }

/* ---- Whitepaper chrome (banner + ToC + back-to-top) -------------------- */
/* Screen styling: render the banner + ToC + back-links as part of the
   preview so what you see in the preview modal is what you'll get in the
   exported PDF. */

.whitepaper-banner {
  margin: -1rem -1rem 1.5rem;
  background: #ffffff;
  border-bottom: 1px solid #e5e5e5;
}
.whitepaper-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.whitepaper-toc {
  margin: 1.25rem 0 1.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  page-break-after: always;
}
.whitepaper-toc-title {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-fg);
  border: none;
  padding: 0;
}
.whitepaper-toc-list,
.whitepaper-toc-sublist {
  list-style: decimal;
  padding-left: 1.25rem;
  margin: 0.25rem 0;
}
.whitepaper-toc-sublist {
  list-style: lower-alpha;
  margin-top: 0.2rem;
  margin-bottom: 0.4rem;
}
.whitepaper-toc-l2,
.whitepaper-toc-l3 {
  padding: 0.15rem 0;
  font-size: 0.9rem;
}
.whitepaper-toc-l3 { font-size: 0.85rem; color: var(--color-fg-muted); }
.whitepaper-toc a {
  color: var(--color-fg);
  text-decoration: none;
}
.whitepaper-toc a:hover {
  color: var(--color-accent, #1565c0);
  text-decoration: underline;
}

.whitepaper-back-to-toc {
  margin: 0.4rem 0 1.1rem;
  font-size: 0.72rem;
  text-align: right;
}
.whitepaper-back-to-toc a {
  color: var(--color-fg-muted);
  text-decoration: none;
}
.whitepaper-back-to-toc a:hover {
  color: var(--color-accent, #1565c0);
  text-decoration: underline;
}

/* Print styles for the whitepaper chrome — banner becomes title-page
   element, ToC gets its own page, back-links remain anchor-clickable. */
@media print {
  body.printing-preview .whitepaper-banner {
    margin: 0 0 2rem;
    page-break-after: always;
    page-break-inside: avoid;
  }
  body.printing-preview .whitepaper-banner img {
    width: 100%;
    max-width: 7in;
    margin: 0 auto;
    display: block;
  }
  body.printing-preview .whitepaper-toc {
    page-break-after: always;
    page-break-inside: avoid;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0 0 1rem;
  }
  body.printing-preview .whitepaper-toc-title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }
  body.printing-preview .whitepaper-back-to-toc {
    /* Hide back-links in PDF — the PDF reader's own nav is enough, and
       printed back-links read as noise. */
    display: none;
  }
  /* Mermaid diagrams in PDF — cap width so dense diagrams don't bleed
     past the page margins. height: auto preserves aspect ratio. */
  body.printing-preview .mermaid-block svg {
    max-width: 6.5in !important;
    height: auto;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  body { padding: 0 1rem; }
  .welcome h1 { font-size: 1.5rem; }
  .conversation { padding-top: 1.5rem; }
}