* {
  box-sizing: border-box;
}

:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-soft: #f8faff;
  --border: #e4e8f0;
  --text: #172033;
  --muted: #475467;
  --primary: #3157d5;
  --primary-dark: #2447b8;
  --purple: #7547d9;
  --green: #20a464;
  --shadow: 0 10px 35px rgba(25, 42, 70, 0.08);

  /* Canonical Iris design tokens (docs/canonical/Design.md #29,
     Architecture.md #24 "centralized tokens so colors are not
     hard-coded inconsistently across components"). These are the
     literal values the canonical spec defines. They are additive: the
     existing --primary/--purple/--green/etc. tokens above are left
     as-is. The prior open question here -- how to reconcile the
     Student/Teacher/Admin/Superadmin dashboards' own dark-navy+cyan
     theme with this light Iris palette -- was resolved by the Phase A
     migration (see styles.css's STUDENT DASHBOARD / MULTI-ROLE
     APPLICATION SHELL sections below): every dashboard now reads its
     colors exclusively through --student-* and --app-* custom properties
     that are themselves defined as var(--iris-*), so redefining the
     --iris-* tokens here for a dark theme (below) is what actually
     re-themes every role at once, with no per-role CSS duplicated. */
  --iris-primary: #4f7bff;
  --iris-secondary: #7c3aed;
  --iris-success: #22c55e;
  --iris-warning: #f59e0b;
  --iris-danger: #ef4444;
  --iris-text-primary: #172338;
  --iris-text-secondary: #334155;
  --iris-surface: #ffffff;
  --iris-soft-bg: #f7f9fc;

  /* Accessibility-derived variants, not part of the canonical 9-token
     palette itself: WCAG contrast math (computed, not assumed --
     relative-luminance formula per WCAG 2.x) shows white text on the
     literal --iris-primary/--iris-danger only reaches 3.74:1/3.76:1,
     which passes AA for large text/UI components (>=3:1) but fails AA
     for normal small body/button text (needs >=4.5:1). Used ONLY where
     small text sits directly on a solid fill (buttons, hover/error
     text) -- --iris-primary/--iris-danger themselves are unchanged and
     still used everywhere else (accents, icons, badge tints, borders)
     where 3:1 is the applicable threshold.
     --iris-primary-strong reuses this file's own pre-existing
     --primary (#3157d5, same hue family) rather than inventing a new
     value -- it already measured at 6.08:1. */
  --iris-primary-strong: #3157d5;
  --iris-danger-strong: #b91c1c;

  /* Two small additive tokens (not part of the original 9) that
     replace what were previously hard-coded literals repeated across
     the STUDENT/MULTI-ROLE sections (--student-border/--app-border/
     --student-panel-soft) -- promoted to tokens here purely so dark
     mode (below) can override them in one place instead of three. */
  --iris-border: #e2e8f5;
  --iris-panel-soft: #eef2fc;
  --iris-header-bg: rgba(255, 255, 255, 0.92);

  /* Soft, static background texture (mission Phase 5: "soft attractive
     background texture"). Two large, very-low-alpha radial highlights
     using the existing primary/secondary hues -- decorative only, not
     text-bearing, and deliberately low-opacity so it cannot meaningfully
     reduce foreground/background contrast anywhere text is rendered on
     top of it. Static (no animation), so it needs no
     prefers-reduced-motion guard of its own. Visual appearance is
     unverified -- no browser is available in this environment; see
     MASTER_STATE.md Phase 6. */
  --iris-texture:
    radial-gradient(at 12% 8%, rgba(79, 123, 255, 0.05) 0, transparent 50%),
    radial-gradient(at 88% 92%, rgba(124, 58, 237, 0.045) 0, transparent 50%);
}

/* ================================================================
   DARK IRIS THEME (mission Phase 5)
   Two ways a page ends up in dark mode: (1) an explicit
   documentElement[data-theme="dark"] attribute, set by the inline
   bootstrap script in <head> from a stored localStorage preference or
   toggled at runtime by Theme.toggle() in app.js/masteradmin.js -- this
   always wins; (2) no stored preference at all and the OS reports
   prefers-color-scheme: dark, handled by the @media block below, which
   is explicitly suppressed by :not([data-theme="light"]) so an
   explicit light choice always overrides the OS default.
   Every value below is the same hue family as its light counterpart,
   re-balanced for a dark background -- computed against WCAG's
   relative-luminance contrast formula, not assumed (see inline notes).
   ================================================================ */
:root[data-theme="dark"] {
  /* text-primary/text-secondary on soft-bg: 15.71:1 / 8.57:1.
     primary/secondary/success/warning/danger on soft-bg (icon/border/
     large-UI use, >=3:1 required): 7.24 / 6.88 / 9.74 / 11.22 / 6.77:1.
     primary-strong/danger-strong reuse the lightened primary/danger
     themselves (not a further-darkened variant as in light mode) --
     in dark mode these tokens are used as small TEXT color on the dark
     background (nav items, headings, error text), so the direction
     that needs boosting is lighter, not darker; both already clear
     4.5:1 against soft-bg (7.24 / 6.77) so no third value is needed. */
  --iris-primary: #7c9dff;
  --iris-secondary: #a78bfa;
  --iris-success: #34d399;
  --iris-warning: #fbbf24;
  --iris-danger: #f87171;
  --iris-text-primary: #e7ebf7;
  --iris-text-secondary: #c6d2e8;
  --iris-surface: #141b2e;
  --iris-soft-bg: #0b1220;
  --iris-primary-strong: #7c9dff;
  --iris-danger-strong: #f87171;
  --iris-border: #263049;
  --iris-panel-soft: #1a2338;
  --iris-header-bg: rgba(20, 27, 46, 0.92);

  /* Known, pre-existing-pattern limitation, not a new regression:
     .student-avatar's white-initials-on-gradient(--iris-primary,
     --iris-secondary) already measures under 4.5:1 in light mode
     (3.74:1) -- a small decorative badge, not body text. The dark
     equivalent (2.58:1) is the same class of decorative element with
     the same pre-existing gap, not fixed here (would require changing
     the avatar component's own design, out of this pass's scope). */
  --iris-texture:
    radial-gradient(at 12% 8%, rgba(124, 157, 255, 0.07) 0, transparent 50%),
    radial-gradient(at 88% 92%, rgba(167, 139, 250, 0.06) 0, transparent 50%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --iris-primary: #7c9dff;
    --iris-secondary: #a78bfa;
    --iris-success: #34d399;
    --iris-warning: #fbbf24;
    --iris-danger: #f87171;
    --iris-text-primary: #e7ebf7;
    --iris-text-secondary: #c6d2e8;
    --iris-surface: #141b2e;
    --iris-soft-bg: #0b1220;
    --iris-primary-strong: #7c9dff;
    --iris-danger-strong: #f87171;
    --iris-border: #263049;
    --iris-panel-soft: #1a2338;
    --iris-header-bg: rgba(20, 27, 46, 0.92);
    --iris-texture:
      radial-gradient(at 12% 8%, rgba(124, 157, 255, 0.07) 0, transparent 50%),
      radial-gradient(at 88% 92%, rgba(167, 139, 250, 0.06) 0, transparent 50%);
  }
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}

body {
  min-height: 100vh;
}

button,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}


/* =========================
   APPLICATION
   ========================= */

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


/* =========================
   HEADER
   ========================= */

.vidya-header {
  height: 76px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 28px;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  display: block;
  width: auto;
  height: 52px;
  max-width: 230px;
  object-fit: contain;
}

.vidya-brand {
  text-align: center;
}

.vidya-name {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--purple);
}

.vidya-status {
  margin-top: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(32, 164, 100, 0.12);
}

.login-btn {
  justify-self: end;
  border: 0;
  border-radius: 10px;
  padding: 11px 18px;
  background: var(--primary);
  color: white;
  font-weight: 700;
  transition: 0.18s ease;
}

.login-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

.sidebar-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  color: var(--text);
}


/* =========================
   MAIN LAYOUT
   ========================= */

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


/* =========================
   SIDEBAR
   ========================= */

.vidya-sidebar {
  width: 270px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 25px 18px 18px;
  background: #ffffff;
  border-right: 1px solid var(--border);
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sidebar-heading {
  padding: 0 12px 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #98a2b3;
}

.sidebar-item {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #475467;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  transition: 0.18s ease;
}

.sidebar-item:hover {
  background: #f5f7ff;
  color: var(--primary);
}

.sidebar-item.active {
  background: #eef2ff;
  border-color: #dce4ff;
  color: var(--primary);
}

.sidebar-icon {
  width: 23px;
  text-align: center;
  font-size: 17px;
}

.sidebar-divider {
  height: 1px;
  margin: 22px 5px;
  background: var(--border);
}

.resource-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-soft);
  transition: 0.18s ease;
}

.resource-card + .resource-card {
  margin-top: 8px;
}

.resource-card:hover {
  border-color: #cbd5ff;
  box-shadow: 0 5px 20px rgba(49, 87, 213, 0.07);
}

.resource-card-label {
  margin-bottom: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--primary);
}

.resource-card-title {
  font-size: 14px;
  font-weight: 700;
}

.resource-card-text {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}

.sidebar-footer {
  margin-top: auto;
  padding: 15px 12px 3px;
  border-top: 1px solid var(--border);
}

.sidebar-footer-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
}

.sidebar-footer-text {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

.sidebar-footer-legal {
  margin-top: 8px;
  font-size: 11px;
}

.sidebar-footer-legal a {
  color: var(--muted);
  text-decoration: underline;
}

.sidebar-footer-legal span {
  margin: 0 4px;
  color: var(--muted);
}


/* =========================
   PUBLIC VIEWPORT
   ========================= */

.public-landing {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

[data-auth-state="public"] .vidya-sidebar {
  display: flex;
  width: 230px;
  padding: 16px 12px 12px;
}

[data-auth-state="public"] .vidya-sidebar .vidya-portrait {
  padding: 8px 6px 12px;
}

[data-auth-state="public"] .vidya-sidebar .vidya-portrait-image {
  width: 58px;
  height: 58px;
}

[data-auth-state="public"] .vidya-sidebar .portrait-name {
  font-size: 16px;
}

[data-auth-state="public"] .vidya-sidebar .portrait-role {
  font-size: 10px;
}

[data-auth-state="public"] .public-discovery {
  min-height: 0;
}

[data-auth-state="public"] .public-discovery .sidebar-divider {
  margin: 10px 5px;
}

[data-auth-state="public"] .public-discovery .sidebar-heading {
  padding: 0 8px 5px;
}

[data-auth-state="public"] .public-discovery .sidebar-item {
  min-height: 38px;
  padding: 8px 9px;
  font-size: 12px;
}

[data-auth-state="public"] .public-discovery .sidebar-icon {
  width: 20px;
  font-size: 15px;
}

[data-auth-state="public"] .vidya-chat-assistant,
[data-auth-state="authenticated"] .vidya-chat-assistant {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

[data-auth-state="public"] .vidya-chat {
  min-width: 0;
  min-height: 0;
  height: calc(100vh - 76px);
  flex: 1;
}

[data-auth-state="public"] .vidya-welcome .welcome-avatar {
  width: 68px;
  height: 68px;
  margin: 0 auto 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-auth-state="public"] .vidya-welcome .welcome-avatar-image {
  width: 60px;
  height: 60px;
  object-fit: contain;
  display: block;
}

[data-auth-state="public"] .vidya-welcome {
  width: min(850px, calc(100% - 40px));
  margin: 0 auto;
  padding: 22px 20px 10px;
}

[data-auth-state="public"] .vidya-welcome .welcome-avatar {
  margin-bottom: 10px;
}

[data-auth-state="public"] .vidya-welcome h1 {
  font-size: clamp(26px, 3vw, 36px);
}

[data-auth-state="public"] .vidya-welcome p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
}

[data-auth-state="public"] .suggestion-chips {
  margin-top: 15px;
}

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

.vidya-chat {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: calc(100vh - 76px);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 50% 15%, rgba(117, 71, 217, 0.055), transparent 30%),
    var(--bg);
}

.vidya-welcome {
  width: min(850px, calc(100% - 40px));
  margin: auto auto 20px;
  padding: 35px 25px 20px;
  text-align: center;
}

.vidya-avatar {
  position: relative;
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #3157d5, #8b4de8);
  opacity: 0.18;
  filter: blur(8px);
}

.avatar-core {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #3157d5, #7547d9);
  border: 3px solid white;
  box-shadow: 0 8px 25px rgba(49, 87, 213, 0.25);
  color: white;
  font-size: 25px;
  font-weight: 800;
}

.welcome-eyebrow {
  margin-bottom: 9px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.vidya-welcome h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -1px;
}

.vidya-welcome p {
  width: min(650px, 100%);
  margin: 13px auto 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.suggestion-chips {
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.suggestion-chip {
  padding: 9px 14px;
  border: 1px solid #d8def0;
  border-radius: 999px;
  background: white;
  color: #475467;
  font-size: 12px;
  font-weight: 600;
  transition: 0.18s ease;
}

.suggestion-chip:hover {
  border-color: #b9c5ff;
  color: var(--primary);
  background: #f7f8ff;
  transform: translateY(-1px);
}


/* =========================
   MESSAGES
   ========================= */

.messages {
  width: min(850px, calc(100% - 40px));
  margin: 0 auto;
  padding: 0 0 165px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.message {
  max-width: 78%;
  padding: 14px 17px;
  border-radius: 16px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  box-shadow: 0 3px 12px rgba(20, 35, 60, 0.04);
}

.message.user {
  align-self: flex-end;
  background: var(--primary);
  color: white;
  border-bottom-right-radius: 5px;
}

.message.assistant,
.message.ai {
  align-self: flex-start;
  background: white;
  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
}

.message.thinking {
  color: var(--muted);
}


/* =========================
   COMPOSER
   ========================= */

.composer-area {
  position: fixed;
  left: 270px;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 13px 20px 10px;
  background: rgba(245, 247, 251, 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(228, 232, 240, 0.85);
}

.composer {
  width: min(850px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 6px;
  background: white;
  border: 1px solid #d9dfeb;
  border-radius: 15px;
  box-shadow: var(--shadow);
}

#questionInput {
  flex: 1;
  min-height: 45px;
  max-height: 130px;
  resize: none;
  border: 0;
  outline: none;
  padding: 12px 13px;
  background: transparent;
  color: var(--text);
}

#questionInput::placeholder {
  color: #98a2b3;
}

#questionInput:focus {
  outline: none;
}

/* The textarea drops its own outline, so show keyboard focus on the
   composer around it instead (it had no focus indicator at all). */
.composer:has(#questionInput:focus-visible) {
  outline: 2px solid #43daff;
  outline-offset: 2px;
}

#sendBtn {
  flex-shrink: 0;
  width: 45px;
  height: 45px;
  border: 0;
  border-radius: 11px;
  background: var(--primary);
  color: white;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  transition: 0.18s ease;
}

#sendBtn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

#sendBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.error-message {
  width: min(850px, 100%);
  min-height: 16px;
  margin: 5px auto 0;
  color: #c0392b;
  font-size: 12px;
}

.footer-note {
  width: min(850px, 100%);
  margin: 3px auto 0;
  text-align: center;
  color: #98a2b3;
  font-size: 10px;
}


/* =========================
   AI RESPONSE FORMATTING
   ========================= */

.message h1,
.message h2,
.message h3,
.message h4 {
  margin: 12px 0 8px;
  line-height: 1.3;
}

.message p {
  margin: 0;
}

.message hr {
  margin: 14px 0;
  border: 0;
  border-top: 1px solid #d9dee7;
}

.message ul,
.message ol {
  margin: 8px 0 8px 24px;
  padding: 0;
}

.message li {
  margin: 0;
}

.message strong {
  font-weight: 700;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 850px) {

  .vidya-header {
    grid-template-columns: auto 1fr auto;
    height: 68px;
    padding: 0 14px;
  }

  .sidebar-toggle {
    display: block;
  }

  .brand-logo {
    height: 42px;
    max-width: 145px;
  }

  .vidya-name {
    font-size: 20px;
  }

  .vidya-status {
    display: none;
  }

  .vidya-sidebar {
    position: fixed;
    top: 68px;
    left: -290px;
    bottom: 0;
    z-index: 45;
    width: 270px;
    box-shadow: 10px 0 30px rgba(20, 35, 60, 0.12);
    transition: left 0.22s ease;
  }

  .vidya-sidebar.open {
    left: 0;
  }

  .vidya-chat {
    min-height: calc(100vh - 68px);
  }

  .composer-area {
    left: 0;
  }

  .messages,
  .vidya-welcome {
    width: calc(100% - 24px);
  }

  .message {
    max-width: 90%;
  }
}


@media (max-width: 550px) {

  .vidya-header {
    padding: 0 10px;
  }

  .brand-logo {
    height: 36px;
    max-width: 120px;
  }

  .login-btn {
    padding: 9px 10px;
    font-size: 11px;
  }

  .vidya-welcome {
    padding-top: 25px;
  }

  .vidya-welcome h1 {
    font-size: 28px;
  }

  .vidya-welcome p {
    font-size: 13px;
  }

  .suggestion-chips {
    gap: 6px;
  }

  .suggestion-chip {
    padding: 8px 10px;
    font-size: 11px;
  }

  .composer-area {
    padding: 9px 9px 8px;
  }

  .composer {
    border-radius: 13px;
  }

  .footer-note {
    font-size: 9px;
  }
}

/* =========================================================
   VIDYA V2 — PREMIUM DARK INTERFACE
   ========================================================= */

.vidya-v2 {
  --v2-bg: #071426;
  --v2-bg-2: #0a1b31;
  --v2-panel: #0d2138;
  --v2-panel-soft: #102943;
  --v2-border: rgba(255,255,255,0.10);
  --v2-text: #eef5ff;
  --v2-muted: #91a4bd;
  --v2-blue: #4f8cff;
  --v2-purple: #8b5cf6;

  min-height: 100vh;
  color: var(--v2-text);
  background:
    radial-gradient(circle at 75% 20%, rgba(79,140,255,0.12), transparent 30%),
    radial-gradient(circle at 35% 70%, rgba(139,92,246,0.08), transparent 28%),
    linear-gradient(135deg, var(--v2-bg), var(--v2-bg-2));
}

/* Header */

.vidya-v2 .vidya-header {
  background: rgba(7,20,38,0.94);
  border-bottom: 1px solid var(--v2-border);
  backdrop-filter: blur(16px);
  color: var(--v2-text);
}

.vidya-v2 .vidya-brand,
.vidya-v2 .vidya-name {
  color: var(--v2-text);
}

.vidya-v2 .vidya-status {
  color: var(--v2-muted);
}

.vidya-v2 .sidebar-toggle {
  color: var(--v2-text);
}

/* Main sidebar */

.vidya-v2 .vidya-sidebar {
  background:
    linear-gradient(180deg, rgba(13,33,56,0.98), rgba(7,20,38,0.98));
  border-right: 1px solid var(--v2-border);
  color: var(--v2-text);
}

/* Portrait panel */

.vidya-v2 .vidya-portrait {
  background:
    radial-gradient(circle at 50% 30%, rgba(79,140,255,0.18), transparent 42%),
    linear-gradient(180deg, #102943, #09192c);
  border: 1px solid var(--v2-border);
  overflow: hidden;
}

.vidya-v2 .vidya-portrait-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* Sidebar text */

.vidya-v2 .sidebar-heading {
  color: #7188a5;
}

.vidya-v2 .sidebar-item {
  color: #b9c8da;
  background: transparent;
}

.vidya-v2 .sidebar-item:hover,
.vidya-v2 .sidebar-item.active {
  background: rgba(79,140,255,0.12);
  color: #ffffff;
  border-color: rgba(79,140,255,0.22);
}

.vidya-v2 .sidebar-divider {
  background: var(--v2-border);
}

.vidya-v2 .resource-card {
  background: rgba(255,255,255,0.035);
  border-color: var(--v2-border);
}

.vidya-v2 .resource-card-label {
  color: #6f8bb0;
}

.vidya-v2 .resource-card-title {
  color: #eaf2ff;
}

.vidya-v2 .resource-card-text {
  color: #8196b0;
}

.vidya-v2 .sidebar-footer {
  border-top-color: var(--v2-border);
}

.vidya-v2 .sidebar-footer-title {
  color: #dce8f7;
}

.vidya-v2 .sidebar-footer-text {
  color: #7188a5;
}


/* Welcome */

.vidya-v2 .welcome-eyebrow {
  color: #6f9cff;
}

.vidya-v2 .vidya-welcome h1 {
  color: #f4f8ff;
}

.vidya-v2 .vidya-welcome p {
  color: var(--v2-muted);
}

/* Main Vidya avatar */

.vidya-v2 .welcome-avatar {
  background:
    radial-gradient(circle, rgba(79,140,255,0.22), transparent 65%);
}

.vidya-v2 .welcome-avatar-image {
  filter: drop-shadow(0 18px 35px rgba(0,0,0,0.35));
}

/* Suggestion buttons */

.vidya-v2 .suggestion-chip {
  color: #c9d8eb;
  background: rgba(255,255,255,0.045);
  border-color: var(--v2-border);
}

.vidya-v2 .suggestion-chip:hover {
  color: #ffffff;
  background: rgba(79,140,255,0.12);
  border-color: rgba(79,140,255,0.35);
}

/* Messages */

.vidya-v2 .message.user {
  background: linear-gradient(135deg, #315fcb, #4f72db);
  color: #ffffff;
}

.vidya-v2 .message.ai,
.vidya-v2 .message.assistant {
  background: rgba(13,33,56,0.92);
  border: 1px solid var(--v2-border);
  color: #e8f0fb;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.vidya-v2 .message-content {
  color: #e8f0fb;
}

.vidya-v2 .message-vidya-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  object-fit: contain;
  object-position: center;
  border-radius: 50%;
  background: #102943;
  border: 1px solid rgba(79,140,255,0.25);
}

/* Composer */

.vidya-v2 .composer-area {
  background: linear-gradient(
    180deg,
    rgba(7,20,38,0),
    rgba(7,20,38,0.96) 30%
  );
  border-top: 1px solid rgba(255,255,255,0.06);
}

.vidya-v2 .composer {
  background: rgba(13,33,56,0.94);
  border-color: var(--v2-border);
  box-shadow: 0 15px 40px rgba(0,0,0,0.22);
}

.vidya-v2 #questionInput {
  color: #edf4ff;
  background: transparent;
  border-color: transparent;
}

.vidya-v2 #questionInput::placeholder {
  color: #7188a5;
}

