:root{
  --bg:#2a1a45;
  --bg2:#46306d;
  --surface:rgba(42,26,69,.72);
  --surface-solid:#33235a;
  --text:#eae6f5;
  --muted:#b9aee0;
  --accent:#8b3ffc;
  --accent2:#6D02E4;
  --primary:#5b6cff;
  --danger:#ff5c7a;
  --ok:#42d392;
  --radius:16px;
  --shadow:0 10px 40px rgba(0,0,0,.35);
  --font-ui:'Poppins',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',Menlo,Consolas,ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{
  margin:0;height:100%;overflow:hidden;
  background-color:#1b1030;          /* solid fallback — kills white overscroll */
  overscroll-behavior:none;
}
body{
  font-family:var(--font-ui);
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, #6d3bd1 0%, transparent 55%),
    radial-gradient(1000px 700px at 110% 20%, #3a1e7a 0%, transparent 50%),
    linear-gradient(135deg,#1b1030 0%, #2a1a45 45%, #46306d 100%);
  background-attachment:fixed;
}
#app{height:100vh;height:100dvh}
.hidden{display:none !important}
.muted{color:var(--muted)}
.glass{
  background:var(--surface);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
}

/* ---------- buttons / inputs ---------- */
.btn{
  border:none;border-radius:12px;padding:.7rem 1.1rem;font-family:inherit;
  font-weight:600;font-size:.95rem;cursor:pointer;transition:.15s transform,.15s filter;
}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--primary));color:#fff}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,.12)}
.btn-stop{
  background:rgba(255,92,122,.14);color:var(--danger);border:1px solid rgba(255,92,122,.35);
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
}
.btn-stop:hover{background:rgba(255,92,122,.22)}
.btn-block{display:block;width:100%;margin-top:.6rem}
.btn-sm{padding:.4rem .7rem;font-size:.82rem}
.input{
  width:100%;padding:.75rem .9rem;border-radius:12px;margin:.3rem 0 .2rem;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);
  color:var(--text);font-family:inherit;font-size:.95rem;outline:none;
}
.input:focus{border-color:var(--accent)}
.field-label{display:block;margin-top:.8rem;font-size:.8rem;color:var(--muted)}
.alert{background:rgba(255,92,122,.16);border:1px solid var(--danger);
  color:#ffd3dc;padding:.6rem .8rem;border-radius:10px;margin:.6rem 0;font-size:.88rem}

/* ---------- centered auth views ---------- */
.center-view{
  height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;
  position:relative;overflow:hidden;
}

/* animated decorative orbs behind the login card */
.center-view::before,.center-view::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
  animation:orb 8s ease-in-out infinite alternate;
}
.center-view::before{
  width:420px;height:420px;top:-100px;left:-120px;
  background:radial-gradient(circle,rgba(139,63,252,.35) 0%,transparent 70%);
  animation-duration:9s;
}
.center-view::after{
  width:360px;height:360px;bottom:-80px;right:-80px;
  background:radial-gradient(circle,rgba(91,108,255,.3) 0%,transparent 70%);
  animation-duration:11s;animation-delay:-4s;
}
@keyframes orb{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(30px,20px) scale(1.12)}
}

.card{padding:2rem;border-radius:var(--radius)}
.auth-card{
  width:min(420px,100%);
  position:relative;z-index:1;
  animation:glowPulse 4.5s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(139,63,252,.25), 0 24px 60px rgba(0,0,0,.55),
                     0 0 60px rgba(139,63,252,.10)}
  50%{box-shadow:0 0 0 1px rgba(139,63,252,.45), 0 24px 60px rgba(0,0,0,.55),
                 0 0 110px rgba(139,63,252,.28)}
}

/* terminal-window chrome: pulled out to the card's own edges (negative
   margin cancels .card's 2rem padding) so it reads as a title bar, not
   another inset row of content. */
