/* Apostles — Atrium Light
   Warm-paper light theme: white surfaces, ink-navy text, liturgical-gold
   primary accent, soft pastel statuses.  Cards lift on hover.  Subtle
   shadows, never glossy. */

:root {
    /* ============================================================
       Theme tokens — change values here to recolor the entire app.
       Lower number = lighter / more subtle.
       ============================================================ */

    /* — Page surfaces — soft off-white page, all card surfaces (including
       inner sub-cards) stay pure white.  Differentiation comes from
       borders + shadows, not from grey tints stacked inside cards. — */
    --bg-base:       #FBFAF6;   /* warm paper canvas */
    --bg-base-grad:  none;
    --bg-panel:      #FFFFFF;
    --bg-elevated:   #FFFFFF;
    --bg-row:        #FFFFFF;
    --bg-overlay:    rgba(11, 11, 11, 0.45);

    /* — Translucent overlay layers (still useful for hover states) — */
    --surface-1:     rgba(40, 60, 122, 0.025);
    --surface-2:     rgba(40, 60, 122, 0.045);
    --surface-3:     rgba(40, 60, 122, 0.06);
    --surface-4:     rgba(40, 60, 122, 0.10);

    /* — Borders — warm hairline rules — */
    --border-subtle: #F1EFE7;
    --border-mid:    #E7E4DA;
    --border-strong: #D8D4C7;
    --border:        var(--border-mid);

    /* — Text — ink black primary, falling off in steps. — */
    --text-primary:   #16181D;
    --text-secondary: #3C4049;
    --text-tertiary:  #7C808C;
    --text-muted:     #A2A5AE;
    --text-faint:     #C7C9CE;
    --text-on-dark:   #FFFFFF;

    /* — Brand accent — fountain-pen blue (primary action). — */
    --accent:         #283C7A;
    --accent-hover:   #1C2C5E;
    --accent-strong:  #14224A;
    --accent-faint:   rgba(40, 60, 122, 0.06);
    --accent-soft:    rgba(40, 60, 122, 0.14);
    --accent-mid:     rgba(40, 60, 122, 0.28);
    --accent-strong-bg: rgba(40, 60, 122, 0.55);
    --accent-glow:    rgba(40, 60, 122, 0.35);
    --accent-grad:    linear-gradient(145deg, #2E4488 0%, #1C2C5E 100%);
    --accent-grad-hover: linear-gradient(145deg, #1C2C5E 0%, #14224A 100%);

    /* — Signature highlighter — citron. — */
    --marker:         #D8F23A;
    --marker-ink:     #2B3000;

    /* — Supplementary inkblue (secondary brand hue). — */
    --purple:         #283C7A;
    --purple-soft:    rgba(40, 60, 122, 0.10);
    --purple-mid:     rgba(40, 60, 122, 0.22);

    /* — Status semantics — stamp red / ink green / brass. — */
    --positive:       #3F7A4E;
    --positive-soft:  rgba(63, 122, 78, 0.10);
    --positive-mid:   rgba(63, 122, 78, 0.22);
    --warning:        #A8791C;
    --warning-soft:   rgba(168, 121, 28, 0.10);
    --warning-mid:    rgba(168, 121, 28, 0.22);
    --risk:           #C0412B;
    --risk-soft:      rgba(192, 65, 43, 0.10);
    --risk-mid:       rgba(192, 65, 43, 0.22);
    --info:           #283C7A;

    /* — Course color fallback. — */
    --course-fallback: #283C7A;

    /* — Geometry — Udacity uses 12px corners. — */
    --radius-sm:    0.5rem;
    --radius-md:    0.625rem;   /* 10px */
    --radius-lg:    0.75rem;    /* 12px — primary card radius */
    --radius-xl:    1rem;       /* 16px — hero card */
    --radius-pill:  999px;

    /* — Shadows — light, layered.  Mirrors Udacity's subtle elevation. — */
    --shadow-sm: 0 1px 2px rgba(11, 33, 90, 0.05),
                 0 1px 3px rgba(11, 33, 90, 0.04);
    --shadow:    0 4px 6px -1px rgba(11, 33, 90, 0.07),
                 0 2px 4px -2px rgba(11, 33, 90, 0.05);
    --shadow-lg: 0 12px 16px -4px rgba(11, 33, 90, 0.10),
                 0 4px 6px -2px rgba(11, 33, 90, 0.05);

    /* — Lift treatments (replaces the old lacquer trio). — */
    --lacquer-top:        none;
    --lacquer-top-strong: none;
    --lacquer-recess:     inset 0 0 0 1px var(--border-mid);
    --lacquer-rim:        0 0 0 1px var(--border-subtle);

    /* — Typography — Inter body, Plus Jakarta Sans display, Barlow Condensed
       for eyebrows + numerics. */
    --font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Fraunces', 'Archivo', -apple-system, serif;
    --font-eyebrow: 'JetBrains Mono', 'Archivo', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

    /* — Legacy aliases (don't add new code that uses these) — */
    --bg-dark: var(--bg-base);
    --bg-card: var(--bg-panel);
    --bg-card-solid: var(--bg-panel);
    --glass: var(--bg-panel);
    --glass-border: var(--border-mid);
    --accent-light: var(--accent-soft);
    --text: var(--text-primary);
    --text-light: var(--text-on-dark);
    --success: var(--positive);
    --danger: var(--risk);
    --radius: var(--radius-lg);
}

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

body {
    font-family: var(--font);
    background: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
}

/* =========================================================================
   LOGIN
   ========================================================================= */

.login-body {
    background: var(--bg-dark);
    color: var(--text-light);
    overflow-x: hidden;
}

.login-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 1rem;
}

.login-scene {
    position: relative;
    width: 100%;
    max-width: 440px;
}

/* Floating orbs */
.orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    pointer-events: none;
    will-change: transform;
}
.orb-1 {
    width: 300px; height: 300px;
    background: var(--accent);
    top: -80px; left: -60px;
    animation: drift 12s ease-in-out infinite alternate;
}
.orb-2 {
    width: 200px; height: 200px;
    background: #fd79a8;
    bottom: 10%; right: -40px;
    animation: drift 10s ease-in-out infinite alternate-reverse;
}
.orb-3 {
    width: 160px; height: 160px;
    background: #00cec9;
    top: 40%; left: 60%;
    animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(30px, -20px) scale(1.1); }
}

/* Glass card */
.login-card {
    position: relative;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 2.5rem 2rem 2rem;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}

.login-brand {
    text-align: center;
    margin-bottom: 2rem;
}
.brand-mark {
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: -2px;
    background: linear-gradient(135deg, #fff 0%, var(--accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.brand-tagline {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-top: 0.25rem;
}

/* Step indicator */
.steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 2rem;
}
.step {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.3);
    transition: all 0.3s ease;
}
.step.active {
    border-color: var(--accent);
    color: white;
    background: var(--accent);
    box-shadow: 0 0 16px var(--accent-glow);
}
.step.done {
    border-color: var(--success);
    background: var(--success);
    color: white;
}
.step-line {
    width: 40px;
    height: 2px;
    background: rgba(255,255,255,0.1);
    margin: 0 4px;
}

/* Step panels */
.step-panel {
    display: none;
    animation: fadeUp 0.3s ease;
}
.step-panel.active { display: block; }

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

.step-panel h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.step-sub {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

/* Inputs */
.field { position: relative; margin-bottom: 1.25rem; }

.input {
    width: 100%;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    color: white;
    font-size: 1rem;
    font-family: var(--font);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.input::placeholder { color: rgba(255, 255, 255, 0.3); }
.input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* University dropdown */
.uni-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #1e1837;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    max-height: 240px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: var(--shadow-lg);
}
.uni-dropdown.open { display: block; }

.uni-option {
    padding: 0.75rem 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.15s;
}
.uni-option:hover { background: rgba(255,255,255,0.06); }
.uni-option strong { font-size: 0.9rem; }
.uni-option span { color: var(--text-muted); font-size: 0.8rem; }
.uni-custom { border-top: 1px solid var(--glass-border); }
.uni-empty { color: var(--text-muted); justify-content: center; cursor: default; }
.uni-empty:hover { background: none; }

/* Populi school address field — subdomain input with fixed .populiweb.com suffix */
.populi-field { display: flex; align-items: stretch; }
.populi-sub-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    text-align: right;
}
.populi-suffix {
    display: flex;
    align-items: center;
    padding: 0 0.9rem;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.55);
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-left: none;
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}
.populi-field:focus-within .populi-suffix { border-color: var(--accent); }
.populi-hint {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: -0.6rem;
    margin-bottom: 1.1rem;
}

/* Buttons */
.btn-next, .btn-back, .btn-login {
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}
.btn-next {
    width: 100%;
    background: var(--accent);
    color: white;
    box-shadow: 0 4px 16px var(--accent-glow);
}
.btn-next:hover:not(:disabled) {
    background: #7c6ef0;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--accent-glow);
}
.btn-next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}
.btn-back {
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid rgba(255,255,255,0.1);
}
.btn-back:hover { border-color: rgba(255,255,255,0.25); color: white; }

.step-nav {
    display: flex;
    gap: 0.75rem;
}
.step-nav .btn-back { flex: 0 0 auto; }
.step-nav .btn-next { flex: 1; }

/* Spinner */
.btn-spinner {
    display: inline-block;
    width: 20px; height: 20px;
    border: 2.5px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Error message */
.login-error {
    color: var(--danger);
    font-size: 0.85rem;
    min-height: 1.25rem;
    margin-bottom: 0.75rem;
}

/* Done animation */
.done-anim {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    margin-bottom: 1rem;
    position: relative;
}
.pulse-dot {
    width: 16px; height: 16px;
    background: var(--success);
    border-radius: 50%;
    position: relative;
    z-index: 1;
}
.pulse-ring {
    position: absolute;
    width: 48px; height: 48px;
    border: 2px solid var(--success);
    border-radius: 50%;
    animation: pulse 1.5s ease-out infinite;
}
@keyframes pulse {
    from { transform: scale(0.5); opacity: 1; }
    to { transform: scale(1.4); opacity: 0; }
}

#step-done h2 { text-align: center; }
#step-done .step-sub { text-align: center; }

/* MFA pending step */
#step-mfa h2 { text-align: center; }
#step-mfa .step-sub { text-align: center; }
.mfa-prompt {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.5rem auto;
    width: 64px; height: 64px;
    position: relative;
}
.mfa-shield {
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: relative;
    animation: mfa-pulse 2s ease-in-out infinite;
}
@keyframes mfa-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.2); }
    50% { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
}
#step-mfa .btn-login {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
}

.login-footer {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.25);
    margin-top: 2rem;
    line-height: 1.5;
}

/* =========================================================================
   NAVBAR (dashboard)
   ========================================================================= */

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: var(--bg-dark);
    color: white;
    position: sticky;
    top: 0;
    z-index: 100;
}
.logo {
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    text-decoration: none;
    letter-spacing: -1px;
}
.nav-right { display: flex; align-items: center; gap: 1rem; }
.student-name { font-size: 0.85rem; opacity: 0.7; }
.btn-logout {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.2s;
}
.btn-logout:hover { color: var(--danger); }

/* =========================================================================
   CONTAINER / DASHBOARD
   ========================================================================= */

.container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.dashboard-header h1 { font-size: 1.6rem; font-weight: 700; }
.sync-status { display: flex; align-items: center; gap: 0.5rem; }

.badge {
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-complete { background: #d4edda; color: #155724; }
.badge-syncing { background: #fff3cd; color: #856404; }
.badge-error { background: #f8d7da; color: #721c24; }
.badge-never_synced, .badge-pending { background: #e2e3e5; color: #383d41; }

.btn-small {
    padding: 0.35rem 0.75rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-small:hover { background: #7c6ef0; }

/* Dashboard grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.card {
    background: white;
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
    border: 1px solid rgba(0,0,0,0.04);
}
.card h2 { margin-bottom: 0.75rem; font-size: 1.1rem; font-weight: 600; }

.dag-card { grid-column: 1 / -1; }

/* Nudges */
.nudge-list { list-style: none; }
.nudge {
    padding: 0.6rem 0.75rem;
    border-left: 3px solid #ddd;
    margin-bottom: 0.5rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: #fafbfc;
}
.nudge-high { border-left-color: var(--danger); }
.nudge-normal { border-left-color: var(--accent); }
.nudge-type { font-size: 0.65rem; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.nudge p { font-size: 0.85rem; color: #555; margin-top: 0.15rem; }

/* Courses */
.course-list { list-style: none; }
.course-list li {
    padding: 0.4rem 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}
.course-stats { color: var(--text-muted); font-size: 0.8rem; }

/* Deadlines */
.deadline-list { list-style: none; }
.deadline {
    padding: 0.4rem 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.9rem;
}
.deadline-date { font-weight: 600; font-size: 0.8rem; color: var(--accent); min-width: 80px; }
.deadline-course {
    background: #f0eeff;
    color: var(--accent);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}
.deadline-exam .deadline-date { color: var(--danger); }

.empty-state { color: var(--text-muted); font-style: italic; font-size: 0.9rem; }

/* =========================================================================
   CHAT WIDGET
   ========================================================================= */

.chat-widget {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1000;
    font-family: var(--font);
}
.chat-toggle {
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 0.7rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 20px var(--accent-glow);
    transition: all 0.2s;
}
.chat-toggle:hover { transform: translateY(-2px); box-shadow: 0 6px 24px var(--accent-glow); }
.chat-collapsed .chat-panel { display: none; }
.chat-collapsed .chat-toggle { display: block; }
.chat-widget:not(.chat-collapsed) .chat-toggle { display: none; }

.chat-panel {
    width: 380px;
    max-height: 520px;
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
}
.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 1rem;
    background: var(--bg-dark);
    color: white;
    font-size: 0.9rem;
}
.chat-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}
.chat-close:hover { color: white; }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    max-height: 360px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.chat-msg p { margin: 0; font-size: 0.85rem; line-height: 1.5; }
.chat-msg-user {
    align-self: flex-end;
    background: var(--accent);
    color: white;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm) var(--radius-sm) 2px var(--radius-sm);
    max-width: 85%;
}
.chat-msg-assistant {
    align-self: flex-start;
    background: #f4f4f7;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 2px;
    max-width: 85%;
}

.chat-input-form {
    display: flex;
    border-top: 1px solid #eee;
    padding: 0.4rem;
    gap: 0.4rem;
}
.chat-input-form input {
    flex: 1;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
    font-family: var(--font);
    outline: none;
    transition: border-color 0.2s;
}
.chat-input-form input:focus { border-color: var(--accent); }
.chat-input-form button {
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.8rem;
    font-family: var(--font);
    transition: background 0.2s;
}
.chat-input-form button:hover { background: #7c6ef0; }
.chat-input-form button:disabled { opacity: 0.5; cursor: not-allowed; }

/* =========================================================================
   TEAMS-STYLE LAYOUT
   ========================================================================= */

.teams-body {
    background: #1e1e2e;
    overflow: hidden;
    height: 100dvh;
}

.teams-main {
    max-width: none;
    padding: 0;
    margin: 0;
    height: calc(100dvh - 44px);
}

/* Top bar */
.teams-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    height: 44px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-subtle);
    color: white;
}
.teams-logo {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -1px;
    background: linear-gradient(135deg, #fff, var(--accent-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.teams-user {
    margin-left: auto;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}
.teams-signout {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
    text-decoration: none;
    transition: color 0.2s;
}
.teams-signout:hover { color: var(--danger); }

/* Main layout — sidebar + main panel as floating slate cards. */
.teams-layout {
    display: flex;
    height: 100%;
    gap: 14px;
    padding: 14px;
    background: var(--bg-base);
}

/* Sidebar — slate floating card. */
.teams-sidebar {
    width: 260px;
    min-width: 260px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.sidebar-header {
    padding: 1rem 1.25rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.3);
}

.agent-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0.5rem;
}

.agent-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    font-family: var(--font);
    margin-bottom: 2px;
}
.agent-item:hover {
    background: rgba(255,255,255,0.06);
    color: white;
}
.agent-item.active {
    background: var(--accent);
    color: white;
    box-shadow: 0 2px 12px var(--accent-glow);
}

.agent-icon {
    font-size: 1.3rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    flex-shrink: 0;
}
.agent-item.active .agent-icon {
    background: rgba(255,255,255,0.15);
}

.agent-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.agent-name {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
}
.agent-desc {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agent-item.active .agent-desc {
    color: rgba(255,255,255,0.7);
}

/* Alert section in sidebar */
.sidebar-alerts {
    border-top: 1px solid rgba(255,255,255,0.06);
    max-height: 250px;
    display: flex;
    flex-direction: column;
}
.alert-badge {
    background: #ff6b6b;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}
.alert-list {
    overflow-y: auto;
    flex: 1;
    padding: 0.25rem 0.5rem;
}
.alert-empty {
    color: rgba(255,255,255,0.25);
    font-size: 0.75rem;
    text-align: center;
    padding: 0.75rem;
}
.alert-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.45rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 2px;
}
.alert-item:hover { background: rgba(255,255,255,0.06); }
.alert-new { background: rgba(255,255,255,0.03); }
.alert-new .alert-title { color: white; font-weight: 600; }
.alert-icon { font-size: 0.7rem; margin-top: 2px; flex-shrink: 0; }
.alert-content { min-width: 0; }
.alert-title {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.alert-from {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.3);
    display: block;
    margin-top: 1px;
}

.sidebar-footer {
    padding: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-sync {
    flex: 1;
    padding: 0.45rem 0.75rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: rgba(255,255,255,0.6);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font);
    transition: all 0.2s;
}
.btn-sync:hover {
    background: rgba(255,255,255,0.12);
    color: white;
}
.sync-badge {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
}
.sync-complete { background: rgba(0,184,148,0.15); color: #00b894; }
.sync-syncing { background: rgba(255,234,167,0.15); color: #fdcb6e; }
.sync-error { background: rgba(255,107,107,0.15); color: #ff6b6b; }
.sync-never_synced, .sync-pending { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.4); }

/* Chat area — right-hand floating slate card. */
.teams-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    min-width: 0;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.chat-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}
.chat-agent-icon {
    font-size: 1.4rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    border-radius: 10px;
    color: white;
}
.chat-agent-meta { display: flex; flex-direction: column; }
.chat-agent-name { font-size: 0.95rem; font-weight: 600; color: white; }
.chat-agent-hint { font-size: 0.75rem; color: rgba(255,255,255,0.4); }

/* Chat thread */
.chat-thread {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.msg {
    display: flex;
    gap: 0.75rem;
    max-width: 75%;
    animation: fadeUp 0.2s ease;
}
.msg:has(.chart-embed),
.msg:has(.md-table-wrap),
.msg:has(.md-h2) {
    max-width: 90%;
}
.msg-agent { align-self: flex-start; }
.msg-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    color: white;
}
.msg-avatar-user {
    background: var(--accent);
    font-size: 0.8rem;
    font-weight: 700;
}

.msg-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.msg-sender {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.msg-body p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.06);
    padding: 0.6rem 0.85rem;
    border-radius: 2px 12px 12px 12px;
}
.msg-body p code {
    background: rgba(255,255,255,0.1);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.82rem;
}
.msg-user .msg-body p {
    background: var(--accent);
    color: white;
    border-radius: 12px 2px 12px 12px;
}
.msg-user .msg-sender { display: none; }

/* Typing indicator */
.typing-dots {
    display: flex;
    gap: 4px;
    padding: 0.7rem 0.85rem;
    background: rgba(255,255,255,0.06);
    border-radius: 2px 12px 12px 12px;
    width: fit-content;
}
.typing-dots span {
    width: 7px;
    height: 7px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* Markdown rendering in chat */
.msg-body .md-h2 {
    font-size: 1rem;
    font-weight: 700;
    color: white;
    margin: 0.6rem 0 0.3rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.msg-body .md-h3 {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent-light);
    margin: 0.5rem 0 0.2rem;
}
.msg-body .md-h4 {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin: 0.4rem 0 0.15rem;
}
.msg-body .md-spacer { height: 0.3rem; }
.msg-body .md-hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin: 0.5rem 0;
}
.msg-body .md-quote {
    border-left: 3px solid var(--accent);
    padding: 0.3rem 0.6rem;
    margin: 0.3rem 0;
    color: rgba(255,255,255,0.7);
    font-size: 0.82rem;
    background: rgba(108,92,231,0.08);
    border-radius: 0 6px 6px 0;
}
.msg-body .md-li {
    padding: 0.15rem 0 0.15rem 1rem;
    position: relative;
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
}
.msg-body .md-li::before {
    content: '';
    position: absolute;
    left: 0.2rem;
    top: 0.55rem;
    width: 5px;
    height: 5px;
    background: var(--accent-light);
    border-radius: 50%;
}
.msg-body .md-li .md-num { font-weight: 600; color: var(--accent-light); }
.msg-body .md-li:has(.md-num)::before { display: none; }

/* Tables */
.msg-body .md-table-wrap {
    overflow-x: auto;
    margin: 0.4rem 0;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
}
.msg-body .md-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.msg-body .md-table th {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.6);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    padding: 0.45rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.msg-body .md-table td {
    padding: 0.4rem 0.6rem;
    color: rgba(255,255,255,0.85);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.msg-body .md-table tr:last-child td { border-bottom: none; }
.msg-body .md-table tr:hover td { background: rgba(255,255,255,0.03); }

/* Markdown-rendered agent messages — remove default p bubble */
.msg-body-md p {
    background: none;
    padding: 0;
    border-radius: 0;
    margin: 0.15rem 0;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
}
.msg-body-md {
    background: rgba(255,255,255,0.04);
    padding: 0.6rem 0.85rem;
    border-radius: 2px 12px 12px 12px;
    max-width: 100%;
}
.msg-body-md > :first-child { margin-top: 0; }
.msg-body-md > .msg-sender { margin-bottom: 0.3rem; display: block; }

/* =========================================================================
   CALENDAR VIEW
   ========================================================================= */

.cal-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    overflow-y: auto;
    gap: 0.75rem;
    min-width: 0;
}
.cal-view > * {
    flex-shrink: 0;
}
.cal-view.cal-active {
    display: flex !important;
    flex-direction: column;
}

/* =========================================================================
   RESOLUTION MENU — alert click → action menu
   ========================================================================= */
.resolution-menu {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
}
.res-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
}
.res-panel {
    position: relative;
    background: #1e1e2e;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    width: min(440px, 90vw);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
    overflow: hidden;
}
.res-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    gap: 0.5rem;
}
.res-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
    flex: 1;
    line-height: 1.3;
}
.res-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.3rem;
    flex-shrink: 0;
}
.res-close:hover { color: white; }

.res-actions {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    gap: 4px;
}
.res-action {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
    transition: all 0.15s;
}
.res-action:hover {
    background: rgba(108,92,231,0.15);
    border-color: var(--accent);
    transform: translateX(2px);
}
.res-icon {
    font-size: 1rem;
    flex-shrink: 0;
}
.res-label {
    flex: 1;
}
.res-open_email { background: rgba(108,92,231,0.1); }
.res-click_link { background: rgba(0,184,148,0.08); }
.res-schedule_block { background: rgba(74,144,217,0.08); }
.res-mark_done { background: rgba(255,255,255,0.02); color: rgba(255,255,255,0.6); }

/* =========================================================================
   EMAIL MODAL — read + reply inline
   ========================================================================= */

/* Legacy Gmail modal — scoped to its ID so the rules don't bleed into the
   new cao-style overlay (which uses class .email-modal nested inside an
   .email-modal-overlay).  Without this scoping the cascade pinned the new
   modal to the viewport edges. */
#email-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
#email-modal .email-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}
#email-modal .email-modal-panel {
    position: relative;
    background: #1e1e2e;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    width: min(720px, 90vw);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.email-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.email-modal-from {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
}
.email-modal-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.4rem;
}
.email-modal-close:hover { color: white; }