.vidya-v2 #questionInput:focus {
  border-color: transparent;
  box-shadow: none;
}

.vidya-v2 #sendBtn {
  background: linear-gradient(135deg, #4f8cff, #725cf6);
  color: #ffffff;
}

.vidya-v2 .footer-note {
  color: #60748e;
}

/* =========================================================
   END VIDYA V2
   ========================================================= */

/* =========================================================
   VIDYA V2 — BLUISH BLACK + DARK PURPLE CHAT BACKGROUND
   ========================================================= */

.vidya-v2 .vidya-chat {
  background:
    radial-gradient(
      circle at 72% 18%,
      rgba(54, 35, 78, 0.16),
      transparent 34%
    ),
    radial-gradient(
      circle at 18% 82%,
      rgba(25, 48, 82, 0.14),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #050B16 0%,
      #07101D 55%,
      #0A0D18 100%
    );
}

.vidya-v2 .messages {
  background: transparent;
}

.vidya-v2 .vidya-welcome {
  background: transparent;
}

.vidya-v2 .composer-area {
  background:
    linear-gradient(
      to top,
      rgba(5, 11, 22, 0.98),
      rgba(5, 11, 22, 0.82),
      transparent
    );
}

.vidya-v2 .composer {
  border-color: rgba(92, 65, 125, 0.28);
  background: rgba(8, 16, 29, 0.92);
}


/* REMOVE LARGE VIDYA WELCOME IMAGE FROM CHAT AREA */
.vidya-v2 .welcome-avatar {
  display: none !important;
}

/* POSITION WELCOME CONTENT AT TOP OF CHAT */
.vidya-v2 .vidya-chat {
  display: flex !important;
  flex-direction: column !important;
}

.vidya-v2 .vidya-welcome {
  justify-content: flex-start !important;
  padding-top: 28px !important;
  min-height: auto !important;
  height: auto !important;
}


/* POSITION WELCOME CONTENT AT TOP OF CHAT */
.vidya-v2 .vidya-chat {
  display: flex !important;
  flex-direction: column !important;
}

.vidya-v2 .vidya-welcome {
  justify-content: flex-start !important;
  padding-top: 28px !important;
  min-height: auto !important;
  height: auto !important;
}


/* KEEP WELCOME CONTENT AT TOP OF CHAT */
.vidya-v2 .vidya-welcome {
  margin: 0 auto !important;
  padding-top: 28px !important;
  padding-bottom: 20px !important;
  align-self: stretch;
}


.hidden {
  display: none !important;
}

.dashboard-state {
  max-width: 980px;
  margin: 0 auto;
  padding: 56px 32px 24px;
}

.dashboard-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  opacity: 0.7;
  margin-bottom: 12px;
}

.dashboard-state h1 {
  margin: 0 0 12px;
}

.dashboard-state > p {
  max-width: 680px;
  margin: 0 0 28px;
  line-height: 1.6;
  opacity: 0.8;
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-card {
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.dashboard-card-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.dashboard-card-text {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.72;
}

@media (max-width: 760px) {
  .dashboard-state {
    padding: 40px 20px 20px;
  }

  .dashboard-cards {
    grid-template-columns: 1fr;
  }
}

/* PUBLIC VIDYA STUDY ROOM HERO */
.chat-top-area {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 34px 24px 8px;
}

.study-room-hero {
  position: relative;
  width: min(460px, 82%);
  min-height: 108px;
  padding: 20px 30px 18px;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid rgba(92, 151, 255, 0.85);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(17, 39, 73, 0.82), rgba(5, 14, 31, 0.94));
  box-shadow:
    0 0 0 1px rgba(90, 145, 255, 0.08),
    0 0 26px rgba(67, 133, 255, 0.24),
    inset 0 0 30px rgba(71, 131, 255, 0.08);
  overflow: hidden;
}

.study-room-glow {
  position: absolute;
  inset: -60%;
  background: radial-gradient(
    circle,
    rgba(74, 143, 255, 0.18),
    transparent 58%
  );
  pointer-events: none;
}

.study-room-status {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #78a9ff;
}

.study-room-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22d38a;
  box-shadow: 0 0 10px rgba(34, 211, 138, 0.8);
}

.study-room-title {
  position: relative;
  font-size: 29px;
  line-height: 1.15;
  font-weight: 800;
  color: #f5f8ff;
}

.study-room-subtitle {
  position: relative;
  margin-top: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(187, 211, 255, 0.82);
}

@media (max-width: 760px) {
  .chat-top-area {
    padding: 24px 16px 4px;
  }

  .study-room-hero {
    width: min(460px, 94%);
    padding: 18px 20px 16px;
  }

  .study-room-title {
    font-size: 24px;
  }
}

.auth-modal.hidden {
  display: none;
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 20, 38, 0.72);
}

.auth-card {
  position: relative;
  z-index: 1;
  width: min(420px, calc(100vw - 32px));
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: white;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}

.auth-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  font-size: 28px;
  color: var(--muted);
}

.auth-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--primary);
}

.auth-card h2 {
  margin: 7px 0;
}

.auth-description {
  margin: 0 0 22px;
  color: var(--muted);
}

.auth-form {
  display: grid;
  gap: 9px;
}

.auth-form label {
  font-size: 13px;
  font-weight: 700;
}

.auth-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
}

.auth-submit,
.auth-google {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border-radius: 10px;
  font-weight: 700;
}

.auth-submit {
  border: 0;
  background: var(--primary);
  color: white;
}

.auth-google {
  border: 1px solid var(--border);
  background: white;
  color: var(--text);
}

.auth-link {
  display: inline-block;
  margin: 10px 0 0;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--iris-primary-strong, var(--primary));
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.auth-error {
  min-height: 18px;
  font-size: 12px;
}

.auth-switch {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.auth-switch button {
  border: 0;
  background: transparent;
  color: var(--primary);
  font-weight: 700;
}

.auth-form-hidden {
  display: none;
}

.auth-form-hidden h2 {
  margin: 7px 0;
}

.no-enrollment-state {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
}

.no-enrollment-state.hidden {
  display: none !important;
}

.no-enrollment-illustration {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 45px rgba(30, 41, 59, 0.12);
}

.no-enrollment-face {
  font-size: 76px;
  line-height: 1;
}

.no-enrollment-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
  opacity: 0.58;
}

.no-enrollment-state h1 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12;
}

.no-enrollment-state p {
  max-width: 620px;
  margin: 16px auto 28px;
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.68;
}

.no-enrollment-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.no-enrollment-actions button {
  min-width: 140px;
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

@media (max-width: 640px) {
  .no-enrollment-state {
    min-height: 55vh;
    padding: 36px 18px;
  }

  .no-enrollment-actions {
    width: 100%;
    flex-direction: column;
  }

  .no-enrollment-actions button {
    width: 100%;
  }
}

.no-enrollment-student-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.no-enrollment-illustration {
  width: min(620px, 82vw);
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin-bottom: 20px;
  overflow: visible;
}

/* PUBLIC — LARGE CENTERED VIDYA */
[data-auth-state="public"] .vidya-v2 .welcome-avatar,
[data-auth-state="public"] .welcome-avatar {
  display: flex !important;
  width: 150px;
  height: 150px;
  margin: 0 auto 14px;
  align-items: center;
  justify-content: center;
}

[data-auth-state="public"] .welcome-avatar-image {
  width: 140px;
  height: 140px;
  object-fit: contain;
  display: block;
}

@media (max-width: 850px) {
  [data-auth-state="public"] .welcome-avatar {
    width: 120px;
    height: 120px;
  }

  [data-auth-state="public"] .welcome-avatar-image {
    width: 112px;
    height: 112px;
  }
}

@media (max-width: 550px) {
  [data-auth-state="public"] .welcome-avatar {
    width: 100px;
    height: 100px;
  }

  [data-auth-state="public"] .welcome-avatar-image {
    width: 94px;
    height: 94px;
  }
}


/* =========================================================
   PUBLIC REFERENCE UI — AUTHORITATIVE VISUAL LAYER
   Scope: PUBLIC only
   ========================================================= */

[data-auth-state="public"] {
  --public-bg: #07111f;
  --public-surface: #0b1728;
  --public-surface-2: #0e1d31;
  --public-border: rgba(67, 218, 255, 0.20);
  --public-border-strong: rgba(67, 218, 255, 0.42);
  --public-cyan: #43daff;
  --public-cyan-soft: #8cecff;
  --public-text: #f3f8ff;
  --public-muted: #8ea2bb;
  --public-purple: #8b6cff;
}

/* Whole public viewport */
[data-auth-state="public"] {
  background:
    radial-gradient(circle at 72% 18%, rgba(67, 218, 255, 0.09), transparent 30%),
    radial-gradient(circle at 38% 42%, rgba(139, 108, 255, 0.10), transparent 34%),
    #07111f;
  color: var(--public-text);
}

[data-auth-state="public"] .vidya-header {
  height: 76px;
  padding: 0 30px;
  background: rgba(5, 15, 28, 0.96);
  border-bottom: 1px solid var(--public-border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.20);
}

[data-auth-state="public"] .brand-logo {
  height: 48px;
  max-width: 220px;
}

[data-auth-state="public"] .vidya-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

[data-auth-state="public"] .vidya-name {
  color: var(--public-cyan);
  text-shadow: 0 0 18px rgba(67, 218, 255, 0.28);
}

[data-auth-state="public"] .vidya-status {
  color: var(--public-muted);
}

[data-auth-state="public"] .login-btn {
  background: linear-gradient(135deg, #43daff, #6b7cff);
  color: #04101d;
  border: 1px solid rgba(140, 236, 255, 0.55);
  border-radius: 9px;
  box-shadow: 0 0 22px rgba(67, 218, 255, 0.18);
}

[data-auth-state="public"] .login-btn:hover {
  background: linear-gradient(135deg, #67e3ff, #7e8dff);
  color: #04101d;
}

/* Public two-column shell */
[data-auth-state="public"] .vidya-layout {
  background: #07111f;
}

[data-auth-state="public"] .vidya-sidebar {
  width: 230px;
  padding: 22px 14px 16px;
  background:
    linear-gradient(180deg, rgba(11, 23, 40, 0.98), rgba(7, 17, 31, 0.98));
  border-right: 1px solid var(--public-border);
}

[data-auth-state="public"] .sidebar-heading {
  color: #647b96;
}

[data-auth-state="public"] .sidebar-item {
  color: #a7b8cb;
  border-color: transparent;
  background: transparent;
}

[data-auth-state="public"] .sidebar-item:hover,
[data-auth-state="public"] .sidebar-item.active {
  color: var(--public-cyan);
  background: rgba(67, 218, 255, 0.07);
  border-color: var(--public-border);
  box-shadow: inset 3px 0 0 var(--public-cyan);
}

[data-auth-state="public"] .sidebar-divider {
  background: rgba(67, 218, 255, 0.12);
}

[data-auth-state="public"] .resource-card,
[data-auth-state="public"] .available-courses-section,
[data-auth-state="public"] .public-discovery {
  color: var(--public-text);
}

[data-auth-state="public"] .resource-card {
  background: rgba(14, 29, 49, 0.72);
  border-color: var(--public-border);
}

/* Public main area */
[data-auth-state="public"] .vidya-chat-assistant,
[data-auth-state="authenticated"] .vidya-chat-assistant {
  background: #07111f;
  min-width: 0;
  min-height: 0;
  flex: 1;
}

[data-auth-state="public"] .vidya-chat {
  height: calc(100vh - 76px);
  min-height: 0;
  overflow: auto;
  background:
    radial-gradient(circle at 55% 5%, rgba(67, 218, 255, 0.07), transparent 25%),
    radial-gradient(circle at 35% 35%, rgba(139, 108, 255, 0.08), transparent 32%),
    #07111f;
}

/* Reference landing */
[data-auth-state="public"] .public-landing {
  width: 100%;
  min-height: 100%;
  display: block;
  flex: none;
}

[data-auth-state="public"] .vidya-welcome {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 46px 46px 36px;
  text-align: left;
}

[data-auth-state="public"] .reference-hero {
  width: 100%;
  max-width: 1180px;
  min-height: 390px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  align-items: center;
  gap: 30px;
  padding: 40px 44px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--public-border);
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 48%, rgba(67, 218, 255, 0.12), transparent 34%),
    radial-gradient(circle at 50% 0%, rgba(139, 108, 255, 0.12), transparent 45%),
    linear-gradient(135deg, rgba(11, 23, 40, 0.98), rgba(8, 20, 35, 0.94));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

[data-auth-state="public"] .reference-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(67, 218, 255, 0.045), transparent);
}

[data-auth-state="public"] .reference-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 650px;
}

