/**
 * claZent UI (ক্লাজেন্ট) — Unified Design System & Root Reset
 * Version: 2.0.0
 * Specification: UNIVERSAL_DESIGN_SYSTEM_PROMPT.md & clazent-ui Shared Token Standard
 */

:root {
  /* =====================================================================
     1. RADIUS SCALE (Toned-down Geometric, Linear / Stripe / Apple HIG)
     Rules:
     - sm (6px): Micro elements, tags, badges, chips (NO pills on text)
     - md (8px): Standard controls, inputs, buttons, list rows, chat bubbles
     - lg (12px): Standard cards, panels, sheets
     - xl (16px): Outer viewport containers / stage shells
     - pill (9999px): STRICTLY for circle avatars & round status indicator dots
     ===================================================================== */
  --clz-r-xs: 3px;
  --clz-r-sm: 6px;
  --clz-r-md: 8px;
  --clz-r-lg: 12px;
  --clz-r-xl: 16px;
  --clz-r-pill: 9999px;

  /* =====================================================================
     2. SPACING SCALE (4 / 8 / 12 / 16 / 24 / 32)
     ===================================================================== */
  --clz-space-1: 4px;
  --clz-space-2: 8px;
  --clz-space-3: 12px;
  --clz-space-4: 16px;
  --clz-space-5: 20px;
  --clz-space-6: 24px;
  --clz-space-8: 32px;

  /* =====================================================================
     3. SEMANTIC COLORS (Harmonized, High Contrast WCAG AAA / AA)
     ===================================================================== */
  /* Canvas & Surfaces */
  --clz-canvas: #F4F2EB;
  --clz-surface: #FFFFFF;
  --clz-surface-glass: rgba(255, 255, 255, 0.94);
  --clz-surface-subtle: #F8FAFC;
  --clz-surface-raised: #FFFFFF;
  --clz-surface-dim: #F1F5F9;

  /* Typography Colors */
  --clz-text: #0B1B32;             /* WCAG AAA 13.5:1 on light canvas */
  --clz-text-muted: #364558;       /* WCAG AA 7.2:1 contrast, never washed-out */
  --clz-text-subtle: #475569;      /* Secondary captions */
  --clz-text-inverse: #FFFFFF;

  /* Borders */
  --clz-border: #D6E0EA;
  --clz-border-subtle: #E2E8F0;
  --clz-border-focus: #0062FE;

  /* Brand & Semantic Accents */
  --clz-primary: #0062FE;          /* Signature Electric Royal Blue */
  --clz-primary-hover: #0050D4;
  --clz-primary-light: #EAF2FF;

  --clz-success: #00A389;          /* Emerald Teal (Full marks, Verified) */
  --clz-success-text: #065F46;
  --clz-success-bg: #ECFDF5;
  --clz-success-border: #A7F3D0;

  --clz-warning: #D97706;          /* Golden Amber (Partial marks, Streak) */
  --clz-warning-text: #92400E;
  --clz-warning-bg: #FFFBEB;
  --clz-warning-border: #FDE68A;

  --clz-danger: #DC2626;           /* Crimson Red (Wrong answer, Error) */
  --clz-danger-text: #991B1B;
  --clz-danger-bg: #FEF2F2;
  --clz-danger-border: #FECACA;

  --clz-info: #0062FE;
  --clz-info-bg: #EAF2FF;
  --clz-info-border: #BFDBFE;

  /* MFS Brand Colors */
  --clz-bkash: #D12053;
  --clz-nagad: #F7941D;

  /* =====================================================================
     4. TYPOGRAPHY SCALE (12 / 14 / 16 / 18 / 22)
     ===================================================================== */
  --clz-font-xs: 12px;
  --clz-font-sm: 14px;
  --clz-font-base: 16px;
  --clz-font-lg: 18px;
  --clz-font-xl: 22px;
  --clz-font-2xl: 26px;
  --clz-font-display: 32px;

  /* Fluid Clamp Typography Scale (Mobile 360-390px -> Desktop 1440px+) */
  --clz-font-fluid-display: clamp(1.5rem, 1.2rem + 1.6vw, 2.75rem);
  --clz-font-fluid-h1: clamp(1.25rem, 1.05rem + 1.1vw, 2.125rem);
  --clz-font-fluid-h2: clamp(1.125rem, 0.98rem + 0.75vw, 1.625rem);
  --clz-font-fluid-h3: clamp(1rem, 0.92rem + 0.45vw, 1.25rem);
  --clz-font-fluid-title: clamp(0.925rem, 0.85rem + 0.35vw, 1.125rem);
  --clz-font-fluid-body: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  --clz-font-fluid-card-title: clamp(1rem, 0.92rem + 0.5vw, 1.25rem);

  /* Viewport Safe Area Tokens (with resilient 0px fallbacks) */
  --clz-safe-area-top: env(safe-area-inset-top, 0px);
  --clz-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --clz-safe-area-left: env(safe-area-inset-left, 0px);
  --clz-safe-area-right: env(safe-area-inset-right, 0px);

  /* =====================================================================
     5. SHADOW SCALE (Executive Inset + Ambient)
     ===================================================================== */
  --clz-shadow-sm: 0 1px 3px rgba(11, 27, 50, 0.05);
  --clz-shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 14px -3px rgba(11, 27, 50, 0.06);
  --clz-shadow-card-hover: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 20px -4px rgba(11, 27, 50, 0.10);
  --clz-shadow-modal: 0 20px 40px -10px rgba(11, 27, 50, 0.25);
}

/* =====================================================================
   6. GLOBAL RESET & BASE RULES
   ===================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Button & Form Control Reset */