.email-modal-subject {
    padding: 0.75rem 1rem 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}
.email-modal-meta {
    padding: 0 1rem 0.5rem;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.35);
    flex-shrink: 0;
}
.email-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    color: rgba(255,255,255,0.8);
    font-size: 0.85rem;
    line-height: 1.6;
    background: rgba(0,0,0,0.15);
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    white-space: pre-wrap;
    word-wrap: break-word;
}
.email-modal-att-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 1rem;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.email-modal-att-strip:empty { display: none; }
.email-modal-att-strip .att-label {
    margin-bottom: 0;
    margin-right: 0.3rem;
}
.att-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.3);
    margin-bottom: 0.4rem;
}
.att-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    margin: 0 0.4rem 0.4rem 0;
    font-size: 0.72rem;
    color: var(--accent-light);
    text-decoration: none;
    transition: all 0.15s;
}
.att-item:hover {
    background: rgba(108,92,231,0.25);
    border-color: var(--accent);
}
.att-icon { font-size: 1rem; }
.att-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-size { color: rgba(255,255,255,0.3); font-size: 0.65rem; }
.res-link-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.3rem 0.6rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    font-size: 0.72rem;
    color: var(--accent-light);
    text-decoration: none;
    transition: all 0.15s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.res-link-item:hover {
    background: rgba(108,92,231,0.2);
    color: white;
}

.email-modal-reply {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.email-modal-reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.email-modal-draft-btn {
    background: rgba(108,92,231,0.15);
    color: var(--accent-light);
    border: 1px solid rgba(108,92,231,0.3);
    border-radius: 5px;
    padding: 0.25rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font);
    transition: all 0.15s;
}
.email-modal-draft-btn:hover {
    background: var(--accent);
    color: white;
}

#email-reply-body {
    width: 100%;
    min-height: 100px;
    padding: 0.6rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(255,255,255,0.9);
    font-size: 0.85rem;
    font-family: var(--font);
    resize: vertical;
    outline: none;
}
#email-reply-body:focus { border-color: var(--accent); }

.email-modal-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.email-send-btn {
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
    transition: background 0.15s;
}
.email-send-btn:hover { background: #7c6ef0; }
.email-send-status {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}

/* =========================================================================
   SMART PLANNER
   ========================================================================= */

.pl-schedule {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.pl-loading {
    color: rgba(255,255,255,0.3);
    text-align: center;
    padding: 3rem;
    font-size: 0.85rem;
}

/* Summary bar */
.pl-summary {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}
.pl-stat {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.04);
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
}
.pl-stat-warn { color: #E8A838; }

/* Day columns */
.pl-days {
    display: flex;
    gap: 6px;
    flex: 1;
    overflow-x: auto;
    min-height: 0;
}
.pl-day {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    overflow: hidden;
    min-width: 0;
}
.pl-day-expanded {
    flex: 2;
    min-width: 220px;
}
.pl-day-condensed {
    flex: 1;
    min-width: 100px;
}
.pl-day-today {
    border: 1px solid rgba(108,92,231,0.3);
    background: rgba(108,92,231,0.05);
}

/* Day header */
.pl-day-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.pl-day-name {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.5);
}
.pl-day-today .pl-day-name { color: var(--accent-light); }
.pl-day-date {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
}
.pl-day-count {
    font-size: 0.55rem;
    font-weight: 700;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pl-day-free {
    font-size: 0.58rem;
    color: #00b894;
    margin-left: auto;
}
.pl-day-empty {
    color: rgba(255,255,255,0.15);
    font-size: 0.7rem;
    font-style: italic;
    padding: 1rem 0.6rem;
    text-align: center;
}

/* Time blocks */
.pl-day-blocks {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pl-block {
    display: flex;
    align-items: stretch;
    border-left: 3px solid;
    border-radius: 0 6px 6px 0;
    background: rgba(255,255,255,0.04);
    transition: background 0.1s;
    overflow: hidden;
}
.pl-block:hover { background: rgba(255,255,255,0.07); }

.pl-block-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.4rem;
    background: rgba(0,0,0,0.15);
    min-width: 42px;
}
.pl-time-start {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
}
.pl-time-end {
    font-size: 0.55rem;
    color: rgba(255,255,255,0.3);
}

.pl-block-body {
    flex: 1;
    padding: 0.3rem 0.5rem;
    min-width: 0;
}
.pl-block-title {
    font-size: 0.73rem;
    color: rgba(255,255,255,0.85);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}
.pl-block-meta {
    display: flex;
    gap: 0.3rem;
    margin-top: 2px;
    font-size: 0.58rem;
    color: rgba(255,255,255,0.35);
    align-items: center;
}
.pl-course {
    font-weight: 600;
    background: rgba(108,92,231,0.15);
    color: var(--accent-light);
    padding: 0 0.2rem;
    border-radius: 2px;
}
.pl-quick {
    font-weight: 600;
    background: rgba(0,184,148,0.15);
    color: #00b894;
    padding: 0 0.2rem;
    border-radius: 2px;
}
.pl-open {
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--accent-light);
    text-decoration: none;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    background: rgba(108,92,231,0.08);
    transition: all 0.15s;
}
.pl-open:hover { background: var(--accent); color: white; }

/* Condensed pills (future days) */
.pl-day-pills {
    padding: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.pl-pill {
    font-size: 0.58rem;
    font-weight: 500;
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* DEPRECATED — keep for backward compat until full cleanup */
.kb-board {
    flex: 1;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    min-height: 0;
}

/* Column */
.kb-col {
    flex: 1;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    overflow: hidden;
    transition: background 0.15s;
}
.kb-col-dragover {
    background: rgba(108,92,231,0.1);
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
}

.kb-col-head {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.6rem;
    border-top: 3px solid;
    flex-shrink: 0;
}
.kb-col-icon { font-size: 0.75rem; }
.kb-col-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.5);
}
.kb-col-count {
    font-size: 0.55rem;
    font-weight: 700;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

.kb-col-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 60px;
}
.kb-col-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}
.kb-empty-msg {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.15);
    font-style: italic;
}

/* Card */
.kb-card {
    background: rgba(255,255,255,0.04);
    border-left: 3px solid;
    border-radius: 0 6px 6px 0;
    padding: 0.4rem 0.5rem;
    cursor: grab;
    transition: all 0.15s;
}
.kb-card:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.kb-card:active { cursor: grabbing; }
.kb-dragging { opacity: 0.4; }

.kb-c-top {
    display: flex;
    gap: 0.35rem;
    align-items: flex-start;
}
.kb-c-icon { font-size: 0.65rem; margin-top: 1px; flex-shrink: 0; }
.kb-c-title {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kb-c-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.25rem;
    align-items: center;
}
.kb-c-due {
    font-size: 0.58rem;
    color: rgba(255,255,255,0.35);
}
.kb-c-course {
    font-size: 0.55rem;
    font-weight: 600;
    background: rgba(108,92,231,0.15);
    color: var(--accent-light);
    padding: 0 0.2rem;
    border-radius: 2px;
}
.kb-c-amount {
    font-size: 0.58rem;
    font-weight: 600;
    color: #00b894;
}
.kb-c-open {
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--accent-light);
    text-decoration: none;
    padding: 0.1rem 0.3rem;
    background: rgba(108,92,231,0.12);
    border-radius: 3px;
    margin-left: auto;
    transition: all 0.15s;
}
.kb-c-open:hover { background: var(--accent); color: white; }

/* Week strip */
.kb-strip {
    display: flex;
    gap: 2px;
    padding: 0.5rem 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.kb-s-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.3rem 0;
    border-radius: 6px;
    position: relative;
}
.kb-s-today {
    background: rgba(108,92,231,0.15);
    border: 1px solid rgba(108,92,231,0.3);
}
.kb-s-name {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.5px;
}
.kb-s-today .kb-s-name { color: var(--accent-light); }
.kb-s-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255,255,255,0.5);
}
.kb-s-today .kb-s-num { color: white; font-weight: 700; }
.kb-s-dot {
    width: 5px;
    height: 5px;
    background: var(--accent);
    border-radius: 50%;
    margin-top: 2px;
}
.kb-s-active .kb-s-num { color: rgba(255,255,255,0.8); }

/* Calendar chat thread */
.cal-chat-thread {
    flex: 0 1 auto;
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.4rem 0;
}
.cal-chat-msg {
    font-size: 0.8rem;
    line-height: 1.5;
    padding: 0.4rem 0.65rem;
    border-radius: 8px;
    max-width: 90%;
}
.cal-chat-msg p { margin: 0; }
.cal-chat-user {
    align-self: flex-end;
    background: var(--accent);
    color: white;
    border-radius: 8px 8px 2px 8px;
}
.cal-chat-agent {
    align-self: flex-start;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.85);
    border-radius: 8px 8px 8px 2px;
}

