/* ════════════════════════════════════════════════════════════════════════
 * Public Ask page — JUST the studio design-system variable mapping + a body
 * reset. The actual look comes ENTIRELY from the shared ask-shell.css +
 * ask-card.css (the workspace Ask), so /ask/<page> is identical to the studio.
 * (The old bespoke pa-* shell + its overrides were removed — they fought the
 * shared card styles and constrained the layout.)
 * ════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; width: 100%; }
body.pa-ask {
  font-family: var(--font-ui);
  background: var(--surface-2);
  color: var(--ink-900);
  overflow: hidden;          /* the ask-workspace owns scrolling */
}
#pa-ask-root { width: 100%; height: 100%; }

/* Studio design tokens consumed by ask-shell.css + ask-card.css. Light mirrors
   home.css exactly; dark translates the same roles onto a dark theme. */
body {
  --font-ui: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
  --shadow-1: 0 1px 2px rgba(15,23,42,.05);
}
body.pa-light {
  --surface: #fff; --surface-1: #fff; --surface-2: #f8fafc; --surface-3: #f1f5f9;
  --line: #e2e8f0; --line-200: #e2e8f0; --line-soft: #eef1f6; --line-strong: #cbd5e1;
  --ink-900: #0f172a; --ink-700: #334155; --ink-600: #475569; --ink-500: #64748b; --ink-400: #94a3b8;
  --brand-50: #eef2ff; --brand-200: #c7d2fe; --brand-300: #a5b4fc;
  --brand-400: #6b7cff; --brand-500: #1f4fd6; --brand-600: #4338ca;
}
body:not(.pa-light) {
  --surface: #141a2e; --surface-1: #141a2e; --surface-2: #0f1526; --surface-3: #1a2138;
  --line: rgba(255,255,255,.10); --line-200: rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.07); --line-strong: rgba(255,255,255,.16);
  --ink-900: #e7ecf5; --ink-800: #dbe2ef; --ink-700: #c6cfdf; --ink-600: #b3bdd2; --ink-500: #9aa6bf; --ink-400: #8b97b0;
  --brand-50: rgba(96,165,250,.12); --brand-100: rgba(96,165,250,.18); --brand-200: rgba(96,165,250,.35); --brand-300: rgba(96,165,250,.5);
  --brand-400: #60a5fa; --brand-500: #3b82f6; --brand-600: #93c5fd; --brand-700: #bfdbfe;
}

/* ════════ Top nav bar ════════ */
/* Full-width sticky bar across the top of the chat: page name on the left,
   the controls (model · length · PDF · theme) grouped on the right. */
