/* ════════════════════════════════════════════════════════════════
   chat.css — Foreground research-librarian chat widget.
   Editorial "ink-and-paper" styling; reuses site.css design tokens
   (--paper, --surface, --ink*, --rule*, --navy, --gold*, --serif…).
   Pairs with chat.js (window.JCChat). Self-contained — all selectors
   namespaced .jcc-* so it can't collide with the host page.
   ════════════════════════════════════════════════════════════════ */

/* ── Backdrop ─────────────────────────────────────────────────────── */
.jcc-backdrop{
  position:fixed; inset:0; z-index:600;
  background:rgba(26,35,48,.42);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .24s ease;
}
.jcc-backdrop.jcc-on{ opacity:1; }

/* ── Drawer (right-side slide-in on desktop) ──────────────────────── */
.jcc-drawer{
  position:fixed; top:0; right:0; z-index:601;
  width:420px; max-width:100vw; height:100%;
  display:flex; flex-direction:column;
  background:var(--paper,#f9f8f4);
  border-left:3px double var(--rule-strong,#cfcabc);
  box-shadow:-18px 0 48px rgba(20,30,45,.18);
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.4,.0,.2,1);
  font-family:var(--sans,Inter,-apple-system,sans-serif);
  color:var(--ink,#1a2330);
}
.jcc-drawer.jcc-on{ transform:translateX(0); }
.jcc-drawer:focus{ outline:none; }

/* Drag the left edge to widen the reading space (persisted; double-click to reset). */
.jcc-resize{
  position:absolute; top:0; left:-4px; width:12px; height:100%;
  cursor:ew-resize; z-index:602; touch-action:none;
}
.jcc-resize::before{
  content:""; position:absolute; top:50%; left:4px; transform:translateY(-50%);
  width:4px; height:46px; border-radius:3px;
  background:var(--rule-strong,#cfcabc); opacity:.55; transition:opacity .15s,background .15s;
}
.jcc-resize:hover::before, .jcc-resizing .jcc-resize::before{ opacity:1; background:var(--navy,#1d3a5f); }
.jcc-resizing{ cursor:ew-resize; user-select:none; }
.jcc-resizing .jcc-drawer{ transition:none; }

/* ── Header ───────────────────────────────────────────────────────── */
.jcc-head{
  flex:none; display:flex; align-items:flex-start; gap:14px;
  padding:18px 18px 14px 22px;
  background:var(--surface,#fffefb);
  border-bottom:1px solid var(--rule,#e4e1d8);
}
.jcc-head-text{ min-width:0; flex:1; }
.jcc-title{
  font-family:var(--serif,Georgia,serif); font-weight:600; font-size:21px;
  letter-spacing:-.3px; line-height:1.2; color:var(--ink,#1a2330);
}
.jcc-sub{
  margin-top:4px; font-size:13px; line-height:1.45;
  color:var(--ink-faint,#5f6b7d);
  font-family:var(--serif,Georgia,serif); font-style:italic;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.jcc-close{
  flex:none; width:32px; height:32px; border-radius:var(--r,3px);
  border:1px solid transparent; background:transparent;
  color:var(--ink-faint,#5f6b7d); cursor:pointer; line-height:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .12s, color .12s;
}
.jcc-close:hover{ border-color:var(--rule-strong,#cfcabc); color:var(--ink,#1a2330); }
.jcc-close:focus-visible{ outline:2px solid var(--navy,#1d3a5f); outline-offset:1px; }

/* ── Shared icon sizing ───────────────────────────────────────────── */
.jcc-ic{ width:18px; height:18px; display:inline-block; flex:none; }

/* ── Body / messages ──────────────────────────────────────────────── */
.jcc-body{ flex:1; min-height:0; display:flex; flex-direction:column; }
.jcc-messages{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:18px 18px 8px 22px;
  display:flex; flex-direction:column; gap:14px;
  scroll-behavior:smooth;
}

/* ── Empty state + quick-action chips ─────────────────────────────── */
.jcc-empty{ padding:8px 0 2px; }
.jcc-empty-lede{
  font-family:var(--serif,Georgia,serif); font-style:italic; font-size:15px;
  line-height:1.55; color:var(--ink-soft,#46556a); max-width:340px;
}
.jcc-empty-label{
  margin:18px 0 9px; font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint,#5f6b7d);
}
.jcc-chips{ display:flex; flex-wrap:wrap; gap:7px; }

/* Chips echo site.css .chip but bordered for tappability. */
.jcc-chip{
  display:inline-flex; align-items:center; text-align:left;
  border:1px solid var(--rule-strong,#cfcabc); background:var(--surface,#fffefb);
  color:var(--ink-soft,#46556a); font-family:var(--sans,Inter,sans-serif);
  font-weight:600; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  border-radius:var(--r,3px); padding:7px 12px; cursor:pointer; line-height:1.3;
  transition:border-color .12s, color .12s, background .12s;
}
.jcc-chip:hover{ border-color:var(--navy,#1d3a5f); color:var(--navy,#1d3a5f); }
.jcc-chip:focus-visible{ outline:2px solid var(--navy,#1d3a5f); outline-offset:1px; }
.jcc-chip[disabled]{ opacity:.45; pointer-events:none; }

/* ── Message rows ─────────────────────────────────────────────────── */
.jcc-msg{ display:flex; }
.jcc-msg-user{ justify-content:flex-end; }
.jcc-msg-bot{ justify-content:flex-start; }
.jcc-bubble{ max-width:86%; }

/* User: subtle, right-aligned, no heavy card. */
.jcc-msg-user .jcc-bubble{
  background:var(--gold-soft,#f6f1e3);
  border:1px solid var(--rule,#e4e1d8);
  border-radius:var(--r,3px);
  padding:9px 13px; font-size:14px; line-height:1.55;
  color:var(--ink,#1a2330); white-space:pre-wrap; word-wrap:break-word;
}

/* Assistant: on a paper card. */
.jcc-card{
  background:var(--surface,#fffefb);
  border:1px solid var(--rule,#e4e1d8);
  border-left:3px solid var(--navy,#1d3a5f);
  border-radius:var(--r,3px);
  padding:12px 15px; font-size:14px; line-height:1.62;
  color:var(--ink,#1a2330);
}

/* ── Lightly-rendered markdown ────────────────────────────────────── */
.jcc-md > :first-child{ margin-top:0; }
.jcc-md > :last-child{ margin-bottom:0; }
.jcc-md p{ margin:0 0 9px; }
.jcc-md strong{ font-weight:700; color:var(--ink,#1a2330); }
.jcc-md ul, .jcc-md ol{ margin:0 0 9px; padding-left:22px; }
.jcc-md li{ margin:3px 0; }
.jcc-md-ul{ list-style:none; padding-left:18px; }
.jcc-md-ul li{ position:relative; padding-left:4px; }
.jcc-md-ul li::before{
  content:"—"; position:absolute; left:-16px; color:var(--gold,#9a7b2d); font-weight:700;
}
.jcc-md-ol{ list-style:decimal; }
.jcc-md-ol li::marker{ color:var(--gold,#9a7b2d); font-weight:600; }

/* Citation markers -> small superscript links. */
.jcc-cite{ font-size:.72em; line-height:0; }
.jcc-cite a{
  color:var(--navy,#1d3a5f); font-weight:700; text-decoration:none;
  padding:0 1px;
}
.jcc-cite a:hover{ text-decoration:underline; }

/* ── Sources block (inside an assistant card) ─────────────────────── */
.jcc-sources{
  margin:0 0 11px; padding:0 0 11px;
  border-bottom:1px solid var(--rule,#e4e1d8);
}
.jcc-sources-label{
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold,#9a7b2d); margin-bottom:7px;
}
.jcc-sources-list{ margin:0; padding-left:20px; }
.jcc-sources-list li{
  margin:4px 0; font-size:12.5px; line-height:1.45;
}
.jcc-sources-list li::marker{ color:var(--ink-faint,#5f6b7d); }
.jcc-sources-list a{
  font-family:var(--serif,Georgia,serif); color:var(--navy,#1d3a5f);
}
.jcc-src-meta{
  display:inline; color:var(--ink-faint,#5f6b7d);
  font-family:var(--serif,Georgia,serif); font-style:italic; font-size:12px;
}

/* ── Typing indicator ─────────────────────────────────────────────── */
.jcc-typing{ display:inline-flex; gap:5px; padding:3px 0 2px; }
.jcc-typing span{
  width:6px; height:6px; border-radius:50%;
  background:var(--ink-faint,#5f6b7d); opacity:.45;
  animation:jccBlink 1.1s infinite ease-in-out both;
}
.jcc-typing span:nth-child(2){ animation-delay:.18s; }
.jcc-typing span:nth-child(3){ animation-delay:.36s; }
@keyframes jccBlink{
  0%,80%,100%{ transform:scale(.7); opacity:.35; }
  40%{ transform:scale(1); opacity:.9; }
}

/* ── System notes (errors / gentle caps) ──────────────────────────── */
.jcc-note{
  font-size:13px; line-height:1.5; padding:9px 13px; border-radius:var(--r,3px);
  font-family:var(--serif,Georgia,serif);
}
.jcc-note-err{
  color:var(--red,#9e3b34);
  border-left:3px solid var(--red,#9e3b34); background:transparent;
}
.jcc-note-cap{
  color:var(--ink-soft,#46556a);
  border-left:3px solid var(--gold,#9a7b2d); background:var(--gold-soft,#f6f1e3);
}

/* ── Persistent chip row above the input ──────────────────────────── */
.jcc-chiprow{
  flex:none; display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:9px 18px 9px 22px;
  border-top:1px solid var(--rule,#e4e1d8);
  background:var(--paper,#f9f8f4);
}
.jcc-chiprow::-webkit-scrollbar{ height:0; }
.jcc-chiprow .jcc-chip{ flex:none; white-space:nowrap; }
.jcc-chiprow[hidden]{ display:none; }

/* ── Input bar ────────────────────────────────────────────────────── */
.jcc-inputbar{
  flex:none; display:flex; align-items:flex-end; gap:8px;
  padding:12px 18px 10px 22px;
  border-top:1px solid var(--rule,#e4e1d8);
  background:var(--surface,#fffefb);
}
.jcc-input{
  flex:1; min-width:0; resize:none; overflow-y:auto;
  border:1px solid var(--rule-strong,#cfcabc); border-radius:var(--r,3px);
  padding:10px 12px; font-family:var(--sans,Inter,sans-serif); font-size:15px;
  line-height:1.5; background:#fff; color:var(--ink,#1a2330);
  max-height:160px; min-height:42px;
}
.jcc-input:focus{ outline:none; border-color:var(--navy,#1d3a5f); }
.jcc-input:disabled{ opacity:.6; background:var(--paper,#f9f8f4); }

.jcc-send, .jcc-stop{
  flex:none; width:42px; height:42px; border-radius:var(--r,3px);
  border:1px solid var(--navy,#1d3a5f); cursor:pointer; line-height:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .12s, border-color .12s;
}
.jcc-send{ background:var(--navy,#1d3a5f); color:#fff; }
.jcc-send:hover{ background:var(--navy-deep,#152c49); border-color:var(--navy-deep,#152c49); }
.jcc-stop{ background:var(--surface,#fffefb); color:var(--navy,#1d3a5f); }
.jcc-stop:hover{ border-color:var(--red,#9e3b34); color:var(--red,#9e3b34); }
.jcc-send:focus-visible, .jcc-stop:focus-visible{ outline:2px solid var(--gold,#9a7b2d); outline-offset:2px; }
.jcc-send[hidden], .jcc-stop[hidden]{ display:none; }

/* ── Footer line ──────────────────────────────────────────────────── */
.jcc-footer{
  flex:none; padding:8px 18px 11px 22px;
  font-family:var(--serif,Georgia,serif); font-style:italic;
  font-size:11.5px; line-height:1.45; color:var(--ink-faint,#5f6b7d);
  background:var(--surface,#fffefb);
  border-top:1px solid var(--rule,#e4e1d8);
}

/* ── Utility (in case host page lacks .sr-only) ───────────────────── */
.jcc-drawer .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── Mobile: full-width bottom sheet (<=680px) ────────────────────── */
@media (max-width:680px){
  .jcc-drawer{
    width:100%; max-width:100%;
    top:auto; bottom:0; right:0; left:0;
    height:88vh; height:88dvh; max-height:88vh;
    border-left:none;
    border-top:3px double var(--rule-strong,#cfcabc);
    border-radius:14px 14px 0 0;
    box-shadow:0 -16px 44px rgba(20,30,45,.2);
    transform:translateY(100%);
  }
  .jcc-drawer.jcc-on{ transform:translateY(0); }
  /* Bottom sheet: no horizontal resize, and never keep a desktop pixel width. */
  .jcc-resize{ display:none; }
  .jcc-drawer{ width:100% !important; }
  /* iOS: 16px inputs prevent auto-zoom. */
  .jcc-input{ font-size:16px; }
  .jcc-messages{ padding-left:18px; }
  .jcc-head, .jcc-chiprow, .jcc-inputbar, .jcc-footer{ padding-left:18px; }
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .jcc-backdrop, .jcc-drawer{ transition:none; }
  .jcc-messages{ scroll-behavior:auto; }
  .jcc-typing span{ animation:none; opacity:.5; }
}

/* Generated PubMed query (code block) with Copy + Search-in-library actions. */
.jcc-codewrap{ margin:8px 0; }
.jcc-code{ background:#152231; color:#e8eef5; border-radius:8px; padding:10px 12px; overflow-x:auto;
  font-size:12.5px; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.jcc-code code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:none; color:inherit; }
.jcc-code-acts{ display:flex; gap:12px; align-items:center; margin-top:6px; }
.jcc-copy{ border:1px solid #cfcabc; background:#fff; border-radius:7px; padding:5px 13px;
  font-size:12.5px; font-weight:700; cursor:pointer; color:#1d3a5f; font-family:inherit; }
.jcc-copy:hover{ background:#1d3a5f; color:#fff; border-color:#1d3a5f; }
.jcc-runsearch{ font-size:12.5px; font-weight:700; color:#0e5f63; text-decoration:none; }
.jcc-runsearch:hover{ text-decoration:underline; }