/* ask.css — the "Ask CancerResearch" side-popout chat widget. Self-contained warm/calm tokens
   (so it renders identically on index.html and any real-file page); SVG icons only; AA contrast;
   visible focus; reduced-motion respected; ≥44px targets. Closed = launcher only (panel display:none)
   so it never adds horizontal overflow. */
:root{
  --ask-w: 480px;   /* widened from 420 so multi-column answers (comparison tables) breathe */
  --ask-bg: #fffdf8; --ask-bg-2: #f7f1e6; --ask-ink: #2b2017; --ask-ink-soft: #574737;
  --ask-accent: #985f33; --ask-accent-ink:#fff; --ask-line:#e6dac4; --ask-line-2:#d6c6a8;
  --ask-safe:#43692f; --ask-warn:#a23b2e; --ask-info:#6b4f3a;
  --ask-tier-s:#7d4a72; --ask-tier-a:#985f33; --ask-tier-b:#8a5a12; --ask-tier-c:#6f6250;
  --ask-radius:14px; --ask-radius-sm:9px; --ask-t:200ms cubic-bezier(.4,0,.2,1);
  --ask-shadow:0 12px 40px -12px rgba(67,46,20,.34), 0 2px 8px rgba(67,46,20,.10);
  --ask-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ask-serif:"Newsreader",Georgia,"Times New Roman",serif;
}

/* share-screen: when open on desktop the page reflows left (not an overlay) */
@media (min-width:768px){ html.ask-open body{ padding-right:var(--ask-w); transition:padding-right var(--ask-t); } }

/* ---- launcher ---- */
.ask-fab{
  position:fixed; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom));
  z-index:60; display:inline-flex; align-items:center; gap:9px; min-height:48px; padding:10px 18px 10px 14px;
  border:none; border-radius:999px; background:var(--ask-accent); color:var(--ask-accent-ink);
  font-family:var(--ask-sans); font-size:15px; font-weight:600; cursor:pointer;
  box-shadow:var(--ask-shadow); transition:transform var(--ask-t), box-shadow var(--ask-t), opacity var(--ask-t);
}
.ask-fab:hover{ transform:translateY(-2px); box-shadow:0 16px 44px -12px rgba(67,46,20,.42); }
.ask-fab svg{ width:22px; height:22px; flex:none; }
html.ask-open .ask-fab{ opacity:0; pointer-events:none; transform:translateY(8px); }

/* ---- panel ---- */
.ask-panel[hidden]{ display:none; }
.ask-panel{
  position:fixed; inset:0 0 0 auto; width:min(var(--ask-w),100%); height:100dvh; z-index:61;
  display:flex; flex-direction:column; background:var(--ask-bg); color:var(--ask-ink);
  border-left:1px solid var(--ask-line-2); box-shadow:var(--ask-shadow);
  font-family:var(--ask-sans); transform:translateX(100%); transition:transform var(--ask-t);
}
.ask-panel.is-open{ transform:translateX(0); }
@media (max-width:767px){ .ask-panel{ width:100%; } }