.pa-ask-topbar { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 16px; position: sticky; top: 0; z-index: 20;
  background: var(--surface, #fff); border-bottom: 1px solid var(--line, #e2e8f0);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.pa-ask-title { font: 700 15px/1.2 var(--font-ui, system-ui, sans-serif);
  color: var(--ink-900, #0f172a); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; min-width: 0; }
/* Chat-history toggle — hidden on desktop (the rail is always shown); revealed on
   mobile by the ask-shell @media block, where it's the reliable way to open history. */
.pa-ask-menu { display: none; flex: none; width: 34px; height: 34px; align-items: center;
  justify-content: center; border: 1px solid var(--line, #e2e8f0); background: var(--surface, #fff);
  color: var(--ink-600, #475569); border-radius: 9px; font-size: 17px; line-height: 1; cursor: pointer; }
.pa-ask-menu:hover { border-color: var(--brand-300, #a5b4fc); color: var(--brand-600, #4338ca); }
/* On Ollama the model-quality and length selectors don't apply (one local model),
   so hide them to declutter the top nav. (Defaults still apply under the hood.) */
body.pa-provider-ollama .pa-ask-field { display: none; }
/* The Compute (Auto/Local) switch is hidden in the public Ask UI (removed per
   request). The <select> stays in the DOM so the compute-mode JS keeps working. */
body.pa-provider-ollama .pa-compute-field,
.pa-compute-field { display: none !important; }
.pa-ask-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 0;
  margin-left: auto; }
.pa-ask-tools > :last-child { margin-right: 0; }
.pa-ask-field { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
.pa-ask-field .pa-ask-model { margin-right: 0; }
.pa-ask-flabel { font: 700 10.5px/1 var(--font-ui, system-ui, sans-serif);
  color: var(--ink-500, #64748b); text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap; }

/* ════════ Per-chat model selector ════════ */
/* Solid surface bg (not transparent) so the control is clearly visible on the
   topbar in BOTH light and dark themes. */
.pa-ask-model { font: 600 12px/1 var(--font-ui, system-ui, sans-serif); color: var(--ink-900, #0f172a);
  background: var(--surface, #fff); border: 1px solid var(--line-strong, #cbd5e1); border-radius: 8px;
  padding: 6px 26px 6px 9px; margin-right: 8px; cursor: pointer; appearance: auto;
  box-shadow: var(--shadow-1, 0 1px 2px rgba(15,23,42,.06)); }
.pa-ask-model:hover { border-color: var(--brand-400, #6b7cff); color: var(--brand-500, #1f4fd6); }
.pa-ask-model:focus { outline: none; border-color: var(--brand-400, #6b7cff);
  box-shadow: 0 0 0 3px var(--brand-50, #eef2ff); }
.pa-ask-cap-note { margin-top: 10px; padding: 7px 11px; font: 500 12px/1.4 var(--font-ui, system-ui, sans-serif);
  color: var(--ink-600, #475569); background: var(--brand-50, #eef2ff);
  border: 1px solid var(--line, #e2e8f0); border-radius: 8px; }

/* ════════ Export-to-PDF ════════ */
.pa-ask-export { display: none !important; }   /* removed from the top nav (kept in DOM for export logic) */
.pa-ask-theme { margin-left: auto; }           /* light/dark toggle pinned to the far right */
.pa-ask-export.__pdf-unused { font: 600 12px/1 var(--font-ui, system-ui, sans-serif); color: var(--ink-700, #334155);
  background: var(--surface, #fff); border: 1px solid var(--line-strong, #cbd5e1); border-radius: 8px;
  padding: 6px 11px; cursor: pointer; margin-right: 8px;
  box-shadow: var(--shadow-1, 0 1px 2px rgba(15,23,42,.06));
  transition: background .12s, color .12s, border-color .12s; }
.pa-ask-export:hover { background: var(--brand-50, #eef2ff); color: var(--brand-500, #1f4fd6); border-color: var(--brand-300, #a5b4fc); }
.pa-msg-export { display: inline-flex; align-items: center; gap: 4px; margin-top: 9px;
  font: 600 11.5px/1 var(--font-ui, system-ui, sans-serif); color: var(--ink-600, #475569);
  background: var(--surface, #fff); border: 1px solid var(--line, #e2e8f0); border-radius: 7px;
  padding: 5px 9px; cursor: pointer; opacity: .9; transition: opacity .12s, color .12s, background .12s, border-color .12s; }
.ask-msg:hover .pa-msg-export, .pa-msg-export:focus { opacity: 1; }
.pa-msg-export:hover { color: var(--brand-500, #1f4fd6); background: var(--brand-50, #eef2ff); border-color: var(--brand-300, #a5b4fc); }

/* Export overlay — a brief "Generating PDF…" screen that holds the sheet ON
   SCREEN while html2canvas captures it (off-screen elements capture blank). */
#pa-print-overlay { position: fixed; inset: 0; z-index: 2147483000; overflow: auto;
  background: rgba(15, 23, 42, .55); display: flex; flex-direction: column; align-items: center; padding: 22px 10px; }
.pa-print-toast { color: #fff; font: 600 13px/1.3 var(--font-ui, system-ui, sans-serif); margin: 2px 0 14px; }
/* The white "page" sheet that gets rendered into the PDF. */
#pa-print-root { width: 760px; max-width: 96vw; background: #fff; color: #0f172a;
  font: 14px/1.62 var(--font-ui, system-ui, sans-serif); padding: 28px 32px 30px; border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.pa-print-chart { max-width: 100%; height: auto; }
.pa-print-head { border-bottom: 2px solid #e2e8f0; padding-bottom: 9px; margin-bottom: 18px; }
.pa-print-title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.pa-print-meta { font-size: 11px; color: #64748b; margin-top: 3px; }
.pa-print-foot { margin-top: 22px; padding-top: 9px; border-top: 1px solid #e2e8f0;
  font-size: 10px; color: #94a3b8; text-align: center; }
#pa-print-root .ask-msg { margin: 0 0 16px; max-width: none; }
#pa-print-root .ask-msg.user .ask-bubble { background: #f1f5f9; border-left: 3px solid #6b7cff;
  padding: 9px 12px; border-radius: 8px; font-weight: 600; color: #0f172a; }
#pa-print-root .ask-msg.user .ask-bubble::before { content: "You asked"; display: block;
  color: #6b7cff; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
#pa-print-root .ask-msg.assistant .ask-bubble { background: none; padding: 0; }
#pa-print-root .ask-answer { color: #0f172a; }
/* keep these whole on a page (html2pdf reads these page-break hints) */
#pa-print-root .ask-callout, #pa-print-root .ask-mermaid, #pa-print-root .whse-ask-tablewrap,
#pa-print-root .ask-result, #pa-print-root pre, #pa-print-root .ask-answer h2,
#pa-print-root .ask-answer h3 { break-inside: avoid; page-break-inside: avoid; }
#pa-print-root a { color: #4338ca; text-decoration: none; }
/* Fallback only: if the PDF library can't load we call window.print(). */
@media print {
  body > *:not(#pa-print-overlay) { display: none !important; }
  #pa-print-overlay { position: static; inset: auto; background: none; padding: 0; display: block; overflow: visible; }
  .pa-print-toast { display: none; }
  #pa-print-root { width: auto; max-width: none; box-shadow: none; border-radius: 0; padding: 0; }
  #pa-print-root, #pa-print-root * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  @page { margin: 16mm 14mm; }
  html, body { background: #fff !important; }
}

/* ════════ Sign-in nudge (anonymous visitors with saved chats) ════════ */
.ask-signin-nudge { margin: 10px 8px 4px; padding: 10px 12px; border-radius: 10px;
  background: var(--brand-50, #eef2ff); border: 1px solid var(--brand-200, #c7d2fe);
  font: 500 12px/1.5 var(--font-ui, system-ui, sans-serif); color: var(--ink-600, #475569);
  position: relative; }
.ask-signin-nudge .ask-signin-link { display: inline-block; margin-top: 3px; font-weight: 700;
  color: var(--brand-500, #1f4fd6); text-decoration: none; }
.ask-signin-nudge .ask-signin-link:hover { text-decoration: underline; }
.ask-signin-nudge .ask-signin-x { position: absolute; top: 6px; right: 7px; border: 0;
  background: transparent; color: var(--ink-400, #94a3b8); font-size: 12px; cursor: pointer;
  line-height: 1; padding: 2px; }
.ask-signin-nudge .ask-signin-x:hover { color: var(--ink-700, #334155); }

/* ════════ Signed-in identity chip (rail foot) ════════ */
.ask-rail-foot { margin-top: auto; padding: 8px; }
.ask-rail-foot:empty { display: none; }
.ask-id { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px;
  background: var(--surface-3, #f1f5f9); border: 1px solid var(--line, #e2e8f0); }
.ask-id-av { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center; }
.ask-id-initial { background: var(--brand-500, #1f4fd6); color: #fff; font: 700 12px/1 var(--font-ui, system-ui, sans-serif); }
.ask-id-name { font: 600 12.5px/1.2 var(--font-ui, system-ui, sans-serif); color: var(--ink-700, #334155);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-id-out { margin-left: auto; flex: 0 0 auto; border: 0; background: transparent;
  color: var(--ink-400, #94a3b8); font-size: 14px; line-height: 1; cursor: pointer;
  padding: 4px 5px; border-radius: 6px; }
.ask-id-out:hover { color: var(--brand-500, #1f4fd6); background: var(--brand-50, #eef2ff); }
.ask-id-signin { display: block; width: 100%; text-align: center; padding: 9px 11px; border-radius: 10px;
  background: var(--brand-50, #eef2ff); border: 1px solid var(--brand-200, #c7d2fe); cursor: pointer;
  color: var(--brand-500, #1f4fd6); font: 700 12.5px/1.35 var(--font-ui, system-ui, sans-serif);
  text-decoration: none; }
.ask-id-signin:hover { background: var(--brand-100, #e0e7ff); border-color: var(--brand-300, #a5b4fc); }

/* ════════ In-page sign-in popup (Google + email magic link) ════════ */
.pa-signin-ov { position: fixed; inset: 0; z-index: 2147482000; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 23, 42, .5); backdrop-filter: blur(2px); }
.pa-signin-modal { position: relative; width: 360px; max-width: 94vw;
  background: var(--surface, #fff); color: var(--ink-900, #0f172a);
  border: 1px solid var(--line, #e2e8f0); border-radius: 16px; padding: 24px 22px 22px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .35); }
.pa-signin-close { position: absolute; top: 12px; right: 12px; border: 0; background: transparent;
  color: var(--ink-400, #94a3b8); font-size: 15px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.pa-signin-close:hover { color: var(--ink-700, #334155); background: var(--surface-3, #f1f5f9); }
.pa-signin-title { font: 800 19px/1.2 var(--font-ui, system-ui, sans-serif); letter-spacing: -.01em; }
.pa-signin-sub { margin: 5px 0 18px; font: 400 13px/1.5 var(--font-ui, system-ui, sans-serif); color: var(--ink-500, #64748b); }
.pa-signin-google { display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 11px; border-radius: 10px; border: 1px solid var(--line-strong, #cbd5e1);
  background: var(--surface, #fff); color: var(--ink-900, #0f172a); text-decoration: none;
  font: 700 14px/1 var(--font-ui, system-ui, sans-serif); box-shadow: var(--shadow-1, 0 1px 2px rgba(15,23,42,.06)); }
.pa-signin-google:hover { background: var(--surface-3, #f1f5f9); border-color: var(--brand-300, #a5b4fc); }
.pa-signin-google .pa-g { display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #4285F4;
  font-weight: 800; font-size: 13px; border: 1px solid #e2e8f0; }
.pa-signin-or { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--ink-400, #94a3b8);
  font: 600 11px/1 var(--font-ui, system-ui, sans-serif); }
.pa-signin-or::before, .pa-signin-or::after { content: ""; flex: 1; height: 1px; background: var(--line, #e2e8f0); }
.pa-signin-email { display: flex; flex-direction: column; gap: 9px; }
.pa-signin-email input { width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line-strong, #cbd5e1); background: var(--surface, #fff); color: var(--ink-900, #0f172a);
  font: 400 14px/1.2 var(--font-ui, system-ui, sans-serif); }
.pa-signin-email input:focus { outline: none; border-color: var(--brand-400, #6b7cff); box-shadow: 0 0 0 3px var(--brand-50, #eef2ff); }
.pa-signin-email button { width: 100%; padding: 11px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--brand-500, #1f4fd6); color: #fff; font: 700 14px/1 var(--font-ui, system-ui, sans-serif); }
.pa-signin-email button:hover { background: var(--brand-600, #1a43b8); }
.pa-signin-email button:disabled { opacity: .6; cursor: default; }
.pa-signin-feedback { font: 500 12.5px/1.5 var(--font-ui, system-ui, sans-serif); color: var(--ink-600, #475569); min-height: 1px; }
.pa-signin-feedback.ok { color: #16a34a; }
.pa-signin-feedback.err { color: #dc2626; }

/* ════════ Files view — knowledge-base browser + interactive grid ════════ */
.pa-ask-viewtoggle { display: inline-flex; gap: 2px; margin-left: 10px; padding: 2px;
  background: var(--surface-2, #eef1f5); border-radius: 999px; }
.pa-view-btn { border: 0; background: transparent; cursor: pointer; padding: 4px 12px;
  border-radius: 999px; font: 600 12.5px var(--font-ui, system-ui, sans-serif);
  color: var(--ink-600, #475569); }
.pa-view-btn.is-active { background: var(--surface, #fff); color: var(--ink-900, #0f172a);
  box-shadow: var(--shadow-1, 0 1px 3px rgba(16,24,40,.12)); }

.pa-files { flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--surface, #fff); overflow: hidden; }
.pa-files[hidden] { display: none; }
.pa-files-list { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pa-files-head { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; font: 600 13px var(--font-ui, system-ui, sans-serif);
  color: var(--ink-700, #334155); border-bottom: 1px solid var(--line, #e7ebf0); }
.pa-files-refresh { border: 1px solid var(--line-strong, #c1c9d2); background: var(--surface, #fff);
  border-radius: 8px; width: 30px; height: 30px; cursor: pointer; color: var(--ink-600, #475569); }
.pa-files-upload { margin-left: 8px; border: 1px solid var(--brand-500, #3b6df0);
  background: var(--brand-500, #3b6df0); color: #fff; border-radius: 8px; height: 30px;
  padding: 0 12px; cursor: pointer; font: 600 12.5px var(--font-ui, system-ui, sans-serif);
  white-space: nowrap; transition: filter .14s ease; }
.pa-files-upload:hover { filter: brightness(1.06); }
.pa-files-upload[hidden] { display: none; }
.pa-files-upmsg { padding: 8px 20px; font: 600 12.5px var(--font-ui, system-ui, sans-serif);
  color: var(--ink-600, #475569); border-bottom: 1px solid var(--line, #e7ebf0); }
.pa-files-upmsg.ok { color: var(--ok-700, #16794c); }
.pa-files-upmsg.err { color: var(--danger-700, #b42318); }
.pa-files-upmsg[hidden] { display: none; }
.pa-files-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px;
  -webkit-overflow-scrolling: touch; }
.pa-files-count { font: 700 10.5px var(--font-ui, system-ui, sans-serif);
  color: var(--ink-500, #64748b); text-transform: uppercase; letter-spacing: .07em;
  margin: 0 4px 10px; }
/* Clean ROW cards — thumbnail/icon · name + type · chevron. Reads like a file list. */
.pa-files-grid { display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.pa-file-card { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 11px 13px; cursor: pointer; font: inherit;
  background: var(--surface, #fff); border: 1px solid var(--line, #e7ebf0);
  border-radius: 14px; transition: border-color .14s ease, box-shadow .14s ease, transform .12s ease; }
.pa-file-card:hover { border-color: var(--brand-400, #5a86f0);
  box-shadow: 0 6px 18px rgba(15,23,42,.09); transform: translateY(-1px); }
.pa-file-card:active { transform: translateY(0); box-shadow: none; }
.pa-file-thumb, .pa-file-ic { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pa-file-thumb { background: var(--surface-2, #f1f5f9); border: 1px solid var(--line, #e7ebf0); }
.pa-file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-file-ic { font-size: 24px; line-height: 1; background: var(--surface-2, #eef2f8); }
.pa-file-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pa-file-nm { font: 600 14px var(--font-ui, system-ui, sans-serif); color: var(--ink-900, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-file-meta { font: 600 11px var(--font-ui, system-ui, sans-serif); color: var(--ink-500, #64748b);
  text-transform: uppercase; letter-spacing: .03em; }
.pa-file-go { flex: 0 0 auto; color: var(--ink-400, #94a3b8); font-size: 22px; font-weight: 600;
  line-height: 1; }
/* Mobile: single-column big rows, bigger preview + search, smooth scroll. */
@media (max-width: 760px) {
  .pa-files-body { padding: 10px 12px; }
  .pa-files-grid { grid-template-columns: 1fr; gap: 8px; }
  .pa-file-card { padding: 13px 14px; }
  .pa-file-thumb, .pa-file-ic { width: 54px; height: 54px; border-radius: 13px; }
  .pa-file-ic { font-size: 27px; }
  .pa-file-nm { font-size: 15.5px; }
  .pa-files-search { font-size: 16px; padding: 12px 14px; border-radius: 12px; }
}
.pa-files-empty, .pa-files-loading, .pa-view-empty, .pa-view-loading {
  padding: 30px; text-align: center; color: var(--ink-500, #64748b);
  font: 500 13.5px var(--font-ui, system-ui, sans-serif); }

.pa-files-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pa-files-view[hidden] { display: none; }
.pa-view-head { display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  border-bottom: 1px solid var(--line, #e7ebf0); flex: none; }
.pa-view-back { border: 0; background: transparent; cursor: pointer; color: var(--brand-600, #1d4ed8);
  font: 600 13px var(--font-ui, system-ui, sans-serif); padding: 4px 6px; }
.pa-view-title { font: 600 14px var(--font-ui, system-ui, sans-serif); color: var(--ink-900, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.pa-view-actions { display: inline-flex; gap: 8px; flex: none; }
.pa-view-btn2 { display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
  border: 1px solid var(--line-strong, #c1c9d2); background: var(--surface, #fff);
  color: var(--ink-700, #334155); border-radius: 8px; padding: 5px 11px; cursor: pointer;
  font: 600 12px var(--font-ui, system-ui, sans-serif); }
.pa-view-btn2:hover { border-color: var(--brand-400, #5a86f0); color: var(--brand-600, #1d4ed8); }
.pa-view-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface, #fff); }
.pa-view-frame { flex: 1; width: 100%; border: 0; }
.pa-view-img { flex: 1; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 16px; }
.pa-view-img img { max-width: 100%; height: auto; border-radius: 8px; }
.pa-view-pre { flex: 1; overflow: auto; margin: 0; padding: 18px 22px; white-space: pre-wrap;
  font: 13px/1.6 var(--font-mono, ui-monospace, monospace); color: var(--ink-800, #1e293b); }
.pa-view-md { flex: 1; overflow: auto; padding: 18px 24px; }

/* Grid toolbar + holders */
.pa-grid-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--line, #e7ebf0); flex: none; }
.pa-grid-seg { display: inline-flex; background: var(--surface-2, #eef1f5); border-radius: 8px; padding: 2px; }
.pa-gt-btn { border: 1px solid transparent; background: transparent; cursor: pointer;
  border-radius: 7px; padding: 5px 11px; color: var(--ink-700, #334155);
  font: 600 12.5px var(--font-ui, system-ui, sans-serif); }
.pa-grid-seg .pa-gt-btn.is-active { background: var(--surface, #fff); color: var(--brand-600, #1d4ed8);
  box-shadow: var(--shadow-1, 0 1px 3px rgba(16,24,40,.12)); }
.pa-grid-toolbar > .pa-gt-btn, .pa-gt-menu .pa-gt-btn { border-color: var(--line-strong, #c1c9d2);
  background: var(--surface, #fff); }
.pa-gt-ctl { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--font-ui, system-ui, sans-serif);
  color: var(--ink-600, #475569); }
.pa-gt-sel { border: 1px solid var(--line-strong, #c1c9d2); border-radius: 7px; padding: 4px 8px;
  background: var(--surface, #fff); color: var(--ink-800, #1e293b); font: inherit; }
.pa-gt-spacer { flex: 1; }
.pa-gt-note { font: 500 11.5px var(--font-ui, system-ui, sans-serif); color: var(--ink-500, #64748b); }
.pa-gt-menu { position: relative; }
.pa-gt-pop { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 180px;
  max-height: 280px; overflow-y: auto; background: var(--surface, #fff);
  border: 1px solid var(--line-strong, #c1c9d2); border-radius: 10px; padding: 8px;
  box-shadow: 0 8px 28px rgba(16,24,40,.16); }
.pa-col-row { display: flex; align-items: center; gap: 7px; padding: 4px 6px; cursor: pointer;
  font: 500 12.5px var(--font-ui, system-ui, sans-serif); color: var(--ink-800, #1e293b); }
.pa-grid-holder { flex: 1; min-height: 0; background: var(--surface, #fff); }
.pa-chart-holder { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 18px; }
.pa-chart-ctls { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
  font: 500 12px var(--font-ui, system-ui, sans-serif); color: var(--ink-600, #475569); }
.pa-chart-ctls label { display: inline-flex; align-items: center; gap: 6px; }
.pa-chart-canvas { flex: 1; min-height: 0; position: relative; }

/* Tabulator theme → page tokens */
.pa-grid-holder .tabulator-tableholder { background: var(--surface, #fff); }
.pa-grid-holder .tabulator { background: var(--surface, #fff); border: 0;
  font: 13px var(--font-ui, system-ui, sans-serif); }
.pa-grid-holder .tabulator-header { background: var(--surface-2, #f6f9fc);
  border-bottom: 1px solid var(--line-strong, #c1c9d2); }
.pa-grid-holder .tabulator-col { background: transparent; border-right: 1px solid var(--line, #e7ebf0); }
.pa-grid-holder .tabulator-col-title { font-weight: 700; color: var(--ink-800, #1e293b); }
.pa-grid-holder .tabulator-header-filter input { border: 1px solid var(--line, #e7ebf0);
  border-radius: 6px; padding: 2px 6px; background: var(--surface, #fff); color: var(--ink-800, #1e293b); }
.pa-grid-holder .tabulator-row { border-bottom: 1px solid var(--line, #eef1f5); }
.pa-grid-holder .tabulator-row.tabulator-row-even { background: var(--surface-1, #fbfcfe); }
.pa-grid-holder .tabulator-row:hover { background: var(--brand-50, #eff4ff); }
.pa-grid-holder .tabulator-cell { border-right: 1px solid var(--line, #f1f4f8);
  color: var(--ink-800, #1e293b); padding: 7px 10px; }
.pa-grid-holder.pa-grid-compact .tabulator-cell { padding: 2px 8px; font-size: 12px; }
html[data-theme="dark"] .pa-grid-holder .tabulator,
body:not(.pa-light) .pa-grid-holder .tabulator { color: var(--ink-800, #cbd5e1); }

/* [hidden] must win over the display:flex rules above (attribute < class specificity). */
.pa-files-list[hidden] { display: none !important; }
.pa-chart-holder[hidden] { display: none !important; }
.pa-grid-holder[hidden] { display: none !important; }

/* Pagination control in the grid toolbar */
.pa-gt-pager { display: inline-flex; align-items: center; gap: 6px; }
.pa-gt-pager .pa-gt-btn[disabled] { opacity: .45; cursor: default; }
.pa-gt-pager .pa-gt-note { min-width: 56px; text-align: center; }

/* File-list search bar */
.pa-files-htitle { flex: none; }
.pa-files-search { flex: 1; min-width: 120px; max-width: 360px; margin: 0 12px;
  padding: 7px 12px; border: 1px solid var(--line-strong, #c1c9d2); border-radius: 8px;
  background: var(--surface, #fff); color: var(--ink-800, #1e293b);
  font: 500 13px var(--font-ui, system-ui, sans-serif); }
.pa-files-search:focus { outline: none; border-color: var(--brand-400, #5a86f0);
  box-shadow: 0 0 0 3px var(--brand-50, #eff4ff); }

/* ════════ Files view — mobile (≤760px) ════════
   The head was a single non-wrapping flex row [title · search · ↻ · ↑Upload];
   on a phone it overflowed and .pa-files{overflow:hidden} clipped the refresh +
   upload buttons off the right edge ("can't see the upload button"). Let the
   head WRAP: the title takes its own row, then search + buttons share the next
   row so everything stays on-screen. Tighter padding + smaller cards too. */
@media (max-width: 760px) {
  .pa-files-head { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
  .pa-files-htitle { flex: 1 1 100%; font-size: 12px; color: var(--ink-500, #64748b); }
  .pa-files-search { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; }
  .pa-files-upload { margin-left: 0; }
  .pa-files-upmsg { padding: 8px 14px; }
  .pa-files-body { padding: 14px; }
  .pa-files-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
  /* File viewer header (back · title · actions) also wraps so export buttons stay reachable. */
  .pa-view-head { flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; }
  .pa-view-title { flex: 1 1 100%; order: -1; }
}

/* ════════ CSV / table grid — dark mode ════════
   Tabulator's CDN stylesheet hard-codes light surfaces (white table holder,
   light row stripes, default form controls) on sub-elements the token rules
   above don't reach; in dark mode (body without .pa-light, or data-theme=dark)
   they leak through as a gray panel under the rows, black filter boxes, and
   low-contrast text. Repaint every grid surface from the dark tokens. */
html[data-theme="dark"] .pa-grid-holder .tabulator,
body:not(.pa-light) .pa-grid-holder .tabulator,
html[data-theme="dark"] .pa-grid-holder .tabulator-tableholder,
body:not(.pa-light) .pa-grid-holder .tabulator-tableholder { background: var(--surface, #141a2e); }
html[data-theme="dark"] .pa-grid-holder .tabulator-header,
body:not(.pa-light) .pa-grid-holder .tabulator-header { background: var(--surface-3, #1a2138);
  border-bottom-color: var(--line-strong); color: var(--ink-900); }
html[data-theme="dark"] .pa-grid-holder .tabulator-col,
body:not(.pa-light) .pa-grid-holder .tabulator-col { background: var(--surface-3, #1a2138);
  border-right-color: var(--line); }
html[data-theme="dark"] .pa-grid-holder .tabulator-col-title,
body:not(.pa-light) .pa-grid-holder .tabulator-col-title { color: var(--ink-900, #e7ecf5); }
html[data-theme="dark"] .pa-grid-holder .tabulator-col .tabulator-col-sorter,
body:not(.pa-light) .pa-grid-holder .tabulator-col-sorter { color: var(--ink-500, #9aa6bf); }
html[data-theme="dark"] .pa-grid-holder .tabulator-header-filter input,
body:not(.pa-light) .pa-grid-holder .tabulator-header-filter input { background: var(--surface-1, #141a2e);
  color: var(--ink-900, #e7ecf5); border: 1px solid var(--line-strong); }
html[data-theme="dark"] .pa-grid-holder .tabulator-row,
body:not(.pa-light) .pa-grid-holder .tabulator-row { background: var(--surface, #141a2e); }
html[data-theme="dark"] .pa-grid-holder .tabulator-row.tabulator-row-even,
body:not(.pa-light) .pa-grid-holder .tabulator-row.tabulator-row-even { background: var(--surface-3, #1a2138); }
html[data-theme="dark"] .pa-grid-holder .tabulator-row .tabulator-cell,
body:not(.pa-light) .pa-grid-holder .tabulator-row .tabulator-cell { color: var(--ink-800, #dbe2ef);
  border-right-color: var(--line); }
html[data-theme="dark"] .pa-grid-holder .tabulator-row:hover,
body:not(.pa-light) .pa-grid-holder .tabulator-row:hover { background: var(--brand-50) !important; }
html[data-theme="dark"] .pa-grid-holder .tabulator-row:hover .tabulator-cell,
body:not(.pa-light) .pa-grid-holder .tabulator-row:hover .tabulator-cell { color: var(--ink-900, #e7ecf5); }
html[data-theme="dark"] .pa-grid-holder .tabulator-placeholder,
body:not(.pa-light) .pa-grid-holder .tabulator-placeholder { background: var(--surface, #141a2e);
  color: var(--ink-500, #9aa6bf); }
html[data-theme="dark"] .pa-grid-holder .tabulator-footer,
body:not(.pa-light) .pa-grid-holder .tabulator-footer { background: var(--surface-2, #0f1526);
  color: var(--ink-700); border-top-color: var(--line-strong); }

/* ── Live server view — sits IN the top nav, compact + modern. A dot glows while
   that machine is working on your query. ── */
.pa-cluster.pa-cluster-nav {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 10px 0 2px; padding: 4px 11px;
  border: 1px solid var(--line, #283143); border-radius: 999px;
  background: var(--surface-2, #0f15269e); backdrop-filter: blur(6px);
  font: 600 10px/1 var(--font-ui, system-ui); color: var(--ink-500, #7a8699);
  opacity: .7; transition: opacity .25s ease; user-select: none; pointer-events: none;
  white-space: nowrap; }
.pa-cluster.pa-cluster-nav.pa-cluster-live { opacity: 1;
  border-color: rgba(52,211,153,.4); }
.pa-cluster-nav .pa-cluster-box { display: inline-flex; align-items: center; gap: 5px; }
.pa-cluster-nav .pa-cluster-dot { width: 7px; height: 7px; border-radius: 50%;
  background: var(--line-strong, #3a4660); flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: all .15s ease; }
.pa-cluster-nav .pa-cluster-lbl { letter-spacing: .02em; }
.pa-cluster-nav .pa-cluster-box.busy { color: var(--ink-900, #e8edf6); }
.pa-cluster-nav .pa-cluster-box.busy .pa-cluster-dot { background: #34d399;
  box-shadow: 0 0 7px 1px rgba(52,211,153,.8); animation: pa-cluster-pulse 1s ease-in-out infinite; }
@keyframes pa-cluster-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: .65; } }
/* OFFLINE / unreachable box — solid RED dot (auto-clears to grey/green when it answers). */
.pa-cluster-nav .pa-cluster-box.offline { color: #f87171; }
.pa-cluster-nav .pa-cluster-box.offline .pa-cluster-dot { background: #ef4444;
  box-shadow: 0 0 6px 1px rgba(239,68,68,.7); animation: none; }
/* Phones: KEEP the machine labels visible (compact), and free the room by removing the
   model/compute change pickers (Quality / Length / Compute). Export + Theme stay. */
@media (max-width: 760px) {
  .pa-cluster.pa-cluster-nav { gap: 8px; padding: 4px 9px; margin: 0 6px; font-size: 9px; }
  .pa-cluster-nav .pa-cluster-dot { width: 6px; height: 6px; }
  .pa-ask-tools .pa-ask-field,
  body.pa-provider-ollama .pa-ask-tools .pa-compute-field,
  .pa-ask-tools .pa-compute-field { display: none !important; }
}

/* Private-page lock screen (renderLocked) */
.ask-lock .ask-lock-ico { font-size: 40px; margin-bottom: 6px; }
.ask-lock-btn { display: inline-block; margin-top: 14px; padding: 11px 22px; border: 0;
  border-radius: 10px; color: #fff; font-weight: 600; cursor: pointer; text-decoration: none; }
.ask-lock-btn:hover { filter: brightness(1.06); }
.ask-lock-sub { margin-top: 12px; opacity: .7; }

/* ════════ R3.1 sign-in nudge (after the 2nd answered question) ════════
   Token-driven, so it follows both modes automatically (body.pa-light flips
   the variables); the dark block below only softens the border. Inline card,
   never an overlay — asking is never blocked. */
.pa-nudge { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 2px;
  padding: 10px 12px; border: 1px solid var(--line, #e2e8f0); border-radius: 10px;
  background: var(--surface, #fff); max-width: 560px; box-shadow: var(--shadow-1, none); }
.pa-nudge-body { flex: 1; min-width: 0; }
.pa-nudge-tx { font: 500 13.5px/1.45 var(--font-ui, system-ui, sans-serif); color: var(--ink-900, #0f172a); }
.pa-nudge-tx a { color: var(--brand-500, #1f4fd6); font-weight: 700; text-decoration: none; }
.pa-nudge-tx a:hover { text-decoration: underline; }
.pa-nudge-sub { margin-top: 3px; font-size: 12px; color: var(--ink-500, #64748b); }
.pa-nudge-x { flex: none; border: 0; background: none; color: var(--ink-400, #94a3b8);
  cursor: pointer; font-size: 13px; line-height: 1; padding: 2px; }
.pa-nudge-x:hover { color: var(--ink-700, #334155); }
body:not(.pa-light) .pa-nudge { border-color: var(--line-strong, rgba(255,255,255,.16)); }

/* ════════ Berger P1 — "Made with <brand>" badge (footer, under the composer)
   The observable signature on the shared artifact (Hotmail mechanism).
   Token-driven so both themes work; deliberately quiet — a critical detail,
   not a banner. ════════ */
.pa-ask-powered a { font-weight: 700; }
.pa-powered-sub { color: var(--ink-400, #94a3b8); }

/* ════════ Berger PV1 — "Share this insight" (per-answer permalink) ════════
   Same quiet chip language as the PDF export; the popover offers exactly two
   NARROWCAST copy formats (link, Slack/email snippet) — no feed buttons. */
.pa-msg-share { display: inline-flex; align-items: center; gap: 4px; margin-top: 9px; margin-left: 6px;
  font: 600 11.5px/1 var(--font-ui, system-ui, sans-serif); color: var(--ink-600, #475569);
  background: var(--surface, #fff); border: 1px solid var(--line, #e2e8f0); border-radius: 7px;
  padding: 5px 9px; cursor: pointer; opacity: .9; transition: opacity .12s, color .12s, background .12s, border-color .12s; }
.ask-msg:hover .pa-msg-share, .pa-msg-share:focus { opacity: 1; }
.pa-msg-share:hover { color: var(--brand-500, #1f4fd6); background: var(--brand-50, #eef2ff); border-color: var(--brand-300, #a5b4fc); }
.pa-share-pop { margin-top: 6px; max-width: 340px; border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px; background: var(--surface, #fff); box-shadow: var(--shadow-2, 0 8px 24px rgba(15,23,42,.12));
  overflow: hidden; }
.pa-share-opt { display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 10px 12px; cursor: pointer; }
.pa-share-opt + .pa-share-opt { border-top: 1px solid var(--line, #e2e8f0); }
.pa-share-opt:hover { background: var(--brand-50, #eef2ff); }
.pa-share-opt-t { display: block; font: 600 13px var(--font-ui, system-ui, sans-serif); color: var(--ink-900, #0f172a); }
.pa-share-opt-d { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-500, #64748b); }
.pa-share-note { margin-top: 10px; font: 500 12px var(--font-ui, system-ui, sans-serif);
  color: var(--ink-500, #64748b); border-top: 1px dashed var(--line, #e2e8f0); padding-top: 8px; }
body:not(.pa-light) .pa-share-pop { box-shadow: 0 8px 24px rgba(0,0,0,.5); }

/* ════════ Berger S1 — remarkable-stat hero (empty state) ════════
   The one "whoa" line the sharer looks smart for finding. Accent-tinted,
   bigger than the tagline, token-driven for both themes. */
.pa-hero-stat, .ask-empty p.pa-hero-stat { margin: 10px auto 2px; max-width: 560px; text-align: center; font: 600 16.5px/1.5 var(--font-ui, system-ui, sans-serif);
  color: var(--brand-600, #1d4ed8); letter-spacing: -0.01em; }
body:not(.pa-light) .pa-hero-stat { color: var(--brand-300, #93c5fd); }

/* Parity with the workspace Ask (home.css uses max-width:860px). ask-shell.css
   loads AFTER this file and sets .ask-chat-inner to 1240px, so we need
   !important to win — this constrains the answer to a readable centered column
   instead of stretching wide and leaving large empty space on the side. */
.ask-chat-inner { max-width: 860px !important; margin: 0 auto; width: 100%; }