[data-auth-state="public"] .welcome-eyebrow {
  color: var(--public-cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.2px;
  margin-bottom: 14px;
}

[data-auth-state="public"] .reference-hero h1,
[data-auth-state="public"] .vidya-welcome h1 {
  margin: 0;
  color: var(--public-text);
  font-size: clamp(38px, 4.3vw, 64px);
  line-height: 1.05;
  letter-spacing: -2px;
  font-weight: 800;
  max-width: 700px;
}

[data-auth-state="public"] .reference-hero p {
  margin: 20px 0 0;
  max-width: 610px;
  color: var(--public-muted);
  font-size: 16px;
  line-height: 1.7;
}

[data-auth-state="public"] .reference-hero-actions {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 28px;
}

[data-auth-state="public"] .reference-primary-btn,
[data-auth-state="public"] .reference-secondary-btn {
  min-height: 46px;
  padding: 0 20px;
  border-radius: 9px;
  font-weight: 800;
  transition: 0.18s ease;
}

[data-auth-state="public"] .reference-primary-btn {
  border: 1px solid rgba(140, 236, 255, 0.65);
  background: linear-gradient(135deg, #43daff, #6d78ff);
  color: #04101d;
  box-shadow: 0 0 28px rgba(67, 218, 255, 0.18);
}

[data-auth-state="public"] .reference-secondary-btn {
  border: 1px solid var(--public-border-strong);
  background: rgba(67, 218, 255, 0.045);
  color: var(--public-cyan-soft);
}

[data-auth-state="public"] .reference-primary-btn:hover,
[data-auth-state="public"] .reference-secondary-btn:hover {
  transform: translateY(-1px);
}

[data-auth-state="public"] .reference-hero-vidya {
  position: relative;
  min-height: 310px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-auth-state="public"] .reference-hero-vidya .welcome-avatar {
  width: 285px !important;
  height: 285px !important;
  margin: 0 !important;
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

[data-auth-state="public"] .reference-vidya-glow {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(67, 218, 255, 0.12);
  box-shadow:
    0 0 50px rgba(67, 218, 255, 0.24),
    0 0 100px rgba(139, 108, 255, 0.15);
}

[data-auth-state="public"] .reference-vidya-image {
  position: relative;
  z-index: 2;
  width: 245px;
  height: 245px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 18px 35px rgba(0, 0, 0, 0.35));
}

[data-auth-state="public"] .reference-speech-bubble {
  position: absolute;
  z-index: 4;
  top: 2px;
  right: -34px;
  width: 220px;
  padding: 14px 17px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid rgba(67, 218, 255, 0.30);
  border-radius: 14px;
  background: rgba(11, 23, 40, 0.96);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.28);
}

[data-auth-state="public"] .reference-speech-bubble::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -8px;
  width: 15px;
  height: 15px;
  background: rgba(11, 23, 40, 0.96);
  border-right: 1px solid rgba(67, 218, 255, 0.30);
  border-bottom: 1px solid rgba(67, 218, 255, 0.30);
  transform: rotate(45deg);
}

[data-auth-state="public"] .reference-speech-bubble strong {
  color: var(--public-cyan-soft);
  font-size: 14px;
}

[data-auth-state="public"] .reference-speech-bubble span {
  color: var(--public-muted);
  font-size: 12px;
  line-height: 1.45;
}

/* Feature strip */
[data-auth-state="public"] .reference-feature-strip {
  width: 100%;
  max-width: 1180px;
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

[data-auth-state="public"] .reference-feature {
  min-height: 86px;
  padding: 18px;
  border: 1px solid var(--public-border);
  border-radius: 13px;
  background: rgba(11, 23, 40, 0.72);
  color: #c5d4e5;
  display: flex;
  align-items: center;
  gap: 12px;
}

[data-auth-state="public"] .reference-feature strong {
  color: var(--public-text);
}

/* Courses */
[data-auth-state="public"] .reference-courses {
  width: 100%;
  max-width: 1180px;
  margin: 42px auto 0;
}

[data-auth-state="public"] .reference-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

[data-auth-state="public"] .reference-section-eyebrow {
  color: var(--public-cyan);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
  margin-bottom: 6px;
}

[data-auth-state="public"] .reference-section-heading h2 {
  margin: 0;
  color: var(--public-text);
  font-size: 28px;
  letter-spacing: -0.8px;
}

[data-auth-state="public"] .reference-view-all {
  border: 0;
  background: transparent;
  color: var(--public-cyan);
  font-size: 13px;
  font-weight: 800;
}

[data-auth-state="public"] .reference-course-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

[data-auth-state="public"] .reference-course-card {
  min-height: 150px;
  padding: 20px;
  border: 1px solid var(--public-border);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(14, 29, 49, 0.95), rgba(9, 20, 35, 0.95));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
  transition: 0.18s ease;
}

[data-auth-state="public"] .reference-course-card:hover {
  border-color: var(--public-border-strong);
  transform: translateY(-2px);
  box-shadow:
    0 16px 35px rgba(0, 0, 0, 0.22),
    0 0 25px rgba(67, 218, 255, 0.08);
}

[data-auth-state="public"] .reference-course-card .course-icon {
  color: var(--public-cyan);
  font-size: 25px;
}

[data-auth-state="public"] .reference-course-card h3 {
  margin: 16px 0 5px;
  color: var(--public-text);
  font-size: 17px;
}

[data-auth-state="public"] .reference-course-card p {
  margin: 0;
  color: var(--public-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Right-side persistent Vidya chat */
[data-auth-state="public"] .vidya-chat-assistant,
[data-auth-state="authenticated"] .vidya-chat-assistant {
  position: relative;
}

[data-auth-state="public"] .vidya-chat-assistant .vidya-chat,
[data-auth-state="authenticated"] .vidya-chat-assistant .vidya-chat {
  display: flex;
  flex-direction: column;
}

[data-auth-state="public"] .vidya-chat-assistant .composer-area,
[data-auth-state="authenticated"] .vidya-chat-assistant .composer-area {
  background: rgba(7, 17, 31, 0.96);
  border-top: 1px solid var(--public-border);
}

[data-auth-state="public"] .vidya-chat-assistant .composer,
[data-auth-state="authenticated"] .vidya-chat-assistant .composer {
  border-color: var(--public-border-strong);
  background: rgba(11, 23, 40, 0.94);
}

[data-auth-state="public"] .vidya-chat-assistant #questionInput,
[data-auth-state="authenticated"] .vidya-chat-assistant #questionInput {
  color: var(--public-text);
  background: transparent;
}

[data-auth-state="public"] .vidya-chat-assistant #questionInput::placeholder,
[data-auth-state="authenticated"] .vidya-chat-assistant #questionInput::placeholder {
  color: #657b94;
}

[data-auth-state="public"] .vidya-chat-assistant #sendBtn,
[data-auth-state="authenticated"] .vidya-chat-assistant #sendBtn {
  background: linear-gradient(135deg, #43daff, #6d78ff);
  color: #04101d;
}

[data-auth-state="public"] .vidya-chat-assistant .messages,
[data-auth-state="authenticated"] .vidya-chat-assistant .messages {
  background: transparent;
}

[data-auth-state="public"] .vidya-chat-assistant .message-content,
[data-auth-state="authenticated"] .vidya-chat-assistant .message-content {
  border-color: var(--public-border);
  background: rgba(11, 23, 40, 0.82);
  color: #c9d7e7;
}

/* Remove old public compact welcome constraints */
[data-auth-state="public"] .vidya-v2 .welcome-avatar {
  display: flex !important;
}

[data-auth-state="public"] .vidya-v2 .vidya-welcome {
  justify-content: initial !important;
  padding-top: 46px !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Responsive reference layout */
@media (max-width: 1100px) {
  [data-auth-state="public"] .reference-hero {
    grid-template-columns: minmax(0, 1fr) 330px;
    padding: 34px;
  }

  [data-auth-state="public"] .reference-hero h1 {
    font-size: clamp(34px, 4.5vw, 52px);
  }

  [data-auth-state="public"] .reference-feature-strip,
  [data-auth-state="public"] .reference-course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 850px) {
  [data-auth-state="public"] .vidya-sidebar {
    width: 200px;
  }

  [data-auth-state="public"] .reference-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  [data-auth-state="public"] .reference-hero-copy {
    margin: 0 auto;
  }

  [data-auth-state="public"] .reference-hero-actions {
    justify-content: center;
  }

  [data-auth-state="public"] .reference-hero-vidya {
    min-height: 280px;
  }

  [data-auth-state="public"] .reference-speech-bubble {
    right: calc(50% - 165px);
  }
}

@media (max-width: 650px) {
  [data-auth-state="public"] .vidya-header {
    padding: 0 15px;
  }

  [data-auth-state="public"] .vidya-sidebar {
    width: 100%;
  }

  [data-auth-state="public"] .vidya-welcome {
    padding: 22px 16px 28px;
  }

  [data-auth-state="public"] .reference-hero {
    min-height: 0;
    padding: 28px 20px;
    border-radius: 18px;
  }

  [data-auth-state="public"] .reference-hero h1 {
    font-size: 35px;
    letter-spacing: -1.3px;
  }

  [data-auth-state="public"] .reference-hero p {
    font-size: 14px;
  }

  [data-auth-state="public"] .reference-feature-strip,
  [data-auth-state="public"] .reference-course-grid {
    grid-template-columns: 1fr;
  }

  [data-auth-state="public"] .reference-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* PUBLIC REFERENCE FINAL LAYOUT CONTRACT */
[data-auth-state="public"] {
  height: 100dvh;
  overflow: hidden;
}

[data-auth-state="public"] .vidya-sidebar {
  display: none !important;
}

[data-auth-state="public"] .public-layout {
  height: calc(100dvh - 76px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

[data-auth-state="public"] .public-main {
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

[data-auth-state="public"] .public-landing {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

[data-auth-state="public"] .public-content-view {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}

[data-auth-state="public"] .vidya-chat-assistant,
[data-auth-state="authenticated"] .vidya-chat-assistant {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Public floating Vidya assistant */
[data-auth-state="public"] .vidya-chat-assistant,
[data-auth-state="authenticated"] .vidya-chat-assistant {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  width: min(360px, calc(100vw - 32px));
  height: min(620px, calc(100dvh - 108px));
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--public-border-strong);
  border-radius: 22px;
  background: #07111f;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

[data-auth-state="public"] .vidya-chat-assistant .messages,
[data-auth-state="authenticated"] .vidya-chat-assistant .messages {
  min-height: 0;
  overflow-y: auto;
  flex: 1;
}

[data-auth-state="public"] .vidya-chat-assistant .composer-area,
[data-auth-state="authenticated"] .vidya-chat-assistant .composer-area {
  flex: 0 0 auto;
}

[data-auth-state="public"] .vidya-chat-assistant.assistant-closed,
[data-auth-state="authenticated"] .vidya-chat-assistant.assistant-closed {
  display: none;
}

@media (max-width: 700px) {
  [data-auth-state="public"] .vidya-chat-assistant,
  [data-auth-state="authenticated"] .vidya-chat-assistant {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
    height: min(620px, calc(100dvh - 92px));
  }
}

/* Public floating assistant internal UI */
[data-auth-state="public"] .vidya-chat-assistant .public-assistant-header,
[data-auth-state="authenticated"] .vidya-chat-assistant .public-assistant-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--public-border);
  background: rgba(7, 17, 31, 0.96);
}

[data-auth-state="public"] .vidya-chat-assistant .public-assistant-identity,
[data-auth-state="authenticated"] .vidya-chat-assistant .public-assistant-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

[data-auth-state="public"] .vidya-chat-assistant .public-assistant-avatar,
[data-auth-state="authenticated"] .vidya-chat-assistant .public-assistant-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--public-border-strong);
}

[data-auth-state="public"] .vidya-chat-assistant .public-assistant-avatar img,
[data-auth-state="authenticated"] .vidya-chat-assistant .public-assistant-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-auth-state="public"] .vidya-chat-assistant .public-assistant-identity strong,
[data-auth-state="authenticated"] .vidya-chat-assistant .public-assistant-identity strong {
  display: block;
  color: #f4f8ff;
  font-size: 14px;
}

[data-auth-state="public"] .vidya-chat-assistant .public-assistant-identity span,
[data-auth-state="authenticated"] .vidya-chat-assistant .public-assistant-identity span {
  display: block;
  margin-top: 2px;
  color: #7188a5;
  font-size: 11px;
}

[data-auth-state="public"] .vidya-chat-assistant #publicAssistantCloseBtn,
[data-auth-state="authenticated"] .vidya-chat-assistant #publicAssistantCloseBtn {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #43daff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

[data-auth-state="public"] .vidya-chat-assistant .public-assistant-intro,
[data-auth-state="authenticated"] .vidya-chat-assistant .public-assistant-intro {
  flex: 0 0 auto;
  padding: 18px 18px 8px;
}

/* The eyebrow was only styled for the public page, so on the signed-in
   dashboards it inherited the light theme's dark body text on this dark
   panel (1.2:1 contrast, measured in a browser). */
[data-auth-state="authenticated"] .vidya-chat-assistant .public-assistant-intro .reference-section-eyebrow {
  color: #43daff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
  margin-bottom: 6px;
}

[data-auth-state="public"] .vidya-chat-assistant .public-assistant-intro h2,
[data-auth-state="authenticated"] .vidya-chat-assistant .public-assistant-intro h2 {
  margin: 7px 0 5px;
  color: #f4f8ff;
  font-size: 17px;
}

[data-auth-state="public"] .vidya-chat-assistant .public-assistant-intro p,
[data-auth-state="authenticated"] .vidya-chat-assistant .public-assistant-intro p {
  margin: 0;
  color: #8da4bf;
  font-size: 12px;
  line-height: 1.5;
}

[data-auth-state="public"] .vidya-chat-assistant .public-assistant-topics,
[data-auth-state="authenticated"] .vidya-chat-assistant .public-assistant-topics {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px 18px 12px;
}

[data-auth-state="public"] .vidya-chat-assistant .public-assistant-topic,
[data-auth-state="authenticated"] .vidya-chat-assistant .public-assistant-topic {
  width: fit-content;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--public-border-strong);
  border-radius: 999px;
  background: rgba(11, 31, 53, 0.9);
  color: #c9d7e7;
  font-size: 11px;
  cursor: pointer;
}

[data-auth-state="public"] .vidya-chat-assistant .public-assistant-topic:hover,
[data-auth-state="authenticated"] .vidya-chat-assistant .public-assistant-topic:hover {
  border-color: #43daff;
  color: #43daff;
}

[data-auth-state="public"] .vidya-chat-assistant .composer-area,
[data-auth-state="authenticated"] .vidya-chat-assistant .composer-area {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  width: auto;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--public-border);
}

[data-auth-state="public"] .vidya-chat-assistant .composer,
[data-auth-state="authenticated"] .vidya-chat-assistant .composer {
  width: 100%;
  margin: 0;
}

[data-auth-state="public"] .vidya-chat-assistant .footer-note,
[data-auth-state="authenticated"] .vidya-chat-assistant .footer-note {
  text-align: center;
  margin-top: 7px;
  font-size: 9px;
}


/* Public floating Vidya reopen control */
[data-auth-state="public"] .public-assistant-open,
[data-auth-state="authenticated"] .public-assistant-open {
  display: none;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1001;
  align-items: center;
  gap: 9px;
  min-width: 72px;
  height: 52px;
  padding: 6px 13px 6px 7px;
  border: 1px solid var(--public-border-strong);
  border-radius: 999px;
  background: #07111f;
  color: #ffffff;
  box-shadow: 0 18px 45px rgba(0,0,0,.42);
  cursor: pointer;
}

[data-auth-state="public"] .public-assistant-open.is-visible,
[data-auth-state="authenticated"] .public-assistant-open.is-visible {
  display: flex;
}

[data-auth-state="public"] .public-assistant-open img,
[data-auth-state="authenticated"] .public-assistant-open img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

[data-auth-state="public"] .public-assistant-open span,
[data-auth-state="authenticated"] .public-assistant-open span {
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 700px) {
  [data-auth-state="public"] .public-assistant-open,
  [data-auth-state="authenticated"] .public-assistant-open {
    right: 16px;
    bottom: 16px;
  }
}

/* Hide public assistant welcome content once conversation starts */
[data-auth-state="public"] .vidya-chat-assistant.chat-started .public-assistant-intro,
[data-auth-state="authenticated"] .vidya-chat-assistant.chat-started .public-assistant-intro,
[data-auth-state="public"] .vidya-chat-assistant.chat-started .public-assistant-topics,
[data-auth-state="authenticated"] .vidya-chat-assistant.chat-started .public-assistant-topics {
  display: none;
}

/* Hide the public chat scrollbar UI while preserving internal scrolling */
[data-auth-state="public"] .vidya-chat-assistant .messages,
[data-auth-state="authenticated"] .vidya-chat-assistant .messages {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

[data-auth-state="public"] .vidya-chat-assistant .messages::-webkit-scrollbar,
[data-auth-state="authenticated"] .vidya-chat-assistant .messages::-webkit-scrollbar {
  width: 0;
  height: 0;
}

[data-auth-state="public"] .vidya-chat-assistant .messages::-webkit-scrollbar-button,
[data-auth-state="authenticated"] .vidya-chat-assistant .messages::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* Public navigation — left-aligned 3D dark navy/green controls */
[data-auth-state="public"] .public-header-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-right: auto;
}