/* Mini chat bar at bottom of calendar */
.cal-chat-mini {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 0.5rem;
    flex-shrink: 0;
}
.cal-chat-mini form {
    display: flex;
    gap: 0.4rem;
}
.cal-chat-mini input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: white;
    font-size: 0.82rem;
    font-family: var(--font);
    outline: none;
    transition: border-color 0.2s;
}
.cal-chat-mini input::placeholder { color: rgba(255,255,255,0.25); }
.cal-chat-mini input:focus { border-color: var(--accent); }
.cal-chat-send {
    width: 34px;
    height: 34px;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.cal-chat-send:hover { background: #7c6ef0; }

/* =========================================================================
   PHOSPHOR ICONS — duotone, sized per context via font-size
   ========================================================================= */
[class^="ph-"], [class*=" ph-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Sidebar agent icons */
.agent-icon i {
    font-size: 20px;
    color: var(--accent-light);
}
.agent-item.active .agent-icon i {
    color: white;
}

/* Chat top bar icon */
.chat-agent-icon i {
    font-size: 24px;
    color: white;
}

/* Message avatars */
.msg-avatar i {
    font-size: 18px;
    color: var(--accent-light);
}
.msg-avatar-user { font-size: 0.85rem; }

/* Alert icons in sidebar */
.alert-icon i {
    font-size: 16px;
}
.alert-critical .alert-icon i { color: #ff6b6b; }
.alert-high .alert-icon i { color: #E8A838; }
.alert-normal .alert-icon i { color: var(--course-fallback); }
.alert-low .alert-icon i { color: rgba(255,255,255,0.4); }

/* Resolution menu icons */
.res-icon i {
    font-size: 20px;
    color: var(--accent-light);
}
.res-mark_done .res-icon i { color: #00b894; }
.res-click_link .res-icon i { color: var(--course-fallback); }

/* Planner type icon */
.pl-type-icon {
    font-size: 13px !important;
    margin-right: 4px;
    vertical-align: -2px;
}

/* Quick win zap icon */
.pl-quick i {
    font-size: 10px;
    margin-right: 2px;
}

/* Open link icon */
.pl-open i {
    font-size: 13px;
}

/* Resolve button in briefing */
.briefing-resolve {
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 0.15rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    margin-left: 0.4rem;
    font-family: var(--font);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.15s;
    vertical-align: middle;
}
.briefing-resolve:hover {
    background: #7c6ef0;
    transform: translateY(-1px);
}


/* Links in chat */
.msg-body .gmail-link, .msg-body .ext-link {
    color: var(--accent-light);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid rgba(162,155,254,0.3);
    transition: all 0.15s;
}
.msg-body .gmail-link:hover, .msg-body .ext-link:hover {
    color: white;
    border-bottom-color: white;
}
.msg-body .gmail-link::before {
    content: '\2709 ';
}

/* Chart embeds in chat */
.chart-embed {
    margin: 0.5rem 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: #1e1e2e;
}
.chart-embed .chart-title {
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.chart-embed iframe {
    width: 100%;
    height: 350px;
    border: none;
    display: block;
}
.msg-body .chart-embed {
    min-width: 450px;
}

/* Compose */
.chat-compose {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}
.chat-compose input {
    flex: 1;
    padding: 0.7rem 1rem;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: white;
    font-size: 0.9rem;
    font-family: var(--font);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.chat-compose input::placeholder { color: rgba(255,255,255,0.25); }
.chat-compose input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.chat-compose button {
    width: 42px;
    height: 42px;
    background: var(--accent);
    border: none;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.chat-compose button:hover {
    background: #7c6ef0;
    transform: translateY(-1px);
}
.chat-compose button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 640px) {
    .login-card { padding: 2rem 1.25rem 1.5rem; border-radius: 20px; }
    .brand-mark { font-size: 2.2rem; }

    .teams-sidebar {
        width: 60px;
        min-width: 60px;
    }
    .sidebar-header, .agent-desc, .sidebar-footer span { display: none; }
    .agent-item { justify-content: center; padding: 0.6rem; }
    .agent-info { display: none; }
    .agent-icon { width: 40px; height: 40px; font-size: 1.2rem; }
    .btn-sync { font-size: 0; width: 40px; padding: 0.5rem; }
    .btn-sync::before { content: '\21BB'; font-size: 1rem; }
    .msg { max-width: 90%; }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .login-card { padding: 2.5rem 2rem; }
    .teams-sidebar { width: 220px; min-width: 220px; }
}

/* ─── Brightspace Agent Panel ──────────────────────────────────────────────── */

.brightspace-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--bg-base);
}

/* Course cards bar */
.brightspace-courses-bar {
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-subtle);
    padding: 12px 16px 10px;
}

.brightspace-crawl-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1a1a2e;
    border: 1px solid #2a3a5a;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 12px;
    color: #6a8acc;
    margin-bottom: 10px;
}

.brightspace-course-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.brightspace-course-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #13112a;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.brightspace-course-card:hover {
    background: #1a1628;
    border-color: #2e2e5a;
}

.brightspace-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.brightspace-card-body {
    flex: 1;
    min-width: 0;
}

.brightspace-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #d0d0f0;
    line-height: 1.3;
    margin-bottom: 2px;
}

.brightspace-card-code {
    font-size: 11px;
    color: #5a6a9a;
    margin-bottom: 6px;
}

.brightspace-card-description {
    font-size: 12px;
    color: #7a7aaa;
    line-height: 1.5;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.brightspace-card-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.brightspace-card-stats {
    font-size: 11px;
    color: #4a5a7a;
}

.brightspace-card-due {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #e07030;
}

.brightspace-card-chevron {
    flex-shrink: 0;
    color: #2e2e5a;
    font-size: 14px;
    padding-top: 2px;
    transition: color 0.15s;
}
.brightspace-course-card:hover .brightspace-card-chevron { color: #6a6aaa; }

/* Brightspace workspace — tree + resource panel */
.brightspace-workspace {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.brightspace-tree {
    width: 280px;
    min-width: 220px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-subtle);
    overflow-y: auto;
    background: #0d0b1e;
}

/* Narrow viewports — stack tree on top, scroll the panel into view on
   assignment click via the .panel-active modifier added by JS. */
@media (max-width: 900px) {
    .brightspace-workspace {
        flex-direction: column;
        overflow-y: auto;
    }
    .brightspace-tree {
        width: 100%;
        min-width: 0;
        max-height: 45vh;
        flex-shrink: 0;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
        position: sticky;
        top: 0;
        z-index: 5;
    }
    .brightspace-resource-panel {
        min-height: 60vh;
    }
}

.brightspace-tree-header {
    padding: 12px 14px 10px;
    border-left: 3px solid var(--course-fallback);
    margin: 10px 10px 6px;
    background: #13112a;
    border-radius: 6px;
}
.brightspace-tree-course-title {
    font-size: 13px;
    font-weight: 600;
    color: #d0d0f0;
}
.brightspace-tree-course-meta {
    font-size: 11px;
    color: #5a5a8a;
    margin-top: 2px;
}

/* Module accordion */
.brightspace-module { border-bottom: 1px solid #13122a; }
.brightspace-module-title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #8a8aaa;
    cursor: pointer;
    user-select: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.brightspace-module-title:hover { color: #b0b0d0; background: #13122a; }

.brightspace-caret {
    font-size: 12px;
    transition: transform 0.15s;
    flex-shrink: 0;
}
.brightspace-module-open .brightspace-caret { transform: rotate(90deg); }

.brightspace-module-assignments { display: none; }
.brightspace-module-open .brightspace-module-assignments { display: block; }

.brightspace-module-locked .brightspace-module-title { color: #444; cursor: default; }
.brightspace-module-locked .brightspace-module-title:hover { background: none; }

.brightspace-assignment {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 14px 7px 28px;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background 0.1s, border-color 0.1s;
}
.brightspace-assignment:hover { background: #1a1628; border-left-color: #3a3a6a; }
.brightspace-assignment-active { background: #1e1c38 !important; border-left-color: #5a6ae0 !important; }

.brightspace-asgn-row-top {
    display: flex; align-items: center; gap: 6px;
    min-width: 0;
}
.brightspace-asgn-title { font-size: 12px; color: #c0c0e0; line-height: 1.3; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.brightspace-asgn-meta { display: flex; gap: 8px; font-size: 11px; color: #555; padding-left: 16px; }
.brightspace-asgn-due { color: #c06030; }
.brightspace-asgn-pts { color: #50a050; }

/* RAG-readiness dot — at a glance, can the student chat with this? */
.brightspace-asgn-rag {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0; cursor: help;
}
.brightspace-asgn-rag.rag-real    { background: var(--positive); box-shadow: 0 0 6px rgba(110,231,183,0.4); }
.brightspace-asgn-rag.rag-synth   { background: var(--warning); box-shadow: 0 0 4px rgba(252,211,77,0.3); }
.brightspace-asgn-rag.rag-empty   { background: #555; }
.brightspace-asgn-rag.rag-pending { background: #2a2a3a; border: 1px dashed #444; }

/* Grade badge — surfaces the student's score percentage. */
.brightspace-asgn-grade {
    font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: 999px;
    flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.brightspace-asgn-grade.rag-grade-a    { background: rgba(110,231,183,0.18); color: var(--positive); }
.brightspace-asgn-grade.rag-grade-b    { background: rgba(155,135,245,0.18); color: var(--accent-strong); }
.brightspace-asgn-grade.rag-grade-c    { background: rgba(252,211,77,0.18);  color: var(--warning); }
.brightspace-asgn-grade.rag-grade-low  { background: rgba(248,113,113,0.18); color: var(--risk); }

/* Concept count chip — small hint of how rich the extraction is. */
.brightspace-asgn-concepts {
    color: var(--accent-strong);
    font-variant-numeric: tabular-nums;
}

.brightspace-no-items { padding: 6px 14px 6px 28px; font-size: 11px; color: #444; font-style: italic; }

/* Module-attached learning material (PDFs, pages, lecture notes, links).
   Visually distinct from assignments — flatter row, file icon, no due-date.
   Click opens an inline drawer with the extracted content. */
.brightspace-resource {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 22px;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background 80ms ease;
    font-size: 12px;
    color: #b8b0d4;
}
.brightspace-resource:hover { background: #1a1628; border-left-color: #3a3a6a; color: #d8d0f4; }
.brightspace-resource.open { background: #1e1c38; border-left-color: #5a6ae0; color: #ffffff; }
.brightspace-res-icon { font-size: 14px; color: #7a72a5; flex: none; }
.brightspace-resource-page  .brightspace-res-icon { color: var(--info); }
.brightspace-resource-file  .brightspace-res-icon { color: var(--risk); }
.brightspace-resource-link  .brightspace-res-icon { color: #c2a8ff; }
.brightspace-res-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brightspace-res-status {
    width: 6px; height: 6px; border-radius: 50%; flex: none;
}
.brightspace-res-status.res-ready   { background: var(--positive); box-shadow: 0 0 4px rgba(111, 220, 140, 0.5); }
.brightspace-res-status.res-pending { background: #5a5a7a; }
.brightspace-res-status.res-error   { background: #c05050; }

.brightspace-tree-loading { padding: 24px; text-align: center; color: #555; font-size: 13px; }

/* Resource panel */
.brightspace-resource-panel {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: var(--bg-base);
}

.brightspace-resource-empty, .brightspace-no-resources {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 180px;
    color: #333;
    font-size: 13px;
    text-align: center;
    gap: 10px;
}
.brightspace-resource-empty i, .brightspace-no-resources i { font-size: 32px; }

.brightspace-resource-header {
    padding: 16px 20px 10px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.brightspace-resource-title {
    font-size: 15px;
    font-weight: 600;
    color: #d0d0f0;
    margin-bottom: 6px;
}
.brightspace-resource-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #6a6a9a;
    align-items: center;
}
.brightspace-resource-open {
    color: var(--course-fallback);
    text-decoration: none;
    font-size: 11px;
}
.brightspace-resource-open:hover { text-decoration: underline; }

.brightspace-resource-description {
    padding: 12px 20px;
    font-size: 13px;
    color: #8a8aaa;
    line-height: 1.6;
    border-bottom: 1px solid #1a1a3a;
    max-height: 120px;
    overflow-y: auto;
}

/* Resource list */
.brightspace-resource-list {
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.brightspace-resource-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    background: #13112a;
    border: 1px solid var(--border-subtle);
    transition: background 0.1s;
}
.brightspace-resource-item:hover { background: #1a1628; }
.brightspace-resource-active { background: #1e1c38 !important; border-color: #3a3a7a !important; }

.brightspace-resource-icon { font-size: 18px; flex-shrink: 0; }
.brightspace-resource-item-meta { flex: 1; min-width: 0; }
.brightspace-resource-name {
    display: block;
    font-size: 13px;
    color: #c0c0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brightspace-resource-size { font-size: 11px; color: #555; }
.brightspace-resource-type-badge {
    font-size: 10px;
    background: var(--border-subtle);
    color: #6a6a9a;
    border-radius: 4px;
    padding: 2px 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

/* Inline resource viewer */
.brightspace-viewer {
    flex: 1;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
}
.brightspace-iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: #fff;
}
.brightspace-iframe-video { min-height: 320px; aspect-ratio: 16/9; height: auto; }
.brightspace-img { max-width: 100%; border-radius: 6px; border: 1px solid var(--border-subtle); }
.brightspace-resource-link-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px;
    color: #6a6a9a;
    text-align: center;
    font-size: 13px;
}
.brightspace-open-link {
    color: var(--course-fallback);
    text-decoration: none;
    font-size: 13px;
    border: 1px solid #2a4a8a;
    padding: 7px 16px;
    border-radius: 6px;
}
.brightspace-open-link:hover { background: #1a2a4a; }

.brightspace-resource-loading {
    padding: 32px;
    text-align: center;
    color: #555;
    font-size: 13px;
}

/* Brightspace chat strip */
.brightspace-chat-strip {
    flex-shrink: 0;
    border-top: 1px solid var(--border-subtle);
    background: #0d0b1e;
}
.brightspace-chat-thread {
    max-height: 120px;
    overflow-y: auto;
    padding: 6px 14px 0;
}
.brightspace-chat-msg {
    font-size: 12px;
    padding: 4px 0;
    line-height: 1.4;
}
.brightspace-chat-user { color: #8080c0; text-align: right; }
.brightspace-chat-agent { color: #a0a0d0; }
.brightspace-chat-form {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
}
.brightspace-chat-form input {
    flex: 1;
    background: #13112a;
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 7px 14px;
    color: #d0d0f0;
    font-size: 13px;
    outline: none;
}
.brightspace-chat-form input:focus { border-color: #2a2a6a; }

.brightspace-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    color: #444;
    font-size: 13px;
    text-align: center;
    width: 100%;
}
.brightspace-placeholder i { font-size: 24px; }

/* Spinner animation */
@keyframes brightspace-spin-anim { to { transform: rotate(360deg); } }
.brightspace-spin { display: inline-block; animation: brightspace-spin-anim 1s linear infinite; }



/* ─── Brightspace Connect Form ─────────────────────────────────────────────────── */
.brightspace-connect-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 24px;
    max-width: 520px;
    width: 100%;
}
.brightspace-connect-icon { font-size: 32px; color: var(--course-fallback); margin-bottom: 10px; }
.brightspace-connect-title { font-size: 16px; font-weight: 600; color: #d0d0f0; margin: 0 0 8px; }
.brightspace-connect-desc { font-size: 13px; color: #6a6a9a; text-align: center; line-height: 1.6; margin-bottom: 16px; }
.brightspace-connect-steps {
    background: #13112a;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 12px 16px;
    width: 100%;
    margin-bottom: 16px;
}
.brightspace-connect-step { font-size: 12px; color: #8a8aaa; padding: 4px 0; }
.brightspace-connect-step strong { color: #c0c0e0; }
.brightspace-connect-inputs { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.brightspace-connect-input {
    background: #13112a;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 10px 14px;
    color: #d0d0f0;
    font-size: 13px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.brightspace-connect-input:focus { border-color: var(--course-fallback); }
.brightspace-connect-btn {
    background: var(--course-fallback);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    margin-top: 4px;
}
.brightspace-connect-btn:hover { background: #3a7ec9; }
.brightspace-connect-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════════════════
   Email agent UI — ported from cao-agent-platform.
   Provides: modal email-reader + reply UI, topbar account dropdown,
   sidebar email badge, briefing progress bar, and clickable email rows.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Topbar account dropdown ─────────────────────────────────────────────── */
.topbar-account {
    margin-left: auto;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 8px;
    transition: background 0.15s;
}
.topbar-account:hover { background: rgba(255, 255, 255, 0.06); }
.account-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 300px;
    background: #151a24;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    z-index: 100;
    overflow: hidden;
}
.account-menu.open { display: block; animation: fadeUp 0.15s ease; }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.account-menu-header {
    padding: 12px 16px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.3);
}
.account-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; transition: background 0.1s;
}
.account-menu-item:hover { background: rgba(255, 255, 255, 0.04); }
.account-menu-item-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(155, 135, 245, 0.15);
    color: #9b87f5;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; flex-shrink: 0;
}
.account-menu-item-connected .account-menu-item-icon {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
}
.account-menu-item-info { display: flex; flex-direction: column; min-width: 0; }
.account-menu-item-label {
    font-size: 0.82rem; font-weight: 600; color: rgba(255, 255, 255, 0.85);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-menu-item-email {
    font-size: 0.72rem; color: rgba(255, 255, 255, 0.35);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-menu-item-biz {
    font-size: 0.68rem; color: #9b87f5; opacity: 0.7;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-menu-item-status {
    margin-left: auto; font-size: 0.65rem; font-weight: 600;
    padding: 2px 8px; border-radius: 10px; flex-shrink: 0;
}
.account-menu-item-status.connected   { background: rgba(52, 211, 153, 0.15); color: #34d399; }
.account-menu-item-status.disconnected { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.account-menu-item-disconnect {
    background: rgba(248, 113, 113, 0.10);
    border: 1px solid rgba(248, 113, 113, 0.25);
    color: #f87171; cursor: pointer;
    width: 22px; height: 22px; padding: 0; margin-left: 8px;
    font-size: 0.78rem; line-height: 1; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.account-menu-item-disconnect:hover {
    background: rgba(248, 113, 113, 0.30); border-color: #f87171; color: #fff;
}
.account-menu-add-group { display: flex; flex-direction: column; }
.account-menu-add {
    display: block; padding: 8px 16px; color: #9b87f5;
    text-decoration: none; font-size: 0.82rem; font-weight: 600;
    transition: background 0.1s;
}
.account-menu-add:hover { background: rgba(155, 135, 245, 0.08); }
.account-menu-add-outlook { color: #4da6ff; }
.account-menu-add-outlook:hover { background: rgba(0, 120, 212, 0.1); }
.account-menu-divider { height: 1px; background: rgba(255, 255, 255, 0.06); margin: 4px 0; }
.account-menu-signout {
    display: block; padding: 10px 16px; color: rgba(255, 255, 255, 0.4);
    text-decoration: none; font-size: 0.78rem; transition: all 0.15s;
}
.account-menu-signout:hover { color: #f87171; background: rgba(248, 113, 113, 0.06); }
.account-menu-empty {
    padding: 10px 16px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.25);
}

/* ── Sidebar agent badge (unread/urgent count) ───────────────────────────── */
.agent-badge {
    margin-left: auto;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: #f87171; color: white;
    font-size: 0.65rem; font-weight: 700;
    border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ── Inbox briefing — staged progress ────────────────────────────────────── */
.email-progress {
    display: flex; flex-direction: column; gap: 0.5rem;
    width: min(420px, 100%);
}
.email-progress-label {
    font-size: 0.85rem; color: rgba(255, 255, 255, 0.7);
    font-style: italic; min-height: 1.1em;
    transition: color 0.2s ease;
}
.email-progress-bar {
    width: 100%; height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px; overflow: hidden;
}
.email-progress-fill {
    height: 100%; width: 2%;
    background: linear-gradient(90deg, #f47a7a, #f0a500);
    border-radius: 2px; transition: width 0.4s ease;
}

/* ── Clickable email rows in briefing ────────────────────────────────────── */
.email-row-clickable {
    cursor: pointer;
    padding: 6px 8px; margin: 2px -8px;
    border-radius: 8px; transition: background 0.15s;
}
.email-row-clickable:hover { background: rgba(255, 255, 255, 0.06); }

/* ── Email modal — scoped under .email-modal-overlay so the legacy Gmail
   #email-modal CSS at the top of this file (position:fixed; inset:0; etc.)
   does not bleed into the new cao-ported modal. ─────────────────────────── */
.email-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.6); z-index: 9999;
    align-items: center; justify-content: center;
    padding: 1rem;
}
.email-modal-overlay.open { display: flex; }
.email-modal-overlay .email-modal {
    position: relative; inset: auto;       /* override any cascading position from #email-modal */
    background: #1e1e2e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    width: 100%; max-width: 720px; max-height: 88vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.email-modal-overlay .email-modal-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
    background: var(--accent-faint);
}
.email-modal-overlay .email-modal-meta {
    flex: 1; min-width: 0;
    padding: 0;
}
.email-modal-overlay .email-modal-subject {
    padding: 0;
    font-size: 1.05rem; font-weight: 700; color: white;
    margin-bottom: 0.4rem;
    line-height: 1.4;
    white-space: normal; overflow: visible; text-overflow: clip;
    word-break: break-word;
}
.email-modal-overlay .email-modal-from {
    padding: 0;
    font-size: 0.85rem; color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.15rem;
}
.email-modal-overlay .email-modal-date {
    font-size: 0.78rem; color: rgba(255, 255, 255, 0.4);
}
.email-modal-overlay .email-modal-close {
    background: none; border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.2rem; cursor: pointer;
    padding: 4px 10px; border-radius: 6px;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}
.email-modal-overlay .email-modal-close:hover {
    color: white; background: rgba(255, 255, 255, 0.08);
}
.email-modal-overlay .email-modal-body {
    padding: 1.25rem 1.5rem;
    font-size: 0.9rem; line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    overflow-y: auto; flex: 1;
    white-space: normal;
    word-break: break-word;
    background: rgba(0, 0, 0, 0.15);
    border: 0;
}
.email-modal-overlay .email-modal-body iframe {
    width: 100%; min-height: 320px; border: 0;
    background: white; border-radius: 8px;
}
.email-body-iframe {
    display: block;
    width: 100%;
    min-height: 320px;
    height: 320px;
    border: 0;
    background: #fafafa;
    border-radius: 10px;
}
.email-body-text {
    font-size: 0.92rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
    white-space: pre-wrap;
    word-break: break-word;
}
.email-modal-overlay .email-modal-reply {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: 1rem 1.5rem 1.25rem;
    flex-shrink: 0;
    display: flex; flex-direction: column; gap: 0.7rem;
    background: rgba(0, 0, 0, 0.2);
}
.email-modal-overlay .email-reply-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 0;
}
.email-modal-overlay .email-reply-label {
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.45);
}
.email-modal-overlay .email-draft-btn {
    background: rgba(155, 135, 245, 0.12);
    border: 1px solid rgba(155, 135, 245, 0.3);
    color: var(--accent-strong);
    font-size: 0.78rem; font-weight: 600;
    padding: 6px 14px; border-radius: 6px;
    cursor: pointer; font-family: inherit;
    transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.email-modal-overlay .email-draft-btn:hover {
    background: rgba(155, 135, 245, 0.25);
    color: white;
}
.email-modal-overlay .email-draft-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.email-modal-overlay .email-reply-textarea {
    display: block;
    width: 100%; box-sizing: border-box;
    min-height: 110px; max-height: 220px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px; color: white;
    font-family: inherit; font-size: 0.9rem; line-height: 1.55;
    padding: 0.75rem 0.9rem; resize: vertical; outline: none;
    transition: border-color 0.15s;
}
.email-modal-overlay .email-reply-textarea:focus {
    border-color: rgba(155, 135, 245, 0.55);
}
.email-modal-overlay .email-reply-actions {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 1rem;
}
.email-modal-overlay .email-send-btn {
    background: var(--accent); color: white; border: none;
    border-radius: 8px; padding: 9px 26px;
    font-size: 0.9rem; font-weight: 700; font-family: inherit;
    cursor: pointer; transition: opacity 0.15s, background 0.15s;
}
.email-modal-overlay .email-send-btn:hover { background: var(--accent-hover); }
.email-modal-overlay .email-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.email-modal-overlay .email-send-status {
    font-size: 0.8rem; color: rgba(255, 255, 255, 0.55);
}
.email-modal-overlay .email-send-status.success { color: #34d399; }
.email-modal-overlay .email-send-status.error   { color: #f87171; }

/* ── Brightspace / LMS Knowledge panel — concept cloud + material summaries
   from the Qwen-powered extractor. ─────────────────────────────────────── */
.brightspace-knowledge {
    background: rgba(124, 92, 255, 0.04);
    border: 1px solid var(--accent-soft);
    border-radius: 12px;
    padding: 0.85rem 1rem 1rem;
    margin: 0 0 1rem;
}
.brightspace-knowledge .bk-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
}
.brightspace-knowledge .bk-title {
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--accent-strong);
}
.brightspace-knowledge .bk-extract-btn {
    background: var(--accent-soft);
    border: 1px solid var(--accent-glow);
    color: #d6c8ff; font-size: 0.74rem; font-weight: 600;
    padding: 5px 12px; border-radius: 6px;
    cursor: pointer; font-family: inherit;
    transition: background 0.15s;
}
.brightspace-knowledge .bk-extract-btn:hover {
    background: var(--accent-mid);
}
.brightspace-knowledge .bk-extract-btn:disabled {
    opacity: 0.6; cursor: not-allowed;
}
.brightspace-knowledge .bk-empty {
    font-size: 0.82rem; color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    padding: 0.5rem 0;
}
.brightspace-knowledge .bk-section-label {
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
    margin: 0.85rem 0 0.4rem;
}
.brightspace-knowledge .bk-concept-cloud {
    display: flex; flex-wrap: wrap; gap: 6px;
    align-items: baseline;
}
.brightspace-knowledge .bk-chip {
    background: var(--accent-faint);
    border: 1px solid var(--accent-mid);
    color: #c9b9ff;
    padding: 3px 9px; border-radius: 999px;
    font-size: 0.78rem; line-height: 1.3;
    cursor: default; white-space: nowrap;
    transition: background 0.15s;
}
.brightspace-knowledge .bk-chip:hover {
    background: var(--accent-soft);
}
.brightspace-knowledge .bk-chip-count {
    margin-left: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    padding: 0 5px; border-radius: 6px;
    font-size: 0.62em;
}
.brightspace-knowledge .bk-materials {
    display: flex; flex-direction: column; gap: 8px;
}
.brightspace-knowledge .bk-material {
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 0.55rem 0.7rem 0.65rem;
}
.brightspace-knowledge .bk-material-head {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.3rem;
}
.brightspace-knowledge .bk-kind {
    font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 1px 7px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
}
.brightspace-knowledge .bk-kind-lecture     { background: rgba(155, 135, 245, 0.18); color: var(--accent-strong); }
.brightspace-knowledge .bk-kind-reading     { background: rgba(52, 211, 153, 0.15); color: var(--positive); }
.brightspace-knowledge .bk-kind-assignment  { background: rgba(248, 113, 113, 0.15); color: var(--risk); }
.brightspace-knowledge .bk-kind-syllabus    { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.brightspace-knowledge .bk-kind-exam        { background: rgba(239, 68, 68, 0.18); color: #fb7185; }
.brightspace-knowledge .bk-kind-reference   { background: rgba(96, 165, 250, 0.15); color: #93c5fd; }
.brightspace-knowledge .bk-material-title {
    font-size: 0.85rem; font-weight: 600;
    color: white;
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; flex: 1; min-width: 0;
}
.brightspace-knowledge a.bk-material-title:hover { color: var(--accent-strong); }
.brightspace-knowledge .bk-material-summary {
    font-size: 0.78rem; line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.35rem;
}
.brightspace-knowledge .bk-objectives {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-top: 0.35rem;
}
.brightspace-knowledge .bk-obj {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 1px 7px; border-radius: 4px;
    font-size: 0.7rem; line-height: 1.4;
}

/* ── Assignment "study this" panel — shows on the right when a student
   clicks an assignment in the course tree.  Mirrors the .brightspace-knowledge
   styling so the experience feels continuous. ─────────────────────────── */
.bk-asg-summary {
    font-size: 0.84rem; line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    padding: 0.55rem 0.7rem;
    background: var(--accent-faint);
    border-left: 3px solid var(--accent-glow);
    border-radius: 0 6px 6px 0;
    margin: 0.6rem 0 0.85rem;
}
.bk-asg-summary strong {
    color: var(--accent-strong);
    margin-right: 0.35rem;
}
.bk-asg-insights {
    background: rgba(124, 92, 255, 0.04);
    border: 1px solid var(--accent-soft);
    border-radius: 12px;
    padding: 0.7rem 0.9rem 0.85rem;
    margin: 0 0 0.85rem;
}
.bk-asg-insights .bk-section-label {
    font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.45);
    margin: 0.6rem 0 0.35rem;
}
.bk-asg-insights .bk-section-label:first-child { margin-top: 0; }
.bk-asg-insights .bk-concept-cloud {
    display: flex; flex-wrap: wrap; gap: 5px;
}
.bk-asg-insights .bk-chip {
    background: var(--accent-faint);
    border: 1px solid var(--accent-mid);
    color: #c9b9ff;
    padding: 2px 8px; border-radius: 999px;
    font-size: 0.74rem; line-height: 1.3;
    cursor: default; white-space: nowrap;
}
.bk-asg-insights .bk-objectives {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.bk-asg-insights .bk-obj {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 2px 7px; border-radius: 4px;
    font-size: 0.72rem; line-height: 1.4;
}
.bk-asg-objectives {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.78rem; line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
}
.bk-asg-objectives li { margin-bottom: 2px; }
.bk-asg-extract {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.6rem;
    background: rgba(124, 92, 255, 0.04);
    border: 1px dashed var(--accent-mid);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    margin: 0 0 0.85rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}
.bk-asg-extract .bk-extract-btn {
    background: var(--accent-soft);
    border: 1px solid var(--accent-glow);
    color: #d6c8ff;
    font-size: 0.74rem; font-weight: 600;
    padding: 5px 12px; border-radius: 6px;
    cursor: pointer; font-family: inherit;
    transition: background 0.15s;
}
.bk-asg-extract .bk-extract-btn:hover { background: var(--accent-mid); }
.bk-asg-extract .bk-extract-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Per-assignment RAG chat (lives at the bottom of the drilldown) ──── */
.bk-asg-chat {
    margin: 1rem 0 0.5rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex; flex-direction: column; gap: 0.6rem;
}
.bk-asg-chat-header {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.78rem; font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.01em;
}
.bk-asg-chat-header i { font-size: 1.05rem; color: var(--accent-strong); }
.bk-asg-synth {
    margin-left: 0.4rem;
    font-size: 0.6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 1px 6px; border-radius: 999px;
    background: rgba(252, 211, 77, 0.14); color: var(--warning);
    cursor: help;
}
.bk-asg-chat-thread {
    display: flex; flex-direction: column; gap: 0.5rem;
    max-height: 320px; overflow-y: auto;
    padding: 0 2px;
}
.bk-msg {
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    font-size: 0.82rem; line-height: 1.5;
    word-wrap: break-word;
}
.bk-msg-user {
    align-self: flex-end;
    background: var(--accent-soft);
    color: #e3dbff;
    max-width: 85%;
}
.bk-msg-agent {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    max-width: 95%;
}
.bk-msg-body { white-space: pre-wrap; }
.bk-msg-cites {
    margin-top: 0.55rem;
    font-size: 0.72rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 0.5rem;
}
.bk-msg-cites > summary {
    cursor: pointer; user-select: none;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}
.bk-msg-cite {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}
.bk-msg-cite:last-child { border-bottom: none; }
.bk-msg-cite-title {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}
.bk-msg-cite-score {
    font-variant-numeric: tabular-nums;
    color: var(--positive);
    font-weight: 600;
}
.bk-msg-cite-preview {
    grid-column: 1 / -1;
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.7rem;
    line-height: 1.45;
    max-height: 3.6em; overflow: hidden;
}
.bk-msg-fallback {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: rgba(252, 211, 77, 0.75);
    font-style: italic;
}

/* ── Full-screen assignment viewport ─────────────────────────────────────
   When the student clicks an assignment, this overlay takes the entire
   viewport — header on top, scrollable body, sticky chat composer at
   the bottom.  Designed to be the primary "work on this homework"
   surface, not a side-panel afterthought. */
.bk-asg-fullscreen {
    position: fixed;
    inset: 0;
    background: #0b0817;
    z-index: 1000;
    display: none;
    flex-direction: column;
}
.bk-asg-fullscreen.open { display: flex; }
body.bk-fs-locked { overflow: hidden; }

.bk-asg-fs-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.2rem;
    background: var(--bg-base);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.bk-asg-fs-back {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.1s;
}
.bk-asg-fs-back:hover { background: rgba(255, 255, 255, 0.10); }
.bk-asg-fs-back:active { transform: translateX(-2px); }
.bk-asg-fs-back i { font-size: 1.15rem; }
.bk-asg-fs-title-block {
    flex: 1; min-width: 0;
}
.bk-asg-fs-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bk-asg-fs-meta {
    display: flex; align-items: center; gap: 0.85rem;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    flex-wrap: wrap;
}
.bk-asg-fs-meta i { font-size: 0.95rem; vertical-align: -2px; margin-right: 3px; opacity: 0.7; }
.bk-asg-fs-actions {
    display: flex; align-items: center; gap: 0.5rem;
    flex-shrink: 0;
}
.bk-asg-fs-canvas {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-strong);
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid rgba(185, 168, 255, 0.30);
    border-radius: 8px;
    transition: background 0.15s;
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.bk-asg-fs-canvas:hover { background: rgba(185, 168, 255, 0.12); }

.bk-asg-fs-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.2rem 1.4rem 1rem;
    display: flex; flex-direction: column; gap: 1.1rem;
    max-width: 920px; width: 100%;
    margin: 0 auto;
}
.bk-asg-fs-loading, .bk-asg-fs-error {
    display: flex; align-items: center; justify-content: center;
    padding: 3rem 1rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.92rem;
    gap: 0.5rem;
}
.bk-asg-fs-error { color: var(--risk); }

.bk-asg-fs-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 0.95rem 1.1rem;
    display: flex; flex-direction: column; gap: 0.7rem;
}
.bk-asg-fs-section-head {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.82rem; font-weight: 700;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.01em;
}
.bk-asg-fs-section-head i { font-size: 1.05rem; color: var(--accent-strong); }

.bk-asg-fs-coach { background: var(--accent-faint); border-color: var(--accent-soft); }
.bk-asg-fs-thread {
    display: flex; flex-direction: column; gap: 0.6rem;
}

.bk-asg-fs-chat-bar {
    flex-shrink: 0;
    background: var(--bg-base);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: 0.75rem 1.2rem calc(0.75rem + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.4);
}
.bk-asg-fs-chat-form {
    display: flex; gap: 0.5rem;
    max-width: 920px; width: 100%; margin: 0 auto;
}
.bk-asg-fs-chat-form input {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    padding: 0.7rem 1rem;
    color: rgba(255, 255, 255, 0.95);
    font: inherit; font-size: 0.92rem;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.bk-asg-fs-chat-form input:focus {
    border-color: var(--accent-strong-bg);
    background: rgba(255, 255, 255, 0.06);
}
.bk-asg-fs-chat-form input:disabled { opacity: 0.6; }
.bk-asg-fs-chat-form .bk-asg-chat-send { width: 44px; }

@media (max-width: 700px) {
    .bk-asg-fs-header { padding: 0.7rem 0.9rem; gap: 0.65rem; }
    .bk-asg-fs-title { font-size: 0.95rem; }
    .bk-asg-fs-meta { font-size: 0.72rem; gap: 0.6rem; }
    .bk-asg-fs-canvas { font-size: 0.72rem; padding: 5px 9px; }
    .bk-asg-fs-body { padding: 0.85rem 0.9rem; gap: 0.85rem; }
    .bk-asg-fs-section { padding: 0.8rem 0.85rem; border-radius: 12px; }
    .bk-asg-fs-chat-bar { padding: 0.6rem 0.85rem calc(0.6rem + env(safe-area-inset-bottom)); }
}

/* PLAN section — the briefing as the first thing the student sees */
.bk-fs-plan { background: var(--accent-faint); border-color: var(--accent-soft); }
.bk-fs-plan-body {
    font-size: 0.92rem; line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
}
.bk-fs-plan-objectives {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.bk-fs-plan-objectives .bk-section-label {
    font-size: 0.72rem; font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}
.bk-fs-plan-objectives .bk-asg-objectives {
    margin: 0; padding-left: 1.1rem;
    font-size: 0.85rem; line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
}
.bk-fs-plan-objectives .bk-asg-objectives li { margin-bottom: 3px; }

.bk-fs-deepplan-btn {
    margin-top: 0.5rem;
    align-self: flex-start;
    background: var(--accent-soft);
    border: 1px solid var(--accent-mid);
    color: #d6c8ff;
    font: inherit; font-size: 0.78rem; font-weight: 600;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.4rem;
    transition: background 0.15s;
}
.bk-fs-deepplan-btn:hover { background: var(--accent-mid); }
.bk-fs-deepplan-btn i { font-size: 1rem; }

/* References — auto-expanded list with counter */
.bk-fs-refs-counter {
    margin-left: auto;
    font-size: 0.72rem; font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.02em;
}
.bk-fs-refs-list { display: flex; flex-direction: column; gap: 0.5rem; }
.bk-fs-refs-loading, .bk-fs-refs-empty, .bk-fs-tasks-loading {
    padding: 0.85rem 0.4rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
    display: flex; align-items: center; gap: 0.4rem;
}

/* AAR (Anticipation–Action–Reflection) blocks — OECD Learning Compass 2030.
   Anticipation lives at the top of the assignment viewport, reflection at
   the bottom.  Both are optional; skipping is first-class. */
.bk-fs-aar {
    border: 1px solid var(--accent-mid);
    background: var(--accent-faint);
}
.bk-fs-aar.bk-fs-aar-set {
    background: var(--accent-faint);
    border-style: dashed;
    border-color: var(--accent-soft);
}
.bk-fs-aar.bk-fs-aar-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.bk-fs-aar .bk-asg-fs-section-head { color: var(--accent-strong); }
.bk-fs-aar .bk-asg-fs-section-head i { color: var(--accent); }
.bk-fs-aar-hint {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    margin: 0.4rem 0 0.5rem;
    line-height: 1.5;
}
.bk-fs-aar-textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-mid);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.75rem;
    font-family: inherit;
    font-size: 0.86rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 3rem;
    transition: border-color 0.15s;
}
.bk-fs-aar-textarea:focus {
    border-color: var(--accent);
    outline: none;
}
.bk-fs-aar-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}
.bk-fs-aar-save {
    background: var(--accent);
    border: 0;
    color: #fff;
    font-weight: 600;
    font-size: 0.78rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.15s;
}
.bk-fs-aar-save:hover { background: var(--accent-hover); }
.bk-fs-aar-skip {
    margin-left: auto;
    background: none;
    border: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.15s;
    font-family: inherit;
}
.bk-fs-aar-skip:hover { color: var(--text-tertiary); }
.bk-fs-aar-edit {
    margin-left: auto;
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
    color: var(--text-tertiary);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    font-family: inherit;
}
.bk-fs-aar-edit:hover { background: var(--surface-3); color: var(--text-primary); }
.bk-fs-aar-saved {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.55;
    padding: 0.3rem 0;
}
.bk-fs-aar-then-row {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    padding: 0.3rem 0.55rem;
    border-left: 2px solid var(--accent-mid);
    background: rgba(0, 0, 0, 0.15);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.bk-fs-aar-then-label { font-weight: 700; color: var(--accent-strong); margin-right: 0.3rem; }

/* AI-built completion tasks — clean numbered list. */
.bk-fs-tasks { margin-top: 0.65rem; }
.bk-fs-tasks .bk-section-label {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.45rem;
}
.bk-fs-task-list {
    margin: 0; padding: 0 0 0 1.4rem;
    display: flex; flex-direction: column; gap: 0.4rem;
    color: #d8d4ee; font-size: 0.92rem; line-height: 1.5;
}
.bk-fs-task-list li::marker { color: var(--accent-strong); font-weight: 700; }

/* Required-reading section sits between AI plan and the full ref list. */
.bk-fs-required-section { background: rgba(255, 199, 95, 0.05); border-color: rgba(255, 199, 95, 0.18); }
.bk-fs-required-list { display: flex; flex-direction: column; gap: 0.5rem; }

/* Reference cards — used by both required reading + the full reference
   list.  Cleaner than the old .bk-fs-ref-item rows: single readable card
   with kind chip beside title, preview text below, click to expand. */
.bk-fs-ref-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.55rem;
    padding: 0.7rem 0.85rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.bk-fs-ref-card:hover {
    background: var(--accent-faint);
    border-color: var(--accent-mid);
}
.bk-fs-ref-card-row { display: flex; align-items: flex-start; gap: 0.7rem; }
.bk-fs-ref-card-icon { font-size: 1.25rem; color: var(--accent-strong); flex: none; margin-top: 2px; }
.bk-fs-ref-card-body { flex: 1; min-width: 0; }
.bk-fs-ref-card-title {
    font-size: 0.95rem; font-weight: 600; color: #ffffff;
    line-height: 1.35;
    display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
}
.bk-fs-ref-card-preview {
    font-size: 0.8rem; color: rgba(255, 255, 255, 0.62);
    margin-top: 0.3rem; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.bk-fs-ref-why {
    font-size: 0.78rem; color: var(--warning);
    margin-top: 0.4rem;
    display: flex; align-items: center; gap: 0.35rem;
}
.bk-fs-ref-why i { font-size: 0.95rem; }
.bk-fs-ref-caret {
    color: rgba(255, 255, 255, 0.3); font-size: 1rem; flex: none;
    transition: transform 0.15s;
}
.bk-fs-ref-card.open .bk-fs-ref-caret { transform: rotate(180deg); }
.bk-fs-ref-card.open { border-color: rgba(124, 92, 255, 0.5); background: var(--accent-faint); }

/* Native file viewer — fullscreen modal with browser-rendered PDF/etc. */
.bk-file-viewer {
    position: fixed; inset: 0;
    z-index: 10000;
    background: rgba(15, 10, 30, 0.96);
    display: flex; flex-direction: column;
    backdrop-filter: blur(12px);
}
.bk-file-viewer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: #1a1430;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.bk-file-viewer-title {
    color: #fff; font-weight: 600; font-size: 0.95rem;
    display: flex; align-items: center; gap: 0.5rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bk-file-viewer-title i { color: var(--accent-strong); font-size: 1.2rem; }
.bk-file-viewer-close {
    background: rgba(255, 255, 255, 0.08); border: 0;
    color: #fff; cursor: pointer;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    transition: background 0.15s;
}
.bk-file-viewer-close:hover { background: rgba(255, 99, 99, 0.32); }
.bk-file-viewer-frame {
    flex: 1; width: 100%; border: 0;
    background: #fff;
}

/* Brightspace toolbar — manual "Sync materials" button. */
.brightspace-toolbar {
    display: flex; justify-content: flex-end;
    padding: 0.5rem 0.75rem 0.25rem;
}
.brightspace-sync-btn {
    background: var(--accent-soft);
    border: 1px solid var(--accent-mid);
    color: #cfc4ff;
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.4rem;
    transition: background 0.15s, color 0.15s;
}
.brightspace-sync-btn:hover:not(:disabled) {
    background: var(--accent-mid);
    color: #fff;
}
.brightspace-sync-btn:disabled { opacity: 0.7; cursor: progress; }
.brightspace-sync-btn i { font-size: 0.95rem; }

/* MASTERY checklist with progress bar */
.bk-fs-mastery-counter {
    margin-left: auto;
    font-size: 0.72rem; font-weight: 700;
    color: var(--positive);
    background: rgba(110, 231, 183, 0.12);
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.bk-fs-progress {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.4rem;
}
.bk-fs-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--positive), var(--accent-strong));
    border-radius: 999px;
    transition: width 0.3s ease;
}
.bk-fs-objectives {
    display: flex; flex-direction: column; gap: 0.4rem;
}
.bk-fs-obj-row {
    display: flex; align-items: stretch;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 9px;
    overflow: hidden;
    transition: background 0.15s, border-color 0.15s, opacity 0.2s;
}
.bk-fs-obj-row.done {
    opacity: 0.55;
    background: rgba(110, 231, 183, 0.06);
    border-color: rgba(110, 231, 183, 0.20);
}
.bk-fs-obj-row.done .bk-fs-obj-text { text-decoration: line-through; color: rgba(255, 255, 255, 0.55); }
.bk-fs-obj-check {
    background: transparent;
    border: none;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.45);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.bk-fs-obj-check:hover { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.85); }
.bk-fs-obj-row.done .bk-fs-obj-check { color: var(--positive); }
.bk-fs-obj-check i { font-size: 1.15rem; }
.bk-fs-obj-body {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0.6rem 0.85rem;
    color: rgba(255, 255, 255, 0.88);
    font: inherit; font-size: 0.86rem; line-height: 1.4;
    text-align: left;
    cursor: pointer;
    display: flex; align-items: center; gap: 0.5rem;
    min-width: 0;
    transition: background 0.15s;
}
.bk-fs-obj-body:hover { background: var(--accent-faint); }
.bk-fs-obj-text { flex: 1; min-width: 0; }
.bk-fs-obj-go {
    font-size: 0.7rem; font-weight: 600;
    color: var(--accent-strong);
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 0.2rem;
    opacity: 0;
    transition: opacity 0.15s;
}
.bk-fs-obj-body:hover .bk-fs-obj-go { opacity: 1; }

/* Concepts cloud — clickable */
.bk-chip-clickable { cursor: pointer; transition: background 0.15s; }
.bk-chip-clickable:hover { background: var(--accent-soft); }

/* YOUR WORK — centerpiece of the viewport */
.bk-fs-notepad-section {
    background: rgba(110, 231, 183, 0.04);
    border-color: rgba(110, 231, 183, 0.15);
}
.bk-fs-notepad-section.completed {
    background: rgba(110, 231, 183, 0.10);
    border-color: rgba(110, 231, 183, 0.40);
}
.bk-fs-save-status {
    margin-left: auto;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}
.bk-fs-notepad {
    width: 100%;
    min-height: 220px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    color: rgba(255, 255, 255, 0.92);
    font: inherit; font-size: 0.92rem; line-height: 1.6;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.bk-fs-notepad:focus {
    border-color: rgba(110, 231, 183, 0.50);
    background: rgba(0, 0, 0, 0.34);
}
.bk-fs-complete-row {
    display: flex; align-items: center; gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}
.bk-fs-complete-btn {
    display: inline-flex; align-items: center; gap: 0.55rem;
    background: rgba(110, 231, 183, 0.10);
    border: 1.5px solid rgba(110, 231, 183, 0.30);
    color: #d4f5e3;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    font: inherit; font-size: 0.86rem; font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.bk-fs-complete-btn:hover {
    background: rgba(110, 231, 183, 0.20);
    border-color: rgba(110, 231, 183, 0.55);
}
.bk-fs-complete-btn:active { transform: translateY(1px); }
.bk-fs-complete-btn:disabled { opacity: 0.6; cursor: wait; }
.bk-fs-complete-btn.is-complete {
    background: rgba(110, 231, 183, 0.30);
    border-color: var(--positive);
    color: #ffffff;
}
.bk-fs-complete-btn i { font-size: 1.15rem; }
.bk-fs-complete-when {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.55);
}

.bk-fs-notepad-actions {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
}

/* REFERENCES — collapsed accordion */
.bk-fs-refs-toggle {
    width: 100%;
    background: transparent;
    border: none;
    padding: 0.4rem 0;
    color: rgba(255, 255, 255, 0.78);
    font: inherit; font-size: 0.85rem; font-weight: 700;
    text-align: left;
    cursor: pointer;
    display: flex; align-items: center; gap: 0.55rem;
    letter-spacing: 0.01em;
    transition: color 0.15s;
}
.bk-fs-refs-toggle:hover { color: rgba(255, 255, 255, 0.95); }
.bk-fs-refs-toggle i:first-child { font-size: 1.05rem; color: var(--accent-strong); }
.bk-fs-refs-caret {
    margin-left: auto;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.45);
    transition: transform 0.2s;
}
.bk-fs-refs-list {
    display: flex; flex-direction: column;
    margin-top: 0.6rem;
}

/* QUICK PROMPT BAR — above the chat input */
.bk-asg-fs-quick {
    display: flex; gap: 0.4rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: 0.55rem;
    max-width: 920px; width: 100%; margin-left: auto; margin-right: auto;
    padding-bottom: 2px;
}
.bk-asg-fs-quick::-webkit-scrollbar { height: 0; }
.bk-fs-quick-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: rgba(124, 92, 255, 0.14);
    border: 1px solid var(--accent-mid);
    color: #d6c8ff;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    font: inherit; font-size: 0.75rem; font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.bk-fs-quick-btn:hover {
    background: var(--accent-mid);
    border-color: var(--accent-strong-bg);
}
.bk-fs-quick-btn i { font-size: 0.95rem; }

/* Tree row — completed assignment shows a check fat */
.brightspace-asgn-rag.rag-complete {
    background: var(--positive);
    color: #0d2818;
    width: 14px; height: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(110, 231, 183, 0.5);
}
.brightspace-asgn-rag.rag-complete i { font-size: 9px; font-weight: 900; }
.bk-fs-action-btn {
    display: inline-flex; align-items: center; gap: 0.45rem;
    background: var(--accent-soft);
    border: 1px solid var(--accent-mid);
    color: #d6c8ff;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    font: inherit; font-size: 0.78rem; font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.bk-fs-action-btn:hover { background: var(--accent-mid); }
.bk-fs-action-btn:active { transform: translateY(1px); }
.bk-fs-action-btn i { font-size: 1rem; }

/* Reference inline preview drawer */
.bk-fs-ref-item { cursor: pointer; }
.bk-fs-ref-caret {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 0.4rem;
}
.bk-fs-ref-item.open .bk-fs-ref-caret { transform: rotate(180deg); color: var(--accent-strong); }
.bk-fs-ref-drawer {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--accent-soft);
    border-top: none;
    border-radius: 0 0 10px 10px;
    margin: -1px 0 0.5rem 0;
    padding: 0.85rem 1rem;
    display: flex; flex-direction: column; gap: 0.6rem;
    animation: bk-fs-ref-slide 0.2s ease-out;
}
@keyframes bk-fs-ref-slide {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.bk-fs-ref-drawer-loading, .bk-fs-ref-drawer-empty {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
    padding: 0.5rem 0;
}
.bk-fs-ref-summary {
    font-size: 0.82rem; line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    padding: 0.55rem 0.7rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid var(--accent-glow);
    border-radius: 0 6px 6px 0;
}
.bk-fs-ref-text {
    font-size: 0.8rem; line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
    max-height: 380px;
    overflow-y: auto;
    padding: 0.4rem 0.2rem 0.4rem 0;
    white-space: pre-wrap;
}
.bk-fs-ref-concepts {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.bk-fs-ref-actions {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.bk-fs-ref-meta-row {
    display: flex; align-items: center; gap: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}
.bk-fs-ref-stat {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
}
.bk-fs-ref-stat-warn { color: var(--warning); }
.bk-fs-ref-section-label {
    font-size: 0.68rem; font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0.4rem 0 0.2rem;
}
.bk-fs-ref-objectives {
    margin: 0; padding-left: 1.1rem;
    font-size: 0.78rem; line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}
.bk-fs-ref-objectives li { margin-bottom: 2px; }

/* Reference row in coach panel — clickable for "discuss this" */
.bk-asg-ref { cursor: pointer; transition: background 0.15s; }
.bk-asg-ref:hover { background: var(--accent-faint); border-color: var(--accent-soft); }
.bk-asg-ref-action {
    font-size: 0.68rem; font-weight: 600;
    color: var(--accent-strong);
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 999px;
}
.bk-asg-ref:hover .bk-asg-ref-action { background: rgba(185, 168, 255, 0.12); }

/* Auto-briefing — leading agent message + ranked references list */
.bk-asg-refs {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex; flex-direction: column; gap: 0.55rem;
}
.bk-asg-refs-label {
    font-size: 0.72rem; font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.02em;
}
.bk-asg-ref {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.bk-asg-ref-row {
    display: flex; align-items: center; gap: 0.5rem;
    min-width: 0;
}
.bk-asg-ref-title {
    flex: 1; min-width: 0;
    font-size: 0.78rem; font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bk-asg-ref-open {
    font-size: 0.68rem; font-weight: 600;
    color: var(--accent-strong);
    text-decoration: none;
    flex-shrink: 0;
    padding: 1px 6px;
    border: 1px solid rgba(185, 168, 255, 0.25);
    border-radius: 999px;
    transition: background 0.15s;
}
.bk-asg-ref-open:hover { background: rgba(185, 168, 255, 0.12); }
.bk-asg-ref-preview {
    font-size: 0.7rem; line-height: 1.4;
    color: rgba(255, 255, 255, 0.5);
    max-height: 2.8em; overflow: hidden;
}
.bk-asg-ref-reason {
    font-size: 0.66rem;
    color: var(--positive);
    font-weight: 500;
    letter-spacing: 0.02em;
}
.bk-asg-chat-form {
    display: flex; gap: 0.4rem;
    margin-bottom: 0.2rem;
}
.bk-asg-chat-form input {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 9px;
    padding: 0.55rem 0.85rem;
    color: rgba(255, 255, 255, 0.95);
    font: inherit; font-size: 0.82rem;
    outline: none;
    transition: border-color 0.15s;
}
.bk-asg-chat-form input:focus { border-color: var(--accent-strong-bg); }
.bk-asg-chat-form input:disabled { opacity: 0.6; }
.bk-asg-chat-send {
    background: rgba(124, 92, 255, 0.85);
    border: none;
    border-radius: 9px;
    width: 38px;
    color: #fff;
    cursor: pointer; font: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.bk-asg-chat-send:hover { background: rgba(124, 92, 255, 1); }
.bk-asg-chat-send i { font-size: 1.05rem; }

/* ── Per-resource enrichment in the linked-materials list ──────────────── */
.brightspace-resource-name-row {
    display: flex; align-items: center; gap: 0.45rem;
}
.bk-kind {
    font-size: 0.6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 1px 6px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}
.bk-kind-lecture     { background: rgba(155, 135, 245, 0.18); color: var(--accent-strong); }
.bk-kind-reading     { background: rgba(52, 211, 153, 0.15); color: var(--positive); }
.bk-kind-assignment  { background: rgba(248, 113, 113, 0.15); color: var(--risk); }
.bk-kind-syllabus    { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.bk-kind-exam        { background: rgba(239, 68, 68, 0.18); color: #fb7185; }
.bk-kind-reference   { background: rgba(96, 165, 250, 0.15); color: #93c5fd; }
.bk-resource-summary {
    font-size: 0.74rem; line-height: 1.45;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 0.2rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.bk-resource-concepts {
    display: flex; flex-wrap: wrap; gap: 3px;
    margin-top: 0.3rem;
}
.bk-chip-mini {
    background: var(--accent-faint);
    border: 1px solid var(--accent-soft);
    color: var(--accent-strong);
    font-size: 0.62rem; line-height: 1.3;
    padding: 1px 6px; border-radius: 999px;
}

/* ── Study Coach — proactive card dashboard ─────────────────────────────── */
.coach-view { background: var(--bg-base); }
.coach-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.coach-header-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.95rem; font-weight: 600; color: #e0e0ff;
}
.coach-header-title i { font-size: 1.2rem; color: var(--accent-strong); }
.coach-btn-refresh {
    background: rgba(124, 92, 255, 0.12);
    border: 1px solid var(--accent-mid);
    color: var(--accent-strong);
    font-size: 0.78rem; font-weight: 600;
    padding: 5px 12px; border-radius: 6px;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 0.3rem;
    transition: background 0.15s;
}
.coach-btn-refresh:hover { background: var(--accent-soft); }

.coach-cards {
    flex: 1; overflow-y: auto;
    padding: 16px 18px;
}
.coach-spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.coach-loading {
    text-align: center; padding: 40px 20px;
    color: rgba(255, 255, 255, 0.55); font-size: 0.9rem;
}
.coach-loading i { font-size: 1.4rem; color: var(--accent-strong); }
.coach-empty {
    text-align: center; padding: 60px 30px;
    color: rgba(255, 255, 255, 0.55); font-size: 0.92rem;
}
.coach-empty i { font-size: 2rem; color: var(--accent-strong); opacity: 0.5; margin-bottom: 0.7rem; }
.coach-empty p { margin: 0.4rem 0; }
.coach-empty-hint { font-size: 0.78rem; color: rgba(255, 255, 255, 0.35); }

.coach-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.coach-card {
    background: linear-gradient(145deg, var(--accent-faint) 0%, rgba(124, 92, 255, 0.02) 100%);
    border: 1px solid var(--accent-soft);
    border-radius: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    display: flex; flex-direction: column; gap: 6px;
    position: relative;
    overflow: hidden;
}
.coach-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-strong-bg);
    box-shadow: 0 8px 24px rgba(124, 92, 255, 0.15);
}
.coach-card-weak {
    border-color: rgba(248, 113, 113, 0.30);
    background: linear-gradient(145deg, rgba(248, 113, 113, 0.08) 0%, rgba(248, 113, 113, 0.02) 100%);
}
.coach-card-weak:hover {
    border-color: rgba(248, 113, 113, 0.6);
    box-shadow: 0 8px 24px rgba(248, 113, 113, 0.18);
}
.coach-card-cross {
    border-color: rgba(96, 165, 250, 0.30);
    background: linear-gradient(145deg, rgba(96, 165, 250, 0.08) 0%, rgba(96, 165, 250, 0.02) 100%);
}
.coach-card-cross:hover {
    border-color: rgba(96, 165, 250, 0.6);
    box-shadow: 0 8px 24px rgba(96, 165, 250, 0.18);
}
.coach-card-head {
    display: flex; align-items: center; gap: 0.4rem;
    margin-bottom: 0.15rem;
}
.coach-card-head i { font-size: 1.05rem; }
.coach-card-weak .coach-card-head i { color: #f87171; }
.coach-card-cross .coach-card-head i { color: #60a5fa; }
.coach-card-tag {
    font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
    flex: 1;
}
.coach-card-pct {
    font-size: 0.72rem; font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    padding: 2px 9px; border-radius: 999px;
}
.coach-card-weak .coach-card-pct { background: rgba(248, 113, 113, 0.18); color: var(--risk); }
.coach-card-cross .coach-card-pct { background: rgba(96, 165, 250, 0.18); color: #93c5fd; }
.coach-card-title {
    font-size: 1rem; font-weight: 700;
    color: white;
    line-height: 1.3;
    margin: 0.2rem 0 0.3rem;
}
.coach-card-body {
    font-size: 0.82rem; line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}
.coach-card-cta {
    margin-top: auto; padding-top: 0.5rem;
    font-size: 0.78rem; font-weight: 600;
    color: var(--accent-strong);
    display: inline-flex; align-items: center; gap: 0.3rem;
    opacity: 0.8;
}
.coach-card:hover .coach-card-cta { opacity: 1; }

/* ── Coach focus mode ───────────────────────────────────────────────────── */
.coach-focus {
    flex: 1;
    display: flex; flex-direction: column;
    overflow: hidden;
    padding: 16px 18px 0;
}
.coach-focus-header {
    display: flex; align-items: center; gap: 0.7rem;
    margin-bottom: 0.65rem;
    flex-shrink: 0;
}
.coach-back-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.78rem; font-weight: 600;
    padding: 5px 12px; border-radius: 6px;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 0.3rem;
    transition: background 0.15s;
}
.coach-back-btn:hover { background: rgba(255, 255, 255, 0.12); }
.coach-focus-title {
    font-size: 1rem; font-weight: 700; color: white;
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Scroll container holding body + thread — the compose form stays
   anchored at the bottom while everything above scrolls together. */
.coach-focus-scroll {
    flex: 1; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column;
    padding-right: 4px; /* room for the scrollbar */
}
.coach-focus-body {
    flex: none;
    background: var(--accent-faint);
    border: 1px solid var(--accent-soft);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 0.85rem;
}
.coach-focus-stat-row {
    display: flex; flex-wrap: wrap; gap: 1rem;
    margin-bottom: 0.6rem;
}
.coach-focus-stat {
    display: flex; flex-direction: column;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    padding: 6px 12px;
    flex: 1; min-width: 100px;
}
.coach-focus-stat span {
    font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.4);
}
.coach-focus-stat strong {
    font-size: 1.1rem; font-weight: 700; color: white;
}
.coach-focus-label {
    font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
    margin: 0.5rem 0 0.3rem;
}
.coach-focus-samples {
    display: flex; flex-direction: column; gap: 4px;
}
.coach-focus-sample {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 5px 10px; border-radius: 6px;
    font-size: 0.78rem;
}
.coach-focus-sample-title { color: rgba(255, 255, 255, 0.78); }
.coach-focus-sample-score {
    color: var(--warning); font-weight: 600;
    font-family: 'JetBrains Mono', monospace; font-size: 0.74rem;
}

/* Per-concept study plan: reading material + target questions side-by-side */
.coach-focus-plan-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin-top: 0.7rem;
}
@media (max-width: 900px) {
    .coach-focus-plan-row { grid-template-columns: 1fr; }
}
.coach-focus-plan-col { display: flex; flex-direction: column; min-width: 0; }
.coach-focus-plan-loading, .coach-focus-empty {
    color: rgba(255, 255, 255, 0.5); font-size: 0.8rem;
    padding: 0.5rem 0.4rem;
    display: flex; align-items: center; gap: 0.4rem;
}
.coach-focus-sublabel {
    font-size: 0.66rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.32);
    margin: 0.55rem 0 0.3rem;
}
.coach-reading-list { display: flex; flex-direction: column; gap: 0.4rem; }
.coach-reading-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.5rem;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.coach-reading-card:hover {
    background: var(--accent-faint);
    border-color: var(--accent-mid);
}
.coach-reading-card.is-required {
    border-color: rgba(255, 199, 95, 0.35);
    background: rgba(255, 199, 95, 0.06);
}
.coach-reading-card.is-required:hover {
    background: rgba(255, 199, 95, 0.10);
}
.coach-reading-card.open {
    border-color: var(--accent-strong-bg);
    background: var(--accent-faint);
}
.coach-reading-card-row { display: flex; gap: 0.55rem; align-items: flex-start; }
.coach-reading-icon { color: var(--accent-strong); font-size: 1.1rem; flex: none; margin-top: 2px; }
.coach-reading-card-body { flex: 1; min-width: 0; }
.coach-reading-card-title {
    font-size: 0.86rem; font-weight: 600; color: #fff;
    line-height: 1.35;
    display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap;
}
.coach-reading-card-preview {
    font-size: 0.74rem; color: rgba(255, 255, 255, 0.6);
    margin-top: 0.25rem; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.coach-reading-why {
    font-size: 0.74rem; color: var(--warning);
    margin-top: 0.3rem;
    display: flex; align-items: center; gap: 0.3rem;
}
.coach-reading-stats {
    margin-top: 0.3rem; font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}
.coach-reading-stat-warn { color: var(--risk); }
.coach-reading-caret {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.95rem; flex: none; margin-top: 2px;
    transition: transform 0.15s;
}
.coach-reading-card.open .coach-reading-caret { transform: rotate(180deg); }

/* Target-question buttons */
.coach-question-list {
    margin: 0; padding: 0 0 0 1.4rem;
    display: flex; flex-direction: column; gap: 0.35rem;
    color: #fff;
}
.coach-question-list li::marker { color: var(--accent-strong); font-weight: 700; }
.coach-question-btn {
    width: 100%; text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.45rem;
    color: #d8d4ee;
    padding: 0.45rem 0.6rem;
    font-size: 0.83rem; line-height: 1.45;
    cursor: pointer;
    display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.coach-question-btn:hover {
    background: rgba(124, 92, 255, 0.12);
    border-color: var(--accent-mid);
    color: #fff;
}
.coach-question-btn i { color: var(--accent-strong); font-size: 0.95rem; flex: none; }
.coach-question-text { flex: 1; min-width: 0; }
.coach-question-hint {
    font-size: 0.7rem; color: rgba(255, 255, 255, 0.4);
    margin-top: 0.5rem; font-style: italic;
}

.coach-focus-thread {
    /* Lives inside .coach-focus-scroll which owns the scroll — thread
       just stacks naturally and grows the parent's scroll height. */
    padding: 4px 0 8px;
    display: flex; flex-direction: column; gap: 8px;
}

/* Quick-reply buttons row above the compose input. */
.coach-focus-quickreplies {
    display: flex; gap: 0.35rem; flex-wrap: wrap;
    padding: 0.5rem 0 0.4rem;
    flex-shrink: 0;
}
.coach-focus-quickreplies:empty { display: none; }
.coach-quickreply-btn {
    background: var(--accent-faint);
    border: 1px solid var(--accent-mid);
    color: #cfc4ff;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    font-size: 0.74rem; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.3rem;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    font-family: inherit;
}
.coach-quickreply-btn:hover {
    background: var(--accent-soft);
    color: #fff;
    border-color: rgba(124, 92, 255, 0.5);
}
.coach-quickreply-btn i { font-size: 0.85rem; }

/* RAG citation footer inside coach replies. */
.coach-msg-cites {
    margin-top: 0.5rem;
    border-top: 1px dashed var(--accent-soft);
    padding-top: 0.4rem;
}
.coach-msg-cites summary {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.coach-msg-cites summary:hover { color: var(--accent-strong); }
.coach-msg-cite {
    margin-top: 0.35rem;
    padding: 0.4rem 0.55rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.35rem;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.45;
}
.coach-msg-cite strong { color: #cfc4ff; }
.coach-msg-cite div { margin-top: 0.15rem; }
.coach-msg {
    display: flex; gap: 0.55rem; max-width: 92%;
}
.coach-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.coach-msg-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent-soft);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-strong); font-size: 0.95rem; flex-shrink: 0;
}
.coach-msg-body {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.85rem; line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
}
.coach-msg-user .coach-msg-body {
    background: var(--accent-soft);
    border-color: var(--accent-mid);
    color: white;
}

.coach-focus-compose {
    display: flex; gap: 0.4rem;
    padding: 8px 0 14px;
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 10px;
}
.coach-focus-compose input {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: white; font-family: inherit; font-size: 0.88rem;
    padding: 9px 12px; outline: none;
    transition: border-color 0.15s;
}
.coach-focus-compose input:focus { border-color: var(--accent-strong-bg); }
.coach-focus-compose button {
    background: var(--accent); color: white; border: none;
    border-radius: 8px; padding: 0 14px;
    cursor: pointer; font-size: 1rem;
    transition: background 0.15s;
}
.coach-focus-compose button:hover { background: var(--accent-hover); }

/* ── Re-auth banner (shown when an account's OAuth token expired) ────────── */
.reauth-banner {
    display: flex; align-items: center; gap: 0.75rem;
    background: rgba(240, 165, 0, 0.1);
    border: 1px solid rgba(240, 165, 0, 0.3);
    border-radius: 10px;
    padding: 0.75rem 1rem; margin: 0.5rem 0 1rem;
    font-size: 0.83rem; flex-wrap: wrap;
}
.reauth-icon { font-size: 1.1rem; flex-shrink: 0; }
.reauth-text { flex: 1; color: rgba(255, 255, 255, 0.85); min-width: 200px; }
.reauth-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.reauth-link {
    background: rgba(240, 165, 0, 0.15);
    border: 1px solid rgba(240, 165, 0, 0.4);
    color: #f0a500; padding: 4px 12px; border-radius: 6px;
    text-decoration: none; font-weight: 600; font-size: 0.78rem;
    white-space: nowrap; transition: background 0.15s;
}
.reauth-link:hover { background: rgba(240, 165, 0, 0.28); }
.reauth-dismiss {
    background: none; border: none;
    color: rgba(255, 255, 255, 0.3); cursor: pointer;
    font-size: 0.9rem; padding: 2px 6px; border-radius: 4px;
    flex-shrink: 0;
}
.reauth-dismiss:hover { color: white; background: rgba(255, 255, 255, 0.08); }

/* ── CEO briefing — summary line + account chips ─────────────────────────── */
.email-briefing-summary {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.25rem 0 0.75rem;
    letter-spacing: 0.01em;
}
.email-empty-hint {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.25rem;
}
.email-account-chips {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    margin: 0 0 0.85rem;
}
.email-account-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: var(--accent-faint);
    border: 1px solid var(--accent-soft);
    color: var(--accent-strong);
    font-size: 0.72rem; font-weight: 600;
    padding: 3px 9px; border-radius: 999px;
    white-space: nowrap;
}
.email-account-chip i { font-size: 0.78rem; }

/* ── CEO briefing — tiered sections (urgent / high / normal) ─────────────── */
.email-tier {
    margin: 0 0 1.25rem;
    border-radius: 14px;
    padding: 0.85rem 1rem 1rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.email-tier-urgent { border-color: rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.06); }
.email-tier-high   { border-color: rgba(240, 165, 0, 0.30);  background: rgba(240, 165, 0, 0.05); }
.email-tier-normal { border-color: rgba(255, 255, 255, 0.06); }
.email-tier-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 0.15rem 0.65rem;
    margin-bottom: 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.email-tier-urgent .email-tier-header { border-bottom-color: rgba(248, 113, 113, 0.20); }
.email-tier-high   .email-tier-header { border-bottom-color: rgba(240, 165, 0, 0.20); }
.email-tier-title {
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.7);
}
.email-tier-urgent .email-tier-title { color: #f87171; }
.email-tier-high   .email-tier-title { color: #f0a500; }
.email-tier-count {
    font-size: 0.7rem; font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 8px; border-radius: 999px;
}
.email-tier-rows {
    display: flex; flex-direction: column;
    gap: 0.65rem;
}

/* ── Email row — used inside each tier ───────────────────────────────────── */
.email-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 0.7rem;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    background: rgba(15, 10, 30, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    align-items: flex-start;
}
.email-row + .email-row { /* belt-and-suspenders separation if gap collapses */ }
.email-row-clickable { cursor: pointer; }
.email-row-clickable:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
}
.email-row-urgent {
    border-left: 3px solid rgba(248, 113, 113, 0.75);
    padding-left: 0.7rem;
}
.email-row-high {
    border-left: 3px solid rgba(240, 165, 0, 0.7);
    padding-left: 0.7rem;
}
.email-row-num {
    font-size: 0.7rem; font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    text-align: right; padding-top: 2px;
}
.email-row-main { min-width: 0; }
.email-row-subject {
    font-size: 0.86rem; font-weight: 600; color: white;
    margin-bottom: 0.15rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.email-row-from {
    font-size: 0.74rem; color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.2rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.email-row-snippet {
    font-size: 0.78rem; color: rgba(255, 255, 255, 0.6);
    line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.email-row-action {
    margin-top: 0.35rem;
    font-size: 0.74rem; font-weight: 600;
    color: var(--accent-strong);
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.email-row-meta {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 0.35rem; flex-shrink: 0;
}
.email-row-date {
    font-size: 0.7rem; color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}
.email-row-unread-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/* ──────────────────────────────────────────────────────────────────────
   Dio overview — landing tab.  Three buckets, analytics, sticky chat.
   ────────────────────────────────────────────────────────────────────── */
.dio-view { background: var(--bg-base); }
.dio-scroll {
    flex: 1; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    padding: 18px 22px 8px;
    display: flex; flex-direction: column; gap: 1.1rem;
}
.dio-loading, .dio-empty {
    color: rgba(255, 255, 255, 0.55); font-size: 0.85rem;
    padding: 1rem 0.5rem;
    display: flex; align-items: center; gap: 0.4rem;
}

/* Greeting block */
.dio-greeting { flex: none; }
.dio-hello {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 0.75rem;
}
.dio-hello-name {
    font-family: var(--font-display);
    font-size: 1.85rem; font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(120deg, var(--text-primary) 0%, var(--accent-strong) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    line-height: 1.15;
}
.dio-hello-date {
    font-family: var(--font-eyebrow);
    font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: 6px;
}
.dio-refresh-btn {
    background: var(--accent-faint);
    border: 1px solid var(--accent-mid);
    color: var(--accent-strong);
    width: 34px; height: 34px; border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex: none; transition: background 0.15s, transform 0.15s;
    box-shadow: var(--lacquer-top);
}
.dio-refresh-btn:hover { transform: rotate(90deg); }
.dio-refresh-btn:hover { background: var(--accent-soft); color: #fff; }
.dio-hero {
    margin-top: 0.7rem;
    padding: 0.65rem 0.95rem;
    background: var(--accent-faint);
    border: 1px solid var(--accent-soft);
    border-radius: 0.6rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.88rem; line-height: 1.5;
}
.dio-hero strong { color: #fff; font-weight: 700; }
.dio-hero-streak {
    color: #ffb86b; font-weight: 700;
    margin-left: 0.5rem;
}

/* Three buckets */
.dio-buckets {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.85rem;
}
@media (max-width: 1100px) {
    .dio-buckets { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .dio-buckets { grid-template-columns: 1fr; }
}
.dio-bucket {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.7rem;
    padding: 0.85rem 0.95rem;
    display: flex; flex-direction: column; min-width: 0;
}
.dio-bucket-today { background: rgba(255, 199, 95, 0.06); border-color: rgba(255, 199, 95, 0.22); }
.dio-bucket-today-empty { background: rgba(110, 231, 183, 0.05); border-color: rgba(110, 231, 183, 0.20); }
.dio-bucket-week  { background: var(--accent-faint); border-color: var(--accent-soft); }
.dio-bucket-month { background: rgba(255, 255, 255, 0.025); }
.dio-bucket-head {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.6rem;
}
.dio-bucket-head i { font-size: 1.05rem; color: var(--accent-strong); }
.dio-bucket-today .dio-bucket-head i { color: var(--warning); }
.dio-bucket-today-empty .dio-bucket-head i { color: var(--positive); }
.dio-bucket-count {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.08);
    color: #fff; font-weight: 600;
    padding: 1px 8px; border-radius: 999px;
    font-size: 0.7rem;
}
.dio-bucket-body { display: flex; flex-direction: column; gap: 0.4rem; }
.dio-sub-label {
    font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.4);
    margin: 0.3rem 0 0.15rem;
}
.dio-item {
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid var(--course-fallback);
    border-radius: 0.4rem;
    padding: 0.45rem 0.6rem;
    cursor: pointer;
    transition: background 0.12s;
}
.dio-item:hover { background: rgba(255, 255, 255, 0.08); }
.dio-block-item { cursor: default; }
.dio-block-item:hover { background: rgba(255, 255, 255, 0.04); }
.dio-item-title {
    font-size: 0.84rem; color: #fff; font-weight: 600;
    line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.dio-item-meta {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
    margin-top: 0.2rem;
    font-size: 0.7rem; color: rgba(255, 255, 255, 0.55);
}
.dio-item-meta i { font-size: 0.78rem; }
.dio-bucket-empty {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem; line-height: 1.5;
    padding: 0.4rem 0.2rem;
    font-style: italic;
}
.dio-more {
    font-size: 0.72rem; color: var(--accent-strong);
    text-align: center;
    padding: 0.3rem;
    font-weight: 600;
}

/* Analytics strip */
.dio-analytics { display: flex; flex-direction: column; gap: 0.85rem; }
.dio-section-label {
    font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.4rem;
    display: flex; align-items: center; gap: 0.35rem;
}

/* Collapsible section chrome — wraps Skills + Portfolio so the user can
   tuck the dense panels away.  State is persisted to localStorage. */
.dio-collapse {
    display: flex; flex-direction: column;
}
.dio-collapse-toggle {
    width: 100%;
    background: transparent;
    border: none;
    padding: 0.25rem 0;
    margin: 0 0 0.4rem 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}
.dio-collapse-toggle:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.02);
}
.dio-collapse-toggle .dio-collapse-title { flex: 0 0 auto; }
.dio-collapse-toggle .dio-section-meta { margin-left: 0.4rem; }
.dio-collapse-chevron {
    margin-left: auto;
    color: var(--text-tertiary);
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}
.dio-collapse.is-collapsed .dio-collapse-chevron {
    transform: rotate(-90deg);
}
.dio-collapse.is-collapsed .dio-collapse-body {
    display: none;
}
.dio-collapse-body {
    animation: dioCollapseFadeIn 0.18s ease;
}
@keyframes dioCollapseFadeIn {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dio-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.55rem;
}
.dio-stat {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.6rem;
    transition: background 0.12s;
}
.dio-stat-icon {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex: none; font-size: 1.1rem;
}
.dio-stat-positive { border-color: rgba(110, 231, 183, 0.28); }
.dio-stat-positive .dio-stat-icon { background: rgba(110, 231, 183, 0.14); color: var(--positive); }
.dio-stat-positive .dio-stat-value { color: var(--positive); }
.dio-stat-neutral { border-color: var(--accent-mid); }
.dio-stat-neutral .dio-stat-icon { background: rgba(124, 92, 255, 0.16); color: var(--accent-strong); }
.dio-stat-neutral .dio-stat-value { color: #cfc4ff; }
.dio-stat-risk { border-color: rgba(255, 99, 99, 0.30); }
.dio-stat-risk .dio-stat-icon { background: rgba(255, 99, 99, 0.16); color: var(--risk); }
.dio-stat-risk .dio-stat-value { color: var(--risk); }
.dio-stat-body { min-width: 0; flex: 1; }
.dio-stat-value {
    font-size: 1.35rem; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.dio-stat-unit {
    font-size: 0.72rem; font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 0.15rem;
}
.dio-stat-label {
    font-size: 0.74rem; font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 1px;
}
.dio-stat-sub {
    font-size: 0.7rem; color: rgba(255, 255, 255, 0.45);
    margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dio-bar-wrap { padding-top: 0.2rem; }
.dio-bar {
    display: flex; height: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px; overflow: hidden;
}
.dio-bar-seg { height: 100%; transition: filter 0.15s; }
.dio-bar-seg:hover { filter: brightness(1.2); }
.dio-bar-legend {
    display: flex; flex-wrap: wrap; gap: 0.65rem;
    margin-top: 0.5rem;
    font-size: 0.72rem; color: rgba(255, 255, 255, 0.6);
}
.dio-bar-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.dio-bar-dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}

.dio-course-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.4rem;
}
.dio-course-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.45rem 0.65rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--course-fallback);
    border-radius: 0.4rem;
    cursor: pointer;
    transition: background 0.12s;
}
.dio-course-row:hover { background: rgba(255, 255, 255, 0.07); }
.dio-course-name {
    font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
}
.dio-course-pct {
    font-size: 0.95rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: 0.5rem;
}
.dio-course-positive .dio-course-pct { color: var(--positive); }
.dio-course-neutral  .dio-course-pct { color: var(--warning); }
.dio-course-risk     .dio-course-pct { color: var(--risk); }

.dio-completed-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dio-completed-pill {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.7rem;
    background: rgba(110, 231, 183, 0.08);
    border-left: 3px solid var(--positive);
    border-radius: 0.45rem;
    cursor: pointer;
    transition: background 0.12s;
    font-size: 0.78rem; color: rgba(255, 255, 255, 0.85);
    max-width: 320px;
}
.dio-completed-pill:hover { background: rgba(110, 231, 183, 0.15); }
.dio-completed-pill > span:first-child {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dio-completed-course {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    flex: none;
}

/* Student North Star — goals + value (OECD Learning Compass, Phase 3).
   Compact card at the top of the Dio scroll — accent-bordered. */
.dio-agency:empty { display: none; }
.dio-northstar {
    background: var(--accent-faint);
    border: 1px solid var(--accent-mid);
    border-radius: var(--radius-lg);
    padding: 0.85rem 1rem;
    display: flex; flex-direction: column; gap: 0.55rem;
}
.dio-northstar-onboard { background: var(--surface-1); border-style: dashed; border-color: var(--accent-mid); }
.dio-northstar-head {
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.dio-northstar-head i { color: var(--accent); font-size: 1.05rem; }
.dio-northstar-edit {
    margin-left: auto;
    background: var(--surface-2); border: 1px solid var(--border-mid);
    color: var(--text-tertiary); font-family: inherit;
    font-size: 0.7rem; font-weight: 600;
    padding: 0.2rem 0.6rem; border-radius: var(--radius-pill);
    cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem;
    transition: background 0.12s, color 0.12s;
}
.dio-northstar-edit:hover { background: var(--surface-3); color: var(--text-primary); }
.dio-northstar-value {
    font-style: italic;
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.5;
    padding: 0.3rem 0;
    border-left: 3px solid var(--accent);
    padding-left: 0.85rem;
}
.dio-northstar-goals {
    display: flex; flex-direction: column; gap: 0.4rem;
    margin-top: 0.2rem;
}
.dio-northstar-goal {
    display: flex; gap: 0.55rem; align-items: flex-start;
    background: var(--surface-1);
    border-radius: var(--radius-md);
    padding: 0.45rem 0.7rem;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.5;
}
.dio-northstar-num {
    flex: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
    margin-top: 1px;
}
.dio-northstar-text { flex: 1; min-width: 0; }
.dio-northstar-goal-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 0.35rem;
}
.dio-northstar-chip {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: var(--surface-3);
    border: 1px solid var(--accent-faint);
    color: var(--accent);
    font-size: 0.72rem; font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dio-northstar-chip:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.dio-northstar-chip i { font-size: 0.85rem; }
.dio-northstar-chip-pending {
    background: transparent;
    border-style: dashed;
    color: var(--text-tertiary);
    cursor: default;
}
.dio-northstar-chip-pending:hover {
    background: transparent;
    color: var(--text-tertiary);
    border-color: var(--accent-faint);
}

/* Goal alignment modal — shared with other dio-modal use sites. */
.dio-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(8, 11, 20, 0.62);
    backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9000;
    padding: 1.2rem;
}
.dio-modal {
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    width: 100%; max-width: 560px;
    max-height: 82vh;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.dio-modal-head {
    display: flex; align-items: flex-start; gap: 0.7rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--border);
}
.dio-modal-head > i { color: var(--accent); font-size: 1.4rem; margin-top: 2px; }
.dio-modal-eyebrow {
    font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--text-tertiary);
    margin-bottom: 2px;
}
.dio-modal-title {
    font-size: 0.98rem; font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}
.dio-modal-close {
    margin-left: auto;
    background: transparent; border: none; cursor: pointer;
    color: var(--text-tertiary);
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
}
.dio-modal-close:hover { color: var(--text-primary); background: var(--surface-3); }
.dio-modal-body {
    padding: 0.9rem 1.15rem 1.15rem;
    overflow-y: auto;
}
.dio-align-section-label {
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: 0.55rem;
    display: flex; align-items: center; gap: 0.4rem;
}
.dio-align-section-label i { color: var(--accent); font-size: 0.95rem; }
.dio-align-item {
    background: var(--surface-1);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.4rem;
}
.dio-align-item-head {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 2px;
}
.dio-align-name {
    font-size: 0.86rem; font-weight: 600;
    color: var(--text-primary);
    flex: 1; min-width: 0;
}
.dio-align-conf {
    font-size: 0.7rem; font-weight: 700;
    color: var(--accent);
    background: var(--accent-faint);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}
.dio-align-why {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.45;
}
.dio-empty-mini {
    color: var(--text-tertiary);
    font-size: 0.82rem;
    padding: 0.4rem 0;
}
.dio-northstar-intro {
    font-size: 0.8rem; color: var(--text-tertiary);
    line-height: 1.55;
    padding-bottom: 0.3rem;
}
.dio-northstar-form { display: flex; flex-direction: column; gap: 0.5rem; }
.dio-northstar-section-label {
    font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-top: 0.3rem;
}
.dio-northstar-hint {
    font-size: 0.74rem; color: var(--text-muted);
    margin-bottom: 0.1rem;
}
.dio-northstar-input-row {
    display: flex; gap: 0.55rem; align-items: center;
}
.dio-northstar-input-row input,
.dio-northstar-value-input {
    flex: 1;
    background: var(--bg-base);
    border: 1px solid var(--border-mid);
    color: var(--text-primary);
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.86rem;
    transition: border-color 0.12s;
}
.dio-northstar-input-row input:focus,
.dio-northstar-value-input:focus {
    border-color: var(--accent);
    outline: none;
}
.dio-northstar-actions {
    display: flex; gap: 0.45rem; justify-content: flex-end;
    margin-top: 0.4rem;
}
.dio-northstar-save {
    background: var(--accent); border: 0; color: #fff;
    font-weight: 600; font-size: 0.8rem;
    padding: 0.45rem 0.95rem;
    border-radius: var(--radius-pill);
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 0.3rem;
    transition: background 0.15s;
}
.dio-northstar-save:hover { background: var(--accent-hover); }
.dio-northstar-cancel {
    background: var(--surface-2); border: 1px solid var(--border-mid);
    color: var(--text-tertiary);
    font-weight: 600; font-size: 0.78rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-pill);
    cursor: pointer; font-family: inherit;
    transition: background 0.12s, color 0.12s;
}
.dio-northstar-cancel:hover { background: var(--surface-3); color: var(--text-primary); }

/* Skills cloud (KSAV "S" — OECD Learning Compass 2030).
   Concept-style chips grouped by category, sized by evidence count. */
.dio-skills:empty { display: none; }
.dio-section-meta {
    margin-left: auto;
    font-weight: 500; font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: none; letter-spacing: 0;
}
.dio-skills-empty {
    color: var(--text-tertiary); font-size: 0.82rem;
    padding: 0.7rem 0.4rem;
    font-style: italic;
}
.dio-skills-categories { display: flex; flex-direction: column; gap: 0.7rem; }
.dio-skill-cat-label {
    font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: 0.35rem;
}
.dio-skill-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dio-skill-chip {
    background: var(--surface-2);
    border: 1px solid var(--border-mid);
    color: var(--text-primary);
    padding: 0.32rem 0.7rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex; align-items: center; gap: 0.35rem;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
    line-height: 1.3;
}
.dio-skill-chip:hover { transform: translateY(-1px); border-color: var(--accent-mid); }
.dio-skill-count {
    font-variant-numeric: tabular-nums;
    background: var(--surface-3);
    color: var(--text-tertiary);
    border-radius: var(--radius-pill);
    padding: 0 0.45em;
    font-size: 0.72em;
    font-weight: 600;
}
/* Per-category accent border. */
.dio-skill-cognitive       { border-color: rgba(124, 92, 255, 0.40); }
.dio-skill-self_regulation { border-color: rgba(110, 220, 140, 0.40); }
.dio-skill-social          { border-color: rgba(255, 199, 95, 0.40); }
.dio-skill-practical       { border-color: rgba(127, 170, 255, 0.40); }
.dio-skill-transformative  { border-color: rgba(255, 142, 125, 0.45); background: rgba(255, 142, 125, 0.08); }
.dio-skill-cognitive       .dio-skill-count { color: var(--accent-strong); background: var(--accent-faint); }
.dio-skill-self_regulation .dio-skill-count { color: var(--positive); background: var(--positive-soft); }
.dio-skill-social          .dio-skill-count { color: var(--warning); background: var(--warning-soft); }
.dio-skill-transformative  .dio-skill-count { color: var(--risk); background: var(--risk-soft); }

/* Transformative competencies portfolio (OECD Compass, Phase 4).
   Three large cards with one-line stats + expand-to-evidence modal. */
.dio-portfolio:empty { display: none; }
.dio-portfolio-empty {
    color: var(--text-tertiary); font-size: 0.85rem;
    background: var(--surface-1); border: 1px dashed var(--border-mid);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    line-height: 1.55;
}
.dio-portfolio-empty em { color: var(--text-secondary); font-style: italic; }
.dio-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.65rem;
}
.dio-portfolio-card {
    --portfolio-accent: var(--accent);
    background: var(--surface-1);
    border: 1px solid var(--border-mid);
    border-top: 3px solid var(--portfolio-accent);
    border-radius: var(--radius-lg);
    padding: 0.85rem 1rem;
    display: flex; flex-direction: column; gap: 0.65rem;
    transition: background 0.12s, transform 0.08s;
}
.dio-portfolio-card:hover { background: var(--surface-2); transform: translateY(-1px); }
.dio-portfolio-card-head { display: flex; gap: 0.65rem; align-items: flex-start; }
.dio-portfolio-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--portfolio-accent) 20%, transparent);
    display: flex; align-items: center; justify-content: center;
    color: var(--portfolio-accent);
    font-size: 1.2rem;
    flex: none;
}
.dio-portfolio-card-titles { flex: 1; min-width: 0; }
.dio-portfolio-card-name {
    font-size: 0.95rem; font-weight: 700; color: var(--text-primary);
    line-height: 1.3;
}
.dio-portfolio-card-sub {
    font-size: 0.74rem; color: var(--text-tertiary);
    line-height: 1.45;
    margin-top: 0.2rem;
}
.dio-portfolio-stats {
    display: flex; gap: 0.85rem; flex-wrap: wrap;
    font-size: 0.74rem;
    color: var(--text-tertiary);
}
.dio-portfolio-stats strong {
    color: var(--portfolio-accent); font-size: 1.05rem; font-weight: 700;
    margin-right: 0.2rem;
    font-variant-numeric: tabular-nums;
}
.dio-portfolio-expand {
    background: var(--surface-2); border: 1px solid var(--border-mid);
    color: var(--text-secondary); font-family: inherit;
    font-size: 0.78rem; font-weight: 600;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    align-self: flex-start;
    transition: background 0.12s, color 0.12s;
}
.dio-portfolio-expand:hover { background: var(--surface-3); color: var(--text-primary); }

/* Portfolio evidence modal — richer than the skill modal because it
   inlines anticipation + reflection text per assignment. */
.dio-portfolio-modal-card { width: min(720px, 100%); }
.dio-portfolio-evidence-list { display: flex; flex-direction: column; gap: 0.6rem; }
.dio-portfolio-evidence {
    background: var(--surface-1);
    border-left: 3px solid var(--course-fallback);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.95rem;
    display: flex; flex-direction: column; gap: 0.45rem;
}
.dio-portfolio-evidence-head {
    display: flex; gap: 0.55rem; align-items: baseline; flex-wrap: wrap;
}
.dio-portfolio-evidence-title {
    font-weight: 600; color: var(--text-primary); font-size: 0.9rem;
}
.dio-portfolio-evidence-course {
    font-size: 0.72rem; color: var(--text-tertiary);
}
.dio-portfolio-evidence-tag {
    font-size: 0.78rem; color: var(--accent-strong);
    display: flex; gap: 0.3rem; align-items: flex-start;
    line-height: 1.5;
}
.dio-portfolio-evidence-tag i { color: var(--accent); flex: none; margin-top: 2px; }
.dio-portfolio-evidence-aar {
    font-size: 0.8rem; color: var(--text-secondary);
    line-height: 1.55;
    padding: 0.4rem 0.55rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}
.dio-portfolio-evidence-aar strong {
    color: var(--accent-strong); font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-right: 0.4rem;
}
.dio-portfolio-evidence-reflection { background: var(--accent-faint); }
.dio-portfolio-evidence-actions { display: flex; }
.dio-portfolio-evidence-open {
    background: none; border: 0;
    color: var(--accent); font-family: inherit;
    font-size: 0.78rem; font-weight: 600;
    cursor: pointer; padding: 0;
    transition: color 0.12s;
}
.dio-portfolio-evidence-open:hover { color: var(--accent-hover); }

/* Skill drilldown modal. */
.dio-skill-modal {
    position: fixed; inset: 0;
    background: var(--bg-overlay);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    backdrop-filter: blur(8px);
}
.dio-skill-modal-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-lg);
    width: min(640px, 100%);
    max-height: 80vh;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-lg);
}
.dio-skill-modal-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
}
.dio-skill-modal-title {
    font-size: 1.05rem; font-weight: 700; color: var(--text-primary);
    display: flex; align-items: center; gap: 0.5rem;
}
.dio-skill-modal-title i { color: var(--accent); font-size: 1.2rem; }
.dio-skill-modal-sub {
    font-size: 0.78rem; color: var(--text-tertiary);
    margin-top: 0.3rem; line-height: 1.5;
}
.dio-skill-modal-close {
    background: var(--surface-2); border: 0;
    color: var(--text-tertiary);
    width: 32px; height: 32px; border-radius: 50%;
    cursor: pointer; flex: none;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s;
}
.dio-skill-modal-close:hover { background: var(--surface-3); color: var(--text-primary); }
.dio-skill-modal-body {
    flex: 1; overflow-y: auto;
    padding: 1rem 1.25rem 1.25rem;
}
.dio-skill-evidence-list { display: flex; flex-direction: column; gap: 0.55rem; }
.dio-skill-evidence-row {
    background: var(--surface-1);
    border-left: 3px solid var(--course-fallback);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    transition: background 0.12s;
}
.dio-skill-evidence-row:hover { background: var(--surface-2); }
.dio-skill-evidence-title {
    font-weight: 600; font-size: 0.88rem; color: var(--text-primary);
    line-height: 1.35;
}
.dio-skill-evidence-meta {
    display: flex; gap: 0.6rem; flex-wrap: wrap;
    margin-top: 0.2rem;
    font-size: 0.72rem; color: var(--text-tertiary);
}
.dio-skill-evidence-text {
    margin-top: 0.4rem;
    font-size: 0.78rem; color: var(--accent-strong);
    line-height: 1.5;
    display: flex; gap: 0.35rem; align-items: flex-start;
}
.dio-skill-evidence-text i { color: var(--accent); flex: none; margin-top: 2px; }

/* Dio chat thread + compose (mirrors coach-focus pattern) */
.dio-thread {
    display: flex; flex-direction: column; gap: 0.55rem;
    padding: 0.4rem 0;
}
.dio-msg {
    max-width: 92%;
    padding: 0.55rem 0.85rem;
    border-radius: 0.7rem;
    font-size: 0.85rem; line-height: 1.55;
}
.dio-msg-user {
    align-self: flex-end;
    background: var(--accent-soft);
    border: 1px solid var(--accent-mid);
    color: #fff;
}
.dio-msg-agent {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.85);
}

.dio-quickreplies {
    display: flex; gap: 0.35rem; flex-wrap: wrap;
    padding: 0.5rem 22px 0.4rem;
    flex-shrink: 0;
    background: var(--bg-base);
}
.dio-quickreplies:empty { display: none; }
.dio-quickreply-btn {
    background: var(--accent-faint);
    border: 1px solid var(--accent-mid);
    color: #cfc4ff;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.74rem; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.3rem;
    transition: background 0.12s, color 0.12s;
    font-family: inherit;
}
.dio-quickreply-btn:hover {
    background: var(--accent-soft);
    color: #fff;
}
.dio-quickreply-btn i { font-size: 0.85rem; }

.dio-compose {
    display: flex; gap: 0.4rem;
    padding: 10px 22px 16px;
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: var(--bg-base);
}
.dio-compose input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #fff;
    padding: 0.55rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.88rem;
    font-family: inherit;
}
.dio-compose input:focus {
    border-color: var(--accent-strong-bg);
    outline: none;
}
.dio-compose button {
    background: var(--accent);
    border: 0;
    color: #fff;
    width: 38px; height: 38px;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.dio-compose button:hover { background: var(--accent-hover); }


/* ============================================================
   Atrium Light — Udacity-pattern light theme overrides.  Applied at
   the end of the file so they win the cascade.  Replaces the prior
   dark/lacquer treatment.
   ============================================================ */

/* Top bar — light surface with a thin separator (was dark Teams chrome). */
.teams-topbar,
.navbar {
    background: var(--bg-panel) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-mid) !important;
    box-shadow: var(--shadow-sm);
    backdrop-filter: none !important;
}
.teams-logo,
.logo {
    color: var(--accent) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: var(--font-display);
    font-weight: 800;
}
.teams-user,
.topbar-account,
.topbar-account * {
    color: var(--text-primary) !important;
}
.account-menu {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--text-primary) !important;
}

/* Sidebar — light panel with a subtle border, blue accent on active. */
.teams-sidebar {
    background: var(--bg-panel) !important;
    border-right: 1px solid var(--border-mid) !important;
    color: var(--text-primary) !important;
}
.sidebar-header {
    color: var(--text-tertiary) !important;
    font-family: var(--font-eyebrow);
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.agent-item {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 1px solid transparent !important;
    transition: background 0.15s, border-color 0.15s;
}
.agent-item:hover {
    background: var(--accent-faint) !important;
    border-color: var(--border-subtle) !important;
}
.agent-item.active {
    background: var(--accent-faint) !important;
    border-color: var(--accent-soft) !important;
    color: var(--accent-strong) !important;
}
.agent-item.active .agent-icon i,
.agent-item.active .agent-name {
    color: var(--accent) !important;
}
.agent-name { color: var(--text-primary) !important; }
.agent-desc { color: var(--text-tertiary) !important; }

/* Body of every main view goes light. */
.dio-view,
.coach-view,
.brightspace-view,
.teams-main,
.container {
    background: var(--bg-base) !important;
    color: var(--text-primary) !important;
}

/* Anything inside a main view that uses hardcoded white text gets
   pulled back to the dark navy text color.  Targeted to text-only
   classes, never to backgrounds or borders. */
.dio-view, .coach-view, .brightspace-view,
.dio-view p, .coach-view p, .brightspace-view p,
.dio-view span, .coach-view span, .brightspace-view span,
.dio-view div, .coach-view div, .brightspace-view div,
.dio-view h1, .dio-view h2, .dio-view h3, .dio-view h4, .dio-view h5,
.coach-view h1, .coach-view h2, .coach-view h3, .coach-view h4,
.brightspace-view h1, .brightspace-view h2, .brightspace-view h3 {
    color: inherit;
}
.dio-view, .coach-view, .brightspace-view { color: var(--text-primary); }

/* Cards across the dashboard — white surfaces with the soft shadow. */
.dio-bucket,
.dio-stat,
.dio-northstar,
.dio-portfolio-card,
.dio-skill-cat,
.dio-modal,
.dio-thread,
.bk-fs-card,
.coach-card,
.coach-focus,
.brightspace-card {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm);
}

/* Primary CTAs — solid Udacity blue, white text, soft shadow. */
.btn-next,
.btn-small,
.dio-northstar-save,
.dio-bucket-cta,
.dio-coach-quick-reply,
.bk-fs-aar-save,
.dio-compose button,
.btn-primary {
    background: var(--accent) !important;
    background-image: none !important;
    color: var(--text-on-dark) !important;
    border: 1px solid transparent !important;
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}
.btn-next:hover:not(:disabled),
.btn-small:hover,
.dio-northstar-save:hover,
.dio-bucket-cta:hover,
.dio-coach-quick-reply:hover,
.bk-fs-aar-save:hover,
.dio-compose button:hover,
.btn-primary:hover {
    background: var(--accent-hover) !important;
    box-shadow: var(--shadow);
}

/* Counter pills — solid blue chip with white numeric. */
.dio-bucket-count,
.dio-northstar-num,
.dio-skill-count,
.dio-northstar-chip:not(.dio-northstar-chip-pending) {
    background: var(--accent) !important;
    color: var(--text-on-dark) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

/* Progress bars — flat track + blue fill, no inset. */
.brightspace-bar,
.dio-bar,
.coach-progress,
progress {
    background: var(--surface-3) !important;
    box-shadow: none !important;
    border: none !important;
}
.brightspace-bar > div,
.dio-bar-seg,
.coach-progress > div {
    box-shadow: none !important;
}

/* Inputs — flat plates with focus halo. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
    background: var(--bg-panel) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-mid) !important;
    box-shadow: none !important;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder { color: var(--text-muted) !important; }
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    outline: none;
}

/* Hero greeting name no longer needs a gradient — strong dark color reads
   better on a light bg.  Lock the gradient text trick off. */
.dio-hello-name {
    background: none !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
}
.dio-hero {
    background: var(--accent-faint) !important;
    border: 1px solid var(--accent-soft) !important;
    color: var(--text-primary) !important;
}
.dio-hero strong { color: var(--accent-strong) !important; }

/* North Star value quote should read on a white card. */
.dio-northstar-value { color: var(--text-secondary) !important; }
.dio-northstar-text  { color: var(--text-primary) !important; }
.dio-northstar-edit  { color: var(--accent) !important; }

/* Stat tiles — white surface, big navy value, status pop on icon. */
.dio-stat-value { color: var(--text-primary) !important; }
.dio-stat-label { color: var(--text-tertiary) !important; }
.dio-stat-icon i { color: var(--accent) !important; }
.dio-stat-positive .dio-stat-icon i { color: var(--positive) !important; }
.dio-stat-warning  .dio-stat-icon i { color: var(--warning)  !important; }
.dio-stat-risk     .dio-stat-icon i { color: var(--risk)     !important; }

/* Bucket headers / counts on white cards. */
.dio-bucket-head span { color: var(--text-primary) !important; }
.dio-bucket-head i    { color: var(--accent) !important; }

/* Skill chip cloud — soft tinted pill, deep text. */
.dio-skill-chip {
    background: var(--accent-faint) !important;
    color: var(--accent-strong) !important;
    border: 1px solid var(--accent-soft) !important;
}
.dio-skill-chip:hover {
    background: var(--accent-soft) !important;
}

/* Recently-completed pills + course-grade rows on white. */
.dio-completed-pill,
.dio-course-row {
    background: var(--bg-panel) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-mid) !important;
}

/* Coach + Brightspace dark surfaces flip to light. */
.coach-thread,
.coach-message,
.brightspace-list,
.bk-fs-overlay,
.bk-fs-shell {
    background: var(--bg-panel) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-mid) !important;
}

/* Modal chrome — keep light surfaces. */
.dio-modal-backdrop {
    background: var(--bg-overlay) !important;
    backdrop-filter: blur(2px);
}
.dio-modal { background: var(--bg-panel) !important; color: var(--text-primary) !important; }
.dio-modal-title  { color: var(--text-primary) !important; }
.dio-modal-eyebrow { color: var(--text-tertiary) !important; }

/* Alignment evidence rows. */
.dio-align-item    { background: var(--bg-elevated) !important; border: 1px solid var(--border-subtle); }
.dio-align-name    { color: var(--text-primary) !important; }
.dio-align-why     { color: var(--text-secondary) !important; }
.dio-align-conf    { background: var(--accent-soft) !important; color: var(--accent-strong) !important; }

/* Collapse-toggle hover — subtle tint instead of white-on-dark wash. */
.dio-collapse-toggle:hover {
    background: var(--surface-1) !important;
    color: var(--text-primary) !important;
}
.dio-collapse-chevron { color: var(--text-tertiary) !important; }

/* Scrollbars look better light. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 8px;
    border: 2px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }


/* ============================================================
   Atrium Light — pass 2: dark-locked elements that pass 1 missed.
   Targets the assignment items inside bucket bodies, the quick-reply
   chip strip, the chat compose bar, and dark coach/brightspace text.
   ============================================================ */

/* Assignment + study-block items inside Today/This Week/This Month. */
.dio-item {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    border-left: 3px solid var(--course-fallback);
    color: var(--text-primary) !important;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.dio-item:hover {
    background: var(--accent-faint) !important;
    border-color: var(--accent-soft) !important;
    transform: translateY(-1px);
}
.dio-block-item:hover {
    background: var(--bg-elevated) !important;
    transform: none;
}
.dio-item-title {
    color: var(--text-primary) !important;
    font-weight: 600;
}
.dio-item-meta { color: var(--text-tertiary) !important; }
.dio-item-meta i { color: var(--text-tertiary) !important; }
.dio-bucket-empty { color: var(--text-tertiary) !important; }
.dio-bucket-head .dio-bucket-count { color: var(--text-on-dark) !important; }

/* "Recently completed" pills + course-grade rows. */
.dio-completed-pill,
.dio-completed-pill * { color: var(--text-primary) !important; }
.dio-completed-pill:hover { background: var(--accent-faint) !important; }
.dio-completed-course { color: var(--text-tertiary) !important; }
.dio-course-name { color: var(--text-primary) !important; }
.dio-course-pct  { color: var(--text-primary) !important; }

/* Quick-reply chips — solid white pills with blue accent text + border.
   Killing the lavender hold-over color was the clickability fix. */
.dio-quickreplies {
    background: var(--bg-base) !important;
    border-top: 1px solid var(--border-mid);
}
.dio-quickreply-btn {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--accent) !important;
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}
.dio-quickreply-btn:hover {
    background: var(--accent) !important;
    color: var(--text-on-dark) !important;
    border-color: var(--accent) !important;
    transform: translateY(-1px);
}
.dio-quickreply-btn i { color: inherit !important; }

/* Chat compose bar at the bottom of every view. */
.dio-compose {
    background: var(--bg-panel) !important;
    border-top: 1px solid var(--border-mid) !important;
}
.dio-compose input {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-mid) !important;
}
.dio-compose input::placeholder { color: var(--text-muted) !important; }
.dio-compose input:focus {
    background: var(--bg-panel) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
.dio-compose button { color: var(--text-on-dark) !important; }

/* Section labels living above the chip cloud / portfolio strip. */
.dio-section-label,
.dio-section-meta,
.dio-skill-cat-label {
    color: var(--text-tertiary) !important;
}
.dio-section-label i { color: var(--accent) !important; }

/* Skill modal evidence cards. */
.dio-evidence-row,
.dio-evidence-row * { color: var(--text-primary); }
.dio-evidence-meta { color: var(--text-tertiary) !important; }

/* Coach view dark surfaces. */
.coach-thread,
.coach-message,
.coach-message-content,
.coach-card,
.coach-focus,
.coach-focus-body,
.coach-section,
.coach-prompt,
.coach-input {
    background: var(--bg-panel) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-mid) !important;
}
.coach-message-user {
    background: var(--accent) !important;
    color: var(--text-on-dark) !important;
}
.coach-message-bot { background: var(--bg-elevated) !important; }
.coach-meta, .coach-sub, .coach-time { color: var(--text-tertiary) !important; }
.coach-input input,
.coach-input textarea {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-mid) !important;
}

/* Brightspace + full-screen assignment viewport — flip card surfaces. */
.brightspace-list,
.brightspace-course-card,
.brightspace-assignment,
.brightspace-resource-item,
.bk-fs-overlay,
.bk-fs-shell,
.bk-fs-card,
.bk-fs-section,
.bk-fs-aar-card,
.bk-fs-references,
.bk-fs-completion {
    background: var(--bg-panel) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-mid) !important;
}
.bk-fs-overlay { background: var(--bg-overlay) !important; }
.bk-fs-shell  { background: var(--bg-base) !important; }
.brightspace-course-card *,
.brightspace-assignment *,
.bk-fs-card * { color: inherit; }
.bk-fs-title,
.brightspace-course-title,
.brightspace-assignment-title { color: var(--text-primary) !important; }
.bk-fs-meta,
.brightspace-course-meta,
.brightspace-assignment-meta,
.bk-fs-status { color: var(--text-tertiary) !important; }

/* Dio thread bubbles (the chat that lives in the dashboard). */
.dio-thread,
.dio-thread-msg,
.dio-msg-bot,
.dio-msg-user,
.dio-msg-content {
    background: var(--bg-panel) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-mid) !important;
}
.dio-msg-user { background: var(--accent) !important; color: var(--text-on-dark) !important; }
.dio-msg-bot  { background: var(--bg-elevated) !important; }
.dio-msg-meta { color: var(--text-tertiary) !important; }

/* Sidebar alerts panel — same light treatment. */
.sidebar-alerts,
.sidebar-alert-item {
    background: var(--bg-panel) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-mid) !important;
}
.sidebar-alert-meta { color: var(--text-tertiary) !important; }

/* Login + onboarding pages keep their layout but flip color. */
.login-card,
.onboarding-card {
    background: var(--bg-panel) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-mid) !important;
    box-shadow: var(--shadow);
}

/* Generic fallback — any element using rgba(255,255,255,*) for text
   inside a main view inherits the dark-navy primary text instead.  This
   catches micro-text we haven't enumerated above without breaking
   intentionally-white text on accent buttons (which use color: var(--text-on-dark)). */
.dio-view [style*="color:#fff"],
.coach-view [style*="color:#fff"],
.brightspace-view [style*="color:#fff"] {
    color: var(--text-primary) !important;
}


/* ============================================================
   Atrium Light — pass 3: calendar week grid + brightspace module
   tree + the dark assignment full-screen quick-reply chips.  These
   were holdouts because they used inline styles or class names not
   covered by pass-1/2 selectors.
   ============================================================ */

/* — Calendar — */
.cal-view {
    background: var(--bg-base) !important;
    color: var(--text-primary) !important;
}
.cal-toolbar {
    border-bottom: 1px solid var(--border-mid) !important;
    background: var(--bg-panel);
}
.cal-nav-btn {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--text-primary) !important;
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s;
}
.cal-nav-btn:hover {
    background: var(--accent-faint) !important;
    border-color: var(--accent-soft) !important;
    color: var(--accent) !important;
}
.cal-week-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    text-align: center;
}
.cal-auto-btn {
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    color: var(--text-on-dark) !important;
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    transition: background 0.12s;
}
.cal-auto-btn:hover { background: var(--accent-hover) !important; }

.cal-week-grid {
    background: var(--bg-panel);
    border-top: 1px solid var(--border-subtle);
}
.cal-day {
    border-right: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding: 6px 5px;
    min-height: 100px;
}
.cal-day-today {
    background: var(--accent-faint);
}
.cal-day-past { opacity: 0.65; }
.cal-day-name {
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
    font-family: var(--font-eyebrow);
    font-weight: 700;
}
.cal-day-today .cal-day-name { color: var(--accent); }
.cal-day-num {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.cal-day-today .cal-day-num {
    color: var(--accent-strong);
    font-weight: 700;
}
.cal-day-empty { font-size: 10px; color: var(--text-faint); }
.cal-loading { grid-column: 1/-1; text-align: center; color: var(--text-tertiary); padding: 40px; font-size: 13px; }
.cal-undated {
    border-top: 1px solid var(--border-mid);
    background: var(--bg-panel);
}
.cal-undated-label {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    font-family: var(--font-eyebrow);
    font-weight: 700;
}

/* Calendar mini-chat at the bottom. */
.cal-chat-thread,
.cal-chat-msg,
.cal-chat-mini {
    background: var(--bg-panel) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-mid) !important;
}
.cal-chat-user { color: var(--accent) !important; }
.cal-chat-agent { color: var(--text-secondary) !important; }
.cal-chat-mini input {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-mid) !important;
}
.cal-chat-mini input::placeholder { color: var(--text-muted) !important; }
.cal-chat-mini input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.cal-chat-send {
    background: var(--accent) !important;
    color: var(--text-on-dark) !important;
}
.cal-chat-send:hover { background: var(--accent-hover) !important; }

/* — Brightspace module tree (the SpartanLearn course-navigator on
   the left of the brightspace view). — */
.brightspace-tree,
.brightspace-tree-header,
.brightspace-module,
.brightspace-module-title,
.brightspace-module-assignments {
    background: var(--bg-panel) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}
.brightspace-tree { border: 1px solid var(--border-mid) !important; border-radius: var(--radius-md); }
.brightspace-module { border-bottom: 1px solid var(--border-subtle) !important; }
.brightspace-tree-course-title { color: var(--text-primary) !important; font-weight: 700; }
.brightspace-tree-course-meta { color: var(--text-tertiary) !important; }
.brightspace-module-title {
    color: var(--text-secondary) !important;
    font-weight: 600;
}
.brightspace-module-title:hover {
    background: var(--accent-faint) !important;
    color: var(--accent-strong) !important;
}
.brightspace-tree-loading { color: var(--text-tertiary) !important; }
.brightspace-module-locked .brightspace-module-title { color: var(--text-faint) !important; }
.brightspace-asgn-rag { color: var(--text-secondary) !important; }
.brightspace-asgn-rag.rag-complete { background: var(--positive-soft) !important; color: var(--positive) !important; }
.brightspace-caret { color: var(--text-tertiary) !important; }

/* Brightspace chat strip at the bottom. */
.brightspace-chat-strip,
.brightspace-chat-thread,
.brightspace-chat-form {
    background: var(--bg-panel) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-mid) !important;
}
.brightspace-chat-user  { color: var(--accent) !important; }
.brightspace-chat-agent { color: var(--text-secondary) !important; }
.brightspace-chat-form input {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-mid) !important;
}
.brightspace-chat-form input::placeholder { color: var(--text-muted) !important; }
.brightspace-chat-form input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* — Full-screen assignment viewport quick-reply chips. — */
.bk-fs-quick-btn {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--accent) !important;
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}
.bk-fs-quick-btn:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--text-on-dark) !important;
}
.bk-fs-quick-btn i { color: inherit !important; }

/* — Full-screen viewport overlay + shell — overrides for any of the
   bk-fs subsections that didn't pick up pass-2 colors. — */
.bk-fs-overlay { background: rgba(11, 11, 11, 0.55) !important; backdrop-filter: blur(2px); }
.bk-fs-shell {
    background: var(--bg-base) !important;
    color: var(--text-primary) !important;
}
.bk-fs-header,
.bk-fs-topbar,
.bk-fs-body,
.bk-fs-content,
.bk-fs-aar,
.bk-fs-tasks,
.bk-fs-required,
.bk-fs-references,
.bk-fs-completion,
.bk-fs-section,
.bk-fs-card,
.bk-fs-aar-card,
.bk-fs-resource-row,
.bk-fs-resource-card {
    background: var(--bg-panel) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-mid) !important;
}
.bk-fs-eyebrow,
.bk-fs-meta,
.bk-fs-status,
.bk-fs-resource-type,
.bk-fs-resource-meta { color: var(--text-tertiary) !important; }
.bk-fs-aar-card * { color: inherit; }
.bk-fs-aar input,
.bk-fs-aar textarea {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-mid) !important;
}
.bk-fs-aar input::placeholder,
.bk-fs-aar textarea::placeholder { color: var(--text-muted) !important; }
.bk-fs-skip,
.bk-fs-collapse,
.bk-fs-close { color: var(--text-tertiary) !important; }
.bk-fs-skip:hover,
.bk-fs-close:hover { color: var(--accent) !important; }

/* Tasks-to-complete numbered list. */
.bk-fs-tasks ol li::marker,
.bk-fs-tasks .bk-fs-task-num {
    color: var(--accent) !important;
    font-weight: 700;
}

/* Reference materials accordion rows. */
.bk-fs-ref-card,
.bk-fs-ref-row {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
}
.bk-fs-ref-title { color: var(--text-primary) !important; font-weight: 600; }
.bk-fs-ref-summary { color: var(--text-secondary) !important; }
.bk-fs-ref-shares  { color: var(--positive) !important; }
.bk-fs-ref-relevance { color: var(--warning) !important; }

/* Coach focus / weakness drill-in surfaces (the Income Statement
   weakness page in the screenshot). */
.coach-focus,
.coach-focus-body,
.coach-focus-shell,
.coach-recent-doc,
.coach-target-list,
.coach-target-question,
.coach-section,
.coach-stone-card {
    background: var(--bg-panel) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-mid) !important;
}
.coach-target-question {
    background: var(--bg-elevated) !important;
    border-left: 3px solid var(--accent) !important;
}
.coach-final-stones,
.coach-stone-pill {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-mid) !important;
}


/* ============================================================
   Atrium Light — pass 4: full-screen assignment viewport.  The
   outer wrapper is .bk-asg-fullscreen (NOT .bk-fs-overlay), and
   inner sections use .bk-asg-fs-* with -asg- in the middle.
   ============================================================ */

/* Outer overlay — was solid #0b0817 deep navy. */
.bk-asg-fullscreen {
    background: var(--bg-base) !important;
    color: var(--text-primary) !important;
}

/* Sticky header + back button. */
.bk-asg-fs-header {
    background: var(--bg-panel) !important;
    border-bottom: 1px solid var(--border-mid) !important;
    box-shadow: var(--shadow-sm);
    color: var(--text-primary) !important;
}
.bk-asg-fs-back {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--text-primary) !important;
}
.bk-asg-fs-back:hover {
    background: var(--accent-faint) !important;
    border-color: var(--accent-soft) !important;
    color: var(--accent) !important;
}
.bk-asg-fs-title {
    color: var(--text-primary) !important;
    font-family: var(--font-display);
}
.bk-asg-fs-meta { color: var(--text-tertiary) !important; }
.bk-asg-fs-meta i { color: var(--text-tertiary) !important; }
.bk-asg-fs-canvas {
    color: var(--accent) !important;
    border: 1px solid var(--accent-soft) !important;
    background: var(--bg-panel) !important;
}
.bk-asg-fs-canvas:hover {
    background: var(--accent-faint) !important;
    border-color: var(--accent) !important;
}

/* Body container + loading/error states. */
.bk-asg-fs-body {
    background: var(--bg-base) !important;
    color: var(--text-primary) !important;
}
.bk-asg-fs-loading,
.bk-asg-fs-error { color: var(--text-tertiary) !important; }
.bk-asg-fs-error { color: var(--risk) !important; }

/* Each section card — was rgba(255,255,255,0.02) which on dark looked
   black; on light it would be barely visible.  Force opaque white. */
.bk-asg-fs-section,
.bk-asg-fs-thread {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm);
}
.bk-asg-fs-section-head {
    color: var(--text-primary) !important;
    font-family: var(--font-display);
}
.bk-asg-fs-section-head i { color: var(--accent) !important; }

/* Coach-tinted variant + plan section both keep a soft blue tint. */
.bk-asg-fs-coach,
.bk-fs-plan {
    background: var(--accent-faint) !important;
    border-color: var(--accent-soft) !important;
}

/* Plan body + objectives — light-mode text. */
.bk-fs-plan-body { color: var(--text-primary) !important; }
.bk-fs-plan-objectives .bk-section-label,
.bk-fs-tasks .bk-section-label {
    color: var(--text-tertiary) !important;
}
.bk-fs-plan-objectives .bk-asg-objectives,
.bk-fs-plan-objectives .bk-asg-objectives li {
    color: var(--text-primary) !important;
}

/* Numbered task list (1. Review… 2. Practice…) — was lavender #d8d4ee
   on dark; flip to navy on white. */
.bk-fs-task-list {
    color: var(--text-primary) !important;
}
.bk-fs-task-list li { color: var(--text-primary) !important; }
.bk-fs-task-list li::marker { color: var(--accent) !important; }

/* Required-reading section header tint — soft amber wash on light. */
.bk-fs-required-section {
    background: var(--warning-soft) !important;
    border-color: var(--warning-mid) !important;
}

/* Reference cards (Required reading + All reference materials items). */
.bk-fs-ref-card {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm);
}
.bk-fs-ref-card:hover {
    background: var(--accent-faint) !important;
    border-color: var(--accent-soft) !important;
}
.bk-fs-ref-card.open {
    background: var(--accent-faint) !important;
    border-color: var(--accent) !important;
}
.bk-fs-ref-card-icon { color: var(--accent) !important; }
.bk-fs-ref-card-title { color: var(--text-primary) !important; }
.bk-fs-ref-card-preview { color: var(--text-secondary) !important; }
.bk-fs-ref-why {
    color: var(--warning) !important;
    background: var(--warning-soft);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    align-self: flex-start;
}
.bk-fs-ref-caret { color: var(--text-tertiary) !important; }

/* Counter pill ("7 items"). */
.bk-fs-refs-counter { color: var(--text-tertiary) !important; }

/* Loading + empty states inside ref/task lists. */
.bk-fs-refs-loading,
.bk-fs-refs-empty,
.bk-fs-tasks-loading { color: var(--text-tertiary) !important; }

/* "synthesized" badge — soft amber pill. */
.bk-asg-synth {
    background: var(--warning-soft) !important;
    color: var(--warning) !important;
    border: 1px solid var(--warning-mid) !important;
}

/* Sticky chat bar at the bottom. */
.bk-asg-fs-chat-bar {
    background: var(--bg-panel) !important;
    border-top: 1px solid var(--border-mid) !important;
    box-shadow: 0 -1px 4px rgba(11, 33, 90, 0.04);
}
.bk-asg-fs-chat-form input {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-mid) !important;
}
.bk-asg-fs-chat-form input::placeholder { color: var(--text-muted) !important; }
.bk-asg-fs-chat-form input:focus {
    background: var(--bg-panel) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.bk-asg-chat-send {
    background: var(--accent) !important;
    color: var(--text-on-dark) !important;
    border: none !important;
    box-shadow: var(--shadow-sm);
}
.bk-asg-chat-send:hover { background: var(--accent-hover) !important; }

/* AAR (Anticipation/Reflection) cards. */
.bk-fs-aar-anticipation,
.bk-fs-aar-reflection,
.bk-fs-aar-ant,
.bk-fs-aar-ref {
    background: var(--bg-panel) !important;
    border: 1px solid var(--accent-soft) !important;
    color: var(--text-primary) !important;
}
.bk-fs-aar-prompt { color: var(--text-primary) !important; }
.bk-fs-aar-help   { color: var(--text-tertiary) !important; }
.bk-fs-aar-skip,
.bk-fs-aar-skip:link,
.bk-fs-aar-skip:visited { color: var(--text-tertiary) !important; }
.bk-fs-aar-skip:hover { color: var(--accent) !important; }
.bk-fs-aar textarea,
.bk-fs-aar input[type="text"] {
    background: var(--bg-base) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-mid) !important;
}
.bk-fs-aar textarea:focus,
.bk-fs-aar input[type="text"]:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Native file viewer (PDF / video modal). */
.bk-file-viewer {
    background: rgba(11, 33, 90, 0.55) !important;
    backdrop-filter: blur(8px);
}
.bk-file-viewer-header {
    background: var(--bg-panel) !important;
    border-bottom: 1px solid var(--border-mid) !important;
    color: var(--text-primary) !important;
}
.bk-file-viewer-title { color: var(--text-primary) !important; }
.bk-file-viewer-close {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-mid) !important;
}
.bk-file-viewer-close:hover {
    background: var(--accent-faint) !important;
    color: var(--accent) !important;
}


/* ============================================================
   Atrium Light — pass 5: Coach focus drilldown — stat row + target
   questions list.  Stat tiles were grey-on-grey; target questions
   were pale-blue ghost text.
   ============================================================ */

/* Stat row across the top — Avg score, Assignments, Courses. */
.coach-focus-stat-row {
    display: flex;
    gap: 0.7rem;
    margin: 0.5rem 0 0.85rem;
}
.coach-focus-stat {
    flex: 1;
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--radius-md);
    padding: 0.6rem 0.85rem;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 0.15rem;
}
.coach-focus-stat span {
    font-family: var(--font-eyebrow);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-tertiary) !important;
}
.coach-focus-stat strong {
    font-family: var(--font-eyebrow);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-primary) !important;
    letter-spacing: 0.01em;
}

/* Target questions list — was pale blue (`--accent-soft`/lavender) on
   white. */
.coach-question-list {
    margin: 0; padding: 0 0 0 1.4rem;
    color: var(--text-primary);
}
.coach-question-list li { color: var(--text-primary) !important; margin-bottom: 0.55rem; }
.coach-question-list li::marker { color: var(--accent) !important; font-weight: 700; }
.coach-question-btn {
    background: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
    text-align: left;
    cursor: pointer;
    width: 100%;
    padding: 0.25rem 0;
    display: flex; align-items: flex-start; gap: 0.5rem;
    transition: color 0.12s;
}
.coach-question-btn:hover { color: var(--accent) !important; }
.coach-question-text { color: var(--text-primary) !important; line-height: 1.45; }
.coach-question-btn:hover .coach-question-text { color: var(--accent) !important; }
.coach-question-hint {
    color: var(--text-tertiary) !important;
    font-style: italic;
    font-size: 0.82rem;
    margin-top: 0.7rem;
}
.coach-question-list .ph-paper-plane-tilt,
.coach-question-list i {
    color: var(--accent) !important;
    flex-shrink: 0;
}

/* Recent-assignments touching this concept list. */
.coach-recent-list { color: var(--text-primary); }
.coach-recent-row,
.coach-recent-asg {
    color: var(--text-primary) !important;
}
.coach-recent-score,
.coach-recent-points {
    color: var(--text-primary) !important;
    font-family: var(--font-eyebrow);
    font-weight: 700;
}

/* Reading material section ("Reading material to close the gap" + "Other
   course material on this concept"). */
.coach-reading-card,
.coach-reading-item {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm);
}
.coach-reading-title { color: var(--text-primary) !important; font-weight: 600; }
.coach-reading-summary { color: var(--text-secondary) !important; }
.coach-reading-why { color: var(--warning) !important; }
.coach-reading-empty { color: var(--text-tertiary) !important; }

/* "ASSIGNMENT" / "QUIZ" / "EXAM" tag chips next to titles. */
.coach-asg-kind,
.bk-fs-ref-kind,
.brightspace-kind-chip {
    background: var(--risk-soft) !important;
    color: var(--risk) !important;
    border: 1px solid var(--risk-mid) !important;
    font-family: var(--font-eyebrow);
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

/* The orange/red tone is for ASSIGNMENT/EXAM; quizzes get amber. */
.coach-asg-kind[data-kind="quiz"],
.bk-fs-ref-kind[data-kind="quiz"],
.brightspace-kind-chip[data-kind="quiz"] {
    background: var(--warning-soft) !important;
    color: var(--warning) !important;
    border-color: var(--warning-mid) !important;
}


/* ============================================================
   Atrium Light — pass 8: chat bubble contrast + visual markdown
   typography.  The user bubble was light-blue + white text
   (unreadable).  The agent bubble was rendering raw **asterisks**
   because no .md-* CSS existed yet.
   ============================================================ */

/* Chat message bubbles — applies to coach focus + general agent chats. */
.coach-msg-body {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm);
    line-height: 1.6;
}
.coach-msg-user .coach-msg-body {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--text-on-dark) !important;
    box-shadow: var(--shadow-sm);
}
.coach-msg-user .coach-msg-body * { color: var(--text-on-dark) !important; }
.coach-msg-avatar {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}

/* Cited chunks panel inside a coach message. */
.coach-msg-cites {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
}
.coach-msg-cites summary { color: var(--text-tertiary) !important; }
.coach-msg-cites summary:hover { color: var(--accent) !important; }
.coach-msg-cite {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
}
.coach-msg-cite strong { color: var(--accent-strong) !important; }

/* ── Markdown typography (.md-*) — used by formatMarkdown() everywhere
      assistant text is rendered.  These were unstyled before, so headings
      and lists came through as flat text. ── */

.coach-msg-body .md-h2,
.dio-msg .md-h2,
.cal-chat-msg .md-h2,
.bk-asg-fs-thread .md-h2,
.md-h2 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin: 0.85rem 0 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border-subtle);
}
.md-h3 {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0.7rem 0 0.3rem;
}
.md-h4 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0.6rem 0 0.25rem;
}

