/* Pemandu Borobudur — chat page. Stone/lichen identity from UI template v7 (shared with the bumiborobudur sites). */
:root{
  --stone:#E9ECE7; --slab:#F7F8F5; --card:#FFFFFF; --ink:#1C2320; --muted:#5C6862; --line:#D2D8D1;
  --lichen:#2E6B5C; --lichen-ink:#F7F8F5; --lichen-soft:#DDEBE5; --gilt:#8A6B1F; --gilt-soft:#F3EAD0; --bezel:#2A302D;
  --warn:#9A4A1F; --warn-soft:#F6E3D6;
  --f-head:"EB Garamond","Gentium Book Plus","Noto Serif",Georgia,serif;
  --f-ui:"Source Sans 3","Noto Sans","Segoe UI",system-ui,sans-serif;
  --f-zh:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --stone:#0F1412; --slab:#161C19; --card:#1C2420; --ink:#E2E7E3; --muted:#94A19A; --line:#2C3631;
  --lichen:#7DC3AD; --lichen-ink:#0F1412; --lichen-soft:#1C332D; --gilt:#D9B860; --gilt-soft:#2C2616; --bezel:#3A423E;
  --warn:#E8A27A; --warn-soft:#33221A; color-scheme:dark}}
:root[data-theme="dark"]{
  --stone:#0F1412; --slab:#161C19; --card:#1C2420; --ink:#E2E7E3; --muted:#94A19A; --line:#2C3631;
  --lichen:#7DC3AD; --lichen-ink:#0F1412; --lichen-soft:#1C332D; --gilt:#D9B860; --gilt-soft:#2C2616; --bezel:#3A423E;
  --warn:#E8A27A; --warn-soft:#33221A; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--stone);color:var(--ink);font:15px/1.5 var(--f-ui)}
.page{max-width:1280px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:24px 40px;display:grid;gap:18px}
button{font:inherit;color:inherit}
:is(button,a,textarea,input,select):focus-visible{outline:2px solid var(--lichen);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.eyebrow{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lichen);font-weight:600}
.controls{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--slab)}
.seg button{font:500 .84rem var(--f-ui);color:var(--muted);background:none;border:0;border-radius:999px;padding:6px 13px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--lichen);color:var(--lichen-ink)}
/* app shell */
.app{container:app/inline-size;height:100%;background:var(--slab);position:relative;overflow:hidden}
.shell{height:100%;display:grid;grid-template-columns:minmax(0,1fr);min-height:0}
.rail{display:none}
.chat{display:flex;flex-direction:column;min-width:0;min-height:0;height:100%}
.head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--slab)}
.ava{flex:none;width:38px;height:38px;border-radius:50%;background:var(--lichen-soft);display:grid;place-items:center}
.ava svg{width:24px;height:24px}
.ava.sm{width:30px;height:30px}.ava.sm svg{width:19px;height:19px}
.who{min-width:0;flex:1}
.who b{display:block;font:600 1.15rem/1.1 var(--f-head)}
.who small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live{width:7px;height:7px;border-radius:50%;background:var(--lichen);flex:none}
.live.off{background:var(--warn)}
.head .seg button{padding:4px 10px;font-size:.76rem}
.icon{flex:none;width:36px;height:36px;border-radius:10px;border:1px solid transparent;background:none;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.icon:hover{background:var(--stone);color:var(--ink)}
.icon svg{width:19px;height:19px}

.scroll{flex:1;min-height:0;overflow-y:auto;scroll-behavior:smooth}
.thread{max-width:780px;margin:0 auto;padding:18px 14px 8px;display:flex;flex-direction:column;gap:16px}
.day{align-self:center;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--stone);border-radius:999px;padding:3px 10px}
.msg{display:flex;gap:8px;align-items:flex-end;min-width:0}
.msg.bot{align-items:flex-start}
.msg.bot .ava{margin-top:2px}
.msg.user{justify-content:flex-end}
.msg .col{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:min(85%,640px)}
.msg.bot .col{max-width:min(92%,660px)}
.bubble{border-radius:18px;padding:10px 14px;overflow-wrap:anywhere}
.user .bubble{background:var(--lichen);color:var(--lichen-ink);border-bottom-right-radius:5px}
.bot .bubble{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:5px}
.meta{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.user .meta{text-align:right}
.bubble p{margin:0}
.bubble p+p,.bubble p+ul,.bubble ul+p{margin-top:.6em}
.bubble ul{margin:0;padding-left:1.2em}
.bubble li+li{margin-top:3px}
.bubble strong{font-weight:600}
.lead{font:1.12rem/1.45 var(--f-head)}
.term{font:italic 500 1.06em var(--f-head);color:var(--gilt);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.term:hover{text-decoration-style:solid}
sup.cite{font-size:.68em;font-weight:600;color:var(--lichen);margin-left:1px}
.caret{display:inline-block;width:.5em;height:1em;background:var(--lichen);vertical-align:-.12em;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.extra{display:grid;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.general{border:1px dashed var(--muted);border-radius:10px;padding:8px 11px;font-size:.92rem}
.gap{border:1px solid var(--gilt);background:var(--gilt-soft);border-radius:10px;padding:8px 11px;font-size:.92rem}
.k{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:2px}
.gap .k{color:var(--gilt)}
.srcs{display:grid;gap:4px;margin:0;padding:0;list-style:none;font-size:.84rem}
.srcs li{display:flex;gap:8px;align-items:baseline}
.srcs .n{flex:none;width:18px;height:18px;border-radius:50%;background:var(--lichen-soft);color:var(--lichen);font-size:.7rem;font-weight:600;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.srcs b{font-weight:600}
.srcs span.d{color:var(--muted)}
.acts{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.act{display:inline-flex;align-items:center;gap:5px;background:none;border:1px solid transparent;border-radius:8px;padding:4px 8px;font-size:.78rem;color:var(--muted);cursor:pointer}
.act:hover{background:var(--stone);color:var(--ink)}
.act[aria-pressed="true"]{color:var(--lichen);border-color:var(--lichen-soft);background:var(--lichen-soft)}
.act svg{width:15px;height:15px}
.sugg{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:500 .86rem var(--f-ui);color:var(--lichen);background:var(--slab);border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;text-align:left}
.chip:hover{border-color:var(--lichen);background:var(--lichen-soft)}
.typing{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--muted)}
.dots{display:inline-flex;gap:4px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--lichen);opacity:.35;animation:dot 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{40%{opacity:1;transform:translateY(-2px)}}
.stopped{font-size:.78rem;color:var(--muted);font-style:italic}
.fade{animation:fade .3s ease both}
@keyframes fade{from{opacity:.001;transform:translateY(4px)}}

.notice{margin:0 14px;border-radius:10px;padding:8px 12px;font-size:.86rem;display:flex;gap:8px;align-items:flex-start}
.notice.busy{background:var(--gilt-soft);border:1px solid var(--gilt)}
.notice.off{background:var(--warn-soft);border:1px solid var(--warn)}
.notice b{display:block}
.composer{padding:10px 14px 12px;display:grid;gap:6px;max-width:808px;width:100%;margin:0 auto}
.box{display:flex;align-items:flex-end;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:6px 6px 6px 16px}
.box:focus-within{border-color:var(--lichen)}
.box textarea{flex:1;min-width:0;resize:none;border:0;background:none;color:var(--ink);font:1rem/1.45 var(--f-ui);padding:7px 0;max-height:140px;outline:none}
.box textarea::placeholder{color:var(--muted)}
.send{flex:none;width:38px;height:38px;border-radius:50%;border:0;background:var(--lichen);color:var(--lichen-ink);display:grid;place-items:center;cursor:pointer}
.send:disabled{background:var(--line);color:var(--muted);cursor:default}
.send svg{width:18px;height:18px}
.fine{display:flex;justify-content:space-between;gap:10px;font-size:.72rem;color:var(--muted);padding:0 6px;font-variant-numeric:tabular-nums}
.fine .over{color:var(--warn);font-weight:600}
.fine>span:first-child{flex:1;min-width:0}
.fine .credit{display:inline-block;white-space:nowrap}
.fine .credit::before{content:"·";margin:0 .35em}
@container app (max-width:460px){ .fine .credit{display:block} .fine .credit::before{content:none} }

/* panel image cards + lightbox (photo overlays use fixed dark scrims: they sit on images, not on the theme) */
.gallery{display:grid;gap:6px}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(140px,1fr);gap:8px;overflow-x:auto;padding-bottom:2px}
.pcard{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--slab);min-width:0}
.pcard .ph{display:block;width:100%;padding:0;border:0;background:#3a3934;cursor:zoom-in;position:relative;aspect-ratio:16/11}
.pcard img{width:100%;height:100%;object-fit:cover;display:block}
.badge{position:absolute;left:8px;top:8px;background:rgba(15,20,18,.74);color:#F7F8F5;font-size:.7rem;font-weight:600;letter-spacing:.04em;border-radius:6px;padding:2px 7px;font-variant-numeric:tabular-nums}
.zoomhint{position:absolute;right:8px;bottom:8px;width:28px;height:28px;border-radius:50%;background:rgba(15,20,18,.62);color:#F7F8F5;display:grid;place-items:center}
.zoomhint svg{width:15px;height:15px}
.pcard figcaption{padding:7px 10px 9px;display:grid;gap:1px;font-size:.82rem;color:var(--muted)}
.pcard figcaption b{font:600 1rem/1.2 var(--f-head);color:var(--ink)}
.pcard.sm figcaption b{font-size:.92rem}
.cr{font-size:.72rem;color:var(--muted);margin:0}
.lb{position:absolute;inset:0;z-index:9;background:rgba(10,12,11,.95);display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:#EEF1EE;animation:fade .2s ease both}
.lb .top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;font-size:.8rem;font-variant-numeric:tabular-nums;opacity:.85}
.lb .x{width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:grid;place-items:center}
.lb .x svg{width:18px;height:18px}
.lb .view{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden;padding:0 52px}
.lb .view img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;cursor:zoom-in;transition:transform .25s ease}
.lb .view img.z{transform:scale(2.2);cursor:zoom-out}
.lb .nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:grid;place-items:center}
.lb .nav:disabled{opacity:.25;cursor:default}
.lb .nav svg{width:18px;height:18px}
.lb .prev{left:6px}.lb .next{right:6px}
.lb .cap{padding:10px 16px 16px;display:grid;gap:4px}
.lb .cap b{font:600 1.2rem/1.2 var(--f-head)}
.lb .cap span,.lb .cap small{opacity:.75}
.lb .lbtn{justify-self:start;margin-top:6px;border:1px solid rgba(255,255,255,.35);background:none;color:#fff;border-radius:8px;padding:6px 12px;cursor:pointer;font:500 .85rem var(--f-ui)}
.lb .lbtn:hover{background:rgba(255,255,255,.1)}

/* narrow phones: give the name room in the header */
@container app (max-width:460px){
  .head{gap:6px;padding:8px 10px}
  .head .ava{width:32px;height:32px}.head .ava svg{width:20px;height:20px}
  .who small{display:none}
  .head .icon{width:32px;height:32px}
  .head .seg button{padding:3px 8px}
}

/* read-aloud (text to speech) */
.msg.reading .bubble{border-color:var(--lichen);box-shadow:0 0 0 3px var(--lichen-soft)}
.act.speaking{color:var(--lichen);background:var(--lichen-soft)}
#autoread[aria-pressed="true"]{color:var(--lichen);background:var(--lichen-soft)}
.player{margin:0 14px;align-self:center;display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--lichen);border-radius:999px;padding:5px 6px 5px 14px;font-size:.84rem;box-shadow:0 4px 18px color-mix(in srgb,var(--ink) 12%,transparent);max-width:calc(100% - 28px)}
.player span.lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px;flex:none}
.eq i{width:3px;background:var(--lichen);border-radius:2px;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(1){height:40%}.eq i:nth-child(2){height:90%;animation-delay:.15s}.eq i:nth-child(3){height:60%;animation-delay:.3s}.eq i:nth-child(4){height:80%;animation-delay:.45s}
.player.paused .eq i{animation-play-state:paused}
@keyframes eq{50%{transform:scaleY(.35)}}
.eq i{transform-origin:bottom}
.pbtn{flex:none;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--slab);border-radius:999px;padding:5px 11px;font-size:.8rem;cursor:pointer;color:var(--ink)}
.pbtn.stop{background:var(--lichen);border-color:var(--lichen);color:var(--lichen-ink)}
.pbtn svg{width:13px;height:13px}

/* sheets (glossary term, about) */
.scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 35%,transparent);z-index:5}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;background:var(--card);border-top:1px solid var(--line);border-radius:18px 18px 0 0;padding:8px 20px 22px;max-height:78%;overflow-y:auto;display:grid;gap:12px;animation:up .22s ease both}
@keyframes up{from{transform:translateY(30px);opacity:.001}}
.grab{justify-self:center;width:40px;height:4px;border-radius:2px;background:var(--line)}
.sheet h2{font:500 2rem/1.05 var(--f-head);margin:0;overflow-wrap:anywhere}
.sheet h3{margin:0;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.sheet p{margin:0}
.trio{display:grid;gap:10px}
.trio .zh{font:1.3rem var(--f-zh)}
.quote{background:var(--stone);border-radius:8px;padding:10px 12px;font:1.05rem/1.5 var(--f-head)}
.quote small{display:block;font:.76rem var(--f-ui);color:var(--muted);margin-top:4px}
.sheetacts{display:flex;flex-wrap:wrap;gap:8px}
.btn{font:500 .86rem var(--f-ui);color:var(--ink);background:var(--stone);border:1px solid var(--line);border-radius:8px;padding:7px 13px;cursor:pointer}
.btn.pri{background:var(--lichen);color:var(--lichen-ink);border-color:var(--lichen)}
.about ul{margin:0;padding-left:1.2em;display:grid;gap:4px}
.toast{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:var(--slab);font-size:.85rem;padding:7px 14px;border-radius:999px;z-index:8;white-space:nowrap}

/* rail: history + topics. Desktop: a column that can be hidden. Tablet/phone: a slide-out drawer. */
.rail{display:none;flex-direction:column;gap:14px;padding:14px;overflow-y:auto;min-height:0;background:var(--slab)}
.rail .brand{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.rail .brand>span:nth-child(2){flex:1;min-width:0}
.rail .brand .icon{margin-right:-6px}
.rail .brand b{display:block;font:600 1.25rem/1 var(--f-head)}
.rail .brand small{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.rail h3{margin:0;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px}
.newbtn{display:flex;align-items:center;gap:8px;width:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-weight:500;cursor:pointer}
.newbtn:hover{border-color:var(--lichen);color:var(--lichen)}
.newbtn svg{width:16px;height:16px}
.sec{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;min-width:0}
details.sec>summary{list-style:none;cursor:pointer}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary svg{width:14px;height:14px;transition:transform .2s}
details.sec:not([open])>summary svg{transform:rotate(-90deg)}
.chats{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;margin:0;padding:0;list-style:none}
.chats li{position:relative;min-width:0}
.chatlink{display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:7px 34px 7px 10px;cursor:pointer}
.chatlink:hover{background:var(--stone)}
.chatlink[aria-current="true"]{background:var(--lichen-soft)}
.chatlink b{display:block;font-weight:500;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatlink span{display:block;font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
.del{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:6px;border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;opacity:.5}
.chats li:hover .del,.del:focus-visible{opacity:1}
.del:hover{background:var(--stone);color:var(--warn)}
.del svg{width:14px;height:14px}
.none{font-size:.84rem;color:var(--muted);padding:2px 10px}
.topics{display:grid;gap:2px}
.topic{display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:7px 10px;cursor:pointer}
.topic:hover{background:var(--stone)}
.topic b{display:block;font:500 1.02rem/1.2 var(--f-head)}
.topic span{display:block;font-size:.78rem;color:var(--muted)}
.railnote{margin-top:auto;font-size:.76rem;color:var(--muted);display:grid;gap:6px;padding:10px 10px 0;border-top:1px solid var(--line)}
.linkbtn{font:inherit;color:var(--lichen);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px;justify-self:start;text-align:left}
.linkbtn.danger{color:var(--warn)}
.railscrim{display:none}
.app.drawer .rail{display:flex;position:absolute;top:0;bottom:0;left:0;width:min(300px,86%);z-index:7;border-right:1px solid var(--line);box-shadow:0 0 30px color-mix(in srgb,var(--ink) 22%,transparent);animation:slide .2s ease both}
.app.drawer .railscrim{display:block;position:absolute;inset:0;z-index:6;background:color-mix(in srgb,var(--ink) 35%,transparent)}
@keyframes slide{from{transform:translateX(-24px);opacity:.001}}
@container app (min-width:720px){
  .shell{grid-template-columns:256px minmax(0,1fr)}
  .rail{display:flex;border-right:1px solid var(--line)}
  .app.railoff .shell{grid-template-columns:minmax(0,1fr)}
  .app.railoff .rail{display:none}
  .app:not(.railoff) #railtoggle{display:none}
  .app.drawer .rail{position:static;width:auto;box-shadow:none;animation:none}
  .app.drawer .railscrim{display:none}
  .thread{padding-inline:24px}
}
@container app (min-width:1000px){ .shell{grid-template-columns:272px minmax(0,1fr)} }

/* ---------- live page additions ---------- */
html,body{margin:0;height:100%}
.app{height:100vh;height:100dvh}
.typing .hint{display:flex;flex-direction:column;gap:1px}
.typing .hint small{font-size:.72rem;font-variant-numeric:tabular-nums;opacity:.8}
.bubble h4{margin:.6em 0 .2em;font:600 1.05rem/1.25 var(--f-head)}
.bubble h4:first-child{margin-top:0}
.bubble ol{margin:0;padding-left:1.4em}
.bubble p+ol,.bubble ol+p,.bubble ul+ul,.bubble ul+h4,.bubble p+h4,.bubble ol+h4{margin-top:.6em}
.bubble code{font:.88em var(--f-mono);background:var(--slab);border:1px solid var(--line);border-radius:4px;padding:0 4px}
.bubble a{color:var(--lichen);text-underline-offset:2px;overflow-wrap:anywhere}
.bubble .general{margin-top:.6em}
.bubble .sources{margin-top:10px;padding-top:8px;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted)}
.bubble .sources ul,.bubble .sources ol{padding-left:1.2em}
.bubble .sources p{margin:0}
.bubble .pcard{margin:10px 0}
.bubble .pcard:first-child{margin-top:0}
.err{border:1px solid var(--warn);background:var(--warn-soft);border-radius:10px;padding:8px 11px;font-size:.9rem;display:grid;gap:6px;margin-top:6px}
.err b{color:var(--warn)}
.err .btn{justify-self:start}
.send.stop{background:var(--ink);color:var(--slab)}
.welcome .sugg{margin-top:10px}
.notice[hidden],.player[hidden]{display:none}
.config-missing{margin:24px auto;max-width:520px;padding:16px;border:1px solid var(--warn);border-radius:10px;background:var(--warn-soft)}