[data-auth-state="public"] .public-header-nav button {
  appearance: none;
  border: 1px solid rgba(55, 190, 126, 0.42);
  border-radius: 11px;
  padding: 9px 17px;
  min-height: 40px;
  background: linear-gradient(180deg, #102a2a 0%, #07191c 100%);
  color: #d7f5e8;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(125, 255, 194, 0.12),
    0 4px 0 #031012,
    0 7px 16px rgba(0, 0, 0, 0.32);
  transform: translateY(0);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    border-color 120ms ease,
    background 120ms ease;
}

[data-auth-state="public"] .public-header-nav button:hover {
  border-color: rgba(77, 226, 151, 0.78);
  background: linear-gradient(180deg, #163b35 0%, #092220 100%);
  box-shadow:
    inset 0 1px 0 rgba(140, 255, 204, 0.16),
    0 5px 0 #031012,
    0 9px 20px rgba(0, 0, 0, 0.38);
  transform: translateY(-1px);
}

[data-auth-state="public"] .public-header-nav button:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(125, 255, 194, 0.08),
    0 1px 0 #031012,
    0 3px 8px rgba(0, 0, 0, 0.28);
}

[data-auth-state="public"] .public-header-nav button:focus-visible {
  outline: 2px solid #43daff;
  outline-offset: 2px;
}

[data-auth-state="public"] .public-header-nav button.active {
  border-color: rgba(83, 238, 157, 0.95);
  background: linear-gradient(180deg, #19483b 0%, #0a2925 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(155, 255, 211, 0.2),
    0 4px 0 #031012,
    0 0 18px rgba(56, 214, 132, 0.18);
}

@media (max-width: 700px) {
  [data-auth-state="public"] .public-header-nav {
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  [data-auth-state="public"] .public-header-nav::-webkit-scrollbar {
    display: none;
  }

  [data-auth-state="public"] .public-header-nav button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 12px;
    font-size: 13px;
  }
}

/* Telegram-style image send button */
[data-auth-state="public"] .vidya-chat-assistant #sendBtn,
[data-auth-state="authenticated"] .vidya-chat-assistant #sendBtn {
  width: 45px;
  height: 45px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-auth-state="public"] .vidya-chat-assistant #sendBtn img,
[data-auth-state="authenticated"] .vidya-chat-assistant #sendBtn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-auth-state="public"] .vidya-chat-assistant #sendBtn:hover,
[data-auth-state="authenticated"] .vidya-chat-assistant #sendBtn:hover {
  background: transparent;
  transform: translateY(-1px);
}

/* Public content views: keep scrolling available without visible browser scrollbar */
[data-auth-state="public"] .public-content-view {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

[data-auth-state="public"] .public-content-view::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}



/* Login-failed Public reference state */
[data-auth-state="public"] .login-failed-public-state {
  width: 100%;
  max-width: 1180px;
  min-height: 390px;
  margin: 0 auto;
  padding: 34px 44px;
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 48px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--public-border);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 45%, rgba(67, 218, 255, 0.11), transparent 34%),
    radial-gradient(circle at 80% 10%, rgba(139, 108, 255, 0.10), transparent 42%),
    linear-gradient(135deg, rgba(11, 23, 40, 0.98), rgba(8, 20, 35, 0.94));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

[data-auth-state="public"] .login-failed-public-state.hidden {
  display: none !important;
}

[data-auth-state="public"] .login-failed-mode #welcome {
  display: none !important;
}

[data-auth-state="public"] .login-failed-illustration {
  min-height: 310px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-auth-state="public"] .login-failed-student-image {
  width: min(100%, 500px);
  max-height: 330px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.35));
}

[data-auth-state="public"] .login-failed-copy {
  max-width: 620px;
  position: relative;
  z-index: 2;
}

[data-auth-state="public"] .login-failed-eyebrow {
  color: var(--public-cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.2px;
  margin-bottom: 14px;
}

[data-auth-state="public"] .login-failed-copy h1 {
  margin: 0;
  color: var(--public-text);
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.06;
  letter-spacing: -2px;
  font-weight: 800;
}

[data-auth-state="public"] .login-failed-copy p {
  margin: 20px 0 0;
  max-width: 570px;
  color: var(--public-muted);
  font-size: 16px;
  line-height: 1.7;
}

[data-auth-state="public"] .login-failed-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

[data-auth-state="public"] .login-failed-actions button {
  min-height: 46px;
}

@media (max-width: 900px) {
  [data-auth-state="public"] .login-failed-public-state {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 34px 28px;
  }

  [data-auth-state="public"] .login-failed-illustration {
    min-height: 240px;
  }

  [data-auth-state="public"] .login-failed-student-image {
    max-height: 250px;
  }

  [data-auth-state="public"] .login-failed-copy {
    max-width: none;
    text-align: center;
  }

  [data-auth-state="public"] .login-failed-copy p {
    margin-left: auto;
    margin-right: auto;
  }

  [data-auth-state="public"] .login-failed-actions {
    justify-content: center;
  }
}


/* ================================================================
   STUDENT DASHBOARD — authenticated STUDENT only
   Public / and /login-failed styles are intentionally untouched.
   ================================================================ */

.vidya-app[data-auth-state="authenticated"][data-role="STUDENT"] {
  /* Iris migration (docs/canonical/Design.md #29): these custom
     properties are the single place the student dashboard's palette is
     defined -- every rule below reads through them (or a small,
     clearly-derived literal for a one-off hover/gradient shade), so
     redefining these here is what actually re-themes the whole
     dashboard. Values map directly to the canonical Iris tokens
     defined at :root; nothing here is a new, independently-invented
     color. */
  --student-bg: var(--iris-soft-bg);
  --student-panel: var(--iris-surface);
  --student-panel-soft: var(--iris-panel-soft);
  --student-border: var(--iris-border);
  --student-cyan: var(--iris-primary);
  --student-text: var(--iris-text-primary);
  --student-muted: var(--iris-text-secondary);
  --student-green: var(--iris-success);
  --student-danger: var(--iris-danger);
  background: var(--student-bg);
  overflow: hidden;
}

.vidya-app[data-auth-state="authenticated"][data-role="STUDENT"] .vidya-header,
.vidya-app[data-auth-state="authenticated"][data-role="STUDENT"] .public-layout {
  display: none !important;
}

.vidya-app[data-auth-state="authenticated"][data-role="STUDENT"] .student-dashboard {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  min-width: 0;
  height: 100dvh;
  overflow: hidden;
  color: var(--student-text);
  background: var(--iris-texture), var(--student-bg);
}

.student-sidebar {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 12px 14px;
  background: var(--student-panel);
  border-right: 1px solid var(--student-border);
}

.student-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 9px 20px;
}

.student-brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.student-brand strong,
.student-brand span {
  display: block;
}

.student-brand strong {
  font-size: 17px;
  letter-spacing: .2px;
}

.student-brand span {
  margin-top: 2px;
  color: var(--student-muted);
  font-size: 13px;
}

.student-nav {
  display: grid;
  gap: 4px;
}

.student-nav-item,
.student-logout {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 10px;
  padding: 0 11px;
  color: var(--student-muted);
  background: transparent;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: .18s ease;
}

.student-nav-item img,
.student-logout img {
  width: 19px;
  height: 19px;
  object-fit: contain;
  flex: 0 0 auto;
}

.student-nav-item:hover,
.student-nav-item.active {
  color: var(--iris-primary-strong);
  background: rgba(79, 123, 255, .10);
  box-shadow: inset 2px 0 0 var(--student-cyan);
}

.student-nav-item.active img {
  filter: drop-shadow(0 0 4px rgba(79, 123, 255, .35));
}

.student-logout {
  margin-top: auto;
  color: var(--student-muted);
}

.student-logout:hover {
  color: var(--iris-danger-strong);
  background: rgba(239, 68, 68, .08);
}

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

.student-header {
  height: 64px;
  flex: 0 0 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 22px;
  border-bottom: 1px solid var(--student-border);
  background: var(--iris-header-bg);
}

.student-arise-logo {
  width: 128px;
  max-height: 40px;
  object-fit: contain;
  object-position: left center;
}

.student-header-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.student-search {
  width: min(260px, 28vw);
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--student-border);
  border-radius: 9px;
  background: var(--student-panel);
}

.student-search img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.student-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--student-text);
  background: transparent;
  font: inherit;
  font-size: 14px;
}

.student-search input::placeholder {
  color: var(--student-muted);
}

.student-icon-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--student-border);
  border-radius: 9px;
  background: var(--student-panel);
  cursor: pointer;
}

.student-icon-button img {
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.student-profile {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  padding: 0 2px 0 4px;
  color: var(--student-text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.student-avatar {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, var(--iris-primary), var(--iris-secondary));
  font-size: 13px;
  font-weight: 800;
}

.student-profile strong,
.student-profile small {
  display: block;
}

.student-profile strong {
  font-size: 14px;
}

.student-profile small {
  margin-top: 2px;
  color: var(--student-muted);
  font-size: 13px;
}

.student-content {
  min-height: 0;
  overflow: hidden;
  padding: 19px 20px 16px;
}

.student-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 13px;
}

.student-eyebrow {
  margin: 0 0 4px;
  color: var(--iris-primary-strong);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.3px;
}

.student-heading h1 {
  margin: 0;
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: -.6px;
}

.student-heading p:last-of-type {
  margin: 5px 0 0;
  color: var(--student-muted);
  font-size: 14px;
}

.student-view-label {
  color: var(--student-muted);
  font-size: 13px;
}

.student-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.student-stat-card {
  min-width: 0;
  min-height: 73px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--student-border);
  border-radius: 11px;
  background: var(--student-panel);
  box-shadow: var(--shadow);
}

.student-stat-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  background: rgba(79, 123, 255, .10);
}

.student-stat-icon img {
  width: 19px;
  height: 19px;
  object-fit: contain;
}

.student-stat-card strong,
.student-stat-card span,
.student-stat-card small {
  display: block;
}

.student-stat-card strong {
  font-size: 19px;
  line-height: 1;
}

.student-stat-card div > span {
  margin-top: 3px;
  color: var(--student-muted);
  font-size: 13px;
}

.student-stat-card small {
  margin-top: 2px;
  color: var(--student-muted);
  font-size: 12px;
}

.student-section {
  margin-top: 14px;
}

.student-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 7px;
}

.student-section-heading h2 {
  margin: 0;
  font-size: 16px;
}

.student-link-button {
  border: 0;
  padding: 3px 0;
  color: var(--iris-primary-strong);
  background: transparent;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.continue-card {
  min-height: 91px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(79, 123, 255, .18);
  border-radius: 12px;
  background: var(--student-panel);
  box-shadow: var(--shadow);
}

.continue-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--student-cyan);
  background: rgba(79, 123, 255, .10);
  border: 1px solid rgba(79, 123, 255, .18);
  font-size: 25px;
}

.continue-copy {
  min-width: 0;
}

.course-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--iris-primary-strong);
  font-size: 13px;
}

.course-line span:last-child {
  color: var(--student-muted);
}

.continue-copy h3 {
  margin: 5px 0 9px;
  font-size: 14px;
}

.progress-track {
  height: 4px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(23, 35, 56, .08);
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--iris-primary), var(--iris-secondary));
}

.student-primary-button,
.recommended-card button {
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--iris-primary-strong), var(--iris-secondary));
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.student-primary-button {
  padding: 9px 13px;
  white-space: nowrap;
}

.recommended-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.recommended-card {
  min-width: 0;
  min-height: 103px;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: 9px;
  padding: 11px;
  border: 1px solid var(--student-border);
  border-radius: 11px;
  background: var(--student-panel-soft);
}

.subject-badge {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  grid-row: 1 / 3;
  border-radius: 9px;
  color: var(--iris-primary-strong);
  background: rgba(79, 123, 255, .10);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .5px;
}

.recommended-card div span {
  color: var(--iris-primary-strong);
  font-size: 12px;
}

.recommended-card h3 {
  margin: 4px 0 0;
  font-size: 14px;
}

.recommended-card button {
  grid-column: 2;
  justify-self: start;
  padding: 6px 9px;
}

/* NOTE: the pre-rewrite .student-assistant-slot DOM node/mounting system
   (and its role-specific "hide the reopen button, only show it once the
   widget is closed" rules) was removed when app.js was rewritten into
   the shared multi-role app shell -- these rules used to reference a
   container that app.js no longer creates. The one rule of real
   consequence (`.public-assistant-open { display: none }` for
   data-role="STUDENT", whose companion "un-hide" rule could never match
   without .student-assistant-slot existing) was actively hiding the
   floating reopen button for every authenticated STUDENT session. The
   whole block was deleted rather than left as dead weight, since it was
   not merely inert: see the broadened [data-auth-state="authenticated"]
   selectors above, which now provide the same widget/reopen-button
   styling for all four authenticated roles without any per-role override. */

.student-toast {
  /* Deliberately kept as a dark surface even under the light Iris
     theme -- a dark, high-contrast toast/snackbar over a light page is
     a standard, accessible convention (matches this project's shared
     .app-toast below too), not a leftover dark-theme oversight. */
  position: fixed;
  z-index: 100;
  right: 22px;
  bottom: 22px;
  max-width: 300px;
  padding: 10px 13px;
  border: 1px solid rgba(79, 123, 255, .25);
  border-radius: 9px;
  color: #ffffff;
  background: #0f1b2d;
  box-shadow: 0 12px 30px rgba(23, 35, 56, .28);
  font-size: 13px;
}

@media (max-width: 1120px) {
  .student-content {
    padding-right: 12px;
  }

  .student-stat-card {
    padding: 9px;
  }
}

@media (max-width: 900px) {
  .vidya-app[data-auth-state="authenticated"][data-role="STUDENT"] .student-dashboard {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .student-sidebar {
    padding-inline: 8px;
  }

  .student-brand {
    justify-content: center;
    padding-inline: 0;
  }

  .student-brand div,
  .student-nav-item span,
  .student-logout span {
    display: none;
  }

  .student-nav-item,
  .student-logout {
    justify-content: center;
    padding: 0;
  }

  .student-content {
    padding-right: 320px;
  }
}

@media (max-width: 720px) {
  .vidya-app[data-auth-state="authenticated"][data-role="STUDENT"] {
    overflow: auto;
  }

  .vidya-app[data-auth-state="authenticated"][data-role="STUDENT"] .student-dashboard {
    min-height: 100dvh;
    height: auto;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .student-sidebar {
    min-height: auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--student-border);
  }

  .student-brand {
    margin-right: auto;
  }

  .student-nav {
    display: flex;
  }

  .student-nav-item {
    width: 36px;
  }

  .student-logout {
    margin-top: 0;
    width: 36px;
  }

  .student-header {
    height: auto;
    min-height: 58px;
    padding: 9px 12px;
  }

  .student-header-actions {
    gap: 5px;
  }

  .student-search {
    width: 150px;
  }

  .student-profile > span:last-child {
    display: none;
  }

  .student-content {
    overflow: visible;
    padding: 14px 12px 100px;
  }

  .student-stats,
  .recommended-grid {
    grid-template-columns: 1fr 1fr;
  }

  .continue-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .student-primary-button {
    grid-column: 2;
    justify-self: start;
  }

}

/* ================================================================
   MULTI-ROLE APPLICATION SHELL — TEACHER / ADMIN / SUPERADMIN
   Reuses the exact dark/cyan visual language established by the
   STUDENT dashboard above (same radii, spacing, gradients), but is
   role-agnostic: one set of structural rules, themed per role via
   the [data-role] attribute already used for STUDENT. Content is
   rendered by app.js -- no per-role markup is duplicated in CSS.
   ================================================================ */

.app-shell.hidden {
  display: none !important;
}

.vidya-app[data-auth-state="authenticated"] .app-shell {
  /* Iris migration: same approach as the STUDENT dashboard above --
     these tokens are the single source every rule in this section
     reads through. Base/TEACHER uses Iris Blue; ADMIN/SUPERADMIN get a
     distinct accent per role (preserving the pre-existing "each role
     looks visually distinct" behavior) by reusing the other two
     canonical hues rather than inventing new ones. */
  --app-bg: var(--iris-soft-bg);
  --app-border: var(--iris-border);
  --app-accent: var(--iris-primary);
  --app-accent-strong: var(--iris-primary-strong);
  --app-text: var(--iris-text-primary);
  --app-muted: var(--iris-text-secondary);
  --app-green: var(--iris-success);
  --app-red: var(--iris-danger);
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  min-width: 0;
  height: 100dvh;
  overflow: hidden;
  color: var(--app-text);
  background: var(--iris-texture), var(--app-bg);
}

.vidya-app[data-auth-state="authenticated"][data-role="ADMIN"] .app-shell {
  --app-accent: var(--iris-secondary);
  --app-accent-strong: var(--iris-secondary);
}

.vidya-app[data-auth-state="authenticated"][data-role="SUPERADMIN"] .app-shell {
  --app-accent: var(--iris-warning);
  --app-accent-strong: #b45309;
}

/* #b45309 (a darkened amber for text-on-light-bg readability) has no
   single token equivalent to fall back to automatically -- in dark
   mode the lightened --iris-warning itself (11.22:1 against soft-bg)
   is what SUPERADMIN's accent-strong should read through instead. */
:root[data-theme="dark"] .vidya-app[data-auth-state="authenticated"][data-role="SUPERADMIN"] .app-shell {
  --app-accent-strong: var(--iris-warning);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vidya-app[data-auth-state="authenticated"][data-role="SUPERADMIN"] .app-shell {
    --app-accent-strong: var(--iris-warning);
  }
}

.vidya-app[data-auth-state="authenticated"] .vidya-header,
.vidya-app[data-auth-state="authenticated"] .public-layout {
  display: none !important;
}

.app-sidebar {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 12px 14px;
  background: var(--iris-surface);
  border-right: 1px solid var(--app-border);
  overflow-y: auto;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 9px 20px;
}

.app-brand img { width: 38px; height: 38px; object-fit: contain; }
.app-brand strong { display: block; font-size: 17px; letter-spacing: .2px; }
.app-brand span { display: block; margin-top: 2px; color: var(--app-muted); font-size: 13px; }

.app-nav { display: grid; gap: 4px; }

.app-nav-item,
.app-logout {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 10px;
  padding: 0 11px;
  color: var(--app-muted);
  background: transparent;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: .18s ease;
}

.app-nav-item img,
.app-logout img { width: 19px; height: 19px; object-fit: contain; flex: 0 0 auto; }

.app-nav-item:hover,
.app-nav-item.active {
  color: var(--app-accent-strong);
  background: rgba(79, 123, 255, .10);
  box-shadow: inset 2px 0 0 var(--app-accent);
}

.app-logout { margin-top: auto; color: var(--app-muted); }
.app-logout:hover { color: var(--iris-danger-strong); background: rgba(239, 68, 68, .08); }

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

.app-header {
  height: 64px;
  flex: 0 0 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 22px;
  border-bottom: 1px solid var(--app-border);
  background: var(--iris-header-bg);
}

.app-header-logo { width: 128px; max-height: 40px; object-fit: contain; object-position: left center; }
.app-header-title { font-size: 16px; font-weight: 700; letter-spacing: .2px; }

.app-header-actions { min-width: 0; display: flex; align-items: center; gap: 10px; }

.app-profile {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  padding: 0 2px 0 4px;
  color: var(--app-text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.app-avatar {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, var(--app-accent-strong), var(--iris-secondary));
  font-size: 13px;
  font-weight: 800;
}

.app-profile strong { display: block; font-size: 14px; }

/* ================================================================
   THEME TOGGLE (mission Phase 5) -- one shared component, reused by
   every role header (Student/Teacher/Admin/Superadmin via
   .app-header-actions/.student-header) and by masteradmin.html
   (.ma-theme-toggle-wrap). See app.js's Theme module and the inline
   bootstrap script in <head> (index.html/masteradmin.html) for the
   logic that sets documentElement[data-theme] and persists the choice.
   ================================================================ */
.theme-toggle {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--iris-border);
  background: var(--iris-panel-soft);
  color: var(--iris-text-primary);
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}

.theme-toggle:hover {
  background: var(--iris-surface);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--iris-primary);
  outline-offset: 2px;
}