.md-spacer { height: 0.5rem; }

.md-hr {
    border: none;
    border-top: 1px solid var(--border-mid);
    margin: 0.85rem 0;
}

/* Bullet items — fall through to .md-li shared rule */
.md-li {
    position: relative;
    padding-left: 1.4rem;
    margin: 0.25rem 0;
    line-height: 1.55;
}
.md-li::before {
    content: '';
    position: absolute;
    left: 0.45rem;
    top: 0.7rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

/* Numbered steps — the Coach's "1. Drill the T-account…" lines now look
   like proper step cards instead of inline numbers. */
.md-step {
    display: flex;
    gap: 0.7rem;
    margin: 0.45rem 0;
    align-items: flex-start;
}
.md-step-num {
    flex: none;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--text-on-dark);
    font-family: var(--font-eyebrow);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
    box-shadow: var(--shadow-sm);
}
.md-step-body {
    flex: 1;
    line-height: 1.55;
    padding-top: 2px;
}

/* Emoji-led callout (📌 / 🎯 / 💪 / ✅ / ❌ / ⚡) — turns the leading
   emoji into a left-rail icon and the rest into a bordered card. */
.md-callout {
    display: flex;
    gap: 0.7rem;
    background: var(--accent-faint);
    border: 1px solid var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
    margin: 0.7rem 0;
    align-items: flex-start;
}
.md-callout-icon {
    font-size: 1.2rem;
    line-height: 1.3;
    flex: none;
}
.md-callout-body {
    flex: 1;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.5;
}