button {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Eliminate Flex / Grid Overflow */
div, section, article, main, aside, header, footer {
  min-width: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Hind Siliguri', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--clz-text);
  background-color: var(--clz-canvas);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tabular Numbers for Timers, Marks, Scores & Statistics */
.tabular-nums,
[class*="label-timer"],
[class*="font-mono"],
.clz-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Text Selection */
::selection {
  background: rgba(0, 98, 254, 0.2);
  color: var(--clz-text);
}

/* =====================================================================
   5B. HEALTH DASHBOARD PASTEL & UTILITY ENGINE (Self-Contained Offline)
   ===================================================================== */
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.grid { display: grid !important; }
.block { display: block !important; }
.inline-block { display: inline-block !important; }

.flex-col { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-baseline { align-items: baseline !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-around { justify-content: space-around !important; }

.flex-1 { flex: 1 1 0% !important; }
.shrink-0 { flex-shrink: 0 !important; }
.min-w-0 { min-width: 0 !important; }
.truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.whitespace-nowrap {
  white-space: nowrap !important;
}
.overflow-hidden {
  overflow: hidden !important;
}
.overflow-y-auto {
  overflow-y: auto !important;
}
.overflow-x-auto {
  overflow-x: auto !important;
}

.hidden, [hidden] {
  display: none !important;
}

/* Grid columns */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

.col-span-12 { grid-column: span 12 / span 12 !important; }
.col-span-7 { grid-column: span 7 / span 7 !important; }
.col-span-6 { grid-column: span 6 / span 6 !important; }
.col-span-5 { grid-column: span 5 / span 5 !important; }
.col-span-4 { grid-column: span 4 / span 4 !important; }
.col-span-3 { grid-column: span 3 / span 3 !important; }

@media (min-width: 640px) {
  .sm\:flex { display: flex !important; }
  .sm\:grid { display: grid !important; }
  .sm\:block { display: block !important; }
  .sm\:inline { display: inline !important; }
  .sm\:hidden { display: none !important; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .sm\:col-span-6 { grid-column: span 6 / span 6 !important; }
  .sm\:w-auto { width: auto !important; }
  .sm\:w-64 { width: 16rem !important; }
}

@media (min-width: 768px) {
  .md\:flex { display: flex !important; }
  .md\:grid { display: grid !important; }
  .md\:block { display: block !important; }
  .md\:inline { display: inline !important; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .md\:rounded-\[32px\] { border-radius: 32px !important; }
  .md\:hidden { display: none !important; }
}

@media (min-width: 1024px) {
  .lg\:flex { display: flex !important; }
  .lg\:grid { display: grid !important; }
  .lg\:block { display: block !important; }
  .lg\:inline { display: inline !important; }
  .lg\:hidden { display: none !important; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .lg\:col-span-6 { grid-column: span 6 / span 6 !important; }
  .lg\:col-span-7 { grid-column: span 7 / span 7 !important; }
  .lg\:col-span-5 { grid-column: span 5 / span 5 !important; }
  .lg\:col-span-3 { grid-column: span 3 / span 3 !important; }
  .lg\:p-7 { padding: 1.75rem !important; }
  .lg\:p-8 { padding: 2rem !important; }
  .lg\:text-2xl { font-size: 1.5rem !important; }
  .lg\:text-3xl { font-size: 1.875rem !important; }
  .lg\:text-5xl { font-size: 3rem !important; }

  /* Main Dashboard & Universal Chat Shell: Locked Row & No-Wrap */
  .clz-main-container,
  #clazentUniversalChatRoot {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  /* Side Panels: Never shrink, never drop down, rigid widths */
  .clz-desktop-sidebar {
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    width: 260px !important;
    max-width: 280px !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .clz-chat-history-sidebar {
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    width: 280px !important;
    max-width: 320px !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  /* Main Content Areas: Occupies all remaining space without overflow */
  .inner-pastel-canvas,
  #clazentUniversalChatRoot main {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
  }

  #clazentUniversalChatRoot main {
    overflow: hidden !important;
  }

  /* Desktop Grid Split Lock */
  .clz-grid-desktop-split {
    display: grid !important;
    grid-template-columns: 300px 1fr !important;
    gap: 1.5rem !important;
    align-items: stretch !important;
  }
}

/* Mobile Segmented Panel Toggle (< 1024px) */
@media (max-width: 1023px) {
  .classroom-panel-hidden, section.classroom-panel-hidden, div.classroom-panel-hidden,
  .exam-panel-hidden, section.exam-panel-hidden, div.exam-panel-hidden {
    display: none !important;
  }
  .classroom-panel-active, section.classroom-panel-active, div.classroom-panel-active,
  .exam-panel-active, section.exam-panel-active, div.exam-panel-active {
    display: flex !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 0 !important;
  }
}

/* =========================================================================
   NATIVE MOBILE MESSENGER MODE (< 768px)
   Transforms AI Chat on phones into a full-screen, unbounceable messenger app
   (like Messenger / WhatsApp / ChatGPT Mobile) with locked input docking.
   ========================================================================= */
@media (max-width: 767px) {
  /* Universal Zero-Blank Responsive Container Resets */
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .clz-main-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  .inner-pastel-canvas {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    padding: 8px 8px calc(68px + env(safe-area-inset-bottom, 0px)) 8px !important;
  }

  /* Fullscreen Native Mobile Messenger Mode (100dvh Lock) */
  body.tab-ai-chat,
  html:has(body.tab-ai-chat),
  html body.tab-ai-chat {
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.tab-ai-chat .clz-main-container,
  body.tab-ai-chat .inner-pastel-canvas,
  .inner-pastel-canvas.is-chat-active {
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
  }

  /* Completely Hide Dashboard Top Bar & Mobile Bottom Nav when inside Chat */
  body.tab-ai-chat #topBarMountContainer,
  body:has(.inner-pastel-canvas.is-chat-active) #topBarMountContainer {
    display: none !important;
  }
  body.tab-ai-chat .clz-mobile-nav,
  body.tab-ai-chat .clz-mobile-bottom-nav,
  body:has(.inner-pastel-canvas.is-chat-active) .clz-mobile-nav,
  body:has(.inner-pastel-canvas.is-chat-active) .clz-mobile-bottom-nav,
  body.tab-ai-chat #sidebarMountContainer nav {
    display: none !important;
  }

  /* Fullscreen Chat Root Card */
  body.tab-ai-chat #clazentUniversalChatRoot {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 0% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Native Mobile Messenger Message Stream (Pure Single-Scroll) */
  #pageChatMessageStream {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    padding: 10px 12px !important;
  }

  /* Locked Bottom Mobile Input Dock (Always Visible, Single Flex Row) */
  .clz-mobile-input-dock {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #FFFFFF !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) 12px !important;
    border-top: 1px solid #E2E8F0 !important;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.05) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .clz-mobile-input-dock input,
  .clz-mobile-input-dock #chatUserTextInput {
    min-width: 0 !important;
    width: 0 !important;
    flex: 1 1 0% !important;
  }

  .clz-mobile-input-dock button,
  .clz-mobile-input-dock label {
    flex-shrink: 0 !important;
  }
}

/* Gaps */
.gap-1 { gap: 0.25rem !important; }
.gap-1\.5 { gap: 0.375rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-2\.5 { gap: 0.625rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-3\.5 { gap: 0.875rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-5 { gap: 1.25rem !important; }
.gap-6 { gap: 1.5rem !important; }

/* Dimensions */
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }
.w-64 { width: 16rem !important; }
.w-48 { width: 12rem !important; }
.w-36 { width: 9rem !important; }
.w-32 { width: 8rem !important; }
.w-28 { width: 7rem !important; }
.w-24 { width: 6rem !important; }
.w-16 { width: 4rem !important; }
.w-14 { width: 3.5rem !important; }
.w-12 { width: 3rem !important; }
.w-11 { width: 2.75rem !important; }
.w-10 { width: 2.5rem !important; }
.w-9 { width: 2.25rem !important; }
.w-8 { width: 2rem !important; }
.w-7 { width: 1.75rem !important; }
.w-6 { width: 1.5rem !important; }
.w-5 { width: 1.25rem !important; }
.w-4\.5 { width: 1.125rem !important; }
.w-4 { width: 1rem !important; }
.w-3\.5 { width: 0.875rem !important; }
.w-3 { width: 0.75rem !important; }
.w-2\.5 { width: 0.625rem !important; }
.w-2 { width: 0.5rem !important; }
.w-1\.5 { width: 0.375rem !important; }

.h-full { height: 100% !important; }
.h-auto { height: auto !important; }
.h-28 { height: 7rem !important; }
.h-36 { height: 9rem !important; }
.h-16 { height: 4rem !important; }
.h-14 { height: 3.5rem !important; }
.h-12 { height: 3rem !important; }
.h-11 { height: 2.75rem !important; }
.h-10 { height: 2.5rem !important; }
.h-9 { height: 2.25rem !important; }
.h-8 { height: 2rem !important; }
.h-7 { height: 1.75rem !important; }
.h-6 { height: 1.5rem !important; }
.h-5 { height: 1.25rem !important; }
.h-4\.5 { height: 1.125rem !important; }
.h-4 { height: 1rem !important; }
.h-3\.5 { height: 0.875rem !important; }
.h-3 { height: 0.75rem !important; }
.h-2\.5 { height: 0.625rem !important; }
.h-2 { height: 0.5rem !important; }
.h-1\.5 { height: 0.375rem !important; }

.min-h-\[92vh\] { min-height: 92vh !important; }
.max-w-\[1536px\] { max-width: 1536px !important; }
.max-w-3xl { max-width: 48rem !important; }
.max-w-2xl { max-width: 42rem !important; }
.max-w-lg { max-width: 32rem !important; }
.max-w-\[88\%\] { max-width: 88% !important; }
.max-w-\[92vw\] { max-width: 92vw !important; }

/* Spacing */
.p-0\.5 { padding: 0.125rem !important; }
.p-1 { padding: 0.25rem !important; }
.p-1\.5 { padding: 0.375rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-2\.5 { padding: 0.625rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-3\.5 { padding: 0.875rem !important; }
.p-4 { padding: 1rem !important; }
.p-5 { padding: 1.25rem !important; }
.p-6 { padding: 1.5rem !important; }
.p-7 { padding: 1.75rem !important; }
.p-8 { padding: 2rem !important; }

.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-2\.5 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.px-3\.5 { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

.py-0\.2 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; }
.py-0\.5 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-2\.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

.pl-9 { padding-left: 2.25rem !important; }
.pr-4 { padding-right: 1rem !important; }
.pr-10 { padding-right: 2.5rem !important; }

.pt-2 { padding-top: 0.5rem !important; }
.pt-2\.5 { padding-top: 0.625rem !important; }
.pt-3 { padding-top: 0.75rem !important; }
.pt-4 { padding-top: 1rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-2\.5 { padding-bottom: 0.625rem !important; }
.pb-3 { padding-bottom: 0.75rem !important; }
.pb-4 { padding-bottom: 1rem !important; }

.mb-1 { margin-bottom: 0.25rem !important; }
.mb-1\.5 { margin-bottom: 0.375rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-2\.5 { margin-bottom: 0.625rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-3\.5 { margin-bottom: 0.875rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mt-0\.5 { margin-top: 0.125rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-1\.5 { margin-top: 0.375rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-2\.5 { margin-top: 0.625rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.-mt-0\.5 { margin-top: -0.125rem !important; }
.-mt-2 { margin-top: -0.5rem !important; }
.-mt-3 { margin-top: -0.75rem !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.my-3 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-5 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; }
.my-6 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }

/* Border radius */
.rounded-md { border-radius: 0.375rem !important; }
.rounded-lg { border-radius: 0.5rem !important; }
.rounded-xl { border-radius: 0.75rem !important; }
.rounded-2xl { border-radius: 1rem !important; }
.rounded-\[24px\] { border-radius: 24px !important; }
.rounded-\[32px\] { border-radius: 32px !important; }
.rounded-full { border-radius: 9999px !important; }
.rounded-t-\[24px\] { border-top-left-radius: 24px !important; border-top-right-radius: 24px !important; }

/* Backgrounds & Gradients */
.bg-white { background-color: #FFFFFF !important; }
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9) !important; }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2) !important; }
.bg-slate-50 { background-color: #F8FAFC !important; }
.bg-slate-50\/30 { background-color: rgba(248, 250, 252, 0.3) !important; }
.bg-slate-50\/40 { background-color: rgba(248, 250, 252, 0.4) !important; }
.bg-slate-50\/50 { background-color: rgba(248, 250, 252, 0.5) !important; }
.bg-slate-50\/80 { background-color: rgba(248, 250, 252, 0.8) !important; }
.bg-slate-100 { background-color: #F1F5F9 !important; }
.bg-slate-200 { background-color: #E2E8F0 !important; }
.bg-slate-200\/80 { background-color: rgba(226, 232, 240, 0.8) !important; }
.bg-cyan-50 { background-color: #ECFEFF !important; }
.bg-cyan-50\/50 { background-color: rgba(236, 254, 255, 0.5) !important; }
.bg-cyan-50\/60 { background-color: rgba(236, 254, 255, 0.6) !important; }
.bg-cyan-50\/70 { background-color: rgba(236, 254, 255, 0.7) !important; }
.bg-cyan-100 { background-color: #CFFAFE !important; }
.bg-cyan-100\/70 { background-color: rgba(207, 250, 254, 0.7) !important; }
.bg-cyan-100\/80 { background-color: rgba(207, 250, 254, 0.8) !important; }
.bg-cyan-200 { background-color: #A5F3FC !important; }
.bg-cyan-200\/80 { background-color: rgba(165, 243, 252, 0.8) !important; }
.bg-cyan-500 { background-color: #06B6D4 !important; }
.bg-emerald-50 { background-color: #ECFDF5 !important; }
.bg-emerald-100 { background-color: #D1FAE5 !important; }
.bg-emerald-500 { background-color: #10B981 !important; }
.bg-amber-50 { background-color: #FFFBEB !important; }
.bg-amber-50\/80 { background-color: rgba(255, 251, 235, 0.8) !important; }
.bg-amber-100 { background-color: #FEF3C7 !important; }
.bg-amber-100\/60 { background-color: rgba(254, 243, 199, 0.6) !important; }
.bg-amber-400 { background-color: #FBBF24 !important; }
.bg-amber-500 { background-color: #F59E0B !important; }
.bg-rose-50 { background-color: #FFF1F2 !important; }
.bg-rose-100 { background-color: #FFE4E6 !important; }
.bg-rose-500 { background-color: #F43F5E !important; }
.bg-purple-50 { background-color: #FAF5FF !important; }
.bg-purple-100 { background-color: #F3E8FF !important; }
.bg-purple-100\/60 { background-color: rgba(243, 232, 255, 0.6) !important; }
.bg-purple-500 { background-color: #A855F7 !important; }
.bg-purple-600 { background-color: #9333EA !important; }
.bg-sky-50 { background-color: #F0F9FF !important; }
.bg-sky-400 { background-color: #38BDF8 !important; }
.bg-sky-500 { background-color: #0EA5E9 !important; }
.bg-\[\#0EA5E9\] { background-color: #0EA5E9 !important; }
.bg-\[\#0284C7\] { background-color: #0284C7 !important; }
.bg-\[\#00A3FF\] { background-color: #00A3FF !important; }
.bg-\[\#FF647C\] { background-color: #FF647C !important; }
.bg-\[\#7DD3FC\] { background-color: #7DD3FC !important; }
.bg-\[\#EF4444\] { background-color: #EF4444 !important; }
.bg-\[\#E0F2FE\] { background-color: #E0F2FE !important; }

/* Gradients */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important; }
.bg-gradient-to-tr { background-image: linear-gradient(to top right, var(--tw-gradient-stops)) !important; }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important; }
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)) !important; }

.from-cyan-500 { --tw-gradient-from: #06B6D4; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 182, 212, 0)); }
.to-sky-400 { --tw-gradient-to: #38BDF8; }
.to-sky-500 { --tw-gradient-to: #0EA5E9; }
.to-blue-500 { --tw-gradient-to: #3B82F6; }
.from-rose-500 { --tw-gradient-from: #F43F5E; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(244, 63, 94, 0)); }
.to-pink-500 { --tw-gradient-to: #EC4899; }
.from-\[\#06B6D4\] { --tw-gradient-from: #06B6D4; --tw-gradient-stops: var(--tw-gradient-from), #0EA5E9, #2563EB; }
.from-\[\#FF647C\] { --tw-gradient-from: #FF647C; --tw-gradient-stops: var(--tw-gradient-from), #FDA4AF; }
.to-\[\#FDA4AF\] { --tw-gradient-to: #FDA4AF; }

/* Text colors */
.text-white { color: #FFFFFF !important; }
.text-slate-900 { color: #0F172A !important; }
.text-slate-800 { color: #1E293B !important; }
.text-slate-700 { color: #334155 !important; }
.text-slate-600 { color: #475569 !important; }
.text-slate-500 { color: #64748B !important; }
.text-slate-400 { color: #94A3B8 !important; }
.text-cyan-600 { color: #0891B2 !important; }
.text-cyan-700 { color: #0E7490 !important; }
.text-cyan-800 { color: #155E75 !important; }
.text-cyan-900 { color: #164E63 !important; }
.text-cyan-100 { color: #CFFAFE !important; }
.text-emerald-600 { color: #059669 !important; }
.text-emerald-700 { color: #047857 !important; }
.text-emerald-800 { color: #065F46 !important; }
.text-amber-600 { color: #D97706 !important; }
.text-amber-700 { color: #B45309 !important; }
.text-amber-800 { color: #92400E !important; }
.text-amber-900 { color: #78350F !important; }
.text-amber-950 { color: #451A03 !important; }
.text-rose-600 { color: #E11D48 !important; }
.text-rose-700 { color: #BE123C !important; }
.text-\[\#FF647C\] { color: #FF647C !important; }
.text-purple-600 { color: #9333EA !important; }
.text-purple-700 { color: #7E22CE !important; }
.text-sky-600 { color: #0284C7 !important; }
.text-sky-700 { color: #0369A1 !important; }

/* Font size and weights */
.text-\[8px\] { font-size: 8px !important; }
.text-\[9px\] { font-size: 9px !important; }
.text-\[10px\] { font-size: 10px !important; }
.text-\[11px\] { font-size: 11px !important; }
.text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
.text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
.text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
.text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
.text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
.text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
.text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
.text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
.text-5xl { font-size: 3rem !important; line-height: 1 !important; }

.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.font-extrabold { font-weight: 800 !important; }

.font-mono { font-family: 'JetBrains Mono', monospace !important; }
.font-sans { font-family: 'Plus Jakarta Sans', 'Hind Siliguri', sans-serif !important; }

/* Borders */
.border { border-width: 1px !important; border-style: solid !important; }
.border-2 { border-width: 2px !important; border-style: solid !important; }
.border-t { border-top-width: 1px !important; border-top-style: solid !important; }
.border-b { border-bottom-width: 1px !important; border-bottom-style: solid !important; }
.border-r { border-right-width: 1px !important; border-right-style: solid !important; }

.border-white { border-color: #FFFFFF !important; }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2) !important; }
.border-slate-100 { border-color: #F1F5F9 !important; }
.border-slate-200 { border-color: #E2E8F0 !important; }
.border-slate-200\/60 { border-color: rgba(226, 232, 240, 0.6) !important; }
.border-slate-200\/80 { border-color: rgba(226, 232, 240, 0.8) !important; }
.border-cyan-100 { border-color: #CFFAFE !important; }
.border-cyan-200 { border-color: #A5F3FC !important; }
.border-cyan-200\/80 { border-color: rgba(165, 243, 252, 0.8) !important; }
.border-cyan-500 { border-color: #06B6D4 !important; }
.border-emerald-200 { border-color: #A7F3D0 !important; }
.border-amber-200 { border-color: #FDE68A !important; }
.border-amber-300 { border-color: #FCD34D !important; }
.border-rose-100 { border-color: #FFE4E6 !important; }
.border-rose-200 { border-color: #FECDD3 !important; }
.border-purple-200 { border-color: #E9D5FF !important; }

/* Positioning */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.inset-0 { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
.top-0 { top: 0 !important; }
.right-0 { right: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.left-0 { left: 0 !important; }
.top-1 { top: 0.25rem !important; }
.right-1 { right: 0.25rem !important; }
.bottom-1 { bottom: 0.25rem !important; }
.top-2 { top: 0.5rem !important; }
.right-2 { right: 0.5rem !important; }
.top-12 { top: 3rem !important; }
.right-6 { right: 1.5rem !important; }
.bottom-6 { bottom: 1.5rem !important; }
.bottom-20 { bottom: 5rem !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }
.top-1\/2 { top: 50% !important; }
.-translate-y-1\/2 { transform: translateY(-50%) !important; }
.translate-y-0 { transform: translateY(0) !important; }

.overflow-hidden { overflow: hidden !important; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-x-auto { overflow-x: auto !important; }
.cursor-pointer { cursor: pointer !important; }
.select-none { user-select: none !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }


/* --- Card (.clz-card) --- */
.clz-card {
  background: var(--clz-surface-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--clz-border);
  border-radius: var(--clz-r-lg);
  box-shadow: var(--clz-shadow-card);
  padding: var(--clz-space-6);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
  overflow: hidden;
}

.clz-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--clz-space-3);
  margin-bottom: var(--clz-space-4);
}

.clz-card-title {
  font-size: var(--clz-font-lg);
  font-weight: 700;
  color: var(--clz-text);
  margin: 0;
  line-height: 1.35;
  text-wrap: balance;
}

.clz-card-subtitle {
  font-size: var(--clz-font-xs);
  color: var(--clz-text-muted);
  margin-top: 2px;
}

/* --- Badge & Status Pills (.clz-badge) ---
   Rule: Pills are ONLY for small status badges and rounded icon buttons */
.clz-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--clz-r-sm);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid transparent;
}

.clz-badge-success {
  background: var(--clz-success-bg);
  color: var(--clz-success-text);
  border-color: var(--clz-success-border);
}

.clz-badge-warning {
  background: var(--clz-warning-bg);
  color: var(--clz-warning-text);
  border-color: var(--clz-warning-border);
}

.clz-badge-danger {
  background: var(--clz-danger-bg);
  color: var(--clz-danger-text);
  border-color: var(--clz-danger-border);
}

.clz-badge-info {
  background: var(--clz-info-bg);
  color: var(--clz-primary);
  border-color: var(--clz-info-border);
}

.clz-badge-neutral {
  background: var(--clz-surface-dim);
  color: var(--clz-text-muted);
  border-color: var(--clz-border);
}

/* --- Rows & List Items (.clz-row) ---
   Rule: Replaces capsule rows with radius-md (12px), avoids dense border crowding */
.clz-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--clz-space-3);
  padding: var(--clz-space-3) var(--clz-space-4);
  border-radius: var(--clz-r-md);
  background: var(--clz-surface);
  border: 1px solid var(--clz-border-subtle);
  transition: all 0.15s ease;
}

.clz-row:hover {
  border-color: var(--clz-border);
  box-shadow: var(--clz-shadow-sm);
}

.clz-row-selected {
  background: var(--clz-primary-light);
  border-color: var(--clz-primary);
  box-shadow: 0 0 0 1px var(--clz-primary);
}

/* --- Chat Bubble (.clz-bubble) ---
   Rule: Replaces capsule bubbles with radius-md/lg (12px-16px) + max-width min(80%, 520px) */
.clz-bubble {
  max-width: min(80%, 520px);
  padding: var(--clz-space-3) var(--clz-space-4);
  border-radius: var(--clz-r-md);
  line-height: 1.6;
  font-size: var(--clz-font-sm);
  overflow-wrap: anywhere;
  word-break: break-word;
  box-shadow: var(--clz-shadow-sm);
}

.clz-bubble-student {
  background: var(--clz-surface-subtle);
  color: var(--clz-text);
  border: 1px solid var(--clz-border);
  border-top-right-radius: var(--clz-r-xs);
  margin-left: auto;
}

.clz-bubble-teacher {
  background: var(--clz-surface);
  color: var(--clz-text);
  border: 1px solid var(--clz-border);
  border-top-left-radius: var(--clz-r-xs);
  margin-right: auto;
}

.clz-bubble-teacher.socratic {
  background: var(--clz-success-bg);
  border-color: var(--clz-success-border);
}

/* --- Math Block / KaTeX Wrapper (.clz-math-block) ---
   Rule: max-width: 100%; overflow-x: auto; inside long equations will never break containers */
.clz-math-block,
.katex-display-wrapper {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--clz-space-2) var(--clz-space-3);
  margin: var(--clz-space-2) 0;
  border-radius: var(--clz-r-md);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--clz-border);
  display: block;
}

.clz-math-block::-webkit-scrollbar {
  height: 4px;
}
.clz-math-block::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}

/* Ensure inline KaTeX wraps or scrolls smoothly */
.katex-display {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  margin: 0.25em 0 !important;
}

/* --- Input Fields (.clz-input) ---
   Rule: Replaces capsule inputs with radius-md (12px) standard box */
.clz-input {
  width: 100%;
  padding: 10px 14px;
  font-size: var(--clz-font-sm);
  font-family: inherit;
  color: var(--clz-text);
  background: var(--clz-surface);
  border: 1px solid var(--clz-border);
  border-radius: var(--clz-r-md);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.clz-input:focus {
  border-color: var(--clz-primary);
  box-shadow: 0 0 0 3px rgba(0, 98, 254, 0.15);
}

.clz-input::placeholder {
  color: var(--clz-text-muted);
  opacity: 0.7;
}

/* --- Buttons (.clz-btn) ---
   Rule: Radius-md (12px), .btn-press tactile physics */
.clz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  font-size: var(--clz-font-sm);
  font-weight: 600;
  font-family: inherit;
  line-height: 1.4;
  border-radius: var(--clz-r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  text-decoration: none;
}

.clz-btn:hover {
  transform: translateY(-1px);
}

.clz-btn:active,
.btn-press:active {
  transform: scale(0.98);
}

.clz-btn-primary {
  background: var(--clz-primary);
  color: var(--clz-text-inverse);
  box-shadow: 0 2px 8px rgba(0, 98, 254, 0.24);
}

.clz-btn-primary:hover {
  background: var(--clz-primary-hover);
  box-shadow: 0 4px 14px rgba(0, 98, 254, 0.32);
}

.clz-btn-secondary {
  background: var(--clz-surface);
  color: var(--clz-text);
  border-color: var(--clz-border);
}

.clz-btn-secondary:hover {
  background: var(--clz-surface-subtle);
  border-color: var(--clz-border-focus);
}

.clz-btn-pill {
  border-radius: var(--clz-r-pill);
}

/* Icon-only button */
.clz-btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--clz-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Window Dots (.clz-window-dots) ---
   Rule: Always Red, Yellow, Green in exact order */
.clz-window-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.clz-window-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.clz-window-dots .dot-red {
  background: #EF4444;
}

.clz-window-dots .dot-yellow {
  background: #F59E0B;
}

.clz-window-dots .dot-green {
  background: #10B981;
}

/* =====================================================================
   8. TWO-COLUMN EQUAL-HEIGHT LAYOUT UTILITY
   ===================================================================== */
.clz-two-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--clz-space-5);
  align-items: stretch;
  width: 100%;
}

@media (min-width: 1024px) {
  .clz-two-column {
    grid-template-columns: repeat(12, 1fr);
  }
}

.clz-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.clz-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.clz-panel-footer {
  margin-top: auto;
  padding-top: var(--clz-space-4);
  border-top: 1px solid var(--clz-border-subtle);
}

/* =====================================================================
   9. OVERRIDE SAFEGUARDS (Pill De-escalation on Complex Elements)
   ===================================================================== */
/* Option rows & formula containers de-escalation */
[id="optionsContainer"] > div {
  border-radius: var(--clz-r-md) !important;
}

.formula-chip {
  border-radius: var(--clz-r-sm) !important;
  padding: 4px 10px !important;
}

/* --- Crisp Geometric Scale Enforcement (No Cartoonish Bloat / Slop) --- */

/* 1. Badges, tags, chips & small text pills -> crisp 6px */
span.rounded-full:not(.w-1):not(.w-1\.5):not(.w-2):not(.w-2\.5):not(.w-3):not(.w-3\.5):not(.w-4):not(.w-5):not(.w-6):not(.w-7):not(.w-8):not(.w-10):not(.w-12),
div.rounded-full:not(.w-1):not(.w-1\.5):not(.w-2):not(.w-2\.5):not(.w-3):not(.w-3\.5):not(.w-4):not(.w-5):not(.w-6):not(.w-7):not(.w-8):not(.w-10):not(.w-12):not(.w-14):not(.w-16):not(.w-20):not(.dot),
[class*="text-[10px]"].rounded-full,
[class*="text-[11px]"].rounded-full,
[class*="text-xs"].rounded-full:not(.w-5):not(.w-6):not(.w-7):not(.w-8),
[class*="text-sm"].rounded-full:not(.w-8):not(.w-10),
.streak-pill,
.trust-pill {
  border-radius: var(--clz-r-sm) !important;
  padding-left: 9px !important;
  padding-right: 9px !important;
}

/* 2. Standard buttons & text links with rounded-full -> crisp 8px controls (Linear/Stripe style)
   Excludes fixed-size square/circle icon buttons (w-7, w-8, w-10, etc.) */
button.rounded-full:not(.w-5):not(.w-6):not(.w-7):not(.w-8):not(.w-9):not(.w-10):not(.w-11):not(.w-12):not(.w-14):not(.w-16):not(.w-20):not([class*="btn-icon"]),
a.rounded-full:not(.w-5):not(.w-6):not(.w-7):not(.w-8):not(.w-9):not(.w-10):not(.w-11):not(.w-12):not(.w-14):not(.w-16):not(.w-20):not([class*="btn-icon"]),
.tactile-btn.rounded-full {
  border-radius: var(--clz-r-md) !important;
}

/* 3. Outer containers & floating headers with rounded-full -> sleek 12-14px */
header.rounded-full,
nav.rounded-full {
  border-radius: var(--clz-r-lg) !important;
}

/* 4. Toning down bubbly 24px/32px container radii to crisp 16px */
.rounded-3xl {
  border-radius: var(--clz-r-xl) !important;
}

.rounded-2xl {
  border-radius: var(--clz-r-lg) !important;
}


/* =====================================================================
   9B. ENHANCED SLEEK SCROLLBAR STYLING (ALL DEVICES & BROWSERS)
   ===================================================================== */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html, * {
    scroll-behavior: auto !important;
  }
}

/* Explicit Smooth Scrolling Utilities (Opt-in to prevent breaking chat instant scrolling) */
.clz-scroll-smooth,
.scroll-smooth {
  scroll-behavior: smooth !important;
}

.clz-scroll-auto,
.scroll-auto {
  scroll-behavior: auto !important;
}

/* 6px Sleek Scrollbar (Desktop, standard cards, list panels) */
.custom-scrollbar,
.clz-scrollbar-sleek,
.clz-scroll-isolated {
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}

.custom-scrollbar::-webkit-scrollbar,
.clz-scrollbar-sleek::-webkit-scrollbar,
.clz-scroll-isolated::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track,
.clz-scrollbar-sleek::-webkit-scrollbar-track,
.clz-scroll-isolated::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb,
.clz-scrollbar-sleek::-webkit-scrollbar-thumb,
.clz-scroll-isolated::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.2s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover,
.clz-scrollbar-sleek::-webkit-scrollbar-thumb:hover,
.clz-scroll-isolated::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

.custom-scrollbar::-webkit-scrollbar-corner,
.clz-scrollbar-sleek::-webkit-scrollbar-corner,
.clz-scroll-isolated::-webkit-scrollbar-corner {
  background: transparent;
}

/* 4px Sleek Slim Scrollbar (Mobile viewport, compact drawers, sub-elements) */
.custom-scrollbar-slim,
.clz-scrollbar-slim,
.clz-scroll-slim {
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}

.custom-scrollbar-slim::-webkit-scrollbar,
.clz-scrollbar-slim::-webkit-scrollbar,
.clz-scroll-slim::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.custom-scrollbar-slim::-webkit-scrollbar-track,
.clz-scrollbar-slim::-webkit-scrollbar-track,
.clz-scroll-slim::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar-slim::-webkit-scrollbar-thumb,
.clz-scrollbar-slim::-webkit-scrollbar-thumb,
.clz-scroll-slim::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.2s ease;
}

.custom-scrollbar-slim::-webkit-scrollbar-thumb:hover,
.clz-scrollbar-slim::-webkit-scrollbar-thumb:hover,
.clz-scroll-slim::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

.custom-scrollbar-slim::-webkit-scrollbar-corner,
.clz-scrollbar-slim::-webkit-scrollbar-corner,
.clz-scroll-slim::-webkit-scrollbar-corner {
  background: transparent;
}

/* Scrollbar Hide (Preserves touch & wheel scrolling without visual scrollbar) */
.custom-scrollbar-hide,
.clz-scrollbar-none,
.no-scrollbar {
  -ms-overflow-style: none; /* IE / Edge */
  scrollbar-width: none; /* Firefox */
}

.custom-scrollbar-hide::-webkit-scrollbar,
.clz-scrollbar-none::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
  width: 0;
  height: 0;
}

/* Health Dashboard Overrides */
.rounded-\[32px\] { border-radius: 32px !important; }
.rounded-\[24px\] { border-radius: 24px !important; }
.rounded-2xl { border-radius: 20px !important; }
.rounded-xl { border-radius: 14px !important; }
.rounded-lg { border-radius: 10px !important; }

/* =====================================================================
   10. FLUID CONTAINER & VIEWPORT-AWARE ADAPTIVE GRID
   ===================================================================== */
.clz-fluid-container {
  width: 100% !important;
  max-width: 100% !important;
  padding: clamp(14px, 1.8vw, 32px);
  box-sizing: border-box;
}

/* Fluid adaptive 3-to-4 column grid */
.clz-adaptive-grid {
  display: grid;
  gap: 1.25rem;
  width: 100%;
  grid-template-columns: 1fr;
  margin-bottom: 1.5rem !important;
}

/* Tablet (768px - 1023px): 2 balanced columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .clz-adaptive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .clz-adaptive-grid > .clz-col-span-last {
    grid-column: span 2 !important;
  }
}

/* Laptop, Desktop & Ultrawide (1024px+): Balanced 3 equal-height columns */
@media (min-width: 1024px) {
  .clz-adaptive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    align-items: stretch !important;
  }
  .clz-adaptive-grid > .clz-col-span-last {
    grid-column: auto !important;
  }
}

/* Hero Action Strip (Slim ~54px-60px horizontal bar on desktop/laptop) */
.clz-hero-action-strip {
  background: linear-gradient(135deg, #0284C7 0%, #0EA5E9 50%, #06B6D4 100%) !important;
  color: #FFFFFF !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 20px -3px rgba(14, 165, 233, 0.28) !important;
  padding: 10px 18px !important;
  margin-bottom: 0.75rem !important;
  position: relative !important;
  overflow: hidden !important;
}
.clz-hero-inner-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 10 !important;
}
@media (min-width: 768px) {
  .clz-hero-inner-row {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }
}
.clz-teacher-scroll-container {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
.clz-right-analytics-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  height: 100% !important;
}
.clz-right-analytics-group > .clz-hero-study-card {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 160px !important;
}
.clz-right-analytics-group > .clz-subcards-analytics-container {
  flex: 0 0 auto !important;
}

/* Floating AI Chat Trigger Docking Guard */
.clz-floating-chat-trigger {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 9999 !important;
}
@media (max-width: 767.98px) {
  .clz-floating-chat-trigger {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
  }
}

/* Stat Cards Grid - Explicit Viewport Aware Grid */
/* Stat Cards Grid - Explicit Viewport Aware Grid */
.clz-stat-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.25rem !important;
  margin-top: 1.25rem !important;
  width: 100% !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}
@media (min-width: 1024px) {
  .clz-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }
}
.clz-stat-grid > * {
  min-width: 0 !important;
  box-sizing: border-box !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
.clz-adaptive-grid > *,
.clz-syllabus-tracker-grid > * {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Teachers Cards Grid - Explicit 4-Column Layout */
.clz-teachers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
}
@media (min-width: 640px) {
  .clz-teachers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1024px) {
  .clz-teachers-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}


/* NCTB Subject Filter Pills */
.clz-subject-pill {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  user-select: none;
}
.clz-subject-pill:hover {
  transform: translateY(-1px);
}
.clz-subject-pill.active {
  background: #E0F2FE !important;
  color: #0284C7 !important;
  border-color: #7DD3FC !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
}

/* Instant Doubt Solve Bar */
.clz-instant-doubt-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.clz-instant-doubt-box:focus-within {
  border-color: #0EA5E9;
  box-shadow: 0 8px 30px -4px rgba(14, 165, 233, 0.15);
}

/* Daily Target Checklist Items */
.clz-target-item {
  transition: all 0.2s ease;
  cursor: pointer;
}
.clz-target-item:hover {
  background-color: #F8FAFC;
}
.clz-target-item.completed {
  opacity: 0.75;
}
.clz-target-item.completed .target-title {
  text-decoration: line-through;
  color: #64748B;
}

/* =====================================================================
   11. RESPONSIVE VIEWPORT & MESSAGING STABILITY UTILITIES
   ===================================================================== */

/* Viewport Lock: Eliminates double/unwanted outer page scrolling, rubber-banding, and jumping */
.clz-viewport-locked,
body.clz-viewport-locked,
html.clz-viewport-locked {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden !important;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

/* Scroll Isolation: Contains vertical scrolling strictly within the messaging / feed area */
.clz-scroll-isolated {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}

/* Horizontal Scroll Isolation: For chips, formula rows, and pill tabs */
.clz-scroll-isolated-x {
  overflow-x: auto !important;
  overscroll-behavior: contain !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}

/* Docked Input: Anchors input bar above mobile keyboard and at bottom of viewport without jumping */
.clz-chat-docked-input {
  position: sticky;
  bottom: 0;
  z-index: 40;
  flex-shrink: 0;
}

/* Safe Area Inset Helpers: Resilient protection against notch / home-bar clipping with static fallbacks */
.clz-safe-bottom {
  padding-bottom: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}

.clz-safe-top {
  padding-top: 12px;
  padding-top: max(12px, env(safe-area-inset-top, 0px));
}

.clz-safe-x {
  padding-left: 12px;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: 12px;
  padding-right: max(12px, env(safe-area-inset-right, 0px));
}

.clz-safe-area {
  padding-top: 12px;
  padding-top: max(12px, env(safe-area-inset-top, 0px));
  padding-bottom: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  padding-left: 12px;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: 12px;
  padding-right: max(12px, env(safe-area-inset-right, 0px));
}

.clz-safe-bottom-margin {
  margin-bottom: 16px;
  margin-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}

/* Chat Full Viewport Shell: Flex column container perfectly fitting 100dvh */
.clz-chat-viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  width: 100%;
  overflow: hidden;
  position: relative;
  overscroll-behavior: none;
}

/* Chat Messages Scroll Container: Takes remaining vertical space with scroll isolation */
.clz-chat-messages-container {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}

/* =====================================================================
   12. RESPONSIVE FLUID TYPOGRAPHY HELPERS (CLAMP & 390PX MOBILE OPTIMIZED)
   ===================================================================== */

/* Fluid Clamp Headings: Titles scale smoothly and avoid awkward multi-line breaks on 390px screens */
.clz-heading-display,
.clz-text-fluid-display {
  font-size: var(--clz-font-fluid-display) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.clz-heading-1,
.clz-text-fluid-h1,
.clz-title-fluid-h1 {
  font-size: var(--clz-font-fluid-h1) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.clz-heading-2,
.clz-text-fluid-h2,
.clz-title-fluid-h2 {
  font-size: var(--clz-font-fluid-h2) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.clz-heading-3,
.clz-text-fluid-h3,
.clz-title-fluid-h3 {
  font-size: var(--clz-font-fluid-h3) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.clz-heading-title,
.clz-title-fluid,
.clz-text-fluid-title {
  font-size: var(--clz-font-fluid-title) !important;
  line-height: 1.4 !important;
  letter-spacing: -0.005em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.clz-text-fluid-body {
  font-size: var(--clz-font-fluid-body) !important;
  line-height: 1.6 !important;
  overflow-wrap: break-word;
}

/* Card Title Fluid: Auto-scales cleanly on narrow card headers */
.clz-card-title-fluid {
  font-size: var(--clz-font-fluid-card-title, clamp(1rem, 0.92rem + 0.5vw, 1.25rem)) !important;
  line-height: 1.35 !important;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Typography Balance, Truncation & Line-Clamp Utilities */
.clz-text-balance {
  text-wrap: balance;
}

.clz-text-pretty {
  text-wrap: pretty;
}

.clz-heading-nowrap-ellipsis,
.clz-title-nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Line-Clamp Helpers: Guarantees titles never break into awkward 3+ lines on 390px mobile */
.clz-title-clamp-1,
.clz-line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clz-title-clamp-2,
.clz-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: balance;
}

.clz-title-clamp-3,
.clz-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: pretty;
}

/* Mobile Screen Protection (<= 430px, e.g. iPhone 12/13/14/15/16 390px, Galaxy S 360-390px) */
@media (max-width: 430px) {
  .clz-bubble {
    max-width: min(88%, 520px);
  }

  .clz-mobile-title-clamp {
    font-size: clamp(1.05rem, 4.2vw, 1.35rem) !important;
    line-height: 1.25 !important;
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  .clz-heading-1,
  .clz-text-fluid-h1,
  .clz-title-fluid-h1 {
    font-size: clamp(1.15rem, 4.5vw, 1.35rem) !important;
    line-height: 1.25 !important;
  }

  .clz-heading-2,
  .clz-text-fluid-h2,
  .clz-title-fluid-h2 {
    font-size: clamp(1.05rem, 4vw, 1.2rem) !important;
    line-height: 1.3 !important;
  }

  .clz-heading-3,
  .clz-text-fluid-h3,
  .clz-title-fluid-h3 {
    font-size: clamp(0.95rem, 3.6vw, 1.1rem) !important;
    line-height: 1.35 !important;
  }
}
/* Student Dashboard Teacher Scroll Container & Hero CTA Enhancements */
.clz-teacher-scroll-container {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: #BAE6FD #F8FAFC !important;
}
@media (max-width: 767px) {
  .clz-teacher-scroll-container {
    max-height: 290px !important;
  }
}

/* Syllabus Tracker 6-Column Grid */
.clz-syllabus-tracker-grid {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  box-sizing: border-box !important;
}
@media (min-width: 640px) {
  .clz-syllabus-tracker-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1024px) {
  .clz-syllabus-tracker-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}
.clz-teacher-scroll-container::-webkit-scrollbar {
  width: 5px !important;
}
.clz-teacher-scroll-container::-webkit-scrollbar-track {
  background: #F8FAFC !important;
  border-radius: 9999px !important;
}
.clz-teacher-scroll-container::-webkit-scrollbar-thumb {
  background: #BAE6FD !important;
  border-radius: 9999px !important;
}
.clz-teacher-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #38BDF8 !important;
}
.clz-primary-hero-cta {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, filter 0.2s ease !important;
}
.clz-primary-hero-cta:hover {
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28), 0 0 0 4px rgba(255, 255, 255, 0.45) !important;
  filter: brightness(1.03) !important;
}
.clz-primary-hero-cta:active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}