.theme-toggle:active {
  transform: scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle {
    transition: none;
  }

  .theme-toggle:active {
    transform: none;
  }
}

/* ================================================================
   NOTIFICATIONS -- bell + unread badge + panel, shared by every role
   header exactly like .theme-toggle above. Masteradmin deliberately
   does not include this (no current notification trigger addresses a
   Masteradmin user -- see app.js's Notifications module). All colors
   below are --iris-* tokens only, so dark mode is inherited
   automatically via :root[data-theme="dark"], never set here.
   ================================================================ */
.notifications-wrap {
  position: relative;
  flex: 0 0 auto;
}

.notifications-toggle {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--iris-border);
  background: var(--iris-panel-soft);
  color: var(--iris-text-primary);
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}

.notifications-toggle:hover {
  background: var(--iris-surface);
}

.notifications-toggle:focus-visible {
  outline: 2px solid var(--iris-primary);
  outline-offset: 2px;
}

.notifications-toggle:active {
  transform: scale(0.94);
}

.notifications-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--iris-danger);
  color: var(--iris-surface);
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.notifications-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--iris-border);
  border-radius: 14px;
  background: var(--iris-surface);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .18);
  z-index: 220;
}

.notifications-list {
  list-style: none;
  margin: 0;
  padding: 6px;
}

.notification-item {
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color .15s ease;
}

.notification-item:hover,
.notification-item:focus-visible {
  background: var(--iris-panel-soft);
  outline: none;
}

.notification-item.is-unread {
  background: var(--iris-soft-bg);
  border-left: 3px solid var(--iris-primary);
}

.notification-item-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--iris-text-primary);
}

.notification-item-body {
  margin: 3px 0 0;
  font-size: 14px;
  color: var(--iris-text-secondary);
}

.notification-item-time {
  margin: 5px 0 0;
  font-size: 13px;
  color: var(--iris-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .notifications-toggle {
    transition: none;
  }

  .notifications-toggle:active {
    transform: none;
  }

  .notification-item {
    transition: none;
  }
}

@media (max-width: 550px) {
  .notifications-panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    max-height: 70vh;
    border-radius: 14px 14px 0 0;
  }
}

.app-profile small { display: block; margin-top: 2px; color: var(--app-muted); font-size: 13px; }

.app-content {
  min-height: 0;
  overflow-y: auto;
  padding: 19px 22px 40px;
}

.app-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.app-eyebrow {
  margin: 0 0 4px;
  color: var(--app-accent-strong);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.3px;
}

.app-heading h1 { margin: 0; font-size: clamp(21px, 2vw, 28px); line-height: 1.1; letter-spacing: -.6px; }
.app-heading p { margin: 5px 0 0; color: var(--app-muted); font-size: 14px; }

.app-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 16px;
}

.app-stat-card {
  min-width: 0;
  min-height: 64px;
  display: flex;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--app-border);
  border-radius: 11px;
  background: var(--iris-surface);
  box-shadow: var(--shadow);
}

.app-stat-card strong { display: block; font-size: 19px; line-height: 1; }
.app-stat-card span { display: block; margin-top: 4px; color: var(--app-muted); font-size: 13px; }

/* Same button/non-button variant pattern as .app-list-row above -- the
   teacher dashboard's "Pending Doubts" card is a real, native, clickable
   <button>; the other stat cards remain plain, non-interactive <article>s. */
button.app-stat-card { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }

.app-section { margin-top: 18px; }

.app-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 8px;
}

.app-section-heading h2 { margin: 0; font-size: 16px; }

.app-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.app-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: var(--iris-surface);
  box-shadow: var(--shadow);
  text-align: left;
  cursor: default;
}

.app-card-grid .app-card { cursor: pointer; transition: .15s ease; }
.app-card-grid .app-card:hover { border-color: var(--app-accent); transform: translateY(-1px); }

.app-card h3 { margin: 0 0 4px; font-size: 15px; }
.app-card p { margin: 0 0 8px; color: var(--app-muted); font-size: 14px; }

.app-list { display: grid; gap: 6px; }

.app-list-row {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: var(--iris-surface);
  color: var(--app-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.app-list-row { cursor: pointer; }
div.app-list-row { cursor: default; }

.app-list-icon { font-size: 18px; flex: 0 0 auto; color: var(--app-accent); }

.app-list-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app-list-main strong { font-size: 14px; }
.app-list-main small { font-size: 13px; color: var(--app-muted); }
.app-list-side { font-size: 14px; color: var(--app-muted); flex: 0 0 auto; }

/* ================================================================
   DOUBT MESSAGES -- the one piece of Doubts UI with no existing
   equivalent (.app-list/.app-card/.app-form-grid already cover the
   thread list and the create/reply forms). Same --app-* and --iris-*
   tokens as everything else here, so dark mode is inherited for free.
   ================================================================ */
.doubt-messages { display: grid; gap: 8px; margin: 12px 0; }

.doubt-message {
  padding: 10px 13px;
  border: 1px solid var(--app-border);
  border-left: 3px solid var(--app-accent);
  border-radius: 10px;
  background: var(--iris-surface);
}

.doubt-message-teacher { border-left-color: var(--iris-secondary); }

.doubt-message-sender {
  margin: 0 0 3px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--app-muted);
}

.doubt-message-body { margin: 0; font-size: 14px; color: var(--app-text); }

.doubt-message-time { margin: 5px 0 0; font-size: 13px; color: var(--app-muted); }

.app-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.app-badge-good { color: #166534; background: rgba(34, 197, 94, .15); }
.app-badge-info { color: #1e40af; background: rgba(79, 123, 255, .15); }
.app-badge-neutral { color: var(--app-muted); background: rgba(100, 116, 139, .12); }
.app-badge-bad { color: #991b1b; background: rgba(239, 68, 68, .15); }
/* Canonical Iris Warning (--iris-warning, docs/canonical/Design.md #29):
   this project had no "needs attention" tone before -- PENDING_APPROVAL
   was previously mapped to the "info" (cyan) tone, indistinguishable
   from a plain in-progress state. Same translucent-pill pattern as the
   badges above, built from --iris-warning for a consistent hue. */
.app-badge-warning { color: #4a2f06; background: rgba(245, 158, 11, .25); }

.app-btn {
  border: 1px solid var(--app-border);
  border-radius: 9px;
  padding: 9px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: .15s ease;
}

.app-btn-primary { color: #ffffff; background: var(--app-accent-strong); border-color: transparent; }
.app-btn-primary:hover { filter: brightness(1.08); }
.app-btn-secondary { color: var(--app-text); background: rgba(79, 123, 255, .10); }
.app-btn-secondary:hover { background: rgba(79, 123, 255, .18); }
.app-btn-ghost { color: var(--app-muted); background: transparent; border-color: transparent; padding: 5px 10px; }
.app-btn-ghost:hover { color: var(--app-text); }

.app-form-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.app-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 10px; }
.app-form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--app-muted); }

.app-input {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  padding: 8px 11px;
  color: var(--app-text);
  background: var(--iris-surface);
  font: inherit;
  font-size: 14px;
}

textarea.app-input { min-height: 72px; resize: vertical; }
.app-input::placeholder { color: var(--app-muted); }

.app-prose { padding: 14px; border: 1px solid var(--app-border); border-radius: 10px; background: var(--iris-surface); line-height: 1.6; font-size: 14px; white-space: pre-wrap; }

.app-options { display: grid; gap: 8px; margin: 14px 0; }
.app-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid var(--app-border);
  border-radius: 9px;
  cursor: pointer;
  font-size: 14px;
}
.app-option.selected,
.app-option:has(input:checked) { border-color: var(--app-accent); background: rgba(79, 123, 255, .08); }

.app-attempt-progress { color: var(--app-muted); font-size: 13px; margin-bottom: 6px; }
.app-attempt-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }

.app-profile-card p { margin: 0 0 8px; font-size: 14px; }
.app-profile-card p:last-child { margin-bottom: 0; }

.app-video-card { text-align: center; padding: 22px; }

/* YouTube IFrame Player embed -- responsive 16:9, no fixed pixel size
   so it scales with the surrounding .app-section on any viewport. */
.app-video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.app-video-embed iframe,
.app-video-embed > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.app-video-fallback-link {
  margin: 8px 0 0;
  font-size: 14px;
  text-align: center;
}

/* Async state components: loading / empty / error / not-available */

.app-state {
  padding: 34px 18px;
  text-align: center;
  color: var(--app-muted);
  font-size: 14px;
}

.app-state p { margin: 0 0 10px; }
.app-state p:last-child { margin-bottom: 0; }

.app-spinner {
  width: 26px;
  height: 26px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 3px solid rgba(79, 123, 255, .18);
  border-top-color: var(--app-accent);
  animation: app-spin .8s linear infinite;
}

@keyframes app-spin { to { transform: rotate(360deg); } }

.app-state-error { color: var(--iris-danger-strong); }
.app-state-unavailable { border: 1px dashed var(--app-border); border-radius: 10px; }

/* Toast -- deliberately kept as a dark surface, same reasoning as
   .student-toast above: a dark, high-contrast toast over a light page
   is a standard accessible convention. */

.app-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 12px);
  padding: 10px 18px;
  border-radius: 9px;
  color: #ffffff;
  background: #0f1b2d;
  border: 1px solid rgba(79, 123, 255, .25);
  box-shadow: 0 12px 30px rgba(23, 35, 56, .28);
  font-size: 14px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: .18s ease;
}

.app-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Assistant slot shared by all 4 roles (student kept its own working
   version above; this is the equivalent mount point for the shell). */

.app-assistant-slot {
  position: absolute;
  top: 78px;
  right: 20px;
  bottom: 20px;
  width: 320px;
  z-index: 5;
  /* The slot is a tall transparent box; only the chat itself may take
     clicks. Without this its empty top part sat over the page's own
     right-hand buttons ("Schedule a Class", Go Live, Reschedule...) and
     swallowed their clicks -- found by the browser check. */
  pointer-events: none;
}

.app-assistant-slot > * {
  pointer-events: auto;
}

.app-shell:has(.assistant-unavailable) .app-assistant-slot,
.vidya-chat-assistant.assistant-unavailable {
  display: none;
}

/* Access denied (403) */

.app-forbidden {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: var(--iris-soft-bg);
}

.app-forbidden.hidden { display: none; }

.app-forbidden-card {
  max-width: 380px;
  padding: 34px 30px;
  text-align: center;
  border: 1px solid #e2e8f5;
  border-radius: 16px;
  background: var(--iris-surface);
  box-shadow: var(--shadow);
  color: var(--iris-text-primary);
}

.app-forbidden-eyebrow { color: var(--iris-danger-strong); font-size: 13px; font-weight: 800; letter-spacing: 1.3px; margin-bottom: 8px; }
.app-forbidden-card h1 { margin: 0 0 10px; font-size: 22px; }
.app-forbidden-card p { margin: 0 0 20px; color: var(--iris-text-secondary); font-size: 14px; }

/* Responsive: mirrors the STUDENT dashboard's own breakpoints exactly
   so the whole product feels consistent at every size. */

@media (max-width: 1120px) {
  .app-assistant-slot { width: 290px; min-width: 250px; }
  .app-content { padding-right: 12px; }
}

@media (max-width: 900px) {
  .vidya-app[data-auth-state="authenticated"] .app-shell {
    grid-template-columns: 70px minmax(0, 1fr);
  }
  .app-sidebar { padding-inline: 8px; }
  .app-brand { justify-content: center; padding-inline: 0; }
  .app-brand div, .app-nav-item span, .app-logout span { display: none; }
  .app-nav-item, .app-logout { justify-content: center; padding: 0; }
  .app-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .vidya-app[data-auth-state="authenticated"] .app-shell {
    min-height: 100dvh;
    height: auto;
    grid-template-columns: 1fr;
    overflow: visible;
    position: static;
  }
  .app-sidebar {
    min-height: auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--app-border, #e2e8f5);
    overflow-x: auto;
  }
  .app-brand { margin-right: auto; }
  .app-nav { display: flex; }
  .app-nav-item { width: 36px; flex: 0 0 auto; }
  .app-logout { margin-top: 0; width: 36px; flex: 0 0 auto; }
  .app-header { height: auto; min-height: 58px; padding: 9px 12px; }
  .app-content { overflow: visible; padding: 14px 12px 100px; }
  .app-stats { grid-template-columns: 1fr 1fr; }
  .app-card-grid { grid-template-columns: 1fr; }
  .app-assistant-slot { position: fixed; top: auto; right: 10px; bottom: 10px; left: 10px; width: auto; height: min(70dvh, 480px); }
  .app-forbidden-card { margin: 16px; }
}

/* ================================================================
   RECORDED LECTURE PLAYER -- opened from a Vidya chat answer when the
   question matches a recorded live class (recording_url from the API).
   ================================================================ */