.win-chrome{
  display:flex;align-items:center;gap:.4rem;
  margin:-2rem -2rem 1.4rem;padding:.55rem .9rem;
  background:rgba(0,0,0,.22);border-bottom:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius) var(--radius) 0 0;
}
.win-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.dot-r{background:var(--danger)}
.dot-y{background:#f0b84c}
.dot-g{background:var(--ok)}
.win-chrome-title{
  flex:1;text-align:center;font-family:var(--font-mono);font-size:.7rem;
  color:var(--muted);letter-spacing:.02em;margin-inline-end:1.6rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.brand-logo{
  text-align:center;margin-bottom:1.2rem;color:#c9b8ff;
}
.brand-logo .icon{
  display:inline-block;
  animation:float 3s ease-in-out infinite;
  filter:drop-shadow(0 0 14px rgba(139,63,252,.55));
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
.brand-big{
  font-size:1.7rem;font-weight:700;margin-bottom:.2rem;text-align:center;
  background:linear-gradient(135deg,#fff 0%,#c9b8ff 40%,#8b3ffc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand-tagline{
  text-align:center;font-size:.82rem;color:var(--muted);margin-bottom:1.2rem;
}
.fineprint{font-size:.75rem;color:var(--muted);margin-top:1rem;line-height:1.5}

/* Google btn */
.btn-google{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:#fff;color:#1f1f1f;border-radius:12px;padding:.75rem;
  font-weight:600;font-size:.95rem;border:none;cursor:pointer;width:100%;
  margin-top:.6rem;transition:.15s filter;
}
.btn-google:hover{filter:brightness(.96)}
.btn-google img{width:20px;height:20px}

/* ---------- main layout ---------- */
#view-main{display:grid;grid-template-columns:280px 1fr;height:100vh;height:100dvh;gap:0}
.sidebar{margin:14px;border-radius:var(--radius);padding:1.1rem;display:flex;flex-direction:column;gap:.8rem}
.brand{display:flex;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:700;color:#c9b8ff}
.brand span{background:linear-gradient(135deg,#c9b8ff,#8b3ffc);-webkit-background-clip:text;background-clip:text;color:transparent}
.tabs{display:flex;gap:.4rem;margin-top:.3rem}
.tab{flex:1;padding:.45rem;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:transparent;color:var(--muted);font-family:inherit;font-weight:600;cursor:pointer}
.tab.active{background:linear-gradient(135deg,var(--accent2),var(--primary));color:#fff;border-color:transparent}
.sync-status{
  position:relative;display:flex;align-items:center;gap:.55rem;padding:.5rem .7rem;margin-top:.5rem;
  border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  font-size:.78rem;color:var(--muted);opacity:1;transition:opacity .4s ease;
}
.sync-status.fading{opacity:0}
.sync-status.done{color:var(--ok);border-color:rgba(66,211,146,.25)}
#sync-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default}
.sync-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;
  animation:sync-pulse 1.1s ease-in-out infinite;
}
.sync-status.done .sync-dot{background:var(--ok);box-shadow:0 0 7px var(--ok);animation:none}
@keyframes sync-pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.7);opacity:.45}
}

/* hover tooltip listing courses currently in flight — CSS-only visibility,
   JS only ever needs to keep its content in sync with the latest poll */
.sync-tooltip{
  position:absolute;bottom:calc(100% + .5rem);left:0;min-width:200px;max-width:260px;
  background:var(--surface-solid);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:.6rem .7rem;box-shadow:var(--shadow);z-index:30;
  opacity:0;pointer-events:none;transform:translateY(4px);
  transition:.15s opacity,.15s transform;
}
.sync-status:not(.hidden):hover .sync-tooltip:not(.hidden){opacity:1;pointer-events:auto;transform:translateY(0)}
.sync-tooltip-title{
  font-weight:700;color:var(--muted);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:.35rem;
}
.sync-tooltip-course{
  padding:.22rem 0;font-size:.82rem;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* pending-assignments badge — undelivered work due soon/overdue, checked once on
   login (see startPendingCheck in app.js). Danger-toned and click-toggled rather
   than hover, unlike .sync-status/.sync-tooltip above: this is actionable, not
   just background status, and hover has no equivalent on a phone anyway. */
.pending-status{
  position:relative;display:flex;align-items:center;gap:.55rem;padding:.5rem .7rem;margin-top:.5rem;
  border-radius:10px;background:rgba(255,92,122,.08);border:1px solid rgba(255,92,122,.3);
  font-size:.78rem;color:var(--danger);cursor:pointer;
}
/* Nothing actually due (only dismissed/expired items left) — same badge, but
   the danger styling would be a false alarm of its own, so it drops to a
   quiet neutral tone. Still clickable: the panel below is how you get back
   to the "Not showing" group. */
.pending-status.quiet{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:var(--muted)}
.pending-status.quiet .pending-dot{background:var(--muted);box-shadow:none}
#pending-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.pending-dot{
  width:7px;height:7px;border-radius:50%;background:var(--danger);flex-shrink:0;
  box-shadow:0 0 7px var(--danger);
}
.pending-panel{
  /* opens DOWNWARD, unlike .sync-tooltip above — that badge sits lower in the
     sidebar with room to open upward, but this one sits right under the tabs
     with nothing above it, so bottom:100% pushed the panel off-screen. */
  position:absolute;top:calc(100% + .5rem);left:0;right:0;max-height:260px;overflow-y:auto;
  background:var(--surface-solid);border:1px solid rgba(255,92,122,.25);
  border-radius:12px;padding:.4rem;box-shadow:var(--shadow);z-index:30;
  opacity:0;pointer-events:none;transform:translateY(-6px);transition:.15s opacity,.15s transform;
}
.pending-panel.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.pending-item{
  padding:.5rem .55rem;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;gap:.3rem;
}
.pending-item:hover{background:rgba(255,255,255,.06)}
.pending-item-info{flex:1;min-width:0}
.pending-item-name{font-size:.85rem;color:var(--text);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pending-item-meta{font-size:.72rem;color:var(--muted);margin-top:.1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pending-item-meta.overdue{color:var(--danger)}
/* Dismissed/expired items stay in the list rather than disappearing — this
   is the visual demotion that says so: quieter text, no danger-red overdue
   highlight (expected by now, not urgent), same row shape as an active one. */
.pending-item.inactive{opacity:.55}
.pending-item.inactive .pending-item-name{color:var(--muted);font-weight:500}
.pending-item.inactive:hover{opacity:.8}
/* Submitted work is a record, not a demotion — kept fully legible (unlike
   .inactive above), just marked done with a static check instead of an
   action button; there's nothing left to dismiss or restore. */
.pending-item.submitted .pending-item-name{color:var(--muted)}
.pending-item-check{
  flex-shrink:0;width:24px;height:24px;border-radius:7px;color:var(--ok);
  display:flex;align-items:center;justify-content:center;
}
.pending-group-label{
  margin:.55rem .5rem .3rem;font-size:.7rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);
}
/* Muted, not danger-colored like .icon-btn's trash — dismissing here isn't
   destructive (the assignment's still on Moodle, this only quiets the badge),
   so it shouldn't read as one. Kept at partial opacity rather than 0-until-hover:
   hover has no touch equivalent, and this needs to be findable on a phone. */
.pending-item-action{
  flex-shrink:0;width:24px;height:24px;border-radius:7px;border:none;
  background:transparent;color:var(--muted);opacity:.45;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:.12s opacity,.12s background,.12s color;
}
.pending-item:hover .pending-item-action{opacity:.8}
.pending-item-action:hover{opacity:1;background:rgba(255,255,255,.1);color:var(--text)}
.pending-item-action:focus-visible{opacity:1;outline:2px solid var(--accent);outline-offset:1px}
.pending-item-action:disabled{opacity:.25;cursor:default}
.chat-list{flex:1;overflow-y:auto;margin-top:.4rem;display:flex;flex-direction:column;gap:.35rem}
/* flex-shrink:0 is load-bearing, not tidiness. .chat-list is a flex column, so
   these rows are flex items that shrink by default — and because .chat-item sets
   overflow:hidden (for the ellipsis), its min-height:auto resolves to 0, letting
   them squeeze arbitrarily small instead of overflowing into a scroll. Once the
   list is taller than the sidebar (a phone's short viewport + ~20 chats), every
   row compressed to ~55% of its natural height and its own overflow:hidden
   clipped the text mid-glyph — the "cut/shrunk/smeared" rows reported on mobile.
   Desktop only escaped it by having the vertical room to not need shrinking. */
.chat-item{padding:.55rem .7rem;border-radius:10px;cursor:pointer;font-size:.86rem;flex-shrink:0;
  color:var(--muted);border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item:hover{background:rgba(255,255,255,.05)}
.chat-item.active{background:rgba(139,63,252,.2);color:#fff;border-color:rgba(139,63,252,.4)}

/* sidebar footer — name + role more prominent */
.sidebar-foot{
  border-top:1px solid rgba(255,255,255,.1);padding-top:.85rem;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
}
.who{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.who-name{
  font-weight:700;font-size:1rem;
  background:linear-gradient(135deg,#fff,#c9b8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.badge{
  display:inline-block;font-size:.72rem;padding:.18rem .6rem;border-radius:999px;
  background:linear-gradient(135deg,var(--accent2),var(--primary));color:#fff;
  box-shadow:0 0 12px rgba(139,63,252,.45);letter-spacing:.03em;width:fit-content;
}

.content{padding:14px 14px 14px 0;height:100vh;height:100dvh;overflow:hidden}
.pane{height:100%;display:flex;flex-direction:column}
.pane-title{margin:.2rem .4rem 1rem}

/* ---------- welcome splash ---------- */
#welcome-splash{
  position:fixed;inset:0;z-index:600;
  background:radial-gradient(ellipse at 50% 40%,#3d1f7a 0%,#1b1030 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  animation:splashFade 2.8s ease forwards;
}
@keyframes splashFade{
  0%{opacity:0} 15%{opacity:1} 75%{opacity:1} 100%{opacity:0;pointer-events:none}
}
.splash-icon{
  color:#c9b8ff;animation:float 2s ease-in-out infinite;
  filter:drop-shadow(0 0 20px rgba(139,63,252,.6));
}
.splash-name{
  font-size:2rem;font-weight:700;text-align:center;
  background:linear-gradient(135deg,#fff 0%,#c9b8ff 50%,#8b3ffc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.splash-role{
  font-size:.95rem;padding:.35rem 1rem;border-radius:999px;
  background:linear-gradient(135deg,var(--accent2),var(--primary));color:#fff;
  box-shadow:0 0 20px rgba(139,63,252,.5);
}

/* ---------- chat ---------- */
.messages{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:.5rem;display:flex;flex-direction:column;gap:.8rem;
}
.msg{max-width:76%;padding:.8rem 1rem;border-radius:16px;line-height:1.5;font-size:.94rem;white-space:pre-wrap;word-wrap:break-word}
.msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--accent),var(--primary));color:#fff;border-bottom-right-radius:5px}
.msg.assistant{align-self:flex-start;background:var(--surface-solid);border:1px solid rgba(255,255,255,.08);border-bottom-left-radius:5px}
.artifact-thumbs{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.5rem}
.artifact-thumb{
  /* max-width/height + auto sizing (not a fixed box) so the image's own
     aspect ratio decides its footprint — object-fit:cover on a forced
     square used to crop tall PDF-page screenshots top/bottom, which was
     the real readability problem, not just the size. */
  max-width:220px;max-height:280px;width:auto;height:auto;
  object-fit:contain;border-radius:10px;background:#fff;
  border:1px solid rgba(255,255,255,.16);cursor:pointer;
  transition:.15s transform,.15s box-shadow,.15s border-color;
}
.artifact-thumb:hover{transform:scale(1.04);box-shadow:0 6px 18px rgba(0,0,0,.4);
  border-color:var(--accent)}
.msg code{
  background:rgba(0,0,0,.25);padding:.1rem .4rem;border-radius:5px;
  font-size:.85em;font-family:var(--font-mono);color:#d9c8ff;
}
/* code-block wrapper: built in JS (enhanceCodeBlocks) around each <pre> so
   it can carry a header row (language + copy) that plain markdown can't. */
.code-block{
  margin:.5rem 0;border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);background:#161022;
}
.code-block-head{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.4rem .7rem;background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.code-block-lang{
  font-family:var(--font-mono);font-size:.7rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;
}
.code-copy-btn{
  display:inline-flex;align-items:center;gap:.3rem;background:transparent;border:none;
  color:var(--muted);font-family:var(--font-mono);font-size:.7rem;cursor:pointer;
  padding:.2rem .4rem;border-radius:6px;transition:.12s background,.12s color;
}
.code-copy-btn:hover{color:var(--text);background:rgba(255,255,255,.08)}
.code-copy-btn.copied{color:var(--ok)}
.msg pre{margin:0;padding:.75rem .9rem;overflow-x:auto;background:transparent}
.msg pre code{
  background:transparent !important;padding:0;font-size:.82rem;font-family:var(--font-mono);
  line-height:1.55;
}
/* plain (non-highlighted) code — no .hljs class means no theme color, so
   fall back to something readable instead of default black-on-dark */
.msg pre code:not(.hljs){color:#d7d2e8}
.msg p{margin:.35rem 0}
.msg p:first-child{margin-top:0}
.msg p:last-child{margin-bottom:0}
.msg ul,.msg ol{margin:.35rem 0;padding-inline-start:1.4rem}
.msg li{margin:.2rem 0}
.msg h1,.msg h2,.msg h3{margin:.5rem 0 .25rem;font-size:1rem;font-weight:700;color:var(--text)}
.msg strong{font-weight:700;color:var(--text)}
.msg blockquote{border-inline-start:3px solid var(--accent);margin:.4rem 0;padding:.3rem .8rem;color:var(--muted)}
.msg table{border-collapse:collapse;width:100%;font-size:.88rem;margin:.5rem 0}
.msg th,.msg td{border:1px solid rgba(255,255,255,.12);padding:.35rem .6rem;text-align:start}
.msg th{background:rgba(139,63,252,.2);font-weight:600}
.msg .tools{margin-top:.45rem;display:flex;flex-wrap:wrap;gap:.3rem}
.tool-chip{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.2rem .5rem;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:var(--muted);font-size:.7rem;line-height:1.4;
}
.tool-chip svg{color:var(--ok);flex-shrink:0}   /* echoes the same check used mid-reply in .typing-log-line */
.empty-hint{margin:auto;text-align:center;color:var(--muted);max-width:440px}
.empty-hint h3{color:var(--text)}
.hero-greet{font-size:1.15rem;color:var(--muted);letter-spacing:.02em}
.hero-name{
  font-size:2.6rem;font-weight:700;line-height:1.15;margin:.1rem 0 .5rem;
  background:linear-gradient(135deg,#fff 0%,#c9b8ff 45%,#8b3ffc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:heroIn .7s ease both;
}
.hero-badge{
  display:inline-block;font-size:.8rem;padding:.25rem .85rem;border-radius:999px;
  background:linear-gradient(135deg,var(--accent2),var(--primary));color:#fff;
  box-shadow:0 0 18px rgba(139,63,252,.5);margin-bottom:.9rem;
  animation:heroIn .7s .15s ease both;
}
@keyframes heroIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.chip{display:inline-block;margin:.25rem;padding:.4rem .8rem;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);cursor:pointer;font-size:.82rem}
.chip:hover{background:rgba(139,63,252,.25)}

/* animated thinking indicator */
.typing{
  align-self:flex-start;display:flex;align-items:flex-end;gap:.5rem;
  padding:.6rem 1rem;font-size:.88rem;color:var(--muted);max-width:100%;
}
.typing-dots{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}
.typing-orb{
  width:10px;height:10px;border-radius:50%;
  animation:typingOrb 1.8s ease-in-out infinite;
}
@keyframes typingOrb{
  0%,100%{background:var(--accent);box-shadow:0 0 6px 1px rgba(139,63,252,.55);transform:scale(.78)}
  33%{background:var(--primary);box-shadow:0 0 7px 2px rgba(91,108,255,.5);transform:scale(1)}
  66%{background:#c9b8ff;box-shadow:0 0 7px 2px rgba(201,184,255,.45);transform:scale(.78)}
}
@media (prefers-reduced-motion: reduce){
  .typing-orb{animation:none;background:var(--accent);box-shadow:none}
}
.msg .typing{align-self:auto;padding:.3rem 0 0;margin-top:.15rem}
.msg .msg-body:empty + .typing{padding-top:0}
.tail-text{white-space:pre-wrap}
.stable-md:empty,.tail-text:empty{display:none}
.typing-body{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.typing-log{display:flex;flex-direction:column;gap:.2rem}
.typing-log-line{
  display:flex;align-items:center;gap:.35rem;font-size:.76rem;color:var(--muted);
  opacity:0;transform:translateY(4px);transition:.25s ease opacity,.25s ease transform;
  font-family:var(--font-mono);
}
.typing-log-line.in{opacity:.55;transform:translateY(0)}
.typing-log-line svg{color:var(--ok);flex-shrink:0}
.typing-log-line span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.typing-active{display:flex;align-items:center;gap:.3rem;min-width:0}
.typing-text{
  transition:opacity .3s ease;font-family:var(--font-mono);font-size:.82rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.typing-cursor{
  color:var(--accent);animation:blink .8s step-end infinite;font-weight:300;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.composer{display:flex;gap:.6rem;padding:.6rem;border-radius:14px;margin-top:.6rem}
.composer-input{flex:1;padding:.75rem .9rem;border-radius:10px;background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);color:var(--text);font-family:inherit;font-size:.95rem;outline:none}
.composer-input:focus{border-color:var(--accent)}
.dev-banner{margin-top:.5rem;font-size:.78rem;color:var(--muted);text-align:center}

/* ---------- study mode ---------- */
.study-mode-wrap{position:relative;margin-top:.7rem;display:flex;align-items:center}

/* ---------- context counter / compact ---------- */
.context-badge{
  display:inline-flex;align-items:center;gap:.4rem;margin-inline-start:auto;
  padding:.34rem .7rem;border-radius:999px;font-size:.76rem;color:var(--muted);
  background:rgba(255,255,255,.03);border:1px solid transparent;white-space:nowrap;
  cursor:default;transition:.15s background,.15s border-color,.15s color;
}
.context-badge.warn{color:var(--danger);border-color:rgba(255,92,122,.3);background:rgba(255,92,122,.08)}
.context-badge.critical{
  color:var(--danger);border-color:rgba(255,92,122,.55);background:rgba(255,92,122,.14);
  animation:context-critical-pulse 1.4s ease-in-out infinite;
}
.context-badge.clickable{cursor:pointer;border-color:rgba(255,255,255,.12)}
.context-badge.clickable:hover{border-color:var(--accent);color:var(--text);background:rgba(255,255,255,.06)}
.context-badge.warn.clickable:hover,.context-badge.critical.clickable:hover{border-color:var(--danger);color:var(--danger)}
.context-badge.compacting{pointer-events:none;color:var(--muted)}
.context-badge.done{
  color:var(--ok);border-color:rgba(66,211,146,.35);background:rgba(66,211,146,.09);
}
@keyframes context-critical-pulse{
  0%,100%{box-shadow:0 0 0 rgba(255,92,122,0)}
  50%{box-shadow:0 0 10px rgba(255,92,122,.5)}
}
.context-cap{display:inline-flex;line-height:1}
.context-text{font-family:var(--font-mono);font-size:.72rem}
.context-dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;
  animation:sync-pulse 1.1s ease-in-out infinite;
}

.compact-divider{
  display:flex;align-items:center;gap:.6rem;margin:1rem 2px;
  color:var(--muted);font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;
}
.compact-divider::before,.compact-divider::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.09)}
.compact-divider span{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}

.study-mode-pill{
  display:inline-flex;align-items:center;gap:.45rem;max-width:100%;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:.42rem .85rem;cursor:pointer;font-family:inherit;
  font-size:.82rem;font-weight:600;color:var(--muted);
  transition:.15s background,.15s border-color,.15s color,.15s box-shadow;
}
.study-mode-pill:hover{border-color:var(--accent);color:var(--text)}
.study-mode-pill.open{border-color:var(--accent);color:var(--text)}
.study-mode-pill.active{
  background:linear-gradient(135deg,var(--accent),var(--primary));border-color:transparent;
  color:#fff;box-shadow:0 0 14px rgba(139,63,252,.45);
}
.study-mode-cap{display:inline-flex;line-height:1;opacity:.75}
.study-mode-pill.active .study-mode-cap,.study-mode-pill:hover .study-mode-cap{opacity:1}
#study-mode-text{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.study-mode-clear{
  display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border-radius:50%;background:rgba(255,255,255,.22);font-size:.6rem;
  margin-inline-start:.1rem;flex-shrink:0;
}
.study-mode-clear:hover{background:rgba(255,255,255,.4)}

.study-course-panel{
  position:absolute;bottom:calc(100% + .55rem);left:0;width:min(340px,90vw);
  max-height:min(360px,50vh);overflow-y:auto;border-radius:14px;padding:.5rem;z-index:20;
  animation:study-panel-in .16s ease;
}
@keyframes study-panel-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.study-course-group-label{
  margin:.55rem .5rem .3rem;font-size:.7rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);
}
.study-course-group-label:first-child{margin-top:.15rem}
.study-course-row{
  display:flex;align-items:center;gap:.55rem;width:100%;padding:.55rem .6rem;border-radius:10px;
  background:transparent;border:none;color:var(--text);font-family:inherit;font-size:.86rem;
  text-align:start;cursor:pointer;transition:.12s background;
}
.study-course-row:hover{background:rgba(255,255,255,.08)}
.study-course-row.selected{background:rgba(139,63,252,.24)}
.study-course-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0}
.study-course-row.inactive .study-course-dot{background:var(--muted);opacity:.55}
.study-course-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.study-course-check{color:var(--accent);font-size:.8rem;flex-shrink:0}
.study-course-empty,.study-course-loading{padding:.9rem .6rem;color:var(--muted);
  font-size:.82rem;text-align:center}

/* ---------- gallery ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;overflow-y:auto;padding:.4rem;flex:1;min-height:0}
.gallery-item{border-radius:14px;overflow:hidden;background:var(--surface-solid);border:1px solid rgba(255,255,255,.08);position:relative}
.gallery-item img{width:100%;display:block}
.gallery-meta{padding:.6rem .8rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.gallery-meta .t{font-size:.82rem;font-weight:500}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--muted);cursor:pointer;
}
.icon-btn:hover{color:var(--danger)}

/* ---------- files tab ---------- */
.files-scroll{flex:1;min-height:0;overflow-y:auto;padding:.4rem}
.pane-subtitle{margin:1.1rem .4rem .5rem;font-size:.85rem;color:var(--muted);
  font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.pane-subtitle:first-of-type{margin-top:.2rem}
.pane-subtitle-row{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.pane-subtitle-row .pane-subtitle{margin-bottom:.5rem;flex:1}
.pane-subtitle-action{
  background:transparent;border:none;cursor:pointer;font-family:inherit;
  font-size:.78rem;font-weight:600;color:var(--accent);padding:.2rem .4rem;
  white-space:nowrap;
}
.pane-subtitle-action:hover{text-decoration:underline}
.material-course{margin:.6rem 0}
.material-course:first-child{margin-top:0}
.material-course-heading{
  display:flex;align-items:center;gap:.5rem;width:100%;
  background:transparent;border:none;cursor:pointer;padding:.4rem;
  /* start, not left: the course name inside gets an explicit dir from
     resolveDir(), and a hardcoded left would override it for Hebrew names. */
  font-family:inherit;font-size:.88rem;font-weight:600;color:var(--text);text-align:start;
}
.material-chevron{color:var(--muted);transition:transform .18s ease;font-size:.75rem}
.material-course.collapsed .material-chevron{transform:rotate(-90deg)}
.material-course-name{flex:1}
.material-course-count{
  font-size:.72rem;background:rgba(255,255,255,.06);border-radius:999px;
  padding:.1rem .55rem;
}
.material-course-body{
  display:flex;flex-direction:column;gap:.5rem;padding:.3rem .4rem 0;
  overflow:hidden;
}
.material-course.collapsed .material-course-body{display:none}
.files-list{display:flex;flex-direction:column;gap:.5rem;padding:.4rem}
.empty-files{margin:auto;text-align:center;max-width:380px;padding:2rem 1rem;
  display:flex;flex-direction:column;align-items:center;gap:1rem}
.empty-files-icon{color:var(--muted);opacity:.6}
.empty-files .btn{margin-top:.4rem}
.file-row{
  display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;
  border-radius:12px;background:var(--surface-solid);
  border:1px solid rgba(255,255,255,.08);color:var(--text);
  text-decoration:none;transition:.15s background,.15s border-color;
  -webkit-user-select:none;user-select:none;position:relative;overflow:hidden;
}
.file-row:hover{background:rgba(139,63,252,.14);border-color:rgba(139,63,252,.35)}
.file-icon{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.06);
}
.file-icon.ext-pdf{color:#ff8a8a;background:rgba(255,92,122,.12)}
.file-icon.ext-doc{color:#7ba9ff;background:rgba(91,108,255,.14)}
.file-icon.ext-sheet{color:#6fe0a8;background:rgba(66,211,146,.14)}
.file-icon.ext-slide{color:#f0b84c;background:rgba(240,184,76,.14)}
.file-icon.ext-image{color:#ec7fd6;background:rgba(236,127,214,.14)}
.file-icon.ext-video{color:#ff7a5c;background:rgba(255,122,92,.14)}
.file-icon.ext-archive{color:#4dd0c4;background:rgba(77,208,196,.14)}
.file-icon.ext-code{color:#7dd3fc;background:rgba(125,211,252,.14)}
.file-icon.ext-generic{color:var(--muted)}
.file-name{flex:1;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-chip{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;
  padding:.5rem .8rem;border-radius:10px;background:rgba(0,0,0,.25);
  border:1px solid rgba(139,63,252,.4);color:var(--text);text-decoration:none;
  font-size:.86rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.file-chip:hover{background:rgba(139,63,252,.2)}

/* ---------- assignment page (opened from a pending-assignments row) ---------- */
.assignment-back{
  display:inline-flex;align-items:center;gap:.3rem;margin:.4rem .4rem .6rem;
  background:transparent;border:none;color:var(--muted);font-family:inherit;
  font-size:.85rem;font-weight:600;cursor:pointer;padding:.2rem;
}
.assignment-back:hover{color:var(--text)}
.assignment-name{margin-top:0;margin-bottom:.15rem}
.assignment-course{margin:0 .4rem 1rem;color:var(--muted);font-size:.88rem}
.assignment-status-card{
  display:flex;align-items:center;flex-wrap:wrap;gap:1.1rem;
  margin:0 .4rem 1.3rem;padding:1.1rem 1.3rem;
}
.assignment-due-block{min-width:110px}
.assignment-due-label{font-size:.68rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.assignment-due-value{font-size:1.3rem;font-weight:700;color:var(--text);margin-top:.1rem}
.assignment-due-value.overdue{color:var(--danger)}
.assignment-due-value.closed{color:var(--muted)}
.assignment-due-sub{font-size:.78rem;color:var(--muted);margin-top:.1rem}
.assignment-pills{display:flex;flex-direction:column;gap:.4rem;flex:1;min-width:140px}
.assignment-pill{
  display:inline-flex;align-items:center;gap:.4rem;width:fit-content;
  padding:.3rem .7rem;border-radius:999px;font-size:.78rem;font-weight:600;
}
.assignment-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.assignment-pill.ok{color:var(--ok);background:rgba(66,211,146,.12)}
.assignment-pill.danger{color:var(--danger);background:rgba(255,92,122,.12)}
.assignment-pill.muted{color:var(--muted);background:rgba(255,255,255,.06)}
.assignment-moodle-link{
  display:inline-flex;align-items:center;gap:.4rem;color:var(--muted);
  font-size:.82rem;font-weight:600;text-decoration:none;padding:.4rem .6rem;
  border-radius:8px;border:1px solid rgba(255,255,255,.12);white-space:nowrap;
}
.assignment-moodle-link:hover{color:var(--text);border-color:rgba(255,255,255,.25)}
.assignment-intro{
  margin:0 .4rem 1.3rem;padding:.9rem 1rem;border-radius:12px;
  background:var(--surface-solid);border:1px solid rgba(255,255,255,.08);
  color:var(--text);font-size:.88rem;line-height:1.6;white-space:pre-line;
}
.assignment-intro.empty{color:var(--muted);font-style:italic}
.assignment-uploads-empty{margin:0 .4rem 1rem;font-size:.85rem;line-height:1.5}
.assignment-ask-btn{margin:1.4rem .4rem 0;width:calc(100% - .8rem)}
@media (max-width:520px){
  .assignment-status-card{flex-direction:column;align-items:flex-start}
  .assignment-moodle-link{align-self:stretch;justify-content:center}
}

/* ---------- admin tab ---------- */
.admin-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:.7rem;max-width:760px;margin-bottom:1.2rem}
.admin-stat-tile{background:var(--surface-solid);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:.8rem .9rem}
.admin-stat-val{font-size:1.35rem;font-weight:700;color:var(--text);font-family:var(--font-mono)}
.admin-stat-label{font-size:.74rem;color:var(--muted);margin-top:.15rem}
.admin-panel{padding:1.4rem;border-radius:var(--radius);max-width:520px}
.admin-panel .btn{margin-top:1rem}
.admin-progress-bar{height:8px;border-radius:6px;background:rgba(255,255,255,.08);
  overflow:hidden;margin-top:1rem}
.admin-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent2),var(--primary));
  transition:width .3s ease}
#admin-status{margin-top:.6rem;font-size:.85rem}
.admin-results{max-height:260px;overflow-y:auto;margin-top:.6rem;display:flex;
  flex-direction:column;gap:.3rem}
.admin-row{padding:.4rem .6rem;border-radius:8px;background:var(--surface-solid);
  font-size:.8rem}
.admin-row.err{color:var(--danger)}

/* ---------- inline delete overlay ---------- */
.del-overlay{
  position:absolute;inset:0;z-index:10;
  background:rgba(15,8,35,.9);backdrop-filter:blur(6px);
  border-radius:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  animation:fadeIn .15s ease;
}
.del-label{color:#fff;font-weight:600;font-size:.88rem;letter-spacing:.01em}
.del-actions{display:flex;gap:.55rem}
.del-cancel{
  border:1px solid rgba(255,255,255,.2);border-radius:9px;padding:.38rem .85rem;
  background:rgba(255,255,255,.08);color:var(--text);
  font-family:inherit;font-weight:600;font-size:.82rem;cursor:pointer;
  transition:.12s background;
}
.del-cancel:hover{background:rgba(255,255,255,.17)}
.del-ok{
  border:none;border-radius:9px;padding:.38rem .85rem;
  background:linear-gradient(135deg,#ff5c7a,#c40030);color:#fff;
  font-family:inherit;font-weight:600;font-size:.82rem;cursor:pointer;
  transition:.12s filter;
}
.del-ok:hover{filter:brightness(1.1)}
.del-ok:disabled{opacity:.6;cursor:default}
/* file rows are one line tall — lay the overlay out horizontally so it fits */
.file-row .del-overlay{flex-direction:row;gap:.8rem;padding:0 .9rem}
.file-row .del-label{font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-row .del-cancel,.file-row .del-ok{padding:.3rem .7rem;font-size:.78rem}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- profile modal ---------- */
#profile-modal{
  position:fixed;inset:0;z-index:650;background:rgba(10,5,25,.7);
  display:flex;align-items:center;justify-content:center;padding:1.2rem;
  backdrop-filter:blur(8px);animation:fadeIn .18s ease;
}
.profile-card{
  width:min(400px,100%);padding:2.2rem 1.8rem 1.6rem;border-radius:20px;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  position:relative;animation:profileIn .28s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes profileIn{
  from{opacity:0;transform:translateY(18px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.modal-x{
  position:absolute;top:12px;right:12px;
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.25);color:var(--muted);font-size:.95rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.modal-x:hover{color:#fff;background:rgba(139,63,252,.4)}
.profile-avatar{
  width:84px;height:84px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.9rem;font-weight:700;color:#fff;letter-spacing:.02em;
  background:linear-gradient(135deg,var(--accent),var(--primary));
  box-shadow:0 0 0 4px rgba(139,63,252,.25), 0 0 40px rgba(139,63,252,.45);
  margin-bottom:.3rem;
}
.profile-name{
  font-size:1.35rem;font-weight:700;text-align:center;
  background:linear-gradient(135deg,#fff 0%,#c9b8ff 55%,#8b3ffc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.profile-email{font-size:.8rem;color:var(--muted)}
.profile-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:.6rem;width:100%;margin-top:1rem;
}
.stat{
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.09);
  border-radius:14px;padding:.8rem .5rem;text-align:center;
  transition:.15s border-color;
}
.stat:hover{border-color:rgba(139,63,252,.45)}
.stat-num{
  font-size:1.5rem;font-weight:700;font-family:var(--font-mono);
  background:linear-gradient(135deg,#c9b8ff,#8b3ffc);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-label{font-size:.7rem;color:var(--muted);margin-top:.15rem;letter-spacing:.03em}
.profile-since{font-size:.74rem;color:var(--muted);margin-top:.7rem}
.btn-danger{
  background:linear-gradient(135deg,#ff5c7a,#c40030);color:#fff;
  box-shadow:0 4px 18px rgba(255,92,122,.25);
}
.who{cursor:pointer;border-radius:10px;padding:.2rem .35rem;margin:-.2rem -.35rem;
  transition:.15s background}
.who:hover{background:rgba(139,63,252,.15)}

/* queued (not yet sent) user messages */
.msg.queued{opacity:.5}
.msg.queued::after{
  content:"queued";display:block;font-size:.64rem;text-align:right;
  margin-top:.35rem;opacity:.85;letter-spacing:.08em;text-transform:uppercase;
}

/* ---------- lightbox ---------- */
#lightbox{
  position:fixed;inset:0;z-index:700;background:rgba(10,5,25,.92);
  display:flex;align-items:center;justify-content:center;padding:1.2rem;
  cursor:zoom-out;backdrop-filter:blur(6px);
}
#lightbox img{
  max-width:100%;max-height:100%;border-radius:12px;
  box-shadow:0 20px 80px rgba(0,0,0,.7);
}
#lightbox-close{
  position:fixed;top:16px;right:16px;z-index:701;
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(42,26,69,.85);color:#fff;font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
#lightbox-close:hover{background:rgba(139,63,252,.5)}

/* keep gallery/file items from selecting text on long-press */
.gallery-item{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.gallery-item img{cursor:zoom-in}

::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-thumb{background:rgba(139,63,252,.35);border-radius:8px}

/* ---------- mobile ---------- */
#menu-toggle{
  display:none;align-items:center;justify-content:center;position:fixed;top:14px;left:14px;z-index:200;
  background:var(--surface-solid);border:1px solid rgba(255,255,255,.15);border-radius:10px;
  color:var(--text);padding:.5rem;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
#sidebar-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99;
}
@media(max-width:660px){
  #view-main{grid-template-columns:1fr}
  .sidebar{
    position:fixed;top:0;left:0;width:78%;max-width:300px;height:100vh;height:100dvh;
    margin:0;border-radius:0 var(--radius) var(--radius) 0;
    transform:translateX(-100%);transition:transform .25s ease;z-index:100;
    /* #menu-toggle sits fixed at top:14px/left:14px above everything (z-index:200) —
       also its close button while the sidebar is open, so it can't just be hidden.
       Push the sidebar's own content down past it instead of letting .brand land
       directly underneath at the same corner. */
    padding-top:64px;
  }
  #view-main.sidebar-open .sidebar{transform:translateX(0)}
  #sidebar-overlay.visible{display:block}
  .content{padding:14px;padding-top:58px}
  #menu-toggle{display:flex}
  .msg{max-width:92%}
  .artifact-thumb{max-width:130px;max-height:170px}
}