:root{
  color-scheme:light;
  --bg:#f6f7f8; --card:#ffffff; --ink:#18181b; --sec:#52525b; --mut:#8a8a93;
  --line:#e8e8eb; --line2:#dddde1; --accent:#0e7c41; --accent-dk:#116237; --accent-bg:#e6f2ea;
  --serif:#3f3f46; --bubble-ink:#0a3722;
  --tc-gene:#b0208f; --tc-phenotype:#d32f2f; --tc-treatment:#3fb950; --tc-metabolite:#a08600;
  --tc-disease:#1a6bc7; --tc-pathway:#6a35c9; --tc-other:#8a8a93;
  --shadow:0 1px 2px rgba(20,20,30,.04), 0 4px 16px rgba(20,20,30,.05);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f1217; --card:#181b21; --ink:#e6e8ea; --sec:#a3a9b1; --mut:#777d86;
  --line:#262a31; --line2:#30353d; --accent:#2ea867; --accent-dk:#63cf8d; --accent-bg:#10291c;
  --serif:#c6cace; --bubble-ink:#a9e5bf;
  --tc-gene:#e26fc9; --tc-phenotype:#f2857a; --tc-treatment:#4ade80; --tc-metabolite:#e3c847;
  --tc-disease:#7ab3ea; --tc-pathway:#b193f0; --tc-other:#9aa0a8;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased;}
svg{display:block}

.topbar{display:flex; align-items:center; justify-content:space-between; padding:11px 22px; border-bottom:1px solid var(--line); background:var(--card); flex:none;}
.brand{display:flex; align-items:center; gap:11px;}
.brandlink{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit;}
.logo{width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:var(--accent);}
.brand b{font-weight:600; font-size:16px; display:block; line-height:1.1;}
.brand span{font-size:12px; color:var(--mut); line-height:1.2;}
.newchat{display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:13px; color:#fff; background:var(--accent); border:1px solid var(--accent); border-radius:9px; padding:7px 13px; cursor:pointer; text-decoration:none;}
.newchat:hover{background:var(--accent-dk); border-color:var(--accent-dk);}
/* Asking and exploring are the two halves of RaDOr, so they sit together in one control in the middle
   of the bar. Neither is coloured more strongly than the other: a filled button beside an outlined one
   would say one of them mattered more. */
.modeswitch{display:inline-flex; background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:3px; gap:3px;}
.modeswitch a{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--sec);
  padding:5px 14px; border-radius:7px; text-decoration:none; white-space:nowrap;}
.modeswitch a:hover{color:var(--ink);}
.modeswitch a.on{background:var(--card); color:var(--accent-dk); font-weight:500; box-shadow:var(--shadow);}

.main{flex:1; min-height:0; display:flex; position:relative;}
.chat{flex:1; min-width:0; min-height:0; overflow-y:auto;}
.thread{max-width:760px; margin:0 auto; padding:26px 20px 36px;}

.welcome{text-align:center; padding:54px 0 16px;}
.biglogo{width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center; color:var(--accent); margin-bottom:18px;}
.welcome h1{font-size:26px; font-weight:600; letter-spacing:-.01em; margin:0 0 8px;}
.examples{display:flex; flex-wrap:wrap; gap:7px; justify-content:center;}
.examples button{font:inherit; font-size:12.5px; color:var(--sec); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:7px 11px; cursor:pointer; transition:all .15s; white-space:nowrap;}
.examples button:hover{border-color:var(--accent); color:var(--accent-dk);}

.msg{margin-bottom:24px;}
.msg.user{display:flex; justify-content:flex-end;}
.bubble{background:var(--accent-bg); color:var(--bubble-ink); border-radius:15px 15px 5px 15px; padding:10px 15px; font-size:15px; line-height:1.5; max-width:78%;}
.msg.bot{display:flex; gap:11px; align-items:flex-start;}
.botbody{flex:1; min-width:0;}

/* the agent's answer, and its live status while it works */
.answer{font-size:15px; color:var(--ink); line-height:1.65; padding-top:3px;}
.answer > *:first-child{margin-top:0;}
.answer > *:last-child{margin-bottom:0;}
.answer p{margin:0 0 11px;}
.answer h1,.answer h2,.answer h3,.answer h4,.answer h5,.answer h6{
  font-size:14.5px; font-weight:600; color:var(--ink); margin:18px 0 8px; letter-spacing:-.005em;}
.answer ul{margin:0 0 11px; padding-left:20px;}
.answer li{margin:4px 0;}
.answer strong{font-weight:600;}
.answer a{color:var(--accent-dk); text-decoration:none;}
.answer a:hover{text-decoration:underline;}
.cite{color:var(--accent-dk); font-weight:600; font-size:.72em; padding:0 2px; vertical-align:super;
  line-height:0; font-family:inherit; background:none; border:none; border-radius:3px; cursor:pointer;}
.cite:hover{background:var(--accent-bg);}
/* The papers behind one citation, shown where the reader is rather than at the foot of the answer. */
.citebubble{position:absolute; z-index:60; background:var(--card); border:1px solid var(--line);
  border-radius:11px; box-shadow:var(--shadow); padding:11px 13px; display:flex; flex-direction:column; gap:9px;}
.citerow{display:flex; gap:9px; font-size:12.5px; color:var(--sec); line-height:1.5;}
.citenum{flex:none; color:var(--accent-dk); font-weight:600;}
.citebubble a{color:var(--accent-dk); text-decoration:none;}
.citebubble a:hover{text-decoration:underline;}
/* Citations behind the answer: a collapsed, numbered reference list. */
.refs{margin-top:14px; border-top:1px solid var(--line); padding-top:12px;}
.refstoggle{display:inline-flex; align-items:center; gap:6px; background:none; border:none; padding:0; font-family:inherit; font-size:13px; color:var(--mut); cursor:pointer;}
.refstoggle:hover{color:var(--sec);}
.refs.open .thoughtchev{transform:rotate(90deg);}
.refslist{display:none; margin:12px 0 0; padding-left:24px;}
.refs.open .refslist{display:block;}
.refslist li{font-size:13px; color:var(--sec); line-height:1.5; margin:8px 0; padding-left:4px;}
.refslist a{color:var(--accent-dk); text-decoration:none;}
.refslist a:hover{text-decoration:underline;}
/* What a reader can do with a finished answer, and the box that opens on a thumbs down. */
.actionbar{margin-top:12px;}
.actions{display:flex; align-items:center; gap:2px;}
.action{display:inline-flex; align-items:center; gap:5px; background:none; border:none; border-radius:6px;
  padding:5px 7px; font-family:inherit; font-size:12.5px; line-height:1; color:var(--mut); cursor:pointer;}
.action:hover{background:var(--card); color:var(--sec);}
.action.done,.action.on{color:var(--accent-dk); background:none;}
.fbbox{margin-top:10px; max-width:430px;}
.fbtext{width:100%; box-sizing:border-box; font-family:inherit; font-size:13px; line-height:1.5;
  color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:9px;
  padding:9px 11px; resize:vertical;}
.fbtext:focus{outline:none; border-color:var(--accent);}
.fbrow{display:flex; align-items:center; gap:6px; margin-top:8px;}
.fbsend{font-family:inherit; font-size:12.5px; color:#fff; background:var(--accent); border:none;
  border-radius:7px; padding:7px 15px; cursor:pointer;}
.fbsend:hover{background:var(--accent-dk);}
.fbsend:disabled{opacity:.55; cursor:default;}
.fbskip{font-family:inherit; font-size:12.5px; color:var(--mut); background:none; border:none;
  padding:7px 6px; cursor:pointer;}
.fbskip:hover{color:var(--sec);}
.fbthanks{font-size:12.5px; color:var(--sec); padding:2px 0;}
.steps{display:flex; flex-direction:column; gap:8px; padding-top:4px;}
.step{font-size:13.5px; display:flex; align-items:center; gap:9px; line-height:1.4;}
.step.active{color:var(--ink);}
.step.done{color:var(--sec);}
.stepicon{flex:none; display:inline-flex; align-items:center; color:var(--accent);}
.step.done .stepicon{opacity:.55;}
.steptext{min-width:0;}
.steptime{color:var(--mut); font-size:12px;}
.stepresult{font-size:13px; color:var(--mut); padding-left:25px; line-height:1.4;}
/* active mark: the dish draws itself, then one sweep goes round and stays lit */
@keyframes rad-ring{0%{stroke-dashoffset:61;} 26%,100%{stroke-dashoffset:0;}}
@keyframes rad-core{0%,22%{opacity:0; transform:scale(.3);} 34%,100%{opacity:1; transform:scale(1);}}
@keyframes rad-stripe{0%,34%{stroke-dashoffset:14;} 48%,100%{stroke-dashoffset:0;}}
@keyframes rad-beam{0%,50%{transform:rotate(0deg); opacity:0;} 56%{opacity:1;} 88%,100%{transform:rotate(360deg); opacity:1;}}
.radspin .rad-ring{stroke-dasharray:61; animation:rad-ring 4s ease-out infinite;}
.radspin .rad-core{transform-box:view-box; transform-origin:12px 12px; animation:rad-core 4s cubic-bezier(.34,1.4,.64,1) infinite;}
.radspin .rad-stripe{stroke-dasharray:14; animation:rad-stripe 4s ease-out infinite;}
.radspin .rad-beam{transform-box:view-box; transform-origin:12px 12px; animation:rad-beam 4s cubic-bezier(.4,0,.3,1) infinite;}
@media(prefers-reduced-motion:reduce){
  .radspin .rad-ring, .radspin .rad-core, .radspin .rad-stripe, .radspin .rad-beam{animation:none;}
  .radspin .rad-ring, .radspin .rad-stripe{stroke-dasharray:none;}
}
/* Finished reply: the steps fold into a "Thought for X seconds" summary that expands. */
.thoughts{margin-bottom:10px;}
.thoughthead{display:inline-flex; align-items:center; gap:6px; background:none; border:none; padding:0; font-family:inherit; font-size:13px; color:var(--mut); cursor:pointer;}
.thoughthead.plain{cursor:default;}
.thoughthead:hover{color:var(--sec);}
.thoughtchev{display:inline-flex; transition:transform .15s ease;}
.thoughts.open .thoughtchev{transform:rotate(90deg);}
.thoughtsteps{display:none; margin-top:10px;}
.thoughts.open .thoughtsteps{display:flex;}
/* The agent's clarifying question: pickable options plus a free-text reply. */
.clarify{border:1px solid var(--line); border-radius:14px; padding:15px 17px; background:var(--card); margin-top:8px;}
.clarifyq{font-size:15px; color:var(--ink); line-height:1.5; margin-bottom:12px;}
.clarifyopts{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;}
.clarifyopt{font:inherit; font-size:13.5px; color:var(--accent-dk); background:var(--accent-bg); border:1px solid var(--line); border-radius:999px; padding:7px 14px; cursor:pointer; transition:all .15s;}
.clarifyopt:hover{border-color:var(--accent);}
.clarifyrow{display:flex; gap:8px; align-items:center;}
.clarifyrow input{flex:1; min-width:0; font:inherit; font-size:14px; background:var(--bg); border:1px solid var(--line2); border-radius:10px; padding:8px 12px; color:var(--ink); outline:none;}
.clarifyrow input:focus{border-color:var(--accent);}
.clarifygo{flex:none; font:inherit; font-size:13.5px; color:#fff; background:var(--accent); border:none; border-radius:9px; padding:8px 15px; cursor:pointer;}
.clarifygo:hover{background:var(--accent-dk);}

.composer{flex:none; border-top:1px solid var(--line); background:var(--card); padding:14px 20px 18px;}
.cbar{max-width:760px; margin:0 auto; display:flex; align-items:center; gap:10px; background:var(--bg); border:1px solid var(--line2); border-radius:14px; padding:7px 7px 7px 16px; transition:border-color .15s;}
.cbar:focus-within{border-color:var(--accent);}
.cbar input{flex:1; border:none; outline:none; font:inherit; font-size:15.5px; background:transparent; color:var(--ink);}
.send{flex:none; width:38px; height:38px; border:none; border-radius:10px; background:var(--accent); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s;}
.send:hover{background:var(--accent-dk);}
.chint{max-width:760px; margin:8px auto 0; text-align:center; font-size:11.5px; color:var(--mut);}

/* the history sidebar: a signed-in visitor's past chats, newest first */
.history{width:248px; flex:none; border-right:1px solid var(--line); background:var(--bg); padding:14px 10px; transition:width .26s ease, opacity .2s ease, padding .26s ease;}
.history[hidden]{display:none;}
.history.collapsed{width:0; padding-left:0; padding-right:0; opacity:0; border-right:none;}
.histtoggle{width:32px; height:32px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--sec); cursor:pointer;}
.histtoggle:hover{border-color:var(--accent); color:var(--accent-dk);}
.histtoggle[hidden]{display:none;}
.hist-head{font-size:12px; font-weight:500; color:var(--mut); letter-spacing:.01em; padding:4px 8px 10px;}
.hist-list{display:flex; flex-direction:column; gap:2px;}
.hist-item{display:flex; align-items:center; border:1px solid transparent; border-radius:9px;}
.hist-item:hover{background:var(--card); border-color:var(--line);}
.hist-item.active{background:var(--accent-bg); border-color:var(--accent);}
.hist-open{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; align-items:flex-start; text-align:left; padding:8px 10px; border:none; background:none; cursor:pointer; font:inherit;}
.hist-title{font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.hist-time{font-size:11px; color:var(--mut);}
.hist-rename, .hist-del{flex:none; width:26px; height:26px; padding:0; display:none; align-items:center; justify-content:center; border:none; border-radius:6px; background:none; color:var(--mut); cursor:pointer;}
.hist-del{margin-right:6px;}
.hist-item:hover .hist-rename, .hist-item:hover .hist-del{display:flex;}
.hist-rename:hover{color:var(--accent-dk);}
.hist-del:hover{color:#e5484d;}
.hist-edit{width:100%; margin:3px 6px; padding:5px 8px; font:inherit; font-size:13px; color:var(--ink); background:var(--card); border:1px solid var(--accent); border-radius:7px; outline:none;}
.hist-item.confirming{background:var(--card); border-color:var(--line);}
.hist-confirm-yes{flex:none; padding:4px 9px; font:inherit; font-size:12px; color:#fff; background:#e5484d; border:none; border-radius:6px; cursor:pointer;}
.hist-confirm-yes:hover{background:#cf3f42;}
.hist-confirm-no{flex:none; width:26px; height:26px; margin-right:6px; padding:0; display:flex; align-items:center; justify-content:center; border:none; border-radius:6px; background:none; color:var(--mut); cursor:pointer;}
.hist-confirm-no:hover{color:var(--ink);}
.hist-empty{font-size:12px; color:var(--mut); padding:6px 8px;}

/* the entity sidebar: grounded subjects discussed in the thread, each shown as a readable card on a
   light canvas. Its width is user-draggable (--sidew) and the whole panel collapses to a thin strip. */
.side{width:var(--sidew,420px); flex:none; border-left:1px solid var(--line); background:var(--bg); overflow-y:auto; padding:2px 16px 30px; transition:width .18s ease;}
.side[hidden]{display:none;}
.side.dragging{transition:none;}
.side.collapsed{width:48px; padding:10px 8px; overflow:hidden;}
.side.collapsed .side-list, .side.collapsed .side-title{display:none;}
.side-top{display:flex; align-items:center; gap:8px; padding:15px 2px 10px; position:sticky; top:0; background:var(--bg); z-index:2;}
.side.collapsed .side-top{justify-content:center; padding:2px 0;}
.side-title{font-size:12px; font-weight:500; color:var(--mut); letter-spacing:.01em;}
.side-toggle{flex:none; width:28px; height:28px; margin-left:auto; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--sec); cursor:pointer; display:flex; align-items:center; justify-content:center;}
.side-toggle:hover{border-color:var(--accent); color:var(--accent-dk);}
.side-toggle svg{transition:transform .18s;}
.side.collapsed .side-toggle{margin-left:0;}
.side.collapsed .side-toggle svg{transform:rotate(180deg);}
/* draggable edge with an always-visible grip so it reads as resizable */
.side-resize{position:absolute; top:0; bottom:0; right:var(--sidew,420px); width:14px; margin-right:-7px; cursor:col-resize; z-index:6; display:flex; align-items:center; justify-content:center;}
.side-resize[hidden]{display:none;}
.side-resize::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); background:var(--line);}
.side-resize::after{content:""; width:4px; height:40px; border-radius:3px; background:var(--line2); transition:background .12s;}
.side-resize:hover::after, .side-resize.active::after{background:var(--accent);}

/* each subject is its own card */
.sb-item{background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); margin-bottom:12px; overflow:hidden;}
.sb-head{width:100%; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:17px 18px 15px; background:none; border:none; cursor:pointer; font-family:inherit; text-align:left;}
.sb-name{font-size:19px; font-weight:600; color:var(--ink); letter-spacing:-.015em;}
.sb-ids{display:flex; flex-wrap:wrap; gap:6px;}
.sb-chev{margin-left:auto; color:var(--mut); display:inline-flex; transition:transform .15s;}
.sb-item.open .sb-chev{transform:rotate(90deg);}
.sb-body{display:none; padding:0 17px 18px;}
.sb-item.open .sb-body{display:block;}
.sb-loading{font-size:13px; color:var(--mut); padding:8px 0;}

.pc-links{display:flex; flex-wrap:wrap; gap:6px;}
.pc-link{font-size:11.5px; color:var(--accent-dk); background:var(--accent-bg); border:1px solid transparent; border-radius:7px; padding:2px 8px; text-decoration:none;}
.pc-link:hover{border-color:var(--accent);}
.pc-sum{font-family:Newsreader,Georgia,serif; font-size:15.5px; line-height:1.55; color:var(--serif); margin:2px 0 6px;}
.pc-sum.clamped{display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;}
.pc-summore{display:block; font-size:12.5px; color:var(--accent-dk); background:none; border:none; cursor:pointer; padding:0 0 16px; font-family:inherit;}
.pc-summore:hover{text-decoration:underline;}
/* sidebar card stats: inheritance as a pill, the two counts as figures split by a hairline */
.pc-stats{margin:2px 0 4px;}
.pc-pill{display:inline-block; font-size:12.5px; color:var(--accent-dk); background:var(--accent-bg); border-radius:999px; padding:4px 11px; font-weight:500; margin-bottom:14px;}
.pc-figs{display:flex; align-items:center; gap:22px;}
.pc-fv{font-size:21px; font-weight:600; line-height:1; color:var(--ink);}
.pc-fl{font-size:11.5px; color:var(--mut); margin-top:5px;}
.pc-fdiv{width:1px; height:34px; background:var(--line);}
/* full-profile stats: label-left / value-right rows with a hairline between, at a larger size */
.pc-rows{border-top:1px solid var(--line);}
.pc-row{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:12px 0; border-bottom:1px solid var(--line);}
.pc-row.stack{flex-direction:column; align-items:flex-start; gap:5px;}
.pc-rl{font-size:13.5px; color:var(--mut);}
.pc-rv{font-size:15.5px; font-weight:600; color:var(--ink);}
.pc-sec{margin-top:18px;}
/* each grounded type carries a subtle colour on its icon and count, so the card reads as organised */
.pc-h3{display:flex; align-items:center; gap:9px; margin:0 0 10px; --tc:var(--mut);}
.pc-h3[data-type="gene"]{--tc:var(--tc-gene);}
.pc-h3[data-type="phenotype"]{--tc:var(--tc-phenotype);}
.pc-h3[data-type="treatment"]{--tc:var(--tc-treatment);}
.pc-h3[data-type="metabolite"]{--tc:var(--tc-metabolite);}
.pc-h3[data-type="disease"]{--tc:var(--tc-disease);}
.pc-h3[data-type="pathway"]{--tc:var(--tc-pathway);}
.pc-h3[data-type="other"]{--tc:var(--tc-other);}
.pc-label{display:inline-flex; align-items:center; gap:7px; font-size:14.5px; font-weight:600; color:var(--tc);}
.pc-label svg{color:var(--tc); width:16px; height:16px; flex:none;}
.pc-cnt{font-size:11px; color:var(--tc); background:var(--bg); border-radius:10px; padding:2px 9px;}
/* a hairline separates each type, in both the card and the full profile */
.sb-body .pc-sec, .dt-sec{border-top:1px solid var(--line); padding-top:17px; margin-top:17px;}
.dt-sec:first-child{border-top:none; padding-top:0; margin-top:0;}
/* collapsed: one line of chips, clipped; "Show all" opens the full list in a scroll box below */
.pc-chips{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; max-height:40px; overflow:hidden;}
.pc-chip{font-size:13px; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:6px 12px; text-decoration:none; white-space:nowrap;}
.pc-chip:hover{border-color:var(--accent); color:var(--accent-dk);}
.pc-chip-t{color:var(--mut); font-size:11px; margin-left:6px; text-transform:capitalize;}
/* expanded: a shaded, bordered, scrollable box so the reader can tell there is more to scroll */
.pc-chips.pc-open{max-height:200px; overflow-y:auto; align-content:flex-start; margin-top:4px; padding:12px; background:var(--bg); border:1px solid var(--line2); border-radius:11px; scrollbar-width:thin; scrollbar-color:var(--line2) transparent;}
.pc-chips.pc-open .pc-chip{background:var(--card);}
.pc-chips.pc-open::-webkit-scrollbar{width:9px;}
.pc-chips.pc-open::-webkit-scrollbar-thumb{background:var(--line2); border-radius:6px; border:2px solid var(--bg);}
.pc-more{display:block; font-size:12px; color:var(--mut); background:none; border:none; cursor:pointer; padding:9px 0 0; font-family:inherit;}
.pc-more:hover{color:var(--accent-dk); text-decoration:underline;}
/* find specialists: a clear outlined button, not a buried link */
.pc-care{margin-top:20px;}
.pc-mapbtn{width:100%; font:inherit; font-size:13.5px; color:var(--accent-dk); background:var(--accent-bg); border:1px solid var(--accent); border-radius:10px; padding:10px 14px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;}
.pc-mapbtn:hover{background:var(--accent); color:#fff;}
.pc-map iframe{width:100%; height:220px; border:0; border-radius:10px; margin-top:12px; display:block;}
.pc-full{display:inline-flex; align-items:center; gap:6px; margin-top:16px; font:inherit; font-size:12.5px; color:var(--accent-dk); background:none; border:none; cursor:pointer; padding:0;}
.pc-full:hover{text-decoration:underline;}
/* The two ways out of a profile card, side by side and in the same quiet style. */
.pc-actions{display:flex; align-items:center; gap:18px; margin-top:16px; flex-wrap:wrap;}
.pc-actions .pc-full{margin-top:0;}
.pc-explore{display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12.5px; color:var(--accent-dk); text-decoration:none;}
.pc-explore:hover{text-decoration:underline;}
.sidepeek{display:none;}
/* The entity panel is 420px and cannot sit beside the thread on a narrow screen. It used to be
   switched off entirely, which meant the disease and gene cards, and the route from them into the
   graph explorer, simply did not exist on a phone or tablet. It slides over instead, opened from a
   small button that only appears once there is something in it. */
@media(max-width:900px){
  .side-resize{display:none !important;}
  .side{position:fixed; top:57px; right:calc(0px - min(400px, 90vw)); bottom:0; z-index:50;
    width:min(400px, 90vw); box-shadow:var(--shadow); border-left:1px solid var(--line);
    transition:right .24s ease;}
  .side.open{right:0;}
  .side.collapsed{width:min(400px, 90vw); padding:2px 16px 30px; overflow-y:auto;}
  .side.collapsed .side-list, .side.collapsed .side-title{display:block;}
  /* Pinned to the right edge at reading height, not above the composer, where it sat on top of the
     send button. Flush to the edge so it never covers the text either. */
  .sidepeek{position:fixed; right:0; top:46%; z-index:48; display:inline-flex; align-items:center;
    gap:6px; font:inherit; font-size:12px; color:var(--accent-dk); background:var(--card);
    border:1px solid var(--accent); border-right:none; border-radius:999px 0 0 999px;
    padding:9px 12px 9px 13px; cursor:pointer; box-shadow:var(--shadow);}
  .sidebackdrop{position:fixed; inset:57px 0 0; z-index:49; background:rgba(0,0,0,.42);}
}
/* On a phone the sidebar cannot sit beside the thread, so it slides over it instead. Hiding it
   outright, as this used to, left a signed-in reader with no way to reach their own past chats. */
@media(max-width:640px){
  .history{position:fixed; top:57px; left:0; bottom:0; z-index:50; width:min(300px, 84vw);
    box-shadow:var(--shadow); transform:translateX(0); transition:transform .24s ease;}
  .history.collapsed{width:min(300px, 84vw); padding:14px 10px; opacity:1; border-right:1px solid var(--line);
    transform:translateX(-102%);}
  .histbackdrop{position:fixed; inset:57px 0 0; z-index:49; background:rgba(0,0,0,.42);}
}

/* full-profile view: a roomy full-page layout opened from the card */
.detail{position:fixed; inset:0; background:var(--bg); z-index:50; overflow-y:auto;}
.detail[hidden]{display:none;}
.detail-top{position:sticky; top:0; background:var(--card); border-bottom:1px solid var(--line); padding:12px 22px; z-index:2;}
.detail-back{font:inherit; font-size:14px; color:var(--sec); background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px;}
.detail-back:hover{color:var(--ink);}
.detail-wrap{max-width:1000px; margin:0 auto; padding:30px 28px 64px;}
.dt-herolink{display:block;}
.dt-hero{display:block; max-width:360px; width:100%; height:auto; border-radius:12px; border:1px solid var(--line); margin:0 0 6px;}
.dt-herolink:hover .dt-hero{border-color:var(--accent);}
.dt-credit{font-size:11.5px; color:var(--mut); margin:0 0 18px;}
.dt-credit a{color:var(--accent-dk); text-decoration:none;}
.dt-credit a:hover{text-decoration:underline;}
.detail-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.detail-head h1{font-size:27px; font-weight:600; margin:0; color:var(--ink); letter-spacing:-.01em;}
.detail-tag{font-size:12.5px; color:var(--mut); text-transform:capitalize;}
.dt-links{margin:14px 0 26px;}
.detail-sum{font-family:Newsreader,Georgia,serif; font-size:18px; line-height:1.6; color:var(--serif); margin:0 0 24px; max-width:700px;}
.detail-body{display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); gap:44px; align-items:start;}
.dt-sec .pc-h3{margin-bottom:12px;}
/* 1fr means minmax(auto,1fr), and that auto minimum lets wide content push the column past the
   screen. On a phone the profile ran to 731px inside a 375px viewport, clipping every sentence. */
@media(max-width:820px){ .detail-body{grid-template-columns:minmax(0,1fr); gap:28px;} }

.dt-graph{margin:0 0 30px;}
.pc-graph{margin:12px 0 4px;}
.pc-graph .dt-graph-cap{font-size:12px; max-width:none;}
.dt-graph-stage{position:relative; width:100%;}
.dt-graph-svg{display:block; overflow:visible;}
.dt-graph-tip{position:absolute; left:0; top:0; transform:translate(-50%,-118%); pointer-events:none; opacity:0; transition:opacity .08s; background:var(--card); border:1px solid var(--line2); border-radius:8px; padding:6px 10px; font-size:12px; line-height:1.4; color:var(--ink); white-space:nowrap; box-shadow:var(--shadow); z-index:3;}
.dt-graph-tip.show{opacity:1;}
.dt-graph-tip span{color:var(--sec);}
.dt-graph-cap{font-size:12.5px; color:var(--mut); line-height:1.5; margin:6px 2px 0; max-width:600px;}
.pc-tip{position:fixed; left:0; top:0; transform:translate(-50%,calc(-100% - 6px)); pointer-events:none; opacity:0; transition:opacity .08s; background:var(--card); border:1px solid var(--line2); border-radius:8px; padding:5px 9px; font-size:12px; color:var(--ink); white-space:nowrap; box-shadow:var(--shadow); z-index:50;}
.pc-tip.show{opacity:1;}

/* top-bar nav (chat + about) */
.topnav{display:flex; align-items:center; gap:16px;}
.navlink{font-size:13.5px; color:var(--sec); text-decoration:none; white-space:nowrap;}
.navlink:hover{color:var(--accent-dk);}
.themeseg{display:inline-flex; border:1px solid var(--line); border-radius:9px;}
.themeseg button{position:relative; display:flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:none; background:none; color:var(--mut); cursor:pointer;}
.themeseg button:first-child{border-radius:8px 0 0 8px;}
.themeseg button:last-child{border-radius:0 8px 8px 0;}
.themeseg button:hover{color:var(--ink);}
.themeseg button.on{background:var(--accent-bg); color:var(--accent-dk);}
.themeseg button::after{content:attr(title); position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%); background:var(--ink); color:var(--card); font-size:11px; line-height:1.3; padding:4px 8px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s; z-index:20;}
.themeseg button:hover::after{opacity:1;}

