/* Sage shared design system — auto-extracted from page styles.
   Single source of truth: edit here, applies everywhere. */

.session_card:hover{border-color:var(--border-soft);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border-soft)}

:root{--bg:#1a1a19;--surface:#2f2f2c;--surface-raised:#3a3a37;--surface-sunken:#141413;--surface-warm:#404039;--overlay:#383835;--border:#444440;--border-soft:#3a3a37;--fg:#f0efe8;--fg-2:#dbd9d0;--muted:#a8a69e;--meta:#7a7872;--accent:#c4a7e7;--accent-dim:rgba(196,167,231,0.12);--accent-hover:#d0b8f0;--foam:#9ccfd8;--love:#eb6f92;--gold:#f6c177;--pine:#31748f;--rose:#ebbcba;--font-display:'Newsreader',Georgia,serif;--font-body:'Inter',system-ui,sans-serif;--font-mono:'JetBrains Mono',monospace;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--r:8px;--ease:cubic-bezier(0.33,1,0.68,1);--dur:180ms;--dur-slow:500ms;--sidebar-w:260px;}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}

::-webkit-scrollbar{width:5px}

::-webkit-scrollbar-track{background:transparent}

::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--r)}

a{color:var(--accent);text-decoration:none}

a:hover{text-decoration:underline}

button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

textarea{font:inherit;color:inherit}

:where(a,button,[role="radio"],[role="option"],[tabindex],summary):focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:4px}

.app{display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:100svh}

.topbar{display:flex;align-items:center;gap:var(--space-3);height:48px;padding:0 var(--space-4);background:transparent;border-bottom:none;flex-shrink:0;z-index:20}

.layout{display:flex;flex:1;min-height:0;overflow:hidden}

.logo{font-family:var(--font-display);font-size:22px;font-weight:500;color:var(--fg);letter-spacing:-0.02em;text-decoration:none}

.logo span{color:var(--muted)}

.icon-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r);color:var(--muted);border:none;background:none;cursor:pointer;transition:all var(--dur) var(--ease)}

.icon-btn:hover{background:var(--overlay);color:var(--fg)}

.sidebar{width:var(--sidebar-w);background:var(--bg);overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column;transition:transform var(--dur-slow) var(--ease),opacity var(--dur-slow) var(--ease),width var(--dur-slow) var(--ease),visibility 0s}

.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:29}

.sidebar-backdrop.open{display:block}

.sidebar.collapsed{position:absolute;left:0;top:0;bottom:0;width:0;max-width:0;min-width:0;transform:translateX(-100%);opacity:0;visibility:hidden;border-right:0;pointer-events:none;z-index:30;transition:transform var(--dur-slow) var(--ease),opacity var(--dur-slow) var(--ease),width var(--dur-slow) var(--ease),visibility 0s linear var(--dur-slow)}

.sidebar:not(.collapsed){transform:translateX(0)}

.sidebar__section{border-bottom:1px solid var(--border)}

.sidebar__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--space-3) var(--space-4);font-size:12px;font-weight:500;letter-spacing:0.05em;text-transform:uppercase;color:var(--meta);border:none;background:none;cursor:pointer;font-family:var(--font-body);transition:color var(--dur) var(--ease)}

.sidebar__header:hover{color:var(--muted)}

.sidebar__chevron{transition:transform var(--dur) var(--ease)}

.sidebar__section.open .sidebar__chevron{transform:rotate(180deg)}

.sidebar__list{display:none;padding:0 var(--space-2) var(--space-2)}

.sidebar__section.open .sidebar__list{display:block}

.sidebar__item{display:flex;align-items:center;gap:var(--space-2);padding:7px var(--space-3);border-radius:var(--r);font-size:13px;color:var(--muted);cursor:pointer;transition:all var(--dur) var(--ease)}

.sidebar__item:hover{background:var(--overlay);color:var(--fg)}

.sidebar__item.active{background:var(--overlay);color:var(--fg)}

.sidebar__item-badge{font-size:10px;font-weight:500;letter-spacing:0.03em;padding:2px 7px;border-radius:var(--r);background:var(--overlay);color:var(--meta);flex-shrink:0}

.sidebar__item-badge[data-phase="teach"]{color:var(--accent)}

.sidebar__item-badge[data-phase="plan"]{color:var(--gold)}

.sidebar__item-badge[data-phase="complete"]{color:var(--foam)}

.sidebar__item-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.main{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;background:var(--bg)}