.lecture-recordings { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.lecture-recording-btn { text-align: left; font-size: 14px; }
.vidya-action-btn { margin-top: 10px; }
.lecture-player {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: rgba(7, 12, 24, 0.72); padding: 16px;
}
.lecture-player-box {
  width: min(960px, 100%); background: var(--iris-surface); color: var(--iris-text-primary);
  border: 1px solid var(--iris-border); border-radius: 16px; overflow: hidden;
}
.lecture-player-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; }
.lecture-player-close {
  width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--iris-border);
  background: var(--iris-panel-soft); color: var(--iris-text-primary); font-size: 18px; cursor: pointer;
}
.lecture-player-close:focus-visible { outline: 2px solid var(--iris-primary); outline-offset: 2px; }
.lecture-player video { display: block; width: 100%; max-height: 70vh; background: #000; }

/* Schedule rows with inline actions (teacher "My Classes"). */
.schedule-row { flex-wrap: wrap; gap: 8px; }
.app-link-button { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.app-link-button:focus-visible { outline: 2px solid var(--iris-primary); outline-offset: 2px; border-radius: 6px; }
.schedule-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.reschedule-form { padding: 10px 14px; }

/* Course page syllabus editor: subject cards, chapters, topic chips. */
.syllabus-hint { margin: 0 0 8px; color: var(--app-muted); font-size: 0.9rem; }
.syllabus-subject { margin-top: 12px; }
.syllabus-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.syllabus-head h3 { margin: 0; font-size: 1.05rem; }
.syllabus-chapter { border-top: 1px solid var(--app-border); padding: 10px 0; }
.syllabus-topics { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.syllabus-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border-radius: 999px;
  border: 1px solid var(--app-border); background: var(--app-bg); color: var(--app-text); font-size: 0.85rem;
}
.syllabus-chip button {
  width: 22px; height: 22px; border-radius: 999px; border: 0; background: transparent;
  color: var(--app-muted); cursor: pointer; font-size: 17px; line-height: 1;
}
.syllabus-chip button:hover { color: var(--app-red); }
.syllabus-chip button:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 1px; }
.syllabus-input { flex: 1 1 220px; min-width: 0; }

/* Admin Teachers page: one card per teacher, allotments as chips. */
.teacher-list { display: grid; gap: 12px; }
.teacher-card h3 { margin: 0; font-size: 1.05rem; }
.teacher-meta { color: var(--app-muted); overflow-wrap: anywhere; }
.allot-block { margin-top: 10px; }

/* Superadmin Users page: role tabs and search. */
.user-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.user-search { margin-bottom: 12px; max-width: 420px; }
.user-row h3 { margin: 0; font-size: 1.05rem; }

/* Class recording review panel. */
.recording-preview { display: block; width: 100%; max-width: 640px; max-height: 360px; margin: 8px 0; background: #000; border-radius: 12px; }
.recording-warning { color: var(--app-red); font-weight: 600; }

/* Webinar.gg room embedded in VIDYA (Host Studio / student class). */
.webinar-room { margin-top: 12px; border: 1px solid var(--app-border); border-radius: 14px; overflow: hidden; background: #000; }
.webinar-room-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--app-bg); color: var(--app-text); }
.webinar-room iframe { display: block; width: 100%; height: min(78vh, 760px); border: 0; }
.webinar-room:fullscreen iframe { height: calc(100vh - 56px); }
.host-studio-tab { margin-top: 12px; }

/* Question bank (admin), shared question rendering. */
.bank-img { display: block; max-width: min(100%, 420px); height: auto; margin: 6px 0; border-radius: 8px; background: #fff; }
.bank-q-meta { margin: 0 0 4px; color: var(--app-muted); font-size: 0.85rem; }
.bank-q-text { margin: 0 0 6px; }
.bank-options { margin: 6px 0; padding-left: 22px; }
.bank-options li { margin: 2px 0; }
.bank-correct { font-weight: 600; color: var(--app-green); }
.qb-chapter { margin-top: 10px; }
.qb-topic h3 { margin: 12px 0 6px; font-size: 1rem; }
.qb-question { border-top: 1px solid var(--app-border); padding: 10px 0; display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.qb-question .bank-q-body { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.qb-summary { margin-top: 12px; }
.qb-table { border-collapse: collapse; margin: 8px 0; width: 100%; max-width: 640px; font-size: 0.9rem; }
.qb-table th, .qb-table td { border: 1px solid var(--app-border); padding: 4px 8px; text-align: left; }
.qb-errors { color: var(--app-red); }

/* Teacher paper builder. */
.paper-bar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; padding: 10px 14px; border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-bg); }
.paper-q { cursor: pointer; }
.paper-q input[type="checkbox"] { width: 20px; height: 20px; margin-top: 4px; flex: 0 0 auto; }
.review-q { margin-top: 10px; }
.review-wrong { color: var(--app-red); }

/* Doubt meetings: teacher popup and cards. */
.doubt-popup { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 16px; background: rgba(7, 12, 24, 0.55); }
.doubt-popup-box { width: min(520px, 100%); max-height: 90vh; overflow: auto; padding: 20px; border-radius: 16px; background: var(--iris-surface); color: var(--iris-text-primary); border: 1px solid var(--iris-border); box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
.doubt-popup-box h2 { margin: 4px 0; }
.doubt-card h3 { margin: 0; font-size: 1.05rem; }
.vidya-answer { margin: 10px 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--app-border); background: var(--app-bg); overflow-wrap: anywhere; }
.vidya-answer .app-eyebrow { margin: 0 0 4px; }

/* =====================================================================
   2026-10-07 REDESIGN (owner 12-point list)
   1. Public site (pub-*): clean header, hero with Vidya's typing line,
      live course catalog, Explore / Buy, About, Help & Support.
   2. Vidya chat: closed by default, "Ask Vidya" edge tab, robotic
      typing intro, course cards inside the chat.
   3. Login popup readable in every theme, Google "G" icon.
   4. In-page dialogs replacing the browser's confirm/prompt boxes.
   5. Heartbeat glow behind every page (never over the content centre).
   ===================================================================== */

@font-face {
  font-family: "Orbitron";
  src: url("/assets/fonts/orbitron.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

/* ---------- 1. Public site ---------- */
.pub-header { display: none; }
[data-auth-state="public"] .pub-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 68px;
  padding: 0 clamp(16px, 4vw, 48px);
  background: rgba(5, 13, 26, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--public-border);
}
.pub-brand { display: flex; align-items: center; gap: 10px; color: var(--public-text); text-decoration: none; }
.pub-brand img { width: 40px; height: 40px; object-fit: contain; }
.pub-brand span { display: flex; flex-direction: column; line-height: 1.1; }
.pub-brand strong { font-size: 15px; letter-spacing: .06em; }
.pub-brand small { font-size: 11px; color: var(--public-cyan-soft); }
.pub-nav { display: flex; gap: 4px; margin-left: auto; white-space: nowrap; }
.pub-nav button, .pub-link {
  border: 0;
  background: transparent;
  color: var(--public-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.pub-nav button:hover, .pub-link:hover { color: var(--public-text); background: rgba(67, 218, 255, .08); }
.pub-nav button.active { color: #04121f; background: var(--public-cyan); }
.pub-nav button:focus-visible, .pub-btn:focus-visible, .pub-login:focus-visible, .pub-chip:focus-visible { outline: 3px solid var(--public-cyan-soft); outline-offset: 2px; }
.pub-login {
  border: 1px solid var(--public-border-strong);
  background: transparent;
  color: var(--public-text);
  font: inherit;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
}
.pub-login:hover { background: var(--public-cyan); color: #04121f; }

[data-auth-state="public"] .pub-site.public-layout { height: auto; min-height: calc(100dvh - 68px); display: block; overflow: visible; }
[data-auth-state="public"] .pub-site .pub-main.public-main { height: auto; overflow: visible; max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 24px; }
[data-auth-state="public"] .pub-site .pub-view.public-landing,
[data-auth-state="public"] .pub-site .pub-view.public-content-view { height: auto; overflow: visible; }
.pub-view.hidden { display: none !important; }

.pub-eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--public-cyan); }
.pub-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pub-btn {
  border: 1px solid var(--public-border-strong);
  background: rgba(67, 218, 255, .06);
  color: var(--public-text);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.pub-btn:hover { transform: translateY(-1px); background: rgba(67, 218, 255, .14); }
.pub-btn-primary { border-color: transparent; color: #04121f; background: linear-gradient(135deg, #43daff, #7c9dff); }
.pub-btn-primary:hover { background: linear-gradient(135deg, #6fe3ff, #94adff); }
.pub-btn:disabled { opacity: .6; cursor: progress; transform: none; }

.pub-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center;
  gap: 24px;
  padding: clamp(28px, 6vw, 72px) 0 clamp(20px, 4vw, 40px);
}
.pub-hero h1 { margin: 0; font-size: clamp(34px, 5.4vw, 62px); line-height: 1.04; letter-spacing: -.02em; color: var(--public-text); }
.pub-hero h1 span { background: linear-gradient(90deg, #43daff, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pub-typing, .vidya-robo {
  font-family: "Orbitron", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .04em;
}
.pub-typing { min-height: 2.6em; margin: 18px 0 0; font-size: clamp(15px, 1.7vw, 19px); color: var(--public-cyan-soft); }
.pub-typing i, .vidya-robo i {
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -.15em;
  background: currentColor;
  animation: vidyaCaret 1s steps(1) infinite;
}
@keyframes vidyaCaret { 50% { opacity: 0; } }
.pub-hero-art { position: relative; display: grid; place-items: center; min-height: 300px; }
.pub-orbit {
  position: absolute;
  width: min(360px, 80%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(67, 218, 255, .22), rgba(124, 157, 255, .10) 45%, transparent 70%);
  border: 1px solid rgba(67, 218, 255, .18);
  animation: pubFloat 6s ease-in-out infinite;
}
.pub-hero-vidya { position: relative; width: min(300px, 70%); filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .45)); animation: pubFloat 6s ease-in-out infinite reverse; }
@keyframes pubFloat { 50% { transform: translateY(-10px); } }

.pub-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 36px; }
.pub-why article, .pub-card {
  padding: 18px;
  border: 1px solid var(--public-border);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(14, 29, 49, .92), rgba(11, 23, 40, .92));
  color: var(--public-text);
}
.pub-why article { display: flex; flex-direction: column; gap: 4px; }
.pub-why b { font-size: 15px; }
.pub-why span { font-size: 13px; color: var(--public-muted); }

.pub-section { margin-bottom: 36px; }
.pub-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pub-section-head h2 { margin: 0; font-size: 24px; color: var(--public-text); }
.pub-link { color: var(--public-cyan); }

.pub-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.pub-course {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--public-border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(14, 29, 49, .95), rgba(9, 20, 36, .95));
  color: var(--public-text);
  transition: border-color .15s ease, transform .15s ease;
}
.pub-course:hover { border-color: var(--public-border-strong); transform: translateY(-2px); }
.pub-course-class { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: #04121f; background: var(--public-cyan); border-radius: 999px; padding: 4px 10px; }
.pub-course h3 { margin: 0; font-size: 19px; }
.pub-course p { margin: 0; font-size: 13px; color: var(--public-muted); }
.pub-price { font-size: 22px; font-weight: 800; color: var(--public-text); }
.pub-price small { font-size: 12px; font-weight: 600; color: var(--public-muted); }
.pub-course-actions { display: flex; gap: 8px; margin-top: auto; }
.pub-course-actions .pub-btn { flex: 1; padding: 10px 12px; }
.pub-empty { padding: 28px; text-align: center; color: var(--public-muted); border: 1px dashed var(--public-border); border-radius: 16px; }

.pub-page-head { padding: clamp(24px, 5vw, 48px) 0 18px; max-width: 760px; }
.pub-page-head h1 { margin: 0 0 10px; font-size: clamp(30px, 4vw, 44px); color: var(--public-text); }
.pub-page-head p { margin: 0; color: var(--public-muted); font-size: 16px; line-height: 1.6; }
.pub-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pub-chip {
  border: 1px solid var(--public-border);
  background: transparent;
  color: var(--public-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.pub-chip.active, .pub-chip:hover { color: #04121f; background: var(--public-cyan); border-color: transparent; }
.pub-about-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 36px; }
.pub-card h3 { margin: 0 0 8px; font-size: 17px; }
.pub-card p { margin: 0; color: var(--public-muted); line-height: 1.6; font-size: 14px; }
.pub-help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 36px; }
.pub-help { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.pub-help:hover { border-color: var(--public-border-strong); }
.pub-help > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.pub-help b { font-size: 16px; color: var(--public-text); }
.pub-help > span:last-child > span { color: var(--public-cyan-soft); }
.pub-help-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; font-size: 22px; color: #04121f; background: var(--public-cyan); }
.pub-help-wa { background: #25d366; }
.pub-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 22px 0 8px; border-top: 1px solid var(--public-border); font-size: 13px; color: var(--public-muted); }
.pub-footer a { color: var(--public-cyan-soft); }
.login-failed-public-state.pub-card { display: flex; gap: 22px; align-items: center; margin-top: 28px; }
.login-failed-public-state.pub-card.hidden { display: none; }
.login-failed-public-state .login-failed-student-image { width: 160px; max-width: 30%; }
.login-failed-public-state h1 { margin: 0 0 8px; font-size: 26px; }

/* Explore / Buy windows (public) */
.pub-modal { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 16px; background: rgba(2, 8, 18, .72); backdrop-filter: blur(4px); }
.pub-modal-card {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 24px;
  border: 1px solid var(--public-border-strong);
  border-radius: 20px;
  background: #0b1728;
  color: #f3f8ff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.pub-modal-card.narrow { width: min(460px, 100%); }
.pub-modal-close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .06); color: #f3f8ff; font-size: 22px; cursor: pointer; }
.pub-modal-card h2 { margin: 0 0 6px; font-size: 24px; padding-right: 36px; }
.pub-modal-card .pub-sub { margin: 0 0 16px; color: #8ea2bb; }
.pub-video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #020812; margin-bottom: 16px; }
.pub-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pub-feature-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.pub-feature-list li { position: relative; padding-left: 26px; color: #cfe0f2; font-size: 14px; line-height: 1.5; }
.pub-feature-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #04121f; background: #43daff; }
.pub-form { display: grid; gap: 12px; }
.pub-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: #cfe0f2; }
.pub-form input, .pub-form select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid rgba(67, 218, 255, .28);
  border-radius: 10px;
  background: #07111f;
  color: #f3f8ff;
  font: inherit;
}
.pub-form input:focus, .pub-form select:focus { outline: 2px solid #43daff; outline-offset: 1px; }
.pub-coupon { display: flex; gap: 8px; }
.pub-coupon input { flex: 1; text-transform: uppercase; }
.pub-total { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: rgba(67, 218, 255, .07); font-size: 14px; }
.pub-total div { display: flex; justify-content: space-between; color: #cfe0f2; }
.pub-total strong { font-size: 18px; color: #f3f8ff; }
.pub-form-error { min-height: 18px; margin: 0; color: #ff9b9b; font-size: 13px; }
.pub-form-note { margin: 0; font-size: 12px; color: #8ea2bb; }

@media (max-width: 860px) {
  .pub-hero { grid-template-columns: 1fr; }
  .pub-hero-art { min-height: 220px; order: -1; }
  .pub-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  [data-auth-state="public"] .pub-header { height: auto; flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
  .pub-nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .pub-login { margin-left: auto; }
  .pub-brand small { display: none; }
  .login-failed-public-state.pub-card { flex-direction: column; text-align: center; }
}

/* ---------- 2. Vidya chat + Ask Vidya edge tab ---------- */
[data-auth-state="public"] .public-assistant-open,
[data-auth-state="authenticated"] .public-assistant-open {
  top: 50%;
  bottom: auto;
  right: 0;
  height: auto;
  min-width: 0;
  padding: 10px 14px 10px 10px;
  border-radius: 16px 0 0 16px;
  border-right: 0;
  flex-direction: column;
  gap: 6px;
  background-color: #0b1d33;
  background-image: linear-gradient(160deg, #0b1d33, #121f3f);
  transform: translate(calc(100% - 14px), -50%);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease;
  box-shadow: -4px 0 18px rgba(67, 218, 255, .35);
}
[data-auth-state="public"] .public-assistant-open::before,
[data-auth-state="authenticated"] .public-assistant-open::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 18%;
  bottom: 18%;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(#43daff, #a78bfa);
  animation: vidyaTabPulse 2.4s ease-in-out infinite;
}
@keyframes vidyaTabPulse { 50% { opacity: .35; } }
[data-auth-state="public"] .public-assistant-open.is-peek,
[data-auth-state="authenticated"] .public-assistant-open.is-peek,
.public-assistant-open:hover,
.public-assistant-open:focus-visible {
  transform: translate(0, -50%) !important;
  box-shadow: -10px 0 30px rgba(67, 218, 255, .45);
}
[data-auth-state="public"] .public-assistant-open span,
[data-auth-state="authenticated"] .public-assistant-open span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "Orbitron", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .12em;
  color: #e7f6ff;
}
@media (hover: none), (max-width: 700px) {
  [data-auth-state="public"] .public-assistant-open,
  [data-auth-state="authenticated"] .public-assistant-open {
    top: auto;
    bottom: 18px;
    right: 16px;
    flex-direction: row;
    border-radius: 999px;
    border-right: 1px solid var(--public-border-strong, rgba(67, 218, 255, .42));
    padding: 6px 14px 6px 6px;
    transform: none;
  }
  [data-auth-state="public"] .public-assistant-open.is-peek,
  [data-auth-state="authenticated"] .public-assistant-open.is-peek,
  .public-assistant-open:hover { transform: none !important; }
  [data-auth-state="public"] .public-assistant-open span,
  [data-auth-state="authenticated"] .public-assistant-open span { writing-mode: horizontal-tb; transform: none; }
  [data-auth-state="public"] .public-assistant-open::before,
  [data-auth-state="authenticated"] .public-assistant-open::before { display: none; }
}

[data-auth-state="public"] .vidya-chat-assistant,
[data-auth-state="authenticated"] .vidya-chat-assistant {
  border-radius: 24px;
  background: radial-gradient(circle at 100% 0, rgba(124, 157, 255, .16), transparent 45%), #07111f;
  animation: vidyaChatIn .25s ease-out;
}
@keyframes vidyaChatIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.vidya-chat-assistant .public-assistant-intro { padding: 14px 18px 6px; }
.vidya-robo { margin: 0; min-height: 3.2em; font-size: 14px; line-height: 1.6; color: #8cecff; }
.vidya-chat-assistant .public-assistant-topics { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 18px 10px; }
.vidya-chat-assistant .public-assistant-topic { border-radius: 999px; }
.vidya-chat-assistant .composer { display: flex; align-items: flex-end; gap: 8px; }
.vidya-chat-assistant .composer textarea { flex: 1; }
.vidya-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vidya-chips button {
  border: 1px solid rgba(67, 218, 255, .4);
  background: rgba(67, 218, 255, .08);
  color: #e7f6ff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.vidya-chips button:hover { background: #43daff; color: #04121f; }
.vidya-chat-course { margin-top: 8px; padding: 12px; border: 1px solid rgba(67, 218, 255, .28); border-radius: 14px; background: rgba(14, 29, 49, .9); }
.vidya-chat-course strong { display: block; font-size: 14px; color: #f3f8ff; }
.vidya-chat-course span { display: block; margin: 2px 0 8px; font-size: 12px; color: #8ea2bb; }
.vidya-chat-course .vidya-chips { margin-top: 0; }
.vidya-chat-features { margin: 6px 0 0; padding-left: 18px; }
.vidya-chat-features li { margin: 3px 0; }

/* ---------- 3. Login popup ---------- */
.auth-card {
  background: var(--iris-surface, #ffffff);
  color: var(--iris-text-primary, #172338);
  border-color: var(--iris-border, #e4e8f0);
}
.auth-card h2 { color: var(--iris-text-primary, #172338); }
.auth-description { color: var(--iris-text-secondary, #64748b); }
.auth-form label { color: var(--iris-text-primary, #172338); }
.auth-form input { background: var(--iris-soft-bg, #f7f9fc); color: var(--iris-text-primary, #172338); border-color: var(--iris-border, #e4e8f0); }
.auth-form input:focus { outline: 2px solid var(--iris-primary, #4f7bff); outline-offset: 1px; }
.auth-close { color: var(--iris-text-secondary, #64748b); }
.auth-eyebrow { color: var(--iris-primary-strong, #3157d5); }
.auth-error { color: var(--iris-danger-strong, #b91c1c); }
.auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--iris-surface, #ffffff);
  color: var(--iris-text-primary, #172338);
  border: 1px solid var(--iris-border, #e4e8f0);
  cursor: pointer;
}
.auth-google:hover { background: var(--iris-soft-bg, #f7f9fc); }
.auth-google-g { flex: 0 0 auto; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 2px; color: var(--iris-text-secondary, #64748b); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--iris-border, #e4e8f0); }

/* ---------- 4. In-page dialogs ---------- */
.app-dialog { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 16px; background: rgba(7, 20, 38, .6); backdrop-filter: blur(3px); }
.app-dialog-card {
  width: min(460px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 22px;
  border: 1px solid var(--iris-border, #e4e8f0);
  border-radius: 16px;
  background: var(--iris-surface, #ffffff);
  color: var(--iris-text-primary, #172338);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
  animation: vidyaChatIn .18s ease-out;
}
.app-dialog-card h2 { margin: 0 0 8px; font-size: 18px; }
.app-dialog-card > p { margin: 0 0 14px; color: var(--iris-text-secondary, #64748b); font-size: 14px; line-height: 1.5; }
.app-dialog-field { display: grid; gap: 5px; margin-bottom: 12px; font-size: 14px; font-weight: 700; }
.app-dialog-field small { font-weight: 400; color: var(--iris-text-secondary, #64748b); }
.app-dialog-field input, .app-dialog-field select, .app-dialog-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--iris-border, #e4e8f0);
  border-radius: 9px;
  background: var(--iris-soft-bg, #f7f9fc);
  color: var(--iris-text-primary, #172338);
  font: inherit;
  font-weight: 400;
}
.app-dialog-error { min-height: 16px; margin: 0 0 8px; color: var(--iris-danger-strong, #b91c1c); font-size: 13px; }
.app-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.app-dialog-actions .app-btn { font-size: 13px; padding: 9px 18px; }
.app-dialog .app-btn-primary { color: #ffffff; background: var(--iris-primary-strong, #3157d5); border-color: transparent; }
.app-dialog .app-btn-secondary { color: var(--iris-text-primary, #172338); background: rgba(79, 123, 255, .10); border: 1px solid var(--iris-border, #e4e8f0); }

/* ---------- 5. Heartbeat glow ---------- */
/* A soft glow that beats at the page edges. It sits above the page
   backgrounds (which are opaque) but its colour fades out well before
   the content area, and pointer-events: none keeps it from ever
   catching a click; chat and dialogs stay above it. */
.vidya-heartbeat {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  background:
    radial-gradient(42vmax 42vmax at -6% -6%, rgba(67, 218, 255, .13), transparent 60%),
    radial-gradient(42vmax 42vmax at 106% 106%, rgba(167, 139, 250, .13), transparent 60%);
  animation: vidyaHeartbeat 2.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes vidyaHeartbeat {
  0%, 40%, 100% { opacity: .55; transform: scale(1); }
  12% { opacity: 1; transform: scale(1.03); }
  24% { opacity: .7; transform: scale(1.01); }
  32% { opacity: .95; transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  .vidya-heartbeat, .pub-orbit, .pub-hero-vidya, .pub-typing i, .vidya-robo i,
  .public-assistant-open::before { animation: none !important; }
}

/* ---------- 6. Student practice, notes, doubt waiting (2026-10-07) ---------- */
.practice-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 6px 0 4px; }
.practice-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--app-border, var(--iris-border));
  border-radius: 14px;
  background: linear-gradient(160deg, var(--iris-surface), var(--iris-soft-bg));
  color: var(--app-text, var(--iris-text-primary));
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.practice-tile:hover, .practice-tile:focus-visible { transform: translateY(-2px); border-color: var(--app-accent, var(--iris-primary)); }
.practice-tile b { font-size: 18px; }
.practice-tile span { font-size: 14px; color: var(--app-muted, var(--iris-text-secondary)); }
.practice-meta { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.practice-meta span { font-size: 14px; color: var(--app-muted, var(--iris-text-secondary)); }
.app-attempt-timer { font-weight: 700; color: var(--app-accent-strong, var(--iris-primary-strong)); }

.notes-page {
  margin-top: 16px;
  padding: clamp(16px, 3vw, 32px);
  border: 1px solid var(--app-border, var(--iris-border));
  border-radius: 14px;
  background: var(--iris-surface);
  color: var(--iris-text-primary);
  line-height: 1.7;
  font-size: 15px;
}
.notes-page:empty { display: none; }
.notes-page h1 { margin: 0 0 12px; font-size: 26px; }
.notes-page h2 { font-size: 20px; margin: 22px 0 8px; }
.notes-page h3, .notes-page h4 { font-size: 16px; margin: 16px 0 6px; }
.notes-page img { display: block; max-width: 100%; height: auto; margin: 12px auto; border-radius: 8px; pointer-events: none; }
.notes-page table { border-collapse: collapse; margin: 12px 0; width: 100%; }
.notes-page td { border: 1px solid var(--iris-border); padding: 6px 10px; }
.notes-page .notes-li { position: relative; padding-left: 18px; margin: 4px 0; }
.notes-page .notes-li::before { content: "•"; position: absolute; left: 4px; }
.notes-place { margin: 0 0 4px; font-size: 12px; color: var(--iris-text-secondary); }
.notes-protected { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media print { .notes-protected { display: none !important; } }

.doubt-waiting { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.doubt-pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--iris-warning); box-shadow: 0 0 0 0 rgba(245, 158, 11, .6); animation: doubtPulse 1.6s infinite; flex: 0 0 auto; }
@keyframes doubtPulse { 70% { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } }
@media (prefers-reduced-motion: reduce) { .doubt-pulse { animation: none; } }


/* ---------- 7. Readability (owner request 2026-10-07: fonts were too small) ---------- */
.vidya-app[data-auth-state="authenticated"] .app-content { font-size: 15px; line-height: 1.55; }
.vidya-chat-assistant .message, .vidya-chat-assistant .message-content { font-size: 15px; line-height: 1.6; }
.vidya-chat-assistant .message-content strong { color: #8cecff; }
.vidya-answer div { font-size: 15px; line-height: 1.65; }
.vidya-answer strong { color: var(--app-accent-strong, var(--iris-primary-strong)); }

/* ---------- 8. Rank, badges, attendance strip, notes topics ---------- */
.rank-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; text-decoration: none; color: inherit;
  background: linear-gradient(135deg, rgba(79, 123, 255, .12), rgba(124, 58, 237, .10)); }
.rank-hero > div { display: flex; flex-direction: column; gap: 2px; }
.rank-number { font-size: 34px; line-height: 1.1; color: var(--app-accent-strong, var(--iris-primary-strong)); }
.rank-badge { align-items: flex-end; text-align: right; }
.rank-badge small { color: var(--app-muted, var(--iris-text-secondary)); font-size: 13px; }
.vidya-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-weight: 800; font-size: 16px; color: #fff; }
.vidya-badge-turtle { background: linear-gradient(135deg, #15803d, #22c55e); }
.vidya-badge-horse { background: linear-gradient(135deg, #92400e, #d97706); }
.vidya-badge-pronghorn { background: linear-gradient(135deg, #1d4ed8, #4f7bff); }
.vidya-badge-cheetah { background: linear-gradient(135deg, #b45309, #f59e0b); color: #1f1300; }
.attendance-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.attendance-day { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; border-radius: 10px;
  border: 1px solid var(--app-border, var(--iris-border)); background: var(--iris-surface); color: var(--app-muted, var(--iris-text-secondary)); font-size: 13px; }
.attendance-day b { font-size: 15px; color: var(--app-text, var(--iris-text-primary)); }
.attendance-day.is-present { background: rgba(34, 197, 94, .16); border-color: rgba(34, 197, 94, .55); color: #15803d; }
:root[data-theme="dark"] .attendance-day.is-present { color: #34d399; }
.notes-topics { border: 1px solid var(--app-border, var(--iris-border)); border-radius: 10px; padding: 10px 14px; margin: 6px 0 4px; }
.notes-topics legend { font-weight: 700; padding: 0 6px; }
#notesTopicList { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.notes-topic { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.notes-topic.is-empty { color: var(--app-muted, var(--iris-text-secondary)); }
.notes-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.notes-toc a { padding: 4px 12px; border-radius: 999px; background: rgba(79, 123, 255, .1); text-decoration: none; color: var(--app-accent-strong, var(--iris-primary-strong)); font-size: 14px; }
.notes-topic-section + .notes-topic-section { margin-top: 28px; padding-top: 20px; border-top: 1px dashed var(--iris-border); }

/* Owner report 2026-10-07: typed text in Vidya's box was dark on the dark
   chat. White, bold, readable in every theme and page. */
.vidya-chat-assistant #questionInput,
[data-auth-state] .vidya-chat-assistant #questionInput {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  caret-color: #43daff;
  font-weight: 700;
  font-size: 15px;
  background: transparent;
}
.vidya-chat-assistant #questionInput::placeholder { color: #9fb3cc !important; -webkit-text-fill-color: #9fb3cc; font-weight: 500; opacity: 1; }

/* ---------- 9. Mobile app navigation (owner request 2026-10-07) ----------
   Up to 900px: full-width content, ☰ drawer with the whole menu (icons +
   labels), a bottom tab bar with four items + More, compact header. */
.mobile-menu-btn, .mobile-tab-bar, .mobile-nav-backdrop { display: none; }
.mnav-icon { display: inline-grid; place-items: center; width: 24px; font-size: 18px; line-height: 1; }
@media (max-width: 900px) {
  .vidya-app[data-auth-state="authenticated"] .app-shell {
    grid-template-columns: 1fr !important;
    height: auto; min-height: 100dvh; overflow: visible; position: static;
  }
  .vidya-app[data-auth-state="authenticated"] .app-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1200;
    width: min(290px, 84vw); min-height: 0; height: 100dvh;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 18px 14px; overflow-y: auto;
    border-right: 1px solid var(--app-border); border-bottom: 0;
    background: var(--iris-surface);
    box-shadow: 12px 0 40px rgba(0, 0, 0, .25);
    transform: translateX(-105%); transition: transform .25s ease;
  }
  body.mobile-nav-open .vidya-app[data-auth-state="authenticated"] .app-sidebar { transform: translateX(0); }
  .vidya-app[data-auth-state="authenticated"] .app-brand { justify-content: flex-start; padding: 0 6px 12px; margin: 0; }
  .vidya-app[data-auth-state="authenticated"] .app-brand div,
  .vidya-app[data-auth-state="authenticated"] .app-nav-item span,
  .vidya-app[data-auth-state="authenticated"] .app-logout span { display: inline; }
  .vidya-app[data-auth-state="authenticated"] .app-nav { display: flex; flex-direction: column; gap: 4px; }
  .vidya-app[data-auth-state="authenticated"] .app-nav-item,
  .vidya-app[data-auth-state="authenticated"] .app-logout {
    width: 100%; min-height: 48px; justify-content: flex-start; gap: 12px; padding: 10px 12px;
    font-size: 16px; font-weight: 600; flex: 0 0 auto;
  }
  .vidya-app[data-auth-state="authenticated"] .app-nav-item img,
  .vidya-app[data-auth-state="authenticated"] .app-logout img { width: 24px; height: 24px; }
  .vidya-app[data-auth-state="authenticated"] .app-logout { margin-top: auto; }
  body.mobile-nav-open .mobile-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 1150; background: rgba(7, 12, 24, .5); }

  .mobile-menu-btn {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 11px; border: 1px solid var(--app-border); border-radius: 12px;
    background: var(--iris-surface); cursor: pointer; flex: 0 0 auto;
  }
  .mobile-menu-btn span { display: block; height: 2px; border-radius: 2px; background: var(--app-text, var(--iris-text-primary)); }
  .vidya-app[data-auth-state="authenticated"] .app-header {
    position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 10px;
    height: auto; min-height: 60px; padding: 8px 12px; background: var(--iris-surface);
  }
  .vidya-app[data-auth-state="authenticated"] .app-header-title { font-size: 17px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vidya-app[data-auth-state="authenticated"] .app-header > img, .vidya-app[data-auth-state="authenticated"] .app-header .app-header-logo { max-height: 38px; width: auto; }
  .vidya-app[data-auth-state="authenticated"] .app-header-actions { margin-left: auto; gap: 8px; }
  .vidya-app[data-auth-state="authenticated"] .app-profile > span:not(.app-avatar),
  .vidya-app[data-auth-state="authenticated"] .student-profile-text { display: none; }
  .vidya-app[data-auth-state="authenticated"] .app-content { overflow: visible; padding: 16px 14px 104px; }

  .mobile-tab-bar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--iris-surface); border-top: 1px solid var(--app-border);
    box-shadow: 0 -8px 24px rgba(15, 27, 45, .10);
  }
  .vidya-app[data-auth-state="public"] ~ .mobile-tab-bar, .app-shell.hidden .mobile-tab-bar { display: none; }
  .mobile-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 56px; padding: 4px 2px; border: 0; border-radius: 12px; background: transparent;
    color: var(--app-muted, var(--iris-text-secondary)); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  }
  .mobile-tab img { width: 26px; height: 26px; object-fit: contain; }
  .mobile-tab .mnav-icon { font-size: 22px; width: auto; }
  .mobile-tab span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-tab.active { color: var(--app-accent-strong, var(--iris-primary-strong)); background: rgba(79, 123, 255, .12); }

  /* Ask Vidya sits above the tab bar */
  [data-auth-state="authenticated"] .public-assistant-open { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
  [data-auth-state="authenticated"] .vidya-chat-assistant { bottom: calc(76px + env(safe-area-inset-bottom)) !important; height: min(620px, calc(100dvh - 150px)) !important; }
  .app-heading { flex-wrap: wrap; gap: 10px; }
  .app-heading h1 { font-size: 26px; }
}

/* ---------- 10. Owner fixes 2026-10-07 (evening) ----------
   a) The public site was locked to one screen height (old "no page scroll"
      layout), so on shorter laptop screens the bottom was cut off. The
      page now grows and scrolls like a normal site.
   b) The home page no longer lists courses; one arrow opens Courses.
   c) The same ARISE INSTITUTE logo everywhere, on a navy badge so the
      white logo reads on light and dark pages. */
.vidya-app[data-auth-state="public"] { height: auto !important; min-height: 100dvh; overflow: visible !important; }
.pub-explore-row { display: flex; justify-content: center; margin: 4px 0 40px; }
.pub-explore-arrow {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 18px 14px 28px; border: 1px solid var(--public-border-strong); border-radius: 999px;
  background: rgba(67, 218, 255, .08); color: var(--public-text); font: inherit; font-size: 18px; font-weight: 800; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.pub-explore-arrow:hover, .pub-explore-arrow:focus-visible { background: rgba(67, 218, 255, .18); transform: translateX(3px); outline: none; }
.pub-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #04121f; background: linear-gradient(135deg, #43daff, #7c9dff); font-size: 22px; animation: pubArrowNudge 1.8s ease-in-out infinite; }
@keyframes pubArrowNudge { 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .pub-arrow { animation: none; } }

.arise-mark { display: inline-grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(160deg, #0b1d33, #07111f); box-shadow: 0 4px 12px rgba(7, 17, 31, .25); }
.arise-mark img { width: 140%; height: 140%; max-width: none; object-fit: contain; transform: translateY(6%); }
.app-brand { display: flex; align-items: center; gap: 10px; }
.app-brand strong { letter-spacing: .04em; }
.app-header-logo.arise-mark { width: 46px; height: 46px; }


/* ---------- 11. Vidya chat always fits (owner report 2026-10-07) ----------
   vh fallback for browsers without dvh, and a ceiling so the top is never
   cut; app.js fitChat() also shrinks it after opening and on resize. */
[data-auth-state] .vidya-chat-assistant {
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
}
[data-auth-state="public"] .vidya-chat-assistant,
[data-auth-state="authenticated"] .vidya-chat-assistant {
  height: min(600px, calc(100vh - 110px));
  height: min(600px, calc(100dvh - 110px));
}
.vidya-chat-assistant .public-assistant-header { flex: 0 0 auto; }
@media (max-width: 900px) {
  [data-auth-state="authenticated"] .vidya-chat-assistant {
    height: min(600px, calc(100vh - 160px)) !important;
    height: min(600px, calc(100dvh - 160px)) !important;
  }
  .vidya-app[data-auth-state="authenticated"] .app-header .app-header-logo.arise-mark { flex: 0 0 auto; width: 42px; height: 42px; max-height: 42px; }
}
/* Inside the box: header and typing area never shrink or scroll away;
   the greeting, topics and messages give up space first. */
.vidya-chat-assistant > .public-assistant-header,
.vidya-chat-assistant > .composer-area { flex: 0 0 auto !important; }
.vidya-chat-assistant > .public-assistant-intro,
.vidya-chat-assistant > .public-assistant-topics { flex: 0 1 auto; min-height: 0; overflow: hidden; }
.vidya-chat-assistant > .messages { flex: 1 1 auto; min-height: 0; }
@media (max-height: 520px) {
  .vidya-chat-assistant .public-assistant-topics { display: none; }
  .vidya-chat-assistant .footer-note { display: none; }
  .vidya-chat-assistant .vidya-robo { min-height: 0; }
}
.vidya-chat-assistant > .messages { flex: 1 1 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; }
.vidya-chat-assistant > .public-assistant-intro,
.vidya-chat-assistant > .public-assistant-topics { flex: 0 1 auto !important; min-height: 0 !important; }
.vidya-chat-assistant > .messages { padding-bottom: 12px !important; }
.vidya-chat-assistant > .messages { position: relative; }
/* Centred logo (owner report 2026-10-07): arise-mark.png is the logo
   cropped to its own edges, so it sits in the middle of the badge. */
.arise-mark img { width: 82%; height: 82%; max-width: none; object-fit: contain; transform: none; }
.app-brand .arise-mark, .app-header .arise-mark { display: inline-grid !important; place-items: center; margin: 0 !important; padding: 0; }
.app-brand .arise-mark img, .app-header .arise-mark img { width: 82% !important; height: 82% !important; display: block; margin: 0; }

/* ---------- 12. Installed app on a phone turned sideways (owner report 2026-10-07) ----------
   A phone in landscape is short (<= 500px tall): keep the phone layout
   (tab bar, drawer, readable text) instead of the tiny desktop layout. */
@media (orientation: landscape) and (max-height: 500px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .vidya-app[data-auth-state="authenticated"] .app-shell { grid-template-columns: 1fr !important; height: auto; min-height: 100dvh; overflow: visible; position: static; }
  .vidya-app[data-auth-state="authenticated"] .app-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1200; width: min(290px, 60vw); height: 100dvh;
    flex-direction: column; align-items: stretch; padding: 14px; overflow-y: auto; background: var(--iris-surface);
    transform: translateX(-105%); transition: transform .25s ease; box-shadow: 12px 0 40px rgba(0, 0, 0, .25);
  }
  body.mobile-nav-open .vidya-app[data-auth-state="authenticated"] .app-sidebar { transform: translateX(0); }
  body.mobile-nav-open .mobile-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 1150; background: rgba(7, 12, 24, .5); }
  .vidya-app[data-auth-state="authenticated"] .app-nav-item span,
  .vidya-app[data-auth-state="authenticated"] .app-logout span { display: inline; }
  .mobile-menu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 11px;
    border: 1px solid var(--app-border); border-radius: 12px; background: var(--iris-surface); }
  .mobile-menu-btn span { display: block; height: 2px; background: var(--app-text, var(--iris-text-primary)); }
  .vidya-app[data-auth-state="authenticated"] .app-content { padding: 12px 16px 24px; }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body:not(.mnav-ready) .vidya-app[data-auth-state="authenticated"] .app-sidebar { transition: none !important; }

/* Notes topics: shown after a chapter is chosen, one per line (owner 2026-10-07) */
.notes-topics[hidden], #openNotesBtn[hidden] { display: none !important; }
#notesTopicList { display: flex !important; flex-direction: column; gap: 0; max-width: 720px; }
.notes-topic { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--app-border, var(--iris-border)); cursor: pointer; }
.notes-topic:last-child { border-bottom: 0; }
.notes-topic span { flex: 1; }
.notes-topic input { width: 18px; height: 18px; flex: 0 0 auto; }
.notes-topic.is-empty { cursor: default; }
.notes-soon { flex: 0 0 auto; padding: 2px 10px; border-radius: 999px; font-size: 12px; background: rgba(100, 116, 139, .15); color: var(--app-muted, var(--iris-text-secondary)); }
.audit-details { display: block; margin-top: 4px; font-family: ui-monospace, monospace; font-size: 12px; color: var(--app-muted, var(--iris-text-secondary)); word-break: break-word; }

/* ---------- 13. Vidya, living (owner request 2026-10-08) ----------
   Real poses (small WebP cut-outs) cross-fade every few seconds while the
   figure "breathes" with a slow, tiny rise and fall. */
.vidya-live { position: relative; display: block; transform-origin: 50% 100%; } /* owner 2026-10-15: figure static */
.vidya-live-img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity .8s ease; }
.vidya-live-img:not(:first-child) { position: absolute; inset: 0; }
.vidya-live-img.is-on { opacity: 1; }
@keyframes vidyaBreathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.012); } }
.vidya-live-hero { width: min(340px, 80%); margin: 0 auto; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .45)); }
.pub-hero-art .vidya-live-hero { position: relative; z-index: 1; }
.vidya-card {
  display: flex; align-items: flex-end; gap: 18px; margin: 4px 0 18px; padding: 16px 20px 0;
  border: 1px solid var(--app-border, var(--iris-border)); border-radius: 18px; overflow: hidden;
  background: radial-gradient(circle at 12% 120%, rgba(67, 218, 255, .22), transparent 55%), linear-gradient(135deg, #0b1d33, #142a4a);
  color: #f3f8ff;
}
.vidya-live-card { flex: 0 0 auto; width: 118px; margin-bottom: -2px; }
.vidya-card-talk { flex: 1; padding-bottom: 16px; }
.vidya-card-talk .app-eyebrow { color: #8cecff; margin: 0 0 4px; }
.vidya-card-msg { margin: 0 0 12px; font-size: 16px; line-height: 1.5; color: #e7f1ff; }
@media (max-width: 520px) { .vidya-live-card { width: 90px; } .vidya-card { padding: 12px 14px 0; gap: 12px; } .vidya-card-msg { font-size: 15px; } }
.mnav-img { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
.mobile-tab .mnav-img { width: 26px; height: 26px; }
.message-vidya-avatar { object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .vidya-live { animation: none; } .vidya-live-img { transition: none; } }

/* ---------- 14. Animated Vidya avatar inside her circle (owner 2026-10-08) ----------
   The avatar always stays inside the glowing circle. Pose changes are a
   slow cross-fade with a small rise/scale settle; between changes she
   floats, breathes and sways a little. */
.vidya-orbit {
  position: relative; flex: 0 0 auto; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #1f4f86 0%, #123158 45%, #0a1b33 75%);
  box-shadow: 0 0 0 3px rgba(67, 218, 255, .55), 0 0 28px rgba(67, 218, 255, .35), inset 0 -18px 40px rgba(0, 0, 0, .35);
  /* Owner 2026-10-15: a slow breathing glow on the circle (not a heartbeat). */
  animation: vidyaOrbitBreathe 5.5s ease-in-out infinite;
}
.vidya-orbit::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .14), transparent 40%); }
@keyframes vidyaOrbitBreathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(67, 218, 255, .45), 0 0 22px rgba(67, 218, 255, .28), inset 0 -18px 40px rgba(0, 0, 0, .35); }
  50% { transform: scale(1.02); box-shadow: 0 0 0 4px rgba(67, 218, 255, .65), 0 0 40px rgba(67, 218, 255, .5), inset 0 -18px 40px rgba(0, 0, 0, .35); }
}
.vidya-orbit .vidya-live {
  /* Owner 2026-10-15: Vidya stays still; only the circle breathes. */
  position: absolute; left: 6%; right: 6%; top: 8%; bottom: 0;
}
.vidya-orbit .vidya-live-img {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  opacity: 0; transform: translateY(10px) scale(.97);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.vidya-orbit .vidya-live-img.is-on { opacity: 1; transform: none; }
@keyframes vidyaFloat {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  25% { transform: translateY(-4px) rotate(-.6deg) scale(1.01); }
  50% { transform: translateY(-6px) rotate(0deg) scale(1.015); }
  75% { transform: translateY(-3px) rotate(.6deg) scale(1.008); }
}
.vidya-orbit-hero { width: min(380px, 78%); margin: 0 auto; }
.pub-hero-art .vidya-orbit-hero { z-index: 1; }
.vidya-orbit-card { width: 128px; align-self: center; margin: 0 0 14px; }
.vidya-card { align-items: center; }
@media (max-width: 520px) { .vidya-orbit-card { width: 96px; } }
@media (prefers-reduced-motion: reduce) {
  .vidya-orbit, .vidya-orbit .vidya-live { animation: none; }
  .vidya-orbit .vidya-live-img { transition: none; }
}
/* Lecture notes + DPP upload after a class (2026-10-13) */
.class-materials-pending { border-left: 4px solid var(--iris-warning, #d97706); padding-left: 12px; margin-bottom: 12px; }
.class-material { padding: 8px 0; border-top: 1px solid var(--border); }
.class-material:first-of-type { border-top: 0; }

/* Classroom Talk (2026-10-14) */
.talk-card { display: flex; flex-direction: column; gap: 12px; }
.talk-list { max-height: 60vh; min-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.talk-msg { max-width: 80%; padding: 8px 12px; border-radius: 12px; background: rgba(127,127,127,.10); align-self: flex-start; }
.talk-msg.is-mine { align-self: flex-end; background: rgba(79, 70, 229, .12); }
.talk-msg.is-score { border: 1px solid var(--iris-warning, #f59e0b); }
.talk-meta { font-size: 13px; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.talk-meta small { font-weight: 400; opacity: .7; }
.talk-body { white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.talk-tag { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: rgba(16, 185, 129, .15); }
.talk-remove { margin-left: auto; border: 0; background: none; cursor: pointer; font-size: 16px; opacity: .6; }
.talk-room { display: block; margin-bottom: 12px; max-width: 420px; }
@media (max-width: 640px) { .talk-msg { max-width: 92%; } .talk-list { max-height: 55vh; } }

/* Interactive student dashboard + left-side Classroom Talk (2026-10-15) */
a.app-stat-card { text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
a.app-stat-card:hover, .dash-quick-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.dash-quick { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.dash-quick-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px;
  background: rgba(79,70,229,.10); color: inherit; text-decoration: none; font-weight: 600; transition: transform .12s ease, box-shadow .12s ease; }
.dash-quick-btn span { font-size: 18px; }
.dash-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; margin-top: 8px; }
.dash-aside { position: sticky; top: 12px; }
.dash-aside .app-section-heading { display: flex; align-items: center; justify-content: space-between; }
.dash-talk .talk-card.talk-compact { padding: 10px; }
.talk-compact .talk-list { max-height: 48vh; min-height: 200px; }
@media (max-width: 960px) { .dash-layout { grid-template-columns: 1fr; } .dash-aside { position: static; } }


/* Classroom Talk: attachments + a friendlier look (2026-10-15) */
.talk-img { max-width: 220px; max-height: 220px; border-radius: 10px; display: block; margin-top: 4px; }
.talk-file { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 6px 10px; border-radius: 10px;
  background: rgba(79,70,229,.12); text-decoration: none; color: inherit; font-weight: 600; }
.talk-text { margin-top: 2px; }
.talk-actions { align-items: center; gap: 8px; }
.talk-attach-btn { border: 0; background: rgba(127,127,127,.12); border-radius: 50%; width: 38px; height: 38px; font-size: 18px; cursor: pointer; }
.talk-attach-btn:hover { background: rgba(79,70,229,.18); }
.talk-attach-row { margin-bottom: 8px; }
.talk-attach-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(79,70,229,.12); font-size: 13px; }
.talk-attach-chip button { border: 0; background: none; cursor: pointer; font-size: 15px; }
.talk-msg { animation: talkIn .18s ease; }
@keyframes talkIn { from { opacity: 0; transform: translateY(6px); } }

/* WhatsApp-style classroom chat (owner request 2026-10-16): a dark-green
   background with the group-chat doodle texture, bubbles in WhatsApp
   greens, and a draining 6-hour "life" ring in front of every message. */
.talk-list {
  background-color: #0b2e24;
  background-image: url("/assets/whatsapp-doodle.svg");
  background-size: 200px 200px;
  background-repeat: repeat;
  border-radius: 14px;
  padding: 12px 10px;
  gap: 8px;
}
.talk-list .talk-msg {
  background: #1f2c34;
  color: #e9edef;
  box-shadow: 0 1px 1px rgba(0,0,0,.25);
  border-radius: 10px;
}
.talk-list .talk-msg.is-mine { background: #005c4b; color: #e9edef; }
.talk-list .talk-msg.is-score {
  background: #1f2c34; border: 1px solid var(--iris-warning, #f5c84b);
}
.talk-list .talk-meta { color: #ffffff; }
.talk-list .talk-meta small { color: #cdd6db; opacity: 1; }
.talk-list .talk-remove { color: #e9edef; }
.talk-list .talk-tag { background: rgba(37,211,102,.22); color: #d9fde7; }
.talk-list .talk-file { background: rgba(0,0,0,.22); color: #e9edef; }
.talk-list .talk-empty, .talk-list .teacher-meta { color: #cdd6db; }

/* The per-message 6-hour life ring, draining smoothly from full to empty.
   A negative animation-delay equal to the message's age starts the drain
   at the right point; when it empties, the server has already removed the
   message on the next poll. */
.talk-life { width: 18px; height: 18px; flex: 0 0 auto; display: inline-flex; }
.talk-life svg { width: 18px; height: 18px; transform: rotate(-90deg); }
.talk-life-bg { fill: none; stroke: rgba(255,255,255,.20); stroke-width: 3; }
.talk-life-arc {
  fill: none; stroke: #25d366; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 56.55; stroke-dashoffset: 0;
  animation: talkLife 21600s linear forwards;
  animation-delay: calc(var(--talk-age, 0) * -1s);
}
@keyframes talkLife { to { stroke-dashoffset: 56.55; } }
@media (prefers-reduced-motion: reduce) {
  /* No draining animation; the ring just stays visible. */
  .talk-life-arc { animation: none; }
}

/* ============================================================
   Translucent "glass" look across the app + faded-green chat
   composer, chat back on the left, Telegram-style send button
   (owner request 2026-10-16). Tunable via the --glass-* tokens.
   ============================================================ */
.app-shell {
  --glass-bg: rgba(222, 246, 236, .62);
  --glass-border: rgba(16, 185, 129, .30);
  --glass-blur: 14px;
  background:
    linear-gradient(160deg, rgba(16, 185, 129, .14), rgba(5, 150, 105, .06) 45%, rgba(16, 185, 129, .13)),
    radial-gradient(1100px 560px at 10% -10%, rgba(16, 185, 129, .16), transparent 60%),
    radial-gradient(1000px 680px at 112% 8%, rgba(5, 150, 105, .12), transparent 55%),
    var(--iris-texture), var(--app-bg);
}
:root[data-theme="dark"] .app-shell { --glass-bg: rgba(16, 34, 28, .52); --glass-border: rgba(16, 185, 129, .30); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-shell { --glass-bg: rgba(16, 34, 28, .52); --glass-border: rgba(16, 185, 129, .30); }
}

/* Frosted surfaces everywhere the app shows a card, panel, prose block,
   stat tile, rank hero, quick action or input. !important so it wins over
   each component's own solid/gradient background. */
.app-shell .app-card,
.app-shell .app-prose,
.app-shell .app-panel,
.app-shell .app-stat-card,
.app-shell a.app-stat-card,
.app-shell .rank-hero,
.app-shell .dash-quick-btn,
.app-shell .app-input,
.app-shell textarea.app-input {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
}

/* The chat's writing box: translucent, faded green. */
.talk-form .app-input,
.talk-form textarea.app-input {
  background: rgba(37, 211, 102, .12);
  border-color: rgba(37, 211, 102, .38);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.talk-form .app-input::placeholder { color: rgba(11, 46, 36, .55); }
:root[data-theme="dark"] .talk-form .app-input::placeholder { color: rgba(217, 253, 231, .55); }

/* Classroom Talk back on the LEFT of the dashboard (owner 2026-10-16). */
.dash-layout { grid-template-columns: 340px 1fr; }
.dash-aside { order: -1; }
@media (max-width: 960px) {
  .dash-layout { grid-template-columns: 1fr; }
  .dash-aside { order: 0; }
}

/* Telegram-style round send button with a paper-plane icon. */
.talk-send-btn {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: #229ed9; color: #ffffff;
  cursor: pointer; transition: .15s ease;
  box-shadow: 0 2px 8px rgba(34, 158, 217, .35);
}
.talk-send-btn:hover { background: #1b8fc4; transform: translateY(-1px); }
.talk-send-btn svg { width: 20px; height: 20px; display: block; }

/* Doubts: inline ask form on top (owner 2026-10-17). */
.doubt-ask { display: flex; flex-direction: column; gap: 10px; }
.doubt-ask label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--app-muted); }
.doubt-ask .app-btn-primary { align-self: flex-start; }

/* Live class indicator (owner 2026-10-17): a pulsing red LIVE badge. */
.class-live-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12px;
  color: #dc2626; padding: 3px 11px; border-radius: 999px; background: rgba(220, 38, 38, .12); letter-spacing: .04em; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #dc2626; }
.live-dot { animation: livePulse 1.4s ease-out infinite; }
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); }
  70% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.class-live-row { border: 1px solid rgba(220, 38, 38, .32) !important; }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* Course directory tree: subject -> chapter -> topic -> lecture (owner 2026-10-17). */
.dir-tree { display: flex; flex-direction: column; gap: 8px; }
.dir-node { border-radius: 10px; }
.dir-node > summary { cursor: pointer; list-style: none; padding: 10px 12px; border-radius: 10px;
  font-weight: 600; display: flex; align-items: center; gap: 8px;
  background: var(--glass-bg, rgba(127,127,127,.06)); border: 1px solid var(--glass-border, transparent); }
.dir-node > summary::-webkit-details-marker { display: none; }
.dir-caret { flex: 0 0 auto; width: 0; height: 0; border-left: 6px solid currentColor;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform .15s ease; opacity: .55; }
.dir-node[open] > summary > .dir-caret { transform: rotate(90deg); }
.dir-subject > summary { font-size: 15px; }
.dir-chapter, .dir-topic { margin-left: 16px; }
.dir-topic > summary { font-weight: 500; }
.dir-topic > summary small { opacity: .6; font-weight: 400; }
.dir-lectures { margin: 6px 0 8px 16px; }

/* Users grouped by course (owner 2026-10-17). */
.user-course-group { margin-bottom: 14px; }
.user-course-head { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--app-text);
  padding-bottom: 6px; border-bottom: 1px solid var(--glass-border, rgba(127,127,127,.18)); }
.user-course-head small { font-weight: 400; color: var(--app-muted); }

/* Double-click to rename chapter/topic (owner 2026-10-17). */
.dbl-edit { cursor: text; border-bottom: 1px dashed transparent; }
.dbl-edit:hover { border-bottom-color: var(--glass-border, rgba(127,127,127,.45)); }
.dbl-edit-input { display: inline-block; width: auto; min-width: 120px; min-height: 0; padding: 2px 6px; font: inherit; font-size: inherit; }

/* Inline lecture video (owner 2026-10-20): a class recording plays in place
   with the native player; topic videos use the iframe room above. */
.lec-video-wrap { margin-top: 8px; }
.lec-video {
  width: 100%;
  max-height: 70vh;
  border-radius: 10px;
  background: #000;
  display: block;
}
.lec-video-fallback { margin: 6px 0 0; font-size: 0.85rem; }
.lec-actions { display: inline-flex; gap: 8px; align-items: center; }

/* Classroom avatar + profile DP (owner 2026-10-21) */
.talk-msg { display: flex; gap: 8px; align-items: flex-start; }
.talk-main { flex: 1; min-width: 0; }
.talk-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.talk-avatar-ph { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: var(--iris-primary); font-size: .85rem; line-height: 1; }
.avatar-card { display: flex; flex-direction: column; align-items: flex-start; }
.avatar-preview { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: rgba(127,127,127,.15); margin-bottom: 10px; }
.avatar-preview.is-empty { display: none; }