.ask-head{ display:flex; align-items:center; gap:10px; padding:13px 14px 11px; border-bottom:1px solid var(--ask-line-2);
  background:linear-gradient(180deg, #fffefb, var(--ask-bg-2)); }
.ask-title{ display:flex; align-items:center; gap:9px; min-width:0; flex:1; }
.ask-title strong{ font-family:var(--ask-serif); font-size:17px; font-weight:600; letter-spacing:.005em; }
.ask-title svg{ width:20px; height:20px; color:var(--ask-accent); flex:none; }
.ask-crest{ width:30px; height:30px; flex:none; filter:drop-shadow(0 2px 5px rgba(67,46,20,.22)); }
.ask-page{ display:block; font-size:11.5px; color:var(--ask-ink-soft); margin-left:auto; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:46%; }
.ask-head__actions{ display:flex; gap:4px; flex:none; }
.ask-iconbtn{ display:inline-grid; place-items:center; width:38px; height:38px; border:none; border-radius:var(--ask-radius-sm);
  background:transparent; color:var(--ask-ink-soft); cursor:pointer; transition:background var(--ask-t), color var(--ask-t); }
.ask-iconbtn:hover{ background:var(--ask-bg-2); color:var(--ask-ink); }
.ask-iconbtn svg{ width:19px; height:19px; }

.ask-meta{ font-size:11.5px; color:var(--ask-ink-soft); padding:7px 16px; border-bottom:1px solid var(--ask-line); }

.ask-log{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; }
.ask-empty{ margin:auto 0; text-align:center; color:var(--ask-ink-soft); font-size:14px; line-height:1.55; }
.ask-empty strong{ font-family:var(--ask-serif); color:var(--ask-ink); display:block; font-size:18px; margin-bottom:6px; }

.ask-msg{ max-width:92%; font-size:14.5px; line-height:1.6; }
.ask-msg--user{ align-self:flex-end; background:var(--ask-accent); color:var(--ask-accent-ink);
  padding:9px 13px; border-radius:14px 14px 4px 14px; }
.ask-msg--bot{ align-self:flex-start; }
.ask-bubble{ background:var(--ask-bg-2); border:1px solid var(--ask-line); padding:11px 13px; border-radius:4px 14px 14px 14px; }
.ask-bubble.is-refusal{ background:#f6e3dd; border-color:#e6c6bb; }
.ask-bubble.is-scope{ background:#efe7d8; }
.ask-bubble p{ margin:0 0 .5em; } .ask-bubble p:last-child{ margin:0; }
.ask-bubble a{ color:var(--ask-accent); word-break:break-word; }
/* rich markdown answers must fit the narrow pane, never spill past one column. A fixed layout makes
   the columns share the width and wrap; break-word lets long URLs / drug codenames break instead of
   forcing the table wide; the slightly smaller type is the "shrink" half of the balance. */
.ask-bubble table{ width:100%; table-layout:fixed; border-collapse:collapse; margin:.5em 0; font-size:12.5px; line-height:1.4; }
.ask-bubble th, .ask-bubble td{ border:1px solid var(--ask-line-2); padding:5px 7px; text-align:left;
  vertical-align:top; overflow-wrap:anywhere; word-break:break-word; }
.ask-bubble th{ background:var(--ask-bg-2); font-weight:600; }
.ask-bubble pre{ overflow-x:auto; max-width:100%; } .ask-bubble code{ overflow-wrap:anywhere; }
.ask-bubble img{ max-width:100%; height:auto; }
.ask-flag{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; margin-bottom:6px; }
.ask-flag svg{ width:15px; height:15px; flex:none; }
.ask-flag--safe{ color:var(--ask-warn); } .ask-flag--scope{ color:var(--ask-info); }

.ask-cites{ margin-top:9px; display:flex; flex-wrap:wrap; gap:6px; }
.ask-cite{ display:inline-flex; align-items:center; gap:5px; font-size:12px; text-decoration:none; color:var(--ask-ink);
  background:var(--ask-bg); border:1px solid var(--ask-line-2); border-radius:999px; padding:4px 9px; transition:border-color var(--ask-t); }
.ask-cite:hover{ border-color:var(--ask-accent); }
.ask-tier{ font-weight:700; font-size:10px; letter-spacing:.04em; }
.ask-tier--S{ color:var(--ask-tier-s); } .ask-tier--A{ color:var(--ask-tier-a); }
.ask-tier--B{ color:var(--ask-tier-b); } .ask-tier--C{ color:var(--ask-tier-c); }
.ask-web{ margin-top:9px; font-size:12px; }
.ask-web__h{ display:flex; align-items:center; gap:6px; color:var(--ask-ink-soft); font-weight:600; margin-bottom:4px; }
.ask-web__h svg{ width:14px; height:14px; }
.ask-web ul{ margin:0; padding-left:16px; } .ask-web li{ margin:3px 0; }
/* source links are comfortable ≥24px tap rows on mobile, and long URLs wrap instead of spilling */
.ask-web a{ color:var(--ask-accent); display:inline-block; padding:5px 0; line-height:1.35; word-break:break-word; }

.ask-typing{ align-self:flex-start; color:var(--ask-ink-soft); font-size:13px; font-style:italic; }

/* ---- composer ---- */
.ask-form{ border-top:1px solid var(--ask-line); padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:var(--ask-bg); }
.ask-toggle{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ask-ink-soft); cursor:pointer; margin:0 2px 8px; }
.ask-toggle input{ width:16px; height:16px; accent-color:var(--ask-accent); cursor:pointer; }
.ask-row{ display:flex; gap:8px; align-items:flex-end; }
.ask-input{ flex:1; resize:none; max-height:140px; min-height:44px; padding:11px 12px; border:1px solid var(--ask-line-2);
  border-radius:var(--ask-radius-sm); font:inherit; font-size:14.5px; color:var(--ask-ink); background:var(--ask-bg); }
.ask-input:focus{ outline:none; border-color:var(--ask-accent); }
.ask-send{ flex:none; width:48px; height:48px; display:grid; place-items:center; border:none; border-radius:var(--ask-radius-sm);
  background:var(--ask-accent); color:#fff; cursor:pointer; transition:opacity var(--ask-t); }
.ask-send:disabled{ opacity:.45; cursor:default; }
.ask-send svg{ width:20px; height:20px; }
.ask-disc{ margin:8px 2px 0; font-size:11px; line-height:1.45; color:var(--ask-ink-soft); }

/* ---- "history full" modal ---- */
.ask-modal[hidden]{ display:none; }
.ask-modal{ position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:20px;
  background:rgba(43,32,23,.5); }
.ask-modal__card{ background:var(--ask-bg); border-radius:var(--ask-radius); max-width:340px; padding:22px;
  box-shadow:var(--ask-shadow); text-align:center; }
.ask-modal__card h2{ font-family:var(--ask-serif); font-size:19px; margin:0 0 8px; color:var(--ask-ink); }
.ask-modal__card p{ font-size:14px; line-height:1.55; color:var(--ask-ink-soft); margin:0 0 18px; }
.ask-modal__row{ display:flex; gap:10px; justify-content:center; }
.ask-btn{ font:inherit; font-size:14px; font-weight:600; padding:10px 16px; min-height:44px; border-radius:var(--ask-radius-sm); cursor:pointer; }
.ask-btn--primary{ background:var(--ask-accent); color:#fff; border:none; }
.ask-btn--ghost{ background:transparent; color:var(--ask-ink); border:1px solid var(--ask-line-2); }

/* ---- focus + motion ---- */
.ask-fab:focus-visible, .ask-iconbtn:focus-visible, .ask-send:focus-visible, .ask-cite:focus-visible,
.ask-btn:focus-visible, .ask-input:focus-visible, .ask-toggle input:focus-visible{
  outline:2px solid var(--ask-accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  .ask-panel, .ask-fab, html.ask-open body{ transition:none; }
}

/* ---- Generate Research Paper ---- */
.ask-paper{ border-bottom:1px solid var(--ask-line); background:var(--ask-bg-2); }
.ask-paper>summary{ display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  padding:11px 14px; font-family:var(--ask-sans); font-size:13.5px; font-weight:600; color:var(--ask-accent); }
.ask-paper>summary::-webkit-details-marker{ display:none; }
.ask-paper>summary svg{ width:17px; height:17px; flex:none; }
.ask-paper>summary:after{ content:"▾"; margin-left:auto; color:var(--ask-ink-soft); font-size:12px; }
.ask-paper[open]>summary:after{ content:"▴"; }
.ask-paper__lede{ margin:0; padding:0 14px 8px; font-size:11.5px; line-height:1.45; color:var(--ask-ink-soft); }
.ask-paper__row{ display:flex; gap:8px; padding:0 14px 10px; align-items:stretch; }
.ask-email{ box-sizing:border-box; flex:1; min-width:0; min-height:44px; padding:10px 12px;
  border:1px solid var(--ask-line-2); border-radius:var(--ask-radius-sm);
  font-family:var(--ask-sans); font-size:16px; color:var(--ask-ink); background:var(--ask-bg); }
.ask-gen{ box-sizing:border-box; flex:none; min-height:44px; padding:10px 14px; border:none;
  border-radius:var(--ask-radius-sm); background:var(--ask-accent);
  color:var(--ask-accent-ink); font-family:var(--ask-sans); font-size:13px; font-weight:600; cursor:pointer;
  white-space:nowrap; transition:opacity var(--ask-t); }
.ask-gen:hover{ opacity:.92; } .ask-gen:disabled{ opacity:.6; cursor:default; }
.ask-paper__msg{ margin:0; padding:0 14px 11px; font-size:12px; line-height:1.45; }
.ask-paper__msg.is-ok{ color:var(--ask-safe); } .ask-paper__msg.is-err{ color:var(--ask-warn); }
.ask-paper__msg.is-hint{ color:var(--ask-ink-soft); }
@media (max-width:767px){ .ask-paper__row{ flex-wrap:wrap; } .ask-gen{ width:100%; } }