.chat{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0}

.chat__messages{flex:1;overflow-y:auto;padding:var(--space-6) var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}

.msg{display:flex;flex-direction:column;max-width:760px;width:100%;margin:0 auto;padding:var(--space-3) 0}

.msg--user{align-items:flex-end}

.msg--assistant{align-items:flex-start}

.msg__role{font-size:12px;font-weight:500;color:var(--meta);margin-bottom:6px;padding:0 var(--space-4);letter-spacing:0.01em}

.msg__bubble{padding:var(--space-4) var(--space-5);border-radius:var(--r);line-height:1.7;word-wrap:break-word;overflow-wrap:break-word;max-width:100%}

.msg--user .msg__bubble{background:var(--accent-dim);border:1px solid rgba(196,167,231,0.25);color:var(--fg)}

.msg--assistant .msg__bubble{background:transparent;color:var(--fg)}

.msg__bubble p{margin:0 0 var(--space-3)}

.msg__bubble p:last-child{margin-bottom:0}

.msg__bubble ul,.msg__bubble ol{margin:var(--space-3) 0;padding-left:var(--space-6)}

.msg__bubble li{margin:var(--space-1) 0}

.msg__bubble strong{font-weight:600;color:var(--fg)}

.msg__bubble em{color:var(--muted);font-style:italic}

.msg__bubble code{font-family:var(--font-mono);font-size:13px;background:var(--overlay);padding:2px 6px;border-radius:var(--r)}

.msg__bubble pre{background:var(--surface-sunken);border-radius:var(--r);padding:var(--space-4);overflow-x:auto;margin:var(--space-3) 0}

.msg__bubble pre code{background:none;padding:0;font-size:13px;line-height:1.6}

.msg__bubble blockquote{border-left:2px solid var(--accent);padding-left:var(--space-4);color:var(--muted);margin:var(--space-3) 0;font-style:italic}

.msg__bubble h1,.msg__bubble h2,.msg__bubble h3{font-family:var(--font-display);color:var(--fg);margin:var(--space-4) 0 var(--space-2);line-height:1.3}

.cite{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:500;padding:2px 8px;border-radius:var(--r);background:var(--overlay);color:var(--accent);cursor:pointer;vertical-align:middle;transition:all var(--dur) var(--ease);text-decoration:none}

.cite:hover{background:var(--surface-warm);text-decoration:none}

.cite-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--space-2);max-width:100%}

.composer-toolbar__btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:var(--meta);background:none;border:none;cursor:pointer;transition:all var(--dur) var(--ease)}

.composer-toolbar__btn:hover{color:var(--fg);background:var(--overlay)}

.composer-toolbar__btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.composer-toolbar__btn svg{width:14px;height:14px;flex-shrink:0}

.composer-toolbar__spacer{flex:1}

.composer-toolbar__status{font-family:var(--font-mono);font-size:10px;color:var(--meta);letter-spacing:0.04em}

.input-bar__wrapper:focus-within{border-color:var(--accent);background:var(--surface-raised)}

.composer-toast[hidden]{display:none}

.composer-toast__btn{font-size:12px;font-weight:500;padding:4px 10px;border-radius:999px;border:1px solid var(--foam);color:var(--foam);background:transparent;transition:all var(--dur) var(--ease)}

.composer-toast__btn:hover{background:rgba(156,207,216,0.12)}

.toast-in{animation:toastIn var(--dur-slow) var(--ease)}

@keyframes toastIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.input-bar__textarea{flex:1;min-width:0;resize:none;border:none;background:transparent;font-size:15px;font-family:var(--font-body);line-height:1.5;max-height:120px;min-height:22px;padding:6px 0;color:var(--fg)}

.input-bar__textarea::placeholder{color:var(--meta)}

.input-bar__actions{display:flex;align-items:center;gap:var(--space-1);flex-shrink:0}

.input-bar__send{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r);background:var(--accent);color:var(--bg);border:none;cursor:pointer;transition:opacity var(--dur) var(--ease),transform 120ms var(--ease)}

.input-bar__send:hover{opacity:0.85}

.input-bar__send:active{transform:scale(0.9)}

