/* =====================================================================
   ppline-research — frontend styles
   Clean, modern, professional academic look. Light theme.
   Vanilla CSS, no build step. Uses a small set of design tokens.
   ===================================================================== */

:root {
  /* Palette — "Academic" theme (warm paper, ink, scholarly slate-blue),
     mirroring the PardesLine Research website. The variable NAMES are unchanged
     so the rest of the stylesheet adopts the new look with no other edits. */
  --bg:           #FBFAF7;   /* warm paper */
  --surface:      #FFFFFF;
  --surface-2:    #F4F2EC;
  --surface-3:    #ECE9E1;
  --border:       #E2DDD2;
  --border-strong:#C9C2B4;

  --text:         #1B1B19;   /* ink */
  --text-muted:   #56524A;
  --text-faint:   #9A948A;

  --accent:       #2B4C7E;   /* scholarly slate-blue */
  --accent-hover: #1C3559;
  --accent-soft:  #EAEEF4;   /* light slate tint (solid bg) */
  --accent-rgb:   43, 76, 126;

  --green:        #2DA44E;
  --green-soft:   #E7F4EC;
  --amber:        #D29922;
  --amber-soft:   #FBF1DD;
  --red:          #CF222E;
  --red-soft:     #FBE9EA;
  --purple:       #8250DF;
  --purple-soft:  #F0EAFB;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, "Noto Sans", sans-serif;
  --serif: 'Newsreader', Georgia, Cambria, "Times New Roman", serif;
  --mono: "SF Mono", ui-monospace, "Cascadia Code", "Roboto Mono", Consolas,
          "Courier New", monospace;

  --radius:    8px;
  --radius-sm: 6px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(27, 27, 25, 0.04);
  --shadow-md: 0 1px 2px rgba(27, 27, 25, 0.04), 0 10px 28px rgba(27, 27, 25, 0.06);
  --shadow-lg: 0 16px 48px rgba(27, 27, 25, 0.12);

  --header-h: 60px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----------------------------- Reset ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
img { max-width: 100%; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 9px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ----------------------------- Buttons ----------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 16px;
  font-size: 14px; font-weight: 500; line-height: 1;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  background: var(--accent); color: #fff; cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease),
              box-shadow .15s var(--ease), transform .05s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-ghost {
  background: transparent; color: var(--text); border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-soft {
  background: var(--accent-soft); color: var(--accent); border-color: transparent;
}
.btn-soft:hover { background: #DCE3EE; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-danger { background: var(--red); }
.btn-danger:hover { background: #ba2f2f; }
.btn-danger-ghost { background: transparent; color: var(--red); border-color: var(--red-soft); }
.btn-danger-ghost:hover { background: var(--red-soft); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer; transition: all .15s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }

/* ----------------------------- Inputs ----------------------------- */
.input, .select, textarea.input {
  width: 100%; height: 40px; padding: 0 12px;
  font-size: 14px; font-family: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); outline: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
textarea.input { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
}
.input::placeholder { color: var(--text-faint); }
label.field { display: block; }
label.field > span { display: block; font-size: 12.5px; font-weight: 500;
  color: var(--text-muted); margin-bottom: 5px; }

.checkbox { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 13.5px; color: var(--text-muted); user-select: none; }
.checkbox input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* ----------------------------- Header ----------------------------- */
.app-header {
  position: sticky; top: 0; z-index: 300;
  display: flex; align-items: center; gap: 18px;
  height: var(--header-h); padding: 0 22px;
  background: rgba(251, 250, 247, 0.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text);
  font-weight: 600; font-size: 17px; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 28px; width: auto; display: block; }
.brand-mark { display: inline-flex; color: var(--accent); }
.brand-name { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
.brand-sub { color: var(--accent); font-weight: 600; }

.app-nav { display: flex; gap: 4px; margin-left: 6px; }
.app-nav a {
  padding: 7px 12px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 14px; font-weight: 500;
}
.app-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.app-nav a.active { background: var(--accent-soft); color: var(--accent); }

.header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* Plan badges */
.plan-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.plan-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.auth-plan-free { background: var(--surface-3); color: var(--text-muted); }
.auth-plan-pro  { background: linear-gradient(135deg, var(--purple-soft), var(--accent-soft));
  color: var(--purple); box-shadow: inset 0 0 0 1px rgba(122,72,216,.25); }

/* ----------------------------- Views / layout ----------------------------- */
.view { display: block; }
/* The [hidden] attribute MUST win over .view's display:block — otherwise a hidden
   view (esp. .view-chat, which is forced to calc(100vh - header)) stays in flow and
   adds a full empty viewport of scroll space below every other page. */
.view[hidden] { display: none; }
.container { max-width: 1180px; margin: 0 auto; padding: 28px 22px 60px; }
.view-title { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; }
.view-sub { color: var(--text-muted); margin: 0 0 24px; }

/* ----------------------------- Toasts ----------------------------- */
.toast-host { position: fixed; right: 18px; bottom: 18px; z-index: 600;
  display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.toast {
  padding: 12px 14px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
  font-size: 13.5px; color: var(--text); animation: toast-in .2s var(--ease);
  border-left: 3px solid var(--accent);
}
.toast.toast-error { border-left-color: var(--red); }
.toast.toast-success { border-left-color: var(--green); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ----------------------------- Modal ----------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 500; background: rgba(20, 28, 45, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: fade-in .15s var(--ease);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 420px; background: var(--surface);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 26px; animation: modal-in .2s var(--ease);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.modal h3 { margin: 0 0 6px; font-size: 19px; }
.modal p.muted { color: var(--text-muted); margin: 0 0 18px; font-size: 14px; }
.modal .form-error { color: var(--red); font-size: 13px; min-height: 18px; margin: 8px 0 0; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-close { position: absolute; }

/* ----------------------------- Papers (landing) ----------------------------- */
.search-bar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  padding: 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 24px;
}
.search-bar .grow { flex: 1 1 280px; }
.search-bar .year { width: 120px; }

.papers-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
.paper-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px; cursor: pointer;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease);
}
.paper-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md);
  transform: translateY(-2px); }
.paper-card .pc-title { font-size: 15.5px; font-weight: 600; line-height: 1.35; margin: 0; }
.paper-card .pc-meta { font-size: 12.5px; color: var(--text-muted); }
.paper-card .pc-authors { font-size: 13px; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.paper-card .pc-abstract { font-size: 13px; color: var(--text-muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.paper-card .pc-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.paper-card .pc-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; }
.paper-card .pc-foot .spacer { flex: 1; }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--surface-3); color: var(--text-muted);
}
.pill-oa { background: var(--green-soft); color: var(--green); }
.pill-cite { background: var(--accent-soft); color: var(--accent); }
.pill-year { background: var(--surface-3); color: var(--text-muted); }

/* States */
.state {
  text-align: center; padding: 60px 20px; color: var(--text-muted);
}
.state .state-title { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.spinner {
  width: 22px; height: 22px; border: 2.5px solid var(--border-strong);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin .8s linear infinite; display: inline-block;
}
.spinner-lg { width: 34px; height: 34px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 6px;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ===================================================================
   Chat view — full screen two-column layout
   =================================================================== */
/* Full-height chat shell. Use dvh (dynamic viewport) so mobile browsers don't let
   the page scroll into the URL-bar gap (100vh > visible area = endless scroll), and
   clip here so nothing inside the chat can ever extend the document — content scrolls
   only inside .messages / .artifact-body. */
.view-chat { height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); overflow: hidden; }
.chat-shell { display: flex; height: 100%; overflow: hidden; }

/* Conversations sidebar */
.conv-sidebar {
  width: 250px; flex-shrink: 0; background: var(--surface);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
}
.conv-sidebar .cs-head { padding: 14px; border-bottom: 1px solid var(--border); }
.conv-list { flex: 1; overflow-y: auto; padding: 8px; }
.conv-item {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px;
  border-radius: var(--radius-sm); cursor: pointer; margin-bottom: 2px;
  font-size: 13.5px; color: var(--text-muted);
}
.conv-item:hover { background: var(--surface-2); color: var(--text); }
.conv-item.active { background: var(--accent-soft); color: var(--accent); }
.conv-item .ci-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item .ci-actions { display: none; gap: 2px; }
.conv-item:hover .ci-actions { display: flex; }
.conv-item .ci-actions button { background: none; border: none; cursor: pointer;
  color: var(--text-faint); padding: 2px; border-radius: 4px; display: inline-flex; }
.conv-item .ci-actions button:hover { color: var(--text); background: var(--surface-3); }
.conv-empty { padding: 20px 12px; font-size: 13px; color: var(--text-faint); text-align: center; }

/* Main chat column */
.chat-main { flex: 1 1 55%; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  background: var(--bg); }
.chat-topbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid var(--border); background: var(--surface); }
.chat-topbar .ct-title { font-weight: 600; font-size: 14.5px; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-topbar .ct-toggle-artifact { display: none; }

.messages { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 18px; }
.messages-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

.msg { display: flex; gap: 12px; }
.msg .avatar {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.msg-user .avatar { background: var(--text); }
.msg-assistant .avatar { background: var(--accent); }
.msg .bubble { flex: 1; min-width: 0; }
.msg .bubble .who { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 3px; }
.msg-user .bubble .content { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; }
.msg-assistant .bubble .content { }

/* Markdown content */
.md { font-size: 14.5px; line-height: 1.65; color: var(--text); word-wrap: break-word; }
.md > *:first-child { margin-top: 0; }
.md > *:last-child { margin-bottom: 0; }
.md p { margin: 0 0 10px; }
.md h1, .md h2, .md h3 { margin: 16px 0 8px; line-height: 1.3; }
.md h1 { font-size: 20px; } .md h2 { font-size: 17px; } .md h3 { font-size: 15px; }
.md ul, .md ol { margin: 0 0 10px; padding-left: 22px; }
.md li { margin: 2px 0; }
.md code { font-family: var(--mono); font-size: 13px; background: var(--surface-3);
  padding: 1px 5px; border-radius: 4px; }
.md pre { background: #1d2430; color: #e6edf3; padding: 14px; border-radius: var(--radius);
  overflow-x: auto; margin: 0 0 12px; }
.md pre code { background: none; padding: 0; color: inherit; font-size: 13px; }
.md a { color: var(--accent); }
.md blockquote { border-left: 3px solid var(--border-strong); margin: 0 0 12px;
  padding: 2px 14px; color: var(--text-muted); }
.md table { border-collapse: collapse; margin: 0 0 12px; font-size: 13.5px; }
.md th, .md td { border: 1px solid var(--border); padding: 6px 10px; }
.md th { background: var(--surface-2); }

/* Tool activity chip */
/* Live activity log (agent steps) under the streaming assistant bubble. */
.activity {
  margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.activity .step {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px;
  font-size: 12.5px; border-radius: 6px;
}
.activity .step-ic { display: inline-flex; width: 15px; justify-content: center; flex: none; }
.activity .step .spinner { width: 13px; height: 13px; border-width: 2px;
  border-color: rgba(var(--accent-rgb), .3); border-top-color: var(--accent); }
.activity .step-ok { color: #1a8a4a; font-weight: 700; }
.activity .step-x  { color: #c0392b; font-weight: 700; }
.activity .step-label { color: var(--text); font-weight: 500; flex: none; }
.activity .step-sum { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.activity .step-error .step-sum { color: #c0392b; }
.activity .step-retry { color: var(--amber); font-weight: 700; }
.activity .step-retry .step-sum { color: var(--amber); }
.activity .step-running .step-label { color: var(--text-muted); }
.activity .step-time { margin-left: auto; flex: none; font-family: var(--mono);
  font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.working-timer { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); }
.working-timer .spinner { width: 12px; height: 12px; border-width: 2px;
  border-color: rgba(var(--accent-rgb), .3); border-top-color: var(--accent); }
.working-timer b { font-family: var(--mono); color: var(--accent); font-weight: 700;
  font-variant-numeric: tabular-nums; }
.msg-working { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--text-muted); margin-bottom: 6px; }
.msg-working .spinner { width: 13px; height: 13px; border-width: 2px;
  border-color: rgba(var(--accent-rgb), .3); border-top-color: var(--accent); }
.msg-working b { font-family: var(--mono); color: var(--accent); font-weight: 700;
  font-variant-numeric: tabular-nums; }

/* Composer */
.composer { border-top: 1px solid var(--border); background: var(--surface); padding: 12px 16px; }
.composer-inner { max-width: 760px; margin: 0 auto; }
.attach-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-muted);
}
.attach-chip button { background: none; border: none; cursor: pointer; color: var(--text-faint);
  display: inline-flex; padding: 0; }
.attach-chip button:hover { color: var(--red); }
.attach-chip.uploading { opacity: .7; }

.composer-row { display: flex; align-items: flex-end; gap: 8px; }
.composer-row textarea {
  flex: 1; resize: none; max-height: 180px; min-height: 44px;
  padding: 11px 14px; border-radius: var(--radius); border: 1px solid var(--border-strong);
  font-size: 14.5px; line-height: 1.5; font-family: inherit; outline: none;
}
.composer-row textarea:focus { border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12); }
.composer-hint { font-size: 11.5px; color: var(--text-faint); margin-top: 6px; text-align: center; }
.composer-hint a { cursor: pointer; }

/* ---- Collapsible discussions sidebar ---- */
.chat-shell.sidebar-collapsed .conv-sidebar { display: none; }

/* ---- Phase 5: entry gate + research dashboard ---- */
.gate-overlay {
  position: fixed; inset: 0; z-index: 600; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(1200px 600px at 50% -10%, #fff, var(--bg));
}
.gate-card {
  width: 100%; max-width: 440px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 34px 28px; text-align: center;
}
.gate-logo { display: block; margin: 0 auto 14px; }
.gate-title { font-family: var(--serif); font-size: 25px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
.gate-sub { color: var(--text-muted); font-size: 14px; margin: 0 0 20px; }
.gate-card .field { text-align: left; }
.gate-card .form-error { text-align: left; }

.dash-filters { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin: 0 0 12px; }
.dash-filters .grow { flex: 1 1 320px; }
.dash-filters .field { min-width: 130px; }
.dash-filters .btn { height: 40px; }
.dash-subfilters {
  display: flex; gap: 14px; align-items: end; flex-wrap: wrap; margin: 0 0 22px;
  padding: 12px 14px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.dash-subfilters .field { min-width: 120px; }
.input-sm { height: 34px; font-size: 13px; }
.dash-count { margin-left: auto; align-self: center; color: var(--text-muted); font-size: 13px; }

.pill-impact { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pill-src { background: var(--surface-3); color: var(--text-muted); text-transform: capitalize; }

/* ---- Citations header + project file explorer + header alignment ---- */
.results-head { padding: 12px 14px 2px; font-size: 12.5px; color: var(--text-muted); }

/* Align the artifact-panel header height with the chat discussion header
   (fixed height + no vertical padding → both are EXACTLY the same height). */
.chat-topbar, .artifact-tabs { height: 56px; min-height: 56px;
  box-sizing: border-box; padding-top: 0; padding-bottom: 0; }

/* Project files explorer (the "Files" tab) */
.files-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; }
.files-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); background: var(--surface-2); flex: none; }
.files-toolbar .spacer { flex: 1; }
.files-pane { flex: 1; min-height: 0; display: grid; grid-template-columns: 190px 1fr; }
.files-tree { border-right: 1px solid var(--border); overflow: auto; padding: 6px;
  background: var(--surface); min-width: 0; }
.file-item { display: flex; align-items: center; gap: 7px; padding: 6px 8px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--text); }
.file-item:hover { background: var(--surface-2); }
.file-item.active { background: var(--accent-soft); color: var(--accent); }
.file-ic { flex: none; font-size: 14px; line-height: 1; }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-view { overflow: auto; min-width: 0; position: relative; background: var(--surface);
  display: flex; flex-direction: column; }
.files-view .source-pre { flex: 1; }
.file-img-wrap { padding: 16px; display: flex; justify-content: center; align-items: flex-start; }
.file-img-wrap img { max-width: 100%; height: auto; box-shadow: var(--shadow-md);
  border-radius: 4px; background: #fff; }
.file-iframe { width: 100%; border: 0; flex: 1; }
.file-view-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); background: var(--surface-2); flex: none; }
.file-view-bar .spacer { flex: 1; }

/* ---- PDF text layer (selectable) + "quote from PDF" ---- */
.pdf-page { position: relative; display: inline-block; line-height: 0; }
.pdf-text-layer {
  position: absolute; inset: 0; overflow: hidden; line-height: 1; text-align: initial;
  transform-origin: 0 0; opacity: 1; z-index: 2;
}
.pdf-text-layer span, .pdf-text-layer br {
  color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0 0;
}
.pdf-text-layer ::selection { background: rgba(43, 76, 126, .30); }

.pdf-quote-btn {
  position: fixed; z-index: 400; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  background: var(--accent); color: #fff; border: none; border-radius: 999px;
  box-shadow: var(--shadow-md);
}
.pdf-quote-btn:hover { background: var(--accent-hover); }

/* Quote chip in the composer */
.pdf-quotes { display: flex; flex-direction: column; gap: 6px; }
.pdf-quotes:not(:empty) { margin-bottom: 8px; }
.pdf-quote-chip {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--accent); border-left-width: 3px; border-radius: var(--radius-sm);
  background: var(--accent-soft);
}
.pqc-tag { flex: none; display: inline-flex; align-items: center; gap: 4px;
  color: var(--accent); font-weight: 600; font-size: 11.5px; white-space: nowrap; padding-top: 1px; }
.pqc-text { flex: 1; font-style: italic; font-size: 13px; color: var(--text); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.pqc-x { flex: none; background: none; border: none; cursor: pointer; color: var(--text-muted);
  padding: 0; display: inline-flex; }
.pqc-x:hover { color: var(--red); }

/* PDF selection quoted inside a sent message */
.pdf-quote {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  padding: 7px 12px; margin: 0 0 8px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic; color: var(--text-muted); white-space: pre-wrap;
}
.pdf-quote::before { content: "📄 from PDF"; display: block; font-style: normal;
  font-size: 11px; font-weight: 600; color: var(--accent); margin-bottom: 3px; }

/* Artifact panel */
.artifact-panel {
  flex: 1 1 45%; min-width: 0; min-height: 0; max-width: 620px;
  border-left: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column;
}
.artifact-tabs { display: flex; gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--border);
  align-items: center; }
.artifact-tabs .tab {
  padding: 7px 13px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500;
  color: var(--text-muted); cursor: pointer; background: none; border: none;
}
.artifact-tabs .tab:hover { background: var(--surface-2); color: var(--text); }
.artifact-tabs .tab.active { background: var(--accent-soft); color: var(--accent); }
.artifact-tabs .tab .badge { display: inline-block; min-width: 16px; padding: 0 4px;
  margin-left: 5px; font-size: 10.5px; background: var(--accent); color: #fff;
  border-radius: 999px; text-align: center; }
.artifact-tabs .at-spacer { flex: 1; }
.artifact-history { font-size: 12.5px; }

.artifact-body { flex: 1; min-height: 0; overflow: auto; position: relative; }

/* PDF viewer */
.pdf-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); background: var(--surface-2);
  position: sticky; top: 0; z-index: 2; flex-wrap: wrap; }
.pdf-toolbar .pageinfo { font-size: 12.5px; color: var(--text-muted); min-width: 70px; text-align: center; }
.pdf-toolbar .spacer { flex: 1; }
/* Scrollable viewport: the canvas keeps its TRUE rendered px size (set inline
   from the PDF viewport, so the ratio is always correct) and the wrap scrolls
   when it overflows. Do NOT clamp with max-width/height here — clamping the
   width while the inline px height stays fixed is exactly what stretched the
   page vertically at zoom. */
.pdf-canvas-wrap { padding: 16px; overflow: auto; text-align: center; }
.pdf-canvas-wrap canvas { box-shadow: var(--shadow-md); background: #fff;
  border-radius: 4px; display: inline-block; max-width: none; height: auto; }

/* Source viewer */
.source-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); background: var(--surface-2); }
.source-toolbar .spacer { flex: 1; }
.source-pre { margin: 0; padding: 14px 16px; font-family: var(--mono); font-size: 12.5px;
  line-height: 1.55; white-space: pre; tab-size: 2; color: #d6deeb;
  background: #0f1729; overflow: auto; height: 100%;
  /* VS-Code-like editor surface for the live .tex */ }
.source-pre::after { /* blinking caret while the source is being written */
  content: "▍"; color: #7aa2f7; animation: caret 1s steps(1) infinite; }
.artifact-panel:not(.writing) .source-pre::after { content: ""; }
@keyframes caret { 50% { opacity: 0; } }

/* Results tab (papers inside artifact panel) */
.results-list { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.result-item { border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; }
.result-item .ri-title { font-weight: 600; font-size: 14px; margin: 0 0 4px; line-height: 1.35; }
.result-item .ri-meta { font-size: 12px; color: var(--text-muted); }
.result-item .ri-foot { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* ===================================================================
   Pricing
   =================================================================== */
.toggle-group { display: inline-flex; padding: 3px; background: var(--surface-3);
  border-radius: 999px; margin: 0 auto 26px; }
.toggle-group button { border: none; background: none; padding: 7px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: var(--text-muted); cursor: pointer; }
.toggle-group button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.toggle-group .save-tag { font-size: 11px; color: var(--green); font-weight: 600; margin-left: 5px; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; max-width: 760px; margin: 0 auto; }
.plan-card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px; display: flex; flex-direction: column; }
.plan-card.featured { border-color: var(--accent); box-shadow: var(--shadow-md); position: relative; }
.plan-card.featured::before { content: "Recommended"; position: absolute; top: -11px; left: 26px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; }
.plan-card .plan-name { font-size: 16px; font-weight: 600; color: var(--text-muted); }
.plan-card .plan-price { font-size: 34px; font-weight: 700; margin: 8px 0 2px; letter-spacing: -0.02em; }
.plan-card .plan-price small { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.plan-card .plan-period { font-size: 13px; color: var(--text-faint); margin-bottom: 18px; }
.plan-card ul { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plan-card li { display: flex; gap: 9px; font-size: 14px; color: var(--text); align-items: flex-start; }
.plan-card li svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--green); margin-top: 1px; }
.plan-card li.muted { color: var(--text-faint); }
.plan-card li.muted svg { color: var(--text-faint); }
.plan-card .plan-cta { margin-top: auto; }

.quota-meter { margin: 0 auto 24px; max-width: 760px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.quota-meter .qm-head { display: flex; justify-content: space-between; font-size: 13.5px;
  margin-bottom: 8px; }
.quota-bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.quota-bar .fill { height: 100%; background: var(--accent); border-radius: 999px;
  transition: width .3s var(--ease); }
.quota-bar .fill.high { background: var(--amber); }
.quota-bar .fill.full { background: var(--red); }

/* ===================================================================
   MCP / keys
   =================================================================== */
.mcp-section { max-width: 800px; margin: 0 auto 26px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.mcp-section h3 { margin: 0 0 6px; font-size: 17px; }
.mcp-section p { color: var(--text-muted); margin: 0 0 14px; }
.code-row { display: flex; align-items: stretch; gap: 8px; margin: 10px 0; }
.code-box { flex: 1; font-family: var(--mono); font-size: 13px; background: #1d2430; color: #e6edf3;
  padding: 11px 14px; border-radius: var(--radius-sm); overflow-x: auto; white-space: pre;
  display: flex; align-items: center; }
.steps { padding-left: 20px; color: var(--text); }
.steps li { margin: 8px 0; }

.upgrade-cta { text-align: center; padding: 40px 20px; max-width: 560px; margin: 0 auto;
  background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }
.upgrade-cta .lock { width: 44px; height: 44px; color: var(--accent); margin-bottom: 12px; }

.keys-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 12px; }
.keys-table th { text-align: left; font-size: 12px; color: var(--text-muted); font-weight: 600;
  padding: 8px 10px; border-bottom: 1px solid var(--border); }
.keys-table td { padding: 10px; border-bottom: 1px solid var(--border); }
.keys-table td.mono { font-family: var(--mono); font-size: 12.5px; }
.key-reveal { background: var(--green-soft); border: 1px solid var(--green); border-radius: var(--radius);
  padding: 12px 14px; margin: 12px 0; }
.key-reveal .kr-key { font-family: var(--mono); font-size: 13px; word-break: break-all;
  display: flex; align-items: center; gap: 8px; }

/* ----------------------------- Utilities ----------------------------- */
.muted { color: var(--text-muted); }
.center { text-align: center; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.hidden { display: none !important; }
[hidden] { display: none !important; }

/* ===================================================================
   Responsive — collapse chat to single column on narrow screens
   =================================================================== */
@media (max-width: 980px) {
  .conv-sidebar { display: none; }
  .artifact-panel {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; max-width: none;
    z-index: 10; transform: translateX(100%); transition: transform .25s var(--ease);
    border-left: none;
  }
  /* Clip the off-screen slide-over panel so it never causes horizontal scroll
     (targeted overflow:hidden here, NOT on body — that would break the sticky header). */
  .view-chat .chat-shell { position: relative; overflow: hidden; }
  .artifact-panel.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .chat-topbar .ct-toggle-artifact { display: inline-flex; }
}

@media (max-width: 640px) {
  /* Compact header so it never overflows on a phone. */
  .app-header { gap: 8px; padding: 0 12px; }
  .app-nav { gap: 1px; margin-left: 0; }
  .app-nav a { padding: 6px 7px; font-size: 12.5px; }
  .brand-name { display: none; }
  .header-right { gap: 8px; }
  #plan-badge { display: none !important; }         /* free/pro badge hidden on phones */
  #auth-btn { height: 34px; padding: 0 11px; font-size: 13px; }
  .container { padding: 20px 14px 50px; }
  .search-bar { padding: 12px; }
  /* Dashboard filters stack cleanly on a phone. */
  .dash-filters .grow { flex: 1 1 100%; }
  .dash-filters .field, .dash-subfilters .field { min-width: 0; }
  .papers-grid { grid-template-columns: 1fr; }
  .paper-card { min-width: 0; }
}

/* ── Interactive intake question card (agent emits a ```pplr-ask``` JSON block) ── */
.ask-card { border: 1px solid var(--border, #E2DDD2); border-radius: 12px; padding: 14px 16px; margin: 10px 0; background: var(--card, #fff); }
.ask-card.ask-static { opacity: .8; }
.ask-loading { display: flex; align-items: center; gap: 8px; color: var(--muted, #6b6b6b); font-size: .9rem; }
.ask-intro { font-weight: 600; margin-bottom: 12px; }
.ask-q { margin: 12px 0; }
.ask-q:first-of-type { margin-top: 4px; }
.ask-q-label { font-size: .9rem; font-weight: 600; margin-bottom: 7px; color: var(--ink, #1B1B19); }
.ask-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-opt { border: 1px solid var(--border-strong, #C9C2B4); background: transparent; color: inherit; border-radius: 999px; padding: 5px 13px; font-size: .85rem; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.ask-opt:hover:not(:disabled) { border-color: var(--accent, #2B4C7E); }
.ask-opt.selected { background: var(--accent, #2B4C7E); color: #fff; border-color: var(--accent, #2B4C7E); }
.ask-opt:disabled { cursor: default; opacity: .65; }
.ask-other { margin-top: 7px; }
.ask-other input { width: 100%; max-width: 440px; border: 1px solid var(--border, #E2DDD2); border-radius: 8px; padding: 7px 11px; font: inherit; background: transparent; color: inherit; }
.ask-other input:focus { outline: none; border-color: var(--accent, #2B4C7E); }
.ask-actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.ask-defaults { background: transparent; border: 1px solid var(--border-strong, #C9C2B4); border-radius: 8px; padding: 7px 14px; font: inherit; cursor: pointer; color: var(--muted, #555); }
.ask-defaults:hover { color: var(--ink, #1B1B19); border-color: var(--ink, #1B1B19); }
/* Step-by-step wizard: one question at a time */
.ask-progress { font-size: .78rem; color: var(--muted, #6b6b6b); margin-bottom: 6px; }
.ask-bar { height: 4px; border-radius: 999px; background: var(--border, #E2DDD2); overflow: hidden; margin-bottom: 14px; }
.ask-bar-fill { height: 100%; background: var(--accent, #2B4C7E); transition: width .2s ease; }
.ask-nav { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.ask-nav-spacer { flex: 1; }
.ask-nav-back { background: transparent; border: none; color: var(--muted, #666); font: inherit; cursor: pointer; padding: 6px 4px; }
.ask-nav-back:hover:not(:disabled) { color: var(--ink, #1B1B19); }
.ask-nav-back:disabled { opacity: .35; cursor: default; }
.ask-nav-skip { background: transparent; border: 1px solid var(--border-strong, #C9C2B4); border-radius: 8px; padding: 7px 14px; font: inherit; cursor: pointer; color: var(--muted, #555); }
.ask-nav-skip:hover { color: var(--ink, #1B1B19); border-color: var(--ink, #1B1B19); }
.ask-defaults-link { display: block; margin: 12px auto 0; background: none; border: none; color: var(--muted, #8a8a8a); font-size: .8rem; text-decoration: underline; cursor: pointer; }
.ask-defaults-link:hover { color: var(--ink, #1B1B19); }

/* ── Launch: paywall popup + Google sign-in + trial badge ─────────────── */
.auth-plan-trial { background: var(--accent-soft, #E8EEF7); color: var(--accent, #2B4C7E); }

.paywall-card { max-width: 460px; }
.paywall-plan { margin-top: 18px; text-align: left; }
.paywall-plan .plan-cta { margin-top: 14px; }
.paywall-feats { list-style: none; margin: 14px 0 0; padding: 0; }
.paywall-feats li { padding: 4px 0 4px 22px; position: relative; font-size: 13.5px; color: var(--text-soft, #444); }
.paywall-feats li::before { content: "✓"; position: absolute; left: 2px; color: var(--accent, #2B4C7E); font-weight: 700; }

.plans-single { grid-template-columns: minmax(280px, 420px); justify-content: center; }

.auth-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--text-muted, #8a8577); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border, #E2DDD2); }
.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-google svg { flex: 0 0 auto; }

.maintenance-overlay .gate-card { text-align: center; }
.gis-host { display: flex; justify-content: center; min-height: 44px; }