/* Shared student surfaces inherit each client's paper, ink and accent. */
body { --st-paper: var(--mb-card-2, var(--paper-2, #fbfaf4)); --st-card: var(--mb-card, var(--paper-3, #fff)); --st-ink: var(--mb-ink, var(--ink, #16201a)); --st-soft: var(--mb-soft, var(--ink-soft, #4c574f)); --st-line: var(--mb-line, var(--line, #e3dfd1)); --st-accent: var(--mb-deep, var(--green-700, #145c3d)); --st-mint: var(--mb-mint, var(--mint, #e8f1ea)); }
body.dark { --st-paper: var(--mb-card-2, var(--dark, #101d16)); --st-card: var(--mb-card, var(--dark-2, #14241c)); --st-ink: var(--mb-ink, var(--dark-text, #e8f0ea)); --st-soft: var(--mb-soft, var(--dark-soft, #9fb3a6)); --st-line: var(--mb-line, var(--dark-line, #23392e)); --st-accent: var(--mb-deep, var(--glow, #7fd0a6)); --st-mint: var(--mb-mint, rgba(63,167,118,.14)); }
.student-launch { display:flex; align-items:center; gap:12px; width:100%; padding:15px 16px; background:var(--st-mint); border:1px solid var(--st-line); border-radius:16px; color:var(--st-ink); text-align:left; cursor:pointer; }
.student-launch__icon { display:grid; place-items:center; width:38px; height:38px; flex:none; border:1px solid var(--st-line); border-radius:12px; color:var(--st-accent); }
.student-launch svg { width:21px; height:21px; }
.student-launch b { display:block; font-size:15px; font-weight:650; }
.student-launch small { display:block; font-size:12px; color:var(--st-soft); margin-top:3px; line-height:1.4; }
.student-launch__arrow { margin-left:auto; color:var(--st-accent); font-size:23px; }
.student-home { margin:0 0 20px; display:grid; gap:8px; }
.student-sidebar { margin:10px 12px; }
.student-sidebar:has(> .student-continue[hidden]) { display:none; }
.student-continue { width:100%; text-align:left; background:none; color:var(--st-soft); padding:9px 4px; font-size:12px; border:0; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.student-teaching { display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:5px 2px 7px; flex:none; min-width:0; }
.student-teaching[hidden] { display:none !important; }
.student-bubble { display:inline-flex; align-items:center; max-width:100%; min-width:0; border:1px solid color-mix(in srgb,var(--st-accent) 22%,var(--st-line)); border-radius:999px; color:var(--st-accent); background:var(--st-card); box-shadow:0 3px 12px color-mix(in srgb,var(--st-accent) 7%,transparent); overflow:hidden; animation:student-bubble-wave 4.8s ease-in-out var(--bubble-delay,0s) 3; }
.student-bubble button { border:0; color:inherit; background:transparent; font-family:inherit; cursor:pointer; }
.student-bubble__action { display:flex; align-items:center; gap:4px; min-width:0; min-height:28px; padding:4px 6px; font-size:10.5px; font-weight:550; line-height:1.3; text-align:left; white-space:nowrap; }
.student-bubble__icon { flex:none; font-size:12px; opacity:.8; }
.student-bubble__close { align-self:stretch; flex:none; min-width:20px; padding:0 4px 1px; font-size:15px; opacity:.6; }
.student-bubble button:hover { background:var(--st-mint); }
.student-bubble__close:hover { opacity:1; }
.student-bubble:has(:hover), .student-bubble:focus-within { animation-play-state:paused; }
@keyframes student-bubble-wave { 0%,70%,100% { transform:translateY(0); } 18% { transform:translateY(-3px) rotate(-.6deg); } 38% { transform:translateY(1px) rotate(.4deg); } }
.mb-body #view-chat > .student-teaching { padding:5px max(18px,var(--safe-l)) 2px; gap:5px; background:var(--st-paper); }
.mb-body .student-bubble__action { min-height:36px; padding:5px 8px; font-size:11px; }
.mb-body .student-bubble__close { min-width:24px; }
.mb-body #view-chat:has(#note-tab[aria-selected="true"]):has(#note-seg:not([hidden])) > .student-teaching { display:none; }
/* Keep the message field reachable when a phone keyboard leaves little room. */
.mb-body.app-tiny .student-teaching, .mb-body.kb-open .student-teaching, .mb-body.keyboard-intent .student-teaching { display:none; }
.student-save { font-size:11px; color:var(--st-soft); line-height:1.3; margin:0; }
.student-save-mobile { padding:0 20px 5px; text-align:right; flex:none; }
.student-save[data-state="error"] { color:var(--mb-danger,#b3463c); }
.student-dialog { color:var(--st-ink); background:var(--st-paper); margin:auto; padding:0; border:1px solid var(--st-line); border-radius:24px; width:min(760px,calc(100vw - 40px)); max-width:none; max-height:calc(100dvh - 48px); box-shadow:0 28px 90px #0003; overflow:hidden; }
.student-dialog::backdrop { background:rgba(12,28,20,.45); backdrop-filter:blur(4px); }
.student-dialog[open] { display:flex; flex-direction:column; }
.student-dialog * { box-sizing:border-box; }
.student-dialog__head { display:flex; flex:none; align-items:flex-start; gap:16px; padding:24px 28px 20px; border-bottom:1px solid var(--st-line); }
.student-eyebrow { display:block; margin-bottom:6px; color:var(--st-accent); font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.13em; }
.student-dialog h2 { font-family:Spectral,Georgia,serif; font-size:30px; font-weight:500; line-height:1.2; margin:0; letter-spacing:-.025em; }
.student-dialog h3 { font-size:15px; margin:0 0 8px; font-weight:650; }
.student-dialog__close { margin-left:auto; width:40px; height:40px; flex:none; border:1px solid var(--st-line); background:var(--st-card); border-radius:50%; color:var(--st-soft); cursor:pointer; font-size:22px; }
.student-dialog__body { padding:24px 28px 28px; overflow:auto; flex:1 1 auto; min-height:0; max-height:calc(100dvh - 190px); overscroll-behavior:contain; }
.student-sub { color:var(--st-soft); font-size:14px; line-height:1.6; margin:0 0 18px; }
.student-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:22px; }
.student-section { border:1px solid var(--st-line); background:var(--st-card); border-radius:16px; padding:20px; min-width:0; }
.student-section + .student-section { margin-top:14px; }
.student-hero { background:var(--st-mint); }
.student-count { font-family:Spectral,Georgia,serif; font-size:44px; line-height:1; margin:12px 0 8px; color:var(--st-accent); }
.student-stats { display:flex; gap:18px; margin:16px 0; color:var(--st-soft); font-size:12px; }
.student-stats b { color:var(--st-ink); }
.student-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.student-button { border:1px solid var(--st-line); border-radius:11px; padding:10px 14px; min-height:44px; background:var(--st-card); color:var(--st-accent); cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; }
.student-button--primary { background:var(--st-accent); color:var(--st-card); border-color:var(--st-accent); }
body.dark .student-button--primary { color:#0d2116; }
.student-button:disabled { opacity:.5; cursor:default; }
.student-button:hover:not(:disabled) { filter:brightness(.96); }
.student-field { display:block; margin:16px 0; }
.student-field > span { display:block; font-size:12px; font-weight:600; color:var(--st-soft); margin-bottom:7px; }
.student-input { display:block; width:100%; max-width:100%; border:1px solid var(--st-line); border-radius:11px; background:var(--st-card); color:var(--st-ink); padding:12px; font-family:inherit; font-size:16px; line-height:1.5; }
textarea.student-input { min-height:112px; resize:vertical; }
.student-dialog :focus-visible, .student-teaching button:focus-visible, .student-launch:focus-visible { outline:3px solid var(--st-accent); outline-offset:3px; }
.student-bubble:focus-within { outline:2px solid var(--st-accent); outline-offset:3px; }
.student-bubble button:focus-visible { outline-offset:-3px; }
.student-error { color:var(--mb-danger,#b3463c); font-size:13px; line-height:1.5; margin-top:12px; }
.student-empty { margin:16px 0; padding:16px; border:1px dashed var(--st-line); border-radius:12px; font-size:13px; line-height:1.6; color:var(--st-soft); }
.student-exam { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 0; font-size:12px; color:var(--st-soft); }
.student-exam b { display:block; font-size:13px; color:var(--st-ink); }
.student-exam time { flex:none; font-family:'IBM Plex Mono',monospace; font-size:11px; }
.student-question { font-family:Spectral,Georgia,serif; font-size:23px; line-height:1.6; margin:16px 0 20px; white-space:pre-wrap; overflow-wrap:anywhere; }
.student-answer { padding:16px; background:var(--st-mint); border-radius:12px; font-size:14px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; margin-top:16px; }
.student-question p, .student-answer p { margin:0 0 10px; }
.student-question p:last-child, .student-answer p:last-child { margin-bottom:0; }
.student-question .katex-display, .student-answer .katex-display { overflow-x:auto; overflow-y:hidden; }
.student-progress { height:4px; border-radius:4px; background:var(--st-line); overflow:hidden; margin-bottom:18px; }
.student-progress i { height:100%; display:block; background:var(--st-accent); transition:width .2s; }
.student-source { display:block; color:var(--st-accent); font-size:12px; margin:10px 0; text-decoration:underline; text-underline-offset:3px; background:none; border:0; cursor:pointer; }
.student-review { margin:12px 0; border:1px solid var(--st-line); border-radius:12px; padding:12px; color:var(--st-soft); font-size:12px; line-height:1.6; }
.student-review summary { color:var(--st-accent); cursor:pointer; font-weight:600; }
.student-review ul { padding-left:18px; margin:8px 0; }
.student-review p { white-space:pre-wrap; overflow-wrap:anywhere; }
.student-followups { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.student-followups button { color:var(--st-accent); background:var(--st-mint); border:1px solid var(--st-line); font-size:11px; padding:7px 10px; border-radius:9px; cursor:pointer; min-height:34px; }
.student-note-tools { display:flex; align-items:center; gap:8px; padding:8px 16px; flex:none; border-bottom:1px solid var(--st-line); }
.student-note-tools button { display:flex; align-items:center; gap:5px; min-height:38px; border:1px solid var(--st-line); background:var(--st-card); border-radius:10px; padding:7px 10px; font-size:12px; color:var(--st-accent); cursor:pointer; }
.student-note-tools span { color:var(--st-soft); font-size:11px; margin-right:auto; }
.student-transcript { min-height:240px !important; font-family:'IBM Plex Mono',monospace; font-size:14px; }
.student-material-button { margin:6px 12px; font-size:11px; color:var(--st-accent); background:none; border:0; padding:6px 0; cursor:pointer; text-decoration:underline; }
.mb-body .student-dialog { width:min(760px,100vw); max-height:calc(var(--app-h,100dvh) - 12px); margin:0 auto; top:auto; bottom:max(0px,calc(100dvh - var(--app-top,0px) - var(--app-h,100dvh))); border-radius:24px 24px 0 0; }
.mb-body .student-dialog__body { max-height:none; }
.mb-body .student-note-tools, .mb-body .student-save-mobile,
.mb-body .student-dialog__head, .mb-body .student-dialog__body {
  padding-left:max(12px,calc(var(--safe-l) + 12px));
  padding-right:max(12px,calc(var(--safe-r) + 12px));
}
@media(max-width:600px) {
  .student-dialog { width:100%; max-height:calc(var(--app-h,100dvh) - 12px); margin:0; top:auto; bottom:max(0px,calc(100dvh - var(--app-top,0px) - var(--app-h,100dvh))); border-radius:24px 24px 0 0; }
  .student-dialog__head { padding:22px 20px 17px; }
  .student-dialog h2 { font-size:27px; }
  .student-dialog__body { padding:20px 20px calc(24px + env(safe-area-inset-bottom,0px)); max-height:calc(var(--app-h,100dvh) - 120px); }
  .student-grid { grid-template-columns:1fr; gap:14px; }
  .student-section { padding:17px; }
  .student-note-tools { padding:7px 12px; gap:6px; }
  .student-note-tools span { font-size:10px; }
}
@media(max-height:440px) {
  .student-dialog__head { padding:12px 20px; }
  .student-dialog h2 { font-size:23px; }
  .student-dialog__body { padding:14px 20px; }
}
.mb-body.app-tiny .student-dialog__head { padding:8px 16px; }
.mb-body.app-tiny .student-dialog__head .student-eyebrow { display:none; }
.mb-body.app-tiny .student-dialog h2 { font-size:21px; }
@media(prefers-reduced-motion:reduce) { .student-progress i { transition:none; } .student-bubble { animation:none; } }
:root {
  --note-color-ink: #22302a; --note-color-green: #176b47;
  --note-color-sky: #28618d; --note-color-rose: #9b4160; --note-color-amber: #85601c;
  --note-highlight-amber: #fde68a; --note-highlight-green: #bbf7d0;
  --note-highlight-rose: #fbcfe8; --note-highlight-sky: #bfdbfe;
}
.dark, [data-theme="dark"] {
  --note-color-ink: #e4eee7; --note-color-green: #78d5a6;
  --note-color-sky: #91c9f0; --note-color-rose: #f4a9c0; --note-color-amber: #eed18d;
  --note-highlight-amber: #59471c; --note-highlight-green: #214b36;
  --note-highlight-rose: #582a40; --note-highlight-sky: #244661;
}

/* Autosave and reconnect stay in the background on both clients. */
#sync-chip, #sync-dot, [data-student-sync] { display: none !important; }
.student-home:not(:has(> .student-continue:not([hidden]))) { display: none; }