/* "**Why it tripped you up:** …" — leading inline label rendered as a
   small uppercase eyebrow followed by the body text on the same line. */
.md-label-line {
    margin: 0.45rem 0;
    line-height: 1.55;
}
.md-label {
    font-family: var(--font-eyebrow);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-faint);
    padding: 0.12rem 0.45rem;
    border-radius: 4px;
    margin-right: 0.4rem;
}

/* Block quote. */
.md-quote {
    background: var(--bg-elevated);
    border-left: 3px solid var(--accent-mid);
    padding: 0.55rem 0.85rem;
    margin: 0.5rem 0;
    color: var(--text-secondary);
    font-style: italic;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Inline code + code blocks. */
.coach-msg-body code,
.dio-msg code,
.bk-asg-fs-thread code {
    background: var(--accent-faint);
    color: var(--accent-strong);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.85em;
}

/* Tables. */
.md-table-wrap {
    overflow-x: auto;
    margin: 0.6rem 0;
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-md);
}
.md-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.md-table th,
.md-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}
.md-table th {
    background: var(--bg-elevated);
    font-family: var(--font-eyebrow);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.md-table tr:last-child td { border-bottom: none; }

/* Links rendered inside markdown. */
.coach-msg-body a,
.dio-msg a,
.bk-asg-fs-thread a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-soft);
    transition: border-color 0.12s;
}
.coach-msg-body a:hover,
.dio-msg a:hover,
.bk-asg-fs-thread a:hover {
    border-color: var(--accent);
}