/* about page (body.doc scrolls normally instead of the 100vh app layout) */
body.doc{height:auto; display:block;}
.pagewrap{max-width:760px; margin:0 auto; padding:44px 24px 64px;}
.pagehero{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.pagehero .biglogo{margin:0; width:48px; height:48px; border-radius:13px;}
.pagewrap h1{font-size:30px; font-weight:600; letter-spacing:-.02em; margin:0;}
.lead{font-size:17px; color:var(--sec); line-height:1.6; margin:0 0 34px; max-width:56ch;}
.visit{display:inline-flex; align-items:center; gap:6px; font-size:14.5px; font-weight:500; color:var(--accent-dk); text-decoration:none; border:1.5px solid color-mix(in srgb, var(--accent) 30%, transparent); background:var(--accent-bg); border-radius:10px; padding:9px 15px; transition:border-color .15s;}
.visit:hover{border-color:var(--accent);}
.about-sec{margin-bottom:34px;}
.about-sec h2{font-size:11.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); margin:0 0 11px;}
.about-sec p{font-size:15px; color:var(--sec); line-height:1.7; margin:0 0 12px; max-width:62ch;}
.about-figures{display:grid; grid-template-columns:repeat(4, 1fr); margin:0 0 34px;}
.af-item{display:flex; flex-direction:column; gap:5px; padding:0 16px; border-left:1px solid var(--line);}
.af-item:first-child{padding-left:0; border-left:none;}
.af-num{font-size:24px; font-weight:600; color:var(--ink); letter-spacing:-.015em; line-height:1;}
.af-lbl{font-size:11.5px; color:var(--mut);}
@media(max-width:560px){
  .about-figures{grid-template-columns:repeat(2, 1fr); row-gap:20px;}
  .af-item:nth-child(3){padding-left:0; border-left:none;}
}
.about-steps{margin-top:2px;}
.as-item{display:flex; gap:14px; padding:12px 0; border-top:1px solid var(--line);}
.as-item:first-child{border-top:none; padding-top:2px;}
.as-num{flex:none; width:24px; height:24px; border-radius:50%; background:var(--accent-bg); color:var(--accent-dk); display:flex; align-items:center; justify-content:center; font-size:11.5px; margin-top:2px;}
.as-name{font-size:14.5px; color:var(--ink); line-height:1.3;}
.as-desc{font-size:13px; color:var(--mut); line-height:1.55; margin-top:2px;}
.linklist{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px;}
.linkcard{display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid var(--line); border-radius:12px; text-decoration:none; background:var(--card); transition:border-color .15s;}
.linkcard:hover{border-color:var(--accent);}
.lc-badge{flex:none; width:36px; height:36px; border-radius:10px; background:#fff; border:2px solid var(--line); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:15px; overflow:hidden;}
.lc-badge img{display:block; border-radius:3px;}
.lc-arrow{margin-left:auto; color:var(--mut); font-size:16px;}
.lc-name{font-size:14.5px; font-weight:500; color:var(--ink); line-height:1.2;}
.lc-desc{font-size:12.5px; color:var(--mut); line-height:1.3;}
.todo{color:#8a6d00; background:#fbf3da; border:1px solid #ecdca6; border-radius:6px; padding:1px 7px; font-size:12px; font-weight:500;}
.aboutfoot{font-size:12.5px; color:var(--mut); line-height:1.6; border-top:1px solid var(--line); padding-top:20px; margin-top:44px;}

/* Account page: sign in and sign up */
.pagewrap.narrow{max-width:460px;}
.authcard{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:var(--shadow);}
.fieldlbl{display:block; font-size:13px; font-weight:500; color:var(--sec); margin:0 0 6px;}
.field{width:100%; box-sizing:border-box; font:inherit; font-size:14.5px; color:var(--ink); background:var(--bg); border:1px solid var(--line2); border-radius:9px; padding:10px 12px; margin:0 0 16px;}
.field:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg);}
.fieldhint{font-size:12.5px; color:var(--mut); margin:-12px 0 16px;}
.autherr{font-size:13px; color:#c0392b; text-align:center; margin:-8px 0 14px;}
:root[data-theme="dark"] .autherr{color:#ff8f95;}
.authbtn{width:100%; font:inherit; font-size:14.5px; font-weight:500; color:#fff; background:var(--accent); border:none; border-radius:9px; padding:11px; cursor:pointer;}
.authbtn:hover{background:var(--accent-dk);}
.authbtn:disabled{opacity:.6; cursor:default;}
.authnote{font-size:12px; color:var(--mut); line-height:1.55; margin:14px 0 0;}
.authswap{font-size:13.5px; color:var(--sec); text-align:center; margin:16px 0 0;}
.linkbtn{font:inherit; font-size:inherit; color:var(--accent-dk); background:none; border:none; padding:0; cursor:pointer; text-decoration:underline;}

/* account settings: rows on the account page, with an on/off switch for the data-use preference */
.setting{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--line);}
.setting:first-child{padding-top:2px;}
.setting-toggle{align-items:flex-start;}
.setting-text{min-width:0;}
.setting-label{font-size:14px; font-weight:500; color:var(--ink);}
.setting-value{font-size:14px; color:var(--sec); overflow:hidden; text-overflow:ellipsis;}
.setting-help{font-size:12.5px; color:var(--mut); line-height:1.55; margin:5px 0 0;}
.switch{position:relative; display:inline-block; width:42px; height:24px; flex:none;}
.switch input{position:absolute; opacity:0; width:0; height:0;}
.switch-track{position:absolute; inset:0; background:var(--line2); border-radius:999px; cursor:pointer; transition:background .15s;}
.switch-track::before{content:""; position:absolute; left:3px; top:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:transform .15s;}
.switch input:checked + .switch-track{background:var(--accent);}
.switch input:checked + .switch-track::before{transform:translateX(18px);}
.switch input:focus-visible + .switch-track{box-shadow:0 0 0 3px var(--accent-bg);}
.authbtn.ghost{color:var(--sec); background:none; border:1px solid var(--line2); margin-top:20px;}
.authbtn.ghost:hover{color:var(--accent-dk); background:var(--bg); border-color:var(--accent);}

/* The profile page: who you are at the top, then one card per group of settings.
   The narrow column suits a sign-in box; once signed in there is a page to fill, so widen it. */
.pagewrap.narrow:has(#account-view:not([hidden])){max-width:900px;}
.pagewrap.narrow:has(#account-view:not([hidden])) .pagehero{justify-content:flex-start; margin-bottom:20px;}
#account-view{display:flex; flex-direction:column; gap:20px;}
/* An id selector outranks the browser's [hidden] rule, so restate it or the card shows while hidden. */
#account-view[hidden]{display:none;}

.settingsnav{display:flex; flex-direction:column; gap:2px;}
.navitem{display:block; width:100%; text-align:left; font:inherit; font-size:14px; color:var(--sec);
  background:none; border:none; border-radius:8px; padding:9px 12px; cursor:pointer;}
.navitem:hover{background:var(--card); color:var(--ink);}
.navitem.is-active{background:var(--accent-bg); color:var(--accent-dk); font-weight:500;}
.navitem-out{margin-top:6px; color:var(--mut);}
.navitem-out:hover{color:#c0392b; background:var(--card);}
.settingspanels{min-width:0;}
.settingspanels .authcard[hidden]{display:none;}

/* From tablet up the sections sit in a column beside the panel, the way settings pages usually do. */
@media (min-width:820px){
  #account-view{display:grid; grid-template-columns:216px minmax(0, 1fr); gap:0 40px; align-items:start;}
  .settingsnav{position:sticky; top:24px;}
  .profilehead{flex-direction:column; align-items:flex-start; gap:10px; padding:0 12px 18px;
    margin-bottom:8px; border-bottom:1px solid var(--line);}
  .profilewho{width:100%;}
}
.profilehead{display:flex; align-items:center; gap:14px; padding:2px 2px 4px;}
.profileavatar{flex:none; width:52px; height:52px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-size:18px; font-weight:600; letter-spacing:.02em;
  color:var(--accent-dk); background:var(--accent-bg);}
.profilewho{min-width:0; display:flex; flex-direction:column; gap:2px;}
.profilename{font-size:17px; font-weight:600; color:var(--ink); letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.profileemail{font-size:13px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cardtitle{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--mut); margin:0 0 18px;}
.cardrow{display:flex; align-items:center; gap:12px;}
/* .fieldhint tucks up under an input with a negative margin; after a button row it needs to sit below. */
.cardrow + .fieldhint{margin-top:12px; margin-bottom:0;}
.cardrow .authbtn{width:auto; padding:10px 20px; font-size:14px;}
.savednote{font-size:13px; color:var(--accent-dk);}
.field[readonly]{color:var(--mut); background:var(--bg); cursor:default;}
.fieldpair{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
@media (max-width:520px){ .fieldpair{grid-template-columns:1fr;} }
.authcard .setting{border-bottom:none; padding:0;}
.usermenu-name{font-size:13px; font-weight:600; color:var(--ink); padding:8px 10px 0;
  overflow:hidden; text-overflow:ellipsis;}
.usermenu-name + .usermenu-email{padding-top:2px;}
#nav-account{display:inline-flex; align-items:center; gap:10px;}
.pagewrap.narrow .pagehero{justify-content:center; margin-bottom:8px;}
.pagewrap.narrow .lead{text-align:center; font-size:14px; color:var(--mut); margin:0 0 22px;}

/* Top bar: one theme icon, a primary action, and the account avatar */
#nav-account{position:relative; display:inline-flex; align-items:center;}
.iconbtn{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; color:var(--sec); background:none; border:none; border-radius:8px; cursor:pointer; padding:0;}
.iconbtn:hover{color:var(--accent-dk); background:var(--bg);}
.avatar{width:30px; height:30px; border-radius:50%; font:inherit; font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--accent-dk); background:var(--accent-bg); border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;}
.avatar:hover{background:var(--accent); color:#fff;}
.usermenu{position:absolute; top:38px; right:0; min-width:190px; background:var(--card); border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow); padding:6px; z-index:40;}
.usermenu-email{font-size:11.5px; color:var(--mut); padding:7px 10px 8px; border-bottom:1px solid var(--line); margin-bottom:4px; overflow:hidden; text-overflow:ellipsis;}
.usermenu-item{display:block; width:100%; text-align:left; font:inherit; font-size:13px; color:var(--sec); background:none; border:none; border-radius:7px; padding:8px 10px; cursor:pointer;}
.usermenu-item:hover{color:var(--accent-dk); background:var(--accent-bg);}

/* ---- Narrow screens -------------------------------------------------------------------------
   The top bar carries a brand, a mode switch and up to four controls. On a phone that does not
   fit, and the tagline wrapping onto three lines was pushing the bar to 117px tall. Drop what is
   decorative or reachable elsewhere, and shrink what is left. */
@media (max-width:640px){
  .topbar{padding:9px 12px; gap:8px;}
  .brand{gap:8px;}
  .brand span{display:none;}          /* "Rare Disease Oracle": it wraps, and the logo already says it */
  .logo{width:28px; height:28px;}
  .topnav{gap:4px;}
  .topnav > .navlink{display:none;}   /* About only. Sign in lives inside #nav-account and must stay. */
  .modeswitch a{padding:5px 9px; gap:5px; font-size:12.5px;}
  .newchat{padding:7px 9px;}
  #nav-account .navlink{padding:6px 4px; font-size:13px;}
  .newchat .btnlabel{display:none;}   /* the + alone is understood, and the button keeps its label for screen readers */
}

/* Below this the bar still runs out of room. The mode switch's icons are decoration; the words
   "Chat" and "Explore" are what carry the meaning, so the icons go first. */
@media (max-width:430px){
  .modeswitch a svg{display:none;}
  .modeswitch a{padding:5px 12px;}
  .topbar{padding:9px 10px;}
}

/* On a phone the settings list stacks above the panel and pushes the actual content off-screen.
   Turn it into a row of tabs so the panel starts near the top, the way it does on a desktop. */
@media (max-width:819px){
  .settingsnav{flex-direction:row; flex-wrap:wrap; gap:4px; align-items:center;
    border-bottom:1px solid var(--line); padding-bottom:10px;}
  .profilehead{flex-basis:100%; padding:0 0 4px;}
  .navitem{width:auto; white-space:nowrap; padding:8px 13px;}
  .navitem-out{margin-top:0; margin-left:auto;}
}

/* The account at the foot of the sidebar. Its menu opens upward, since there is nothing below it. */
.history{display:flex; flex-direction:column;}
.hist-body{flex:1; min-height:0; overflow-y:auto;}
.hist-foot{flex:none; position:relative; border-top:1px solid var(--line); padding:10px 8px 2px; margin-top:8px;}
.hist-foot:empty{display:none;}
.hist-foot .avatar{width:32px; height:32px;}
.usermenu-up{top:auto; bottom:44px; right:auto; left:0;}
.acctrow{display:flex; align-items:center; gap:9px; width:100%; font:inherit; background:none;
  border:none; border-radius:9px; padding:5px 6px; cursor:pointer; text-align:left;}
.acctrow:hover{background:var(--card);}
.acctname{font-size:13.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.usermenu-up{width:calc(100% - 12px);}
.acctrow .acctname{flex:1; min-width:0;}
.acctdots{flex:none; display:inline-flex; color:var(--mut);}
.acctrow:hover .acctdots{color:var(--sec);}