.input-bar__stop{display:none;place-items:center;width:32px;height:32px;border-radius:var(--r);background:var(--love);color:#fff;border:none;cursor:pointer;transition:opacity var(--dur) var(--ease),transform 120ms var(--ease)}

.input-bar__stop:hover{opacity:0.85}

.artifact-card[data-kind="quiz"]{border-left-color:var(--gold)}

.artifact-card[data-kind="chat"]{border-left-color:var(--accent)}

.artifact-card__diagram svg{max-width:100%;height:auto}

.artifact-card__quiz-options{display:flex;flex-direction:column;gap:var(--space-2)}

.artifact-card__quiz-option:hover{background:var(--surface-warm)}

.probe-wrap{display:flex;flex-direction:column;gap:var(--space-3);max-width:760px;width:100%;margin:0 auto;padding:var(--space-2) 0}

.probe-actions{display:flex;justify-content:flex-end}

.probe-send{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;padding:8px 16px;border-radius:var(--r);background:var(--accent);color:var(--bg);transition:opacity var(--dur) var(--ease)}

.probe-send:hover{opacity:0.85}

.probe-send:disabled{opacity:0.5;cursor:not-allowed}

.artifact-card.sent{opacity:0.5;pointer-events:none}

.artifact-card__marker{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--meta);flex-shrink:0}

.artifact-card__content{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}

.typing-indicator{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) 0}

.typing-indicator__bar{width:80px;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:200% 100%;animation:gradientSweep 1.2s ease infinite}

@keyframes gradientSweep{0%{background-position:200% 0}100%{background-position:-200% 0}}

@keyframes msgCascade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.msg{animation:msgCascade 700ms var(--ease) both}

.msg:nth-child(1){animation-delay:0ms}

.msg:nth-child(2){animation-delay:250ms}

.msg:nth-child(3){animation-delay:500ms}

.msg:nth-child(4){animation-delay:750ms}

.msg:nth-child(5){animation-delay:1000ms}

@keyframes hamburgerMorph1{to{transform:translateY(7px) rotate(45deg)}}

@keyframes hamburgerMorph2{to{opacity:0}}

@keyframes hamburgerMorph3{to{transform:translateY(-7px) rotate(-45deg)}}

.word{display:inline-block;opacity:0;transform:translateY(4px);animation:wordIn 350ms var(--ease) forwards}

@keyframes wordIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

.sidebar__item-dot{width:6px;height:6px;border-radius:50%;background:var(--meta);flex-shrink:0}

.sidebar__item-dot.ready{background:var(--foam)}

.sidebar__item-dot.error{background:var(--love)}

.sidebar__item-meta{font-size:11px;color:var(--meta);flex-shrink:0}

.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center}

.modal.open{display:flex}

.modal_backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.6)}

.modal_dialog{position:relative;width:90%;max-width:560px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--space-5);z-index:1;display:flex;flex-direction:column;gap:var(--space-3)}

.modal_head{display:flex;align-items:center;justify-content:space-between}

.modal_title{font-family:var(--font-display);font-size:20px;font-weight:500}

.modal_hint{font-size:12px;color:var(--meta);line-height:1.5}

.upload_zone:hover,.upload_zone.dragover{border-color:var(--accent);background:var(--accent-dim)}

.btn_primary{background:var(--accent);color:var(--bg)}

.btn_primary:hover{background:var(--accent-hover)}



*{margin:0;padding:0;box-sizing:border-box}

body{font-family:var(--font-body);font-size:14px;line-height:1.5;color:var(--fg);background:var(--bg)}

a:hover{color:var(--accent-hover)}

button{font-family:inherit;cursor:pointer;border:none;background:none;color:var(--fg)}

input,select,textarea{font-family:inherit;font-size:inherit;color:var(--fg)}

.content_centered{max-width:900px;width:100%;margin:0 auto;padding:var(--space-8) var(--space-5);overflow-y:auto}

.page_header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}

.page_title{font-family:var(--font-display);font-size:24px;font-weight:500}

.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:8px 16px;border-radius:var(--r);font-size:13px;font-weight:500;transition:background 150ms var(--ease),color 150ms var(--ease),border-color 150ms var(--ease)}

.empty{text-align:center;padding:var(--space-12);color:var(--meta)}

.empty_title{font-family:var(--font-display);font-size:20px;font-weight:500;color:var(--muted);margin-bottom:var(--space-2)}

@media(prefers-reduced-motion:reduce){
*{transition-duration:0ms!important;animation-duration:0ms!important}
}

@media(max-width:1023px){.sidebar{position:absolute;left:0;top:0;bottom:0;z-index:30;width:var(--sidebar-w);max-width:var(--sidebar-w);min-width:var(--sidebar-w)}.content_centered{padding:var(--space-4)}}