/* Strong + em inside markdown. */
.coach-msg-body strong,
.dio-msg strong,
.bk-asg-fs-thread strong {
    color: var(--text-primary);
    font-weight: 700;
}
.coach-msg-body em,
.dio-msg em,
.bk-asg-fs-thread em {
    color: var(--text-secondary);
}

/* User-message bubbles (the blue right-aligned ones) shouldn't get the
   light-bg treatment — keep markdown text white inside the blue. */
.coach-msg-user .coach-msg-body strong { color: var(--text-on-dark) !important; font-weight: 700; }
.coach-msg-user .coach-msg-body em { color: rgba(255,255,255,0.85) !important; }
.coach-msg-user .coach-msg-body code {
    background: rgba(255,255,255,0.18) !important;
    color: var(--text-on-dark) !important;
}


/* ============================================================
   Syllabus agent — card grid + 2-pane (PDF + chat) full-screen viewer.
   ============================================================ */

.syl-view {
    background: var(--bg-base);
    color: var(--text-primary);
}
.syl-grid {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    align-content: start;
}
.syl-loading,
.syl-empty {
    grid-column: 1 / -1;
    color: var(--text-tertiary);
    text-align: center;
    padding: 3rem 1rem;
    font-size: 0.92rem;
}
.syl-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex; flex-direction: column;
    position: relative;
    min-height: 200px;
}
.syl-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--accent-soft);
}
.syl-card-stripe {
    height: 4px;
    background: var(--course-color, var(--accent));
}
.syl-card-head {
    padding: 0.85rem 1rem 0.45rem;
}
.syl-card-eyebrow {
    font-family: var(--font-eyebrow);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--course-color, var(--accent));
    margin-bottom: 0.2rem;
}
.syl-card-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
}
.syl-card-body {
    padding: 0.4rem 1rem 0.85rem;
    flex: 1;
    display: flex; flex-direction: column; gap: 0.45rem;
}
.syl-card-doc {
    display: flex; align-items: center; gap: 0.45rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.35;
}
.syl-card-doc i { color: var(--accent); font-size: 1rem; flex: none; }
.syl-card-doc span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
}
.syl-card-summary {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.syl-card-foot {
    padding: 0.5rem 1rem 0.85rem;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
}
.syl-card-state {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-family: var(--font-eyebrow);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    border: 1px solid currentColor;
}
.syl-card-state-ready    { color: var(--positive); background: var(--positive-soft); border-color: var(--positive-mid); }
.syl-card-state-pending  { color: var(--warning);  background: var(--warning-soft);  border-color: var(--warning-mid); }
.syl-card-state-missing  { color: var(--text-muted); background: transparent; border-color: var(--border-strong); }
.syl-card-missing {
    cursor: default;
    opacity: 0.7;
}
.syl-card-missing:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: var(--border-mid);
}

/* — Full-screen 2-pane viewer — */
.syl-fs {
    position: fixed; inset: 0;
    z-index: 1000;
    background: var(--bg-base);
    display: none;
    flex-direction: column;
}
.syl-fs.open { display: flex; }
body.syl-fs-locked { overflow: hidden; }
.syl-fs-head {
    flex: none;
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.85rem 1.25rem;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-mid);
    box-shadow: var(--shadow-sm);
}
.syl-fs-back {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-mid);
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.syl-fs-back:hover {
    background: var(--accent-faint);
    border-color: var(--accent-soft);
    color: var(--accent);
}
.syl-fs-eyebrow {
    font-family: var(--font-eyebrow);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1px;
}
.syl-fs-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}
.syl-fs-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 420px;
    min-height: 0;
}
.syl-fs-doc {
    background: var(--bg-elevated);
    border-right: 1px solid var(--border-mid);
    display: flex;
    align-items: stretch;
    overflow: hidden;
}
.syl-fs-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
}
.syl-fs-doc-empty,
.syl-fs-doc-loading {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--text-tertiary);
    gap: 0.6rem;
    width: 100%;
}
.syl-fs-doc-empty i,
.syl-fs-doc-loading i { font-size: 2.5rem; color: var(--text-muted); }
.syl-fs-external {
    margin-top: 0.6rem;
    font-size: 0.84rem;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-soft);
}
.syl-fs-external:hover { border-color: var(--accent); }

/* — Inline syllabus document — styled for readability, no iframe — */
.syl-fs-doc { overflow-y: auto; }

/* — Inline PDF / Google Doc preview frame inside the syllabus pane — */
.syl-doc-pdf {
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.syl-doc-pdf > .syl-doc-head {
    padding: 0.8rem 1rem 0.7rem;
    border-bottom: 1px solid var(--border-mid);
    flex: 0 0 auto;
    background: var(--bg-elevated);
    z-index: 1;
}
.syl-doc-pdf-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    background: #525659;  /* the grey PDF.js / Chrome PDF viewer uses */
    display: flex;
}
.syl-doc-pdf-frame > object,
.syl-doc-pdf-frame > embed,
.syl-doc-pdf-frame > iframe {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border: 0;
    background: #525659;
}

.syl-doc {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem 2.2rem 3rem;
    font-family: var(--font);
    color: var(--text-primary);
    line-height: 1.65;
}
.syl-doc-head {
    border-bottom: 1px solid var(--border-mid);
    padding-bottom: 1rem;
    margin-bottom: 1.4rem;
}
.syl-doc-eyebrow {
    font-family: var(--font-eyebrow);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.35rem;
}
.syl-doc-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-primary);
    letter-spacing: -0.015em;
    margin-bottom: 0.5rem;
}
.syl-doc-meta {
    display: flex; gap: 1rem; align-items: center;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--text-tertiary);
    font-family: var(--font-eyebrow);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
}
.syl-doc-meta i { font-size: 0.95rem; vertical-align: -2px; margin-right: 4px; }
.syl-doc-external {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-soft);
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.syl-doc-external:hover { border-color: var(--accent); }
.syl-doc-summary {
    background: var(--accent-faint);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    font-size: 0.94rem;
    line-height: 1.55;
}
.syl-doc-summary-label {
    display: inline-block;
    font-family: var(--font-eyebrow);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-right: 0.5rem;
}
.syl-doc-body {
    font-size: 0.96rem;
    color: var(--text-primary);
}
.syl-doc-body p {
    margin: 0 0 0.85rem;
}
.syl-doc-h {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 1.4rem 0 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border-subtle);
    letter-spacing: -0.005em;
}
.syl-doc-list {
    margin: 0.4rem 0 0.95rem;
    padding-left: 1.4rem;
}
.syl-doc-list li {
    margin-bottom: 0.3rem;
    line-height: 1.55;
}
.syl-doc-list li::marker {
    color: var(--accent);
}

.syl-fs-chat {
    display: flex; flex-direction: column;
    background: var(--bg-panel);
    min-width: 0;
}
.syl-fs-chat-thread {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.1rem;
    display: flex; flex-direction: column; gap: 0.75rem;
}
.syl-fs-msg {
    display: flex; gap: 0.55rem;
    max-width: 100%;
}
.syl-fs-msg-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.syl-fs-msg-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    flex: none;
    font-size: 0.95rem;
}
.syl-fs-msg-body {
    background: var(--bg-elevated);
    border: 1px solid var(--border-mid);
    border-radius: 12px;
    padding: 0.55rem 0.85rem;
    font-size: 0.86rem;
    color: var(--text-primary);
    line-height: 1.55;
    max-width: 320px;
    box-shadow: var(--shadow-sm);
}
.syl-fs-msg-user .syl-fs-msg-body {
    background: var(--accent);
    color: var(--text-on-dark);
    border-color: var(--accent);
}
.syl-fs-msg-user .syl-fs-msg-body * { color: var(--text-on-dark) !important; }

.syl-fs-quick {
    flex: none;
    padding: 0.5rem 1.1rem;
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-panel);
}
.syl-fs-quick-btn {
    background: var(--bg-panel);
    border: 1px solid var(--border-mid);
    color: var(--accent);
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.3rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
    box-shadow: var(--shadow-sm);
}
.syl-fs-quick-btn:hover {
    background: var(--accent);
    color: var(--text-on-dark);
    border-color: var(--accent);
    transform: translateY(-1px);
}
.syl-fs-quick-btn i { font-size: 0.85rem; }

.syl-fs-compose {
    flex: none;
    display: flex; gap: 0.45rem;
    padding: 0.7rem 1.1rem 1rem;
    border-top: 1px solid var(--border-mid);
    background: var(--bg-panel);
}
.syl-fs-compose input {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border-mid);
    color: var(--text-primary);
    border-radius: 10px;
    padding: 0.6rem 0.95rem;
    font: inherit;
    font-size: 0.88rem;
}
.syl-fs-compose input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}
.syl-fs-compose button {
    background: var(--accent);
    color: var(--text-on-dark);
    border: none;
    border-radius: 10px;
    width: 42px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.syl-fs-compose button:hover { background: var(--accent-hover); }

@media (max-width: 880px) {
    .syl-fs-body {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .syl-fs-doc { border-right: none; border-bottom: 1px solid var(--border-mid); }
}

/* ── Study block items in dashboard buckets are now clickable.  Override
      the older "cursor: default" rule and add a hover lift consistent with
      assignment items. ── */
.dio-block-item {
    cursor: pointer !important;
}
.dio-block-item:hover {
    background: var(--accent-faint) !important;
    border-color: var(--accent-soft) !important;
    transform: translateY(-1px);
}
.dio-block-kind {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-family: var(--font-eyebrow);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    margin-left: 0.4rem;
    vertical-align: middle;
}
.dio-block-kind-rem {
    background: var(--warning-soft);
    color: var(--warning);
    border: 1px solid var(--warning-mid);
}
.dio-block-kind i { font-size: 0.7rem; }


/* ============================================================
   Atrium Light — pass 6: Brightspace assignment detail panel —
   Concepts cloud, Prerequisites pills, Learning Objectives bullets,
   Linked Materials list, kind chips.
   ============================================================ */

.bk-asg-insights {
    background: var(--accent-faint) !important;
    border: 1px solid var(--accent-soft) !important;
    color: var(--text-primary) !important;
}
.bk-asg-insights .bk-section-label {
    color: var(--text-tertiary) !important;
    font-family: var(--font-eyebrow);
}
.bk-asg-summary {
    background: var(--bg-panel) !important;
    color: var(--text-primary) !important;
    border-left: 3px solid var(--accent);
    padding: 0.6rem 0.85rem;
    border-radius: 6px;
}

/* Concept cloud — soft blue chips with strong navy text. */
.bk-asg-insights .bk-chip,
.bk-chip {
    background: var(--accent-soft) !important;
    border: 1px solid var(--accent-mid) !important;
    color: var(--accent-strong) !important;
    font-weight: 600;
}
.bk-chip-clickable:hover { background: var(--accent-mid) !important; color: var(--accent-strong) !important; }
.bk-chip-mini {
    background: var(--surface-2) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-mid) !important;
}

/* Prerequisite pills (.bk-obj). */
.bk-asg-insights .bk-obj,
.bk-obj {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--text-secondary) !important;
}

/* Learning Objectives bulleted list — bullets blue, text navy. */
.bk-asg-objectives {
    color: var(--text-primary) !important;
}
.bk-asg-objectives li { color: var(--text-primary) !important; }
.bk-asg-objectives li::marker { color: var(--accent) !important; }

/* "Build understanding" prompt for un-extracted assignments. */
.bk-asg-extract {
    background: var(--accent-faint) !important;
    border: 1px dashed var(--accent-mid) !important;
    color: var(--text-primary) !important;
}
.bk-extract-btn {
    background: var(--accent) !important;
    color: var(--text-on-dark) !important;
    border: none !important;
    box-shadow: var(--shadow-sm);
}
.bk-extract-btn:hover { background: var(--accent-hover) !important; }

/* Linked materials list — keep card pattern. */
.brightspace-resource-list,
.brightspace-resource-item {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--text-primary) !important;
}
.brightspace-resource-item:hover {
    background: var(--accent-faint) !important;
    border-color: var(--accent-soft) !important;
}
.brightspace-resource-icon { color: var(--accent) !important; }
.brightspace-resource-name { color: var(--text-primary) !important; font-weight: 600; }
.brightspace-resource-size,
.brightspace-resource-meta,
.brightspace-resource-type-badge {
    color: var(--text-tertiary) !important;
    background: var(--bg-elevated) !important;
}
.bk-resource-summary { color: var(--text-secondary) !important; }
.bk-resource-concepts { color: var(--text-tertiary) !important; }
.brightspace-no-resources { color: var(--text-tertiary) !important; }

/* Kind chips (LECTURE / READING / ASSIGNMENT / SYLLABUS / EXAM /
   REFERENCE) — recolor for light bg. */
.bk-kind {
    border: 1px solid currentColor;
    font-family: var(--font-eyebrow);
    font-weight: 700;
    letter-spacing: 0.08em;
}
.bk-kind-lecture    { background: var(--purple-soft) !important; color: #6D28D9 !important; border-color: var(--purple-mid) !important; }
.bk-kind-reading    { background: var(--positive-soft) !important; color: var(--positive) !important; border-color: var(--positive-mid) !important; }
.bk-kind-assignment { background: var(--risk-soft) !important; color: var(--risk) !important; border-color: var(--risk-mid) !important; }
.bk-kind-syllabus   { background: var(--warning-soft) !important; color: var(--warning) !important; border-color: var(--warning-mid) !important; }
.bk-kind-exam       { background: var(--risk-soft) !important; color: var(--risk) !important; border-color: var(--risk-mid) !important; }
.bk-kind-reference  { background: var(--accent-faint) !important; color: var(--accent) !important; border-color: var(--accent-soft) !important; }

/* Brightspace nested asgn rows (under each module). */
.brightspace-asgn,
.brightspace-asgn-row,
.brightspace-asgn-list {
    color: var(--text-primary) !important;
}
.brightspace-asgn-meta { color: var(--text-tertiary) !important; }
.brightspace-asgn:hover {
    background: var(--accent-faint) !important;
}

/* "Linked Materials (2)" + similar section labels in the right panel. */
.bk-section-label {
    font-family: var(--font-eyebrow) !important;
    color: var(--text-tertiary) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}


/* ============================================================
   Atrium Light — pass 7: expanded reference-card drawer.  When a
   reference card opens to show extracted text + objectives + concepts,
   the body was a grey wash with white text.
   ============================================================ */

/* Drawer container — was rgba(0,0,0,0.25) dark wash. */
.bk-fs-ref-drawer {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--accent-soft) !important;
    border-top: none !important;
    color: var(--text-primary) !important;
}
.bk-fs-ref-drawer-loading,
.bk-fs-ref-drawer-empty { color: var(--text-tertiary) !important; }

/* "What this is" summary block. */
.bk-fs-ref-summary {
    background: var(--bg-panel) !important;
    color: var(--text-primary) !important;
    border-left: 2px solid var(--accent) !important;
}
.bk-fs-ref-summary strong { color: var(--text-primary) !important; }

/* Extracted text body. */
.bk-fs-ref-text {
    color: var(--text-primary) !important;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
}

/* Section eyebrows inside the drawer. */
.bk-fs-ref-section-label {
    color: var(--text-tertiary) !important;
    font-family: var(--font-eyebrow);
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* Learning objectives bullets. */
.bk-fs-ref-objectives {
    color: var(--text-primary) !important;
}
.bk-fs-ref-objectives li { color: var(--text-primary) !important; }
.bk-fs-ref-objectives li::marker { color: var(--accent) !important; }

/* Meta row + stat pills above the body. */
.bk-fs-ref-meta-row {
    border-bottom: 1px solid var(--border-subtle) !important;
}
.bk-fs-ref-stat { color: var(--text-tertiary) !important; }
.bk-fs-ref-stat-warn { color: var(--warning) !important; }

/* Action button row. */
.bk-fs-ref-actions {
    border-top: 1px solid var(--border-subtle) !important;
}

/* "View original document" / "Transcribe video" action buttons. */
.bk-fs-action-btn {
    background: var(--bg-panel) !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent-soft) !important;
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}
.bk-fs-action-btn:hover {
    background: var(--accent) !important;
    color: var(--text-on-dark) !important;
    border-color: var(--accent) !important;
}

/* Concept chips inside the drawer use .bk-chip-mini — make sure they
   read on the elevated drawer surface. */
.bk-fs-ref-drawer .bk-chip-mini,
.bk-fs-ref-concepts .bk-chip-mini {
    background: var(--bg-panel) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-mid) !important;
}

/* Reference rows inside the coach panel. */
.bk-asg-ref { color: var(--text-primary) !important; }
.bk-asg-ref:hover {
    background: var(--accent-faint) !important;
    border-color: var(--accent-soft) !important;
}
.bk-asg-ref-action { color: var(--accent) !important; }


/* ============================================================
   Udacity-pattern augmentations — typography hierarchy, section
   rhythm, card hover lift, focus glow.  Layered on top of the
   Athenaeum Lacquer palette without changing any colors.
   ============================================================ */

/* — Display + eyebrow typography — */
h1, h2, h3, .dio-greeting-title, .dio-bucket-head span,
.dio-northstar-head span, .bk-fs-title, .coach-title {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

/* Promote the tiny grey section labels into proper Udacity-style
   eyebrows: Barlow Condensed, slightly larger, brand-colored. */
.dio-section-label,
.dio-skill-cat-label,
.dio-modal-eyebrow {
    font-family: var(--font-eyebrow);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

/* The Dio greeting (top of view) gets the display family so it reads
   as a proper hero heading instead of body text. */
.dio-greeting {
    font-family: var(--font-display);
}
.dio-greeting > * { font-family: inherit; }

/* — Section rhythm — give the dio-scroll a more generous gap so each
   section breathes. */
.dio-scroll {
    gap: 1.75rem !important;
    padding-bottom: 2rem;
}
.dio-scroll > * + * {
    margin-top: 0;
}

/* — Card hover lift — the Udacity signature: cards rise 2px on hover
   with a stronger shadow and brand rim.  Applied broadly but only
   triggers when the surface is in fact interactive. */
.dio-bucket,
.dio-stat,
.dio-portfolio-card,
.dio-course-row,
.dio-completed-pill,
.bk-fs-card,
.dio-skill-chip {
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}
.dio-bucket:hover,
.dio-stat[style*="cursor:pointer"]:hover,
.dio-portfolio-card:hover,
.dio-course-row:hover,
.dio-completed-pill:hover,
.bk-fs-card[onclick]:hover {
    transform: translateY(-2px);
    box-shadow: var(--lacquer-top-strong), var(--shadow);
    border-color: var(--accent-soft);
}

/* Numeric/condensed treatment — Barlow Condensed makes counts feel
   intentional rather than incidental. */
.dio-bucket-count,
.dio-stat-value,
.dio-skill-count,
.dio-northstar-num,
.dio-align-conf,
.bk-fs-count {
    font-family: var(--font-eyebrow);
    letter-spacing: 0.02em;
    font-feature-settings: "tnum";
}

/* — Focus glow — accessibility polish.  Every interactive surface
   gets the same indigo halo on keyboard focus. */
.btn-next:focus-visible,
.btn-small:focus-visible,
.dio-northstar-save:focus-visible,
.dio-bucket-cta:focus-visible,
.dio-coach-quick-reply:focus-visible,
.dio-collapse-toggle:focus-visible,
.dio-skill-chip:focus-visible,
.dio-northstar-chip:focus-visible,
.dio-modal-close:focus-visible,
button:focus-visible {
    outline: none;
    box-shadow:
        var(--lacquer-top),
        0 0 0 3px var(--accent-soft),
        0 0 0 4px var(--accent-mid);
}

/* — Promoted section title pattern — opt-in via .dio-section-title /
   .dio-section-eyebrow.  Use for any new section that wants the full
   Udacity treatment: small uppercase eyebrow on top, large display
   title below. */
.dio-section-eyebrow {
    font-family: var(--font-eyebrow);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-strong);
    margin-bottom: 0.3rem;
}
.dio-section-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    margin-bottom: 0.85rem;
    line-height: 1.2;
}

/* — Subtle horizontal divider — used between major sections when a
   simple gap isn't enough rhythm.  Mirrors Udacity's chakra-divider. */
.dio-divider {
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--border-mid) 30%,
        var(--border-mid) 70%,
        transparent 100%);
    margin: 0.4rem 0;
    border: none;
}

/* — Card body inner padding bump — Udacity uses 16-24px.  Many of
   our cards already do; this is just a backstop for ones that don't. */
.dio-bucket,
.dio-northstar,
.dio-portfolio-card {
    padding: 1.1rem 1.15rem;
}

/* ─── APOSTLES DARK ───────────────────────────────────────────────────────
 * The active theme for style.css-driven pages (login, etc.): deep ink-navy
 * ground, warm parchment text, liturgical-gold accent. Sits at the end so
 * it wins specificity over the Atrium Light tokens above.
 * ───────────────────────────────────────────────────────────────────────── */
:root, html, body {
    --bg-base:        #FBFAF6;   /* warm paper canvas */
    --bg-base-grad:   #FBFAF6;
    --bg-panel:       #FFFFFF;
    --bg-elevated:    #FFFFFF;
    --bg-row:         #FFFFFF;
    --bg-overlay:     rgba(11, 11, 11, 0.45);

    --surface-1:      rgba(40, 60, 122, 0.025);
    --surface-2:      rgba(40, 60, 122, 0.045);
    --surface-3:      rgba(40, 60, 122, 0.06);
    --surface-4:      rgba(40, 60, 122, 0.10);

    --border-subtle:  #F1EFE7;
    --border-mid:     #E7E4DA;
    --border-strong:  #D8D4C7;

    --text-primary:   #16181D;   /* ink — primary text */
    --text-secondary: #3C4049;
    --text-tertiary:  #7C808C;
    --text-muted:     #7C808C;
    --text-faint:     #A2A5AE;
    --text-on-dark:   #FFFFFF;

    --accent:         #283C7A;   /* fountain-pen blue — primary action */
    --accent-hover:   #1C2C5E;
    --accent-strong:  #14224A;
    --accent-grad:    linear-gradient(145deg, #2E4488 0%, #1C2C5E 100%);
    --accent-grad-hover: linear-gradient(145deg, #1C2C5E 0%, #14224A 100%);

    --marker:         #D8F23A;   /* citron highlighter — the signature */
    --marker-ink:     #2B3000;

    --purple:         #283C7A;
    --positive:       #3F7A4E;
    --warning:        #A8791C;
    --risk:           #C0412B;
    --info:           #283C7A;

    --bg-dark:        var(--bg-base);
    --bg-card:        var(--bg-panel);
    --bg-card-solid:  var(--bg-panel);
    --glass:          #FFFFFF;
    --course-fallback: #283C7A;

    color-scheme: light;
}

body {
    background: var(--bg-base-grad) !important;
    color: var(--text-primary) !important;
}

/* Catch-all for hard-coded white surfaces from the Atrium Light passes. */
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background: white"],
[style*="background:white"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: white"],
[style*="background-color:white"] {
    background: var(--bg-panel) !important;
}



/* — Course drill-down: counts strip, re-sync button, syllabus card — */
.brightspace-tree-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.brightspace-resync-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    color: var(--text-secondary);
    padding: 6px 10px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}
.brightspace-resync-btn:hover:not(:disabled) {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent-soft);
}
.brightspace-resync-btn:disabled { cursor: default; opacity: 0.7; }
.brightspace-count-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.brightspace-count-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-mid);
    border-radius: 999px;
    color: var(--text-secondary);
    padding: 3px 9px;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}
.brightspace-count-pill i { font-size: 13px; color: var(--text-tertiary); }

.brightspace-syllabus-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.brightspace-syllabus-card:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}
.brightspace-syllabus-icon i {
    font-size: 1.6rem;
    color: var(--accent);
}
.brightspace-syllabus-body { flex: 1; min-width: 0; }
.brightspace-syllabus-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brightspace-syllabus-meta {
    font-size: 11.5px;
    color: var(--text-tertiary);
    margin-top: 2px;
}
.brightspace-syllabus-cta i { font-size: 1.1rem; color: var(--text-tertiary); }
.brightspace-syllabus-card:hover .brightspace-syllabus-cta i { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════
 * EDITORIAL LOGIN (light) — overrides the legacy dark-glass sign-in scene.
 * Warm paper, solid white card, ink text, citron/inkblue accents.
 * ═══════════════════════════════════════════════════════════════════════ */
.login-body { background: var(--bg-base); color: var(--text-primary); }

/* Soft on-palette washes (was magenta/teal) — barely-there tint */
.orb-1 { background: var(--accent); opacity: 0.07; }
.orb-2 { background: var(--marker); opacity: 0.12; }
.orb-3 { background: var(--accent); opacity: 0.05; }

.login-card {
    background: var(--bg-panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border-mid);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(22, 24, 29, 0.08),
                0 2px 6px rgba(22, 24, 29, 0.05);
}

/* Fraunces ink wordmark (was white→accent gradient clip) */
.brand-mark {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -1px;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text-primary);
}
.brand-tagline,
.step-sub,
.populi-hint { color: var(--text-tertiary); }

/* Step indicator on light */
.step {
    border-color: var(--border-strong);
    color: var(--text-faint);
    background: var(--bg-panel);
}
.step.active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 4px var(--accent-faint);
}
.step.done { border-color: var(--positive); background: var(--positive); }
.step-line { background: var(--border-mid); }

/* Inputs on light */
.input,
.populi-suffix {
    background: var(--bg-base);
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.input::placeholder { color: var(--text-faint); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-faint); }
.populi-suffix { color: var(--text-tertiary); }
.populi-field:focus-within .populi-suffix { border-color: var(--accent); }

/* University dropdown on light */
.uni-dropdown { background: var(--bg-panel); border-color: var(--border-mid); }
.uni-option:hover { background: var(--surface-2); }
.uni-custom { border-top: 1px solid var(--border-mid); }

/* Buttons on light */
.btn-next { box-shadow: 0 4px 14px var(--accent-faint); }
.btn-next:hover:not(:disabled) { background: var(--accent-hover); box-shadow: 0 6px 18px var(--accent-soft); }
.btn-back { border: 1.5px solid var(--border-strong); color: var(--text-tertiary); }
.btn-back:hover { border-color: var(--accent); color: var(--accent); }