/* KangAI chat (kp/ai.js) and the right-hand layouts that hold it.
   Loaded on the home page, /qbank/ and /quests/. Colors come from whichever page it's on:
   home + qbank use --panel/--fg/--accent, the quests use --card/--ink/--art. */

/* ---------------------------------------------------------------- the chat component */
.kpai{
  --k-bg:var(--panel,var(--card,#fff)); --k-fg:var(--fg,var(--ink,#14202b)); --k-muted:var(--muted,#667);
  --k-line:var(--line,#d9e1e8); --k-line2:var(--line2,var(--line,#c4d0da));
  --k-accent:var(--accent,var(--art,#0d8a7d)); --k-ink:var(--accent-ink,#fff);
  --k-raise:var(--raise,var(--paper,#f1f4f6)); --k-field:var(--bg,var(--paper,#fff));
  --k-bad:var(--bad,#b3261e); --k-bad-soft:var(--bad-soft,#fbe4e1);
  display:flex;flex-direction:column;min-width:0;overflow:hidden;
  background:var(--k-bg);color:var(--k-fg);border:1px solid var(--k-line);border-radius:14px;
  font-family:var(--body,var(--sans,system-ui,sans-serif));font-size:14px;line-height:1.5;text-align:left}
.kpai *{box-sizing:border-box}
.kpai button{font:inherit;color:inherit;cursor:pointer}
.kpai button:disabled{cursor:default;opacity:.5}
.kpai-head{display:flex;align-items:baseline;gap:8px;padding:11px 14px;border-bottom:1px solid var(--k-line)}
.kpai-title{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--k-accent)}
.kpai-sub{font-size:12.5px;color:var(--k-muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpai-spacer{flex:1}
.kpai-head button{background:none;border:0;padding:0;font-size:12.5px;color:var(--k-muted)}
.kpai-head button:hover{color:var(--k-fg)}
.kpai-head .kpai-stop{color:var(--k-bad)}
.kpai-empty{margin:0;padding:12px 14px 4px;font-size:13px;color:var(--k-muted)}
.kpai-msgs{display:flex;flex-direction:column;gap:9px;padding:12px 14px;overflow-y:auto;overscroll-behavior:contain}
.kpai-msgs[hidden],.kpai-empty[hidden],.kpai-head [hidden]{display:none!important}
.kpai-msg{max-width:92%;padding:8px 12px;border-radius:12px;overflow-wrap:anywhere}
.kpai-msg.u{align-self:flex-end;background:var(--k-accent);color:var(--k-ink);border-bottom-right-radius:4px}
.kpai-msg.a{align-self:flex-start;background:var(--k-raise);border-bottom-left-radius:4px}
.kpai-msg.err{align-self:flex-start;background:var(--k-bad-soft);color:var(--k-bad)}
.kpai-think{color:var(--k-muted)}
.kpai-msg p{margin:0 0 .5em}.kpai-msg p:last-child{margin-bottom:0}
.kpai-msg ul,.kpai-msg ol{margin:.2em 0 .5em;padding-left:1.25em}.kpai-msg li{margin:.1em 0}
.kpai-msg code{font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:.92em}
.kpai-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 2px}
.kpai-chips button{background:var(--k-raise);border:1px solid var(--k-line2);border-radius:999px;padding:4px 11px;font-size:12.5px;color:var(--k-muted)}
.kpai-chips button:hover:not(:disabled){color:var(--k-fg);border-color:var(--k-accent)}
.kpai-form{display:flex;gap:8px;padding:10px 14px}
.kpai-form textarea{flex:1;min-width:0;resize:none;background:var(--k-field);color:var(--k-fg);border:1px solid var(--k-line2);border-radius:8px;padding:8px 10px;font:inherit;line-height:1.4}
.kpai-form textarea:focus{outline:2px solid var(--k-accent);outline-offset:-1px}
.kpai-send{align-self:flex-end;background:var(--k-accent);color:var(--k-ink);border:0;border-radius:8px;padding:8px 14px;font-weight:700}
.kpai-foot{padding:0 14px 10px;font-size:11.5px;color:var(--k-muted);opacity:.85}
.kpai-side .kpai-msgs{max-height:min(46vh,440px)}
.kpai-inline{margin-top:16px}
.kpai-inline .kpai-msgs{max-height:360px}
.kpai-inline .kpai-head{border-bottom:0;padding-bottom:2px}

/* ---------------------------------------------------------------- Course Quests: courses left, date + KangAI right */
.kp-shell{display:block;max-width:1180px;margin:0 auto}
.kp-side{padding:0 max(16px,env(safe-area-inset-left,0px)) 56px;display:flex;flex-direction:column;gap:18px}
.kp-side[hidden]{display:none!important}
.kp-side .panel.plan input{max-width:100%}
.kp-datemsg{margin:0}
#kp-side-top{display:flex;flex-direction:column;gap:14px;min-height:var(--kp-top-h,0);margin-bottom:var(--kp-top-gap,0px)}
#kp-side-top>.panel{margin:0;flex:1 1 auto}
#kp-side-top>.panel:not(.kp-date){font-size:13px}
#kp-side-top>.panel:not(.kp-date) .eyebrow{font-size:11px}
#kp-side-top>.panel:not(.kp-date) p{font-size:13px}
.kp-examcard{cursor:pointer;position:relative}
.kp-examcard:hover{border-color:var(--accent,#14b8a6)}
.kp-examcard .kp-chev{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:20px}
#kp-side-top:empty{display:none}
.kp-dateclear{align-self:flex-start;background:none;border:0;padding:0;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
@media (min-width:1080px){
  .kp-shell{display:grid;grid-template-columns:minmax(0,720px) 372px;gap:32px;justify-content:center;align-items:start}
  .kp-shell.solo{grid-template-columns:minmax(0,680px)}
  .kp-shell .wrap{max-width:none;margin:0;padding-right:0}
  /* the course list page lines the column up with the first course card (offset set by the engine patch) */
  /* the column scrolls away with the page; only the KangAI box sticks once it reaches the top */
  .kp-side{align-self:stretch;margin-top:var(--kp-side-offset,0px);padding:20px 16px 56px 0}
  #kp-ai-side{position:sticky;top:20px}
  .kp-side .kpai-side .kpai-msgs{max-height:calc(100vh - 300px);min-height:60px}
  /* top bar lines up with the content columns */
}
@media (max-width:1079.98px){ .kp-side{max-width:680px;margin:0 auto;width:100%} }

/* ---------------------------------------------------------------- QBank */
/* home: the chat goes to the right of the page (wide screens) */
@media (min-width:1200px){
  body>#app.wrap:has(#homechat){margin-left:max(16px,calc((100vw - 1164px)/2));margin-right:auto}
  #homechat{
    position:fixed;top:84px;left:calc(max(16px,(100vw - 1164px)/2) + 792px);width:372px;
    max-height:calc(100vh - 104px);display:flex;flex-direction:column;z-index:5}
  #homechat .chat{margin-top:0;display:flex;flex-direction:column;min-height:0;width:100%;max-height:inherit}
  #homechat .msgs{max-height:none;flex:1;min-height:80px}
}
/* every other QBank page (courses, question banks, questions): centered, a bit wider, nothing sticky */
body>#app.wrap:not(:has(#homechat)){max-width:860px}
body:has(#chatbox) .qbar{position:static}

/* shared top bar: logo + width of the page content */
.kpbar .kpbrand{font-family:var(--mono,ui-monospace,monospace);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px;color:var(--fg,#e6edf3)}
.kpbar .kpbrand b{color:var(--accent,#14b8a6)}
/* course list: the date card has to fit beside the title + heartbeat */
#kp-side-top>.kp-date.panel{padding:10px 16px;gap:0}
.kp-date input{padding:4px 10px;min-height:0}
.kp-date .row{margin:4px 0 2px}
.kp-date .kp-datemsg{font-size:13px;line-height:1.3}