@charset "UTF-8";
/* style.css — PHASE 2: Frontend HTML Structure & CSS Styling - Batch 1 (CORRECTED & MERGED) */

/* --- 1. Root Variables & Basic Reset --- */

:root {
    /* Sizing & Layout */
    --header-height: 80px;
    --footer-height: 50px; /* Reduced from 80px to fit content without scrolling */
    --page-horizontal-padding: 20px;
    --section-gap: 50px;
    --content-max-width: 1100px; /* Updated from 1000px */

    /* NEW: Size Controls */
    --logo-header-height: 50px;
    --icon-size-default: 3rem;

    /* Dashboard Specific Sizing */
    --dashboard-panel-padding: 20px;
    --dashboard-panel-header-height: 40px;
    --dashboard-panel-header-margin-bottom: 15px;
    --sidebar-width-desktop: 280px;
    --chat-min-width: 400px;

    /* Brand Colors (from utils/brand.js) */
    --clr-primary-teal: #12B3B3;
    --clr-accent-hotpink: #FF3B7F;
    --clr-success-green: #16C86D;
    --clr-warning-gold: #FFC24B;
    --clr-error-red: #FF4E4E;
    --clr-bg-light: #FFFFFF;
    --clr-bg-dark: #0F1A24;
    --clr-text: #18202B;
    --clr-text-dim: #5B6876;

    /* NEW: RGB versions for rgba() usage */
    --clr-primary-teal-rgb: 18, 179, 179;
    --clr-accent-hotpink-rgb: 255, 59, 127;

    /* Text Colors (derived from brand colors) */
    --text-primary: var(--clr-text);
    --text-secondary: var(--clr-text-dim);
    --text-light: var(--clr-bg-light);
    --text-dark: var(--clr-text);
    --text-green: var(--clr-success-green);
    --text-hotpink: var(--clr-accent-hotpink);

    /* Shadows (derived from brand rules) - Made slightly softer for cleaner look */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 10px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 20px rgba(0,0,0,0.15);
    --shadow-card-primary: 0 4px 8px rgba(var(--clr-primary-teal-rgb), 0.1); /* Example for a themed card shadow */

    /* Typography Defaults */
    --font-family-headlines: "Inter", sans-serif;
    --font-family-body: "Inter", sans-serif;
    --font-family-code-math: "ui-monospace", Menlo, Consolas;
    --font-weight-headlines: 700;
    --font-weight-body: 400;
    --brand-base-font-size: 1rem; /* 16px */
    --brand-h1-font-size: 2.8em; /* Slightly smaller for hero impact, Apple-like */
    --brand-h3-font-size: 1.4em; /* Slightly smaller than original 1.5em for cleaner look */

    /* Border Radius */
    --border-radius-base: 8px; /* General rounded corners */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-family-body);
}

/* --- Core Layout for Fixed Header/Footer & Scrollable Content --- */

html {
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* This is the key: makes sure the body is at least as tall as the screen */
    background-color: var(--clr-bg-light);
    color: var(--text-primary);
    font-size: var(--brand-base-font-size);
    line-height: 1.6;
    position: relative;
    min-width: 320px;
}

/* --- 2. Typography & General Elements --- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headlines);
    font-weight: var(--font-weight-headlines);
    color: var(--clr-text);
    margin-bottom: 0.5em;
    line-height: 1.2;
}
h1 { font-size: var(--brand-h1-font-size); }
h2 { font-size: 2.2em; }
h3 { font-size: var(--brand-h3-font-size); } /* Corrected to use variable */
h4 { font-size: 1.3em; }

p {
    margin-bottom: 1em;
}

a {
    color: var(--clr-primary-teal);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    text-decoration: underline;
    color: var(--clr-primary-teal);
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-size: 1rem;
    padding: 0.75em 1.25em;
    border-radius: var(--border-radius-base);
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: var(--shadow-sm); /* Default button shadow */
}

button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Common form elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--clr-text-dim);
    border-radius: var(--border-radius-base);
    font-size: 1rem;
    box-sizing: border-box;
    background-color: var(--clr-bg-light);
    color: var(--clr-text);
}

input[type="checkbox"] {
    width: auto;
    margin-right: 5px;
}

/* --- 3. Global Button Styles --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-weight: var(--font-weight-headlines);
    border-radius: var(--border-radius-base);
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Primary Button (Hot Pink) */
.btn-primary {
    background-color: var(--clr-accent-hotpink);
    color: var(--clr-bg-light);
}
.btn-primary:hover {
    background-color: #e63273; /* Darken manually */
}

/* Primary Outline Button (Hot Pink Border) */
.btn-primary-outline {
    background-color: transparent;
    color: var(--clr-accent-hotpink);
    border: 2px solid var(--clr-accent-hotpink);
    box-shadow: none;
}
.btn-primary-outline:hover {
    background-color: var(--clr-accent-hotpink);
    color: var(--clr-bg-light);
    box-shadow: var(--shadow-sm);
}

/* Secondary Button (Teal) */
.btn-secondary {
    background-color: var(--clr-primary-teal);
    color: var(--clr-bg-light);
}
.btn-secondary:hover {
    background-color: #109a9a; /* Darken manually */
}

/* Tertiary Button (Gray) */
.btn-tertiary {
    background-color: var(--clr-text-dim);
    color: var(--clr-bg-light);
}
.btn-tertiary:hover {
    background-color: #4a5763; /* Darken manually */
}

/* Hero specific buttons */
.btn-hero-primary {
    background-color: var(--clr-accent-hotpink);
    color: var(--clr-bg-light);
    font-size: 1.15rem;
    padding: 1rem 2rem;
    box-shadow: var(--shadow-lg);
}
.btn-hero-primary:hover {
    background-color: #e63273;
}

.btn-hero-secondary {
    background-color: transparent;
    color: var(--clr-primary-teal);
    border: 2px solid var(--clr-primary-teal);
    font-size: 1.15rem;
    padding: 1rem 2rem;
    box-shadow: none;
}
.btn-hero-secondary:hover {
    background-color: var(--clr-primary-teal);
    color: var(--clr-bg-light);
}


/* --- 4. Card Styles (Reusable) --- */
.card-style-1 {
    background-color: var(--clr-bg-light);
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-md);
    padding: var(--dashboard-panel-padding);
    border: 1px solid rgba(var(--clr-primary-teal-rgb), 0.05); /* Very subtle teal border */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Added transition for hover */
}
.card-style-1:hover {
    transform: translateY(-3px); /* Slight lift on hover for all cards */
    box-shadow: var(--shadow-lg); /* More pronounced shadow on hover */
}


.card-style-1.card-hotpink-border {
    border: 2px solid var(--clr-accent-hotpink);
    box-shadow: var(--shadow-lg);
}


/* --- 5. Header & Footer --- */
.landing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px var(--page-horizontal-padding);
    background-color: var(--clr-bg-light);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    flex-wrap: wrap;
    z-index: 100; /* Ensure header is above scrolling content */
}

.header-logo-container {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start; /* Align logo left, like in mockup */
    align-items: center;
    padding: 0;
}

/* Main Logo Styling */
.main-logo-hero {
    max-height: var(--logo-header-height); /* Using new variable */
    width: auto;
    display: block;
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.08)); /* Softer shadow */
    transition: all 0.3s ease;
}
.main-logo-hero:hover {
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.1));
}


.landing-nav {
    display: flex;
    gap: 15px;
    flex-shrink: 0;
}
/* Adjust nav spacing for wrapped state */
.landing-header.wrapped .landing-nav {
    margin-top: 10px;
    width: 100%;
    justify-content: center;
}

main {
    flex-grow: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--page-horizontal-padding);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    min-height: 0;
}

.login-page-wrapper,
#app-layout-wrapper,
.admin-page-wrapper {
    flex-grow: 0;
    overflow-y: visible;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: 0;
    max-width: 100%;
}
.login-page-wrapper, .signup-page-wrapper {
    padding: 1rem var(--page-horizontal-padding);
    flex-grow: 1;
    justify-content: center;
}
#app-layout-wrapper {
    flex-direction: row;
    height: 100%;
    min-height: 500px;
    align-items: stretch;
    gap: var(--section-gap);
    flex-grow: 1;
}
.admin-page-wrapper {
    flex-direction: column;
    height: 100%;
    align-items: center;
    gap: var(--section-gap);
    flex-grow: 1;
}


footer {
    width: 100%;
    flex-shrink: 0;
    height: var(--footer-height);
    padding: 0.5rem; /* Reduced from 1rem for compact footer */
    background-color: var(--clr-bg-dark);
    color: var(--clr-bg-light);
    font-size: 0.8rem; /* Slightly smaller text */
    text-align: center;
    box-sizing: border-box;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: auto;
}

footer p {
  margin: 0;
}

footer a {
  color: var(--clr-bg-light);
  text-decoration: none;
  margin: 0 0.5rem;
}

a:hover {
  text-decoration: underline;
}
.edtech-pledge {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 5px;
}


/* --- 6. Landing Page Sections (MODIFIED & NEW) --- */
.section-title {
    text-align: center;
    margin-bottom: calc(var(--section-gap) / 1.5); /* Reduced margin-bottom for tighter feel */
    color: var(--clr-primary-teal);
    font-size: 2.5em;
    font-weight: var(--font-weight-headlines);
}

/* Hero Section */
.hero-section {
    display: flex;
    flex-direction: column; /* Default to column for mobile */
    align-items: center;
    gap: calc(var(--section-gap) / 2); /* Reduced gap */
    padding: 0; /* Use section-gap for internal padding, main handles outer */
    background: var(--clr-bg-light); /* Start with light background for Apple-esque */
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-sm); /* Lighter shadow for hero section */
    margin-bottom: 0; /* No external margin-bottom, managed by main's gap */
}

/* Adjust hero section for desktop (side-by-side) */
@media screen and (min-width: 768px) {
    .hero-section {
        flex-direction: row; /* Side-by-side on desktop */
        text-align: left; /* Align text left */
        justify-content: center; /* Center content horizontally */
        padding: var(--section-gap) var(--page-horizontal-padding); /* Add horizontal padding back */
        gap: 60px; /* Gap between text and image */
    }
    .hero-content {
        flex: 1; /* Allow content to grow */
        max-width: 50%; /* Control text width */
        padding: 0; /* Remove internal padding as section has it */
    }
    .hero-tagline, .hero-subtagline, .hero-equity-blurb {
        color: var(--clr-text); /* Dark text on light background */
        text-shadow: none; /* No text shadow */
    }
    .hero-actions {
        justify-content: flex-start; /* Align buttons left */
    }
    .hero-image-card {
        flex: 1; /* Allow image to grow */
        margin-top: 0; /* No top margin in row layout */
    }
}


.hero-content {
    max-width: 800px;
    padding: 0 var(--page-horizontal-padding);
}

.hero-tagline {
    font-size: 3em;
    color: var(--clr-text); /* Changed to dark text on light background */
    margin-bottom: 0.3em;
    text-shadow: none; /* Removed text shadow */
}
.hero-subtagline {
    font-size: 1.5em;
    color: var(--clr-text-dim); /* Changed to dim text */
    margin-bottom: 0.8em;
    opacity: 1; /* Full opacity */
    font-weight: var(--font-weight-body);
}
.hero-equity-blurb {
    font-size: 1.1em;
    color: var(--clr-text-dim); /* Changed to dim text */
    margin-bottom: 1.5em;
    font-style: italic;
    opacity: 0.9; /* Slightly less opaque */
}

.hero-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

.hero-image-card {
    margin-top: 30px;
    padding: 15px;
    background-color: var(--clr-bg-light);
    border-radius: var(--border-radius-base);
    box-shadow: 0 8px 15px rgba(var(--clr-primary-teal-rgb), 0.1); /* Lighter teal themed shadow */
    max-width: 600px; /* Controlled max width for image card */
    min-width: 280px; /* Ensure it doesn't get too small */
}
.hero-classroom-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-base);
    display: block;
}


/* NEW SECTION: Visual Features (Mimics 3-column dashboard panels) */
.visual-features-section {
    text-align: center;
    padding: var(--section-gap) 0;
}

.visual-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Slightly smaller minmax */
    gap: 25px; /* Reduced gap */
    margin-top: calc(var(--section-gap) / 2); /* Half section gap */
    justify-content: center;
}

.visual-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px; /* Slightly less padding */
    min-height: 280px; /* Reduced for less empty space */
    text-align: center;
    box-shadow: var(--shadow-sm); /* Softer shadow */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.visual-feature-item i {
    font-size: var(--icon-size-default); /* Uses new variable */
}

.visual-feature-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md); /* More pronounced shadow on hover */
}

.visual-feature-image {
    max-width: 100%;
    height: 100px; /* Reduced height for iconic feel */
    object-fit: contain;
    border-radius: var(--border-radius-base); /* Add border-radius for consistency */
    margin-bottom: 20px; /* Reduced margin */
    box-shadow: none; /* No shadow on image */
}

.visual-feature-item h3 {
    color: var(--clr-primary-teal);
    font-size: 1.4em;
    margin-bottom: 10px;
}

.visual-feature-item p {
    font-size: 0.95em;
    color: var(--clr-text-dim);
    flex-grow: 1;
}


/* Pricing/Equity Section */
.pricing-equity-section {
    text-align: center;
    padding: var(--section-gap) 0;
}
.pricing-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px; /* Reduced gap */
    margin-top: calc(var(--section-gap) / 2); /* Half section gap */
    justify-content: center;
}
.pricing-card {
    text-align: center;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 280px;
}
.pricing-card h3 {
    color: var(--clr-primary-teal);
    font-size: 1.5em;
    margin-bottom: 10px;
}
/* Specific styling for the 'Free while in Beta' part for clear hierarchy as per mockup */
.pricing-card .beta-price-note {
    font-size: 1.5em; /* Match mockup's emphasis */
    font-weight: var(--font-weight-headlines);
    color: var(--clr-accent-hotpink); /* Hot pink for visibility */
    margin-bottom: 10px;
}
.pricing-card .price-post-beta {
    color: var(--clr-text-dim); /* More subtle */
    font-size: 1em; /* Smaller */
    font-weight: var(--font-weight-body);
    text-decoration: line-through; /* Strikethrough for beta pricing */
    margin-bottom: 5px; /* Less margin */
}


.pricing-card .price-contact {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--clr-primary-teal);
    margin-bottom: 10px;
}
.pricing-card .equity-cue {
    font-size: 0.9em;
    color: var(--clr-text-dim);
    margin-bottom: 20px;
    flex-grow: 1;
}
.pricing-equity-section .btn {
    width: 100%;
    max-width: 200px;
}
.access-grants-note {
    font-size: 0.9em;
    margin-top: 30px;
}


/* NEW SECTION: Our Approach (Replaces 'How It Works' stepper) */
.our-approach-section {
    padding: var(--section-gap) 0;
    text-align: center;
}

.our-approach-section .section-title {
    margin-bottom: calc(var(--section-gap) / 2);
}

.approach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px; /* Reduced gap */
    max-width: 900px;
    margin: 0 auto;
}

.approach-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.approach-icon {
    width: 90px; /* Smaller icons for a cleaner look */
    height: 90px;
    object-fit: contain;
    border-radius: var(--border-radius-base); /* Add border-radius for consistency */
    margin-bottom: 20px; /* Reduced margin */
    box-shadow: none; /* No shadow on image */
}

.approach-item h3 {
    color: var(--clr-primary-teal);
    font-size: 1.3em;
    margin-bottom: 10px;
}

.approach-item p {
    font-size: 0.9em;
    color: var(--clr-text-dim);
    flex-grow: 1;
}


/* Feature Grid Section - slight refinement */
.feature-grid-section {
    padding: var(--section-gap) 0;
}
.feature-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px; /* Reduced gap */
    margin-top: calc(var(--section-gap) / 2);
    justify-content: center;
}
.feature-card {
    text-align: center;
    padding: 30px;
    min-height: 180px; /* Slightly reduced height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.feature-card h3 {
    color: var(--clr-primary-teal);
    margin-bottom: 10px;
    font-size: 1.3em;
}
.feature-card p {
    font-size: 0.95em;
    color: var(--clr-text-dim);
    flex-grow: 1;
}


/* Social Proof Section */
.social-proof-section {
    background-color: var(--clr-primary-teal);
    color: var(--clr-bg-light);
    padding: var(--section-gap);
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.social-proof-section .section-title {
    color: var(--clr-bg-light);
}
/* NEW: Testimonial Grid (replacing carousel) */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Two columns on desktop */
    gap: 30px;
    max-width: 900px; /* Max width for testimonials */
    margin: 0 auto 30px;
}
.testimonial-item {
    background-color: var(--clr-bg-light); /* White background for testimonials */
    color: var(--clr-text); /* Dark text */
    padding: 25px;
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-md);
    text-align: left; /* Align text left within testimonial */
    opacity: 1; /* Always visible, no fade */
    position: static; /* Remove absolute positioning */
    width: auto; /* Remove fixed width */
    min-height: 0; /* Allow testimonial item to shrink */
}
.testimonial-item blockquote {
    margin: 0;
    font-size: 1.1em;
    font-style: italic;
    color: var(--clr-text);
    margin-bottom: 10px;
}
.testimonial-author {
    font-size: 0.9em;
    font-weight: bold;
    color: var(--clr-text-dim); /* Dimmed author text */
}
.school-logos-container {
    display: none; /* Hide school logos as per mockup */
}


/* FAQ Section */
.faq-section {
    padding: var(--section-gap) 0;
}
.accordion-container {
    max-width: 800px;
    margin: calc(var(--section-gap) / 2) auto 0; /* Reduced top margin */
}
.accordion-item {
    margin-bottom: 15px;
    overflow: hidden;
}
.accordion-header {
    width: 100%;
    text-align: left;
    padding: 15px 20px;
    background-color: var(--clr-bg-light);
    border: none;
    font-weight: bold;
    font-size: 1.1em;
    cursor: pointer;
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-sm);
    color: var(--clr-text);
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}
.accordion-header::after {
    content: '\002B';
    font-weight: bold;
    font-size: 1.2em;
    transition: transform 0.3s ease;
}
.accordion-header.active::after {
    content: '\2212'; /* Change to minus sign */
    transform: rotate(0deg); /* No rotation needed */
}
.accordion-content {
    max-height: 0;
    transition: max-height 0.3s ease-out;
    padding: 0 20px;
    background-color: var(--clr-bg-light);
    border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
    box-shadow: var(--shadow-sm);
}
.accordion-content p {
    padding: 15px 0;
    color: var(--clr-text-dim);
}


/* Final CTA Section */
.final-cta-section {
    text-align: center;
    padding: var(--section-gap); /* Use full section gap for padding */
    margin-bottom: var(--section-gap);
    background: var(--clr-primary-teal); /* Solid teal background as per mockup */
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-lg);
}
.final-cta-blurb {
    font-size: 1.2em;
    color: var(--clr-bg-light); /* White text on teal background */
    margin-bottom: 30px;
}


/* --- 7. Page Layout Wrappers (Common) --- */

/* Main content area for dashboards with sidebars (These are *children* of the <main> tag) */
.admin-main-content {
    display: flex;
    width: 100%;
    gap: var(--section-gap);
    flex-grow: 1; /* Allow to grow within its <main> parent */
    height: auto; /* Let content dictate height, flex-grow will stretch */
    align-items: stretch; /* Stretch children to fill height in rows */
    box-sizing: border-box;
    min-height: 0; /* Allow this flex item to shrink correctly */
}

/* Dashboard Sidebar Widgets (Left/Right) */
.admin-widget-sidebar, .widget-sidebar-left, .widget-sidebar-right {
    flex: 0 0 var(--sidebar-width-desktop); /* Fixed width, non-growing */
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    overflow-y: visible; /* Let the parent <main> or .admin-main-content handle scroll */
    min-width: var(--sidebar-width-desktop);
    height: auto; /* Let content define height naturally */
    box-sizing: border-box;
    flex-shrink: 0; /* Prevent sidebars from shrinking too small */
    flex-grow: 0; /* Sidebars have fixed width, don't grow */
    min-height: 0; /* Allow to shrink within flex container */
}

/* Central Content Area for Dashboards */
.admin-central-content, #chat-container {
    flex: 1; /* Allows this to grow and take remaining space */
    min-width: 0; /* Important for flex items to prevent overflow in row direction */
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    height: auto; /* Let content dictate height */
    box-sizing: border-box;
    min-height: 0; /* Allow to shrink within flex container */
    /* REMOVED: overflow-y: auto; from #chat-container here, moved to #chat-messages-container */
}

/* Dashboard Panel Base Style */
.dashboard-panel {
    background: var(--clr-bg-light);
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-md);
    padding: var(--dashboard-panel-padding);
    width: 100%;
    flex-grow: 1; /* Allow panels to grow if space permits */
    height: auto; /* Let content define height naturally, allow flex-grow to stretch */
    flex-shrink: 0; /* Important: Prevent panels from shrinking too small */
    min-height: 0; /* Allow panels to shrink within their flex container */
}

.dashboard-panel-header {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: var(--dashboard-panel-header-margin-bottom);
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--clr-text);
}

/* Table Specifics */
.table-scroll-container {
    overflow-y: auto;
    max-height: 350px; /* Slightly reduced for better fit */
    /* Custom scrollbar for better UX */
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--clr-primary-teal-rgb), 0.3) transparent;
}

.table-scroll-container::-webkit-scrollbar {
    width: 6px;
}

.table-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

.table-scroll-container::-webkit-scrollbar-thumb {
    background-color: rgba(var(--clr-primary-teal-rgb), 0.3);
    border-radius: 3px;
}

.table-scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--clr-primary-teal-rgb), 0.5);
}

.user-table, #leaderboardTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.user-table th, .user-table td,
#leaderboardTable th, #leaderboardTable td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
}

.user-table th, #leaderboardTable th {
    background-color: rgba(0, 0, 0, 0.05);
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}
#leaderboardTable td {
    color: var(--clr-success-green);
}


/* --- 8. Chat Page Specifics (excluding common layout) --- */

/* Wrapper for the central chat container - this is now the MAIN chat pane */
/* This is already covered by .admin-central-content, #chat-container rules above */


/* Chat messages inner container */
#chat-messages-container { /* Renamed from #messages and adjusted styles */
    display: flex; /* Use flexbox for message container */
    flex-direction: column; /* Stack messages vertically */
    gap: 10px; /* Space between messages */
    padding: 1rem;
    overflow-y: auto; /* THIS IS THE KEY for chat messages scrolling */
    flex-grow: 1; /* Allows it to take available space */
    background-color: var(--clr-bg-light); /* Assuming this is your light background color */
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-small);
    min-height: 0; /* Ensure it has a minimum height */
    border: 1px solid var(--clr-text-dim); /* Match your original #messages border */
}

.message {
    max-width: 75%; /* Messages don't span full width */
    padding: 10px 15px;
    border-radius: 18px; /* More rounded bubbles */
    line-height: 1.5;
    word-wrap: break-word; /* Ensure long words wrap */
    font-size: 0.95em; /* Inherit font size */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle shadow for all messages */
    /* Base styles, will be overridden by .user and .ai */
}

/* Styles for user messages (right aligned) */
.message.user {
    align-self: flex-end; /* Pushes message to the right */
    background-color: var(--clr-primary-teal); /* Example: Primary teal background */
    color: white; /* Example: White text for user messages */
    border-bottom-right-radius: 4px; /* Slightly less rounded corner at the bottom right for user */
}

/* Styles for AI messages (left aligned) */
.message.ai {
    align-self: flex-start; /* Pushes message to the left */
    background-color: #e0e0e0; /* Example: Light gray background for AI */
    color: var(--clr-text-primary); /* Example: Dark text for AI messages */
    border-bottom-left-radius: 4px; /* Slightly less rounded corner at the bottom left for AI */
}


.chat-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin-top: 5px;
}

#input-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--clr-text-dim);
  padding-top: 15px;
  flex-shrink: 0;
}

/* Toolbar Above Message Box */
.input-toolbar {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 8px;
  flex-wrap: wrap;
}

.input-toolbar .btn {
  flex: 0 0 auto;
  min-width: 40px;
}

#user-input {
  width: 100%;
  min-height: 60px;
  max-height: 200px;
  overflow-y: auto;
  padding: 12px;
  border-radius: var(--border-radius-base);
  border: 1px solid #ccc;
  font-size: 1rem; /* Use var for consistency */
  resize: vertical;
}

#send-button {
  padding: 10px 18px;
  background-color: var(--clr-primary-teal); /* Changed to primary teal */
  color: var(--clr-bg-light);
  border-radius: var(--border-radius-base);
}
#send-button:hover { background-color: #109a9a; } /* Darker teal */

/* Input Tools (Mic, Equation, Attach) */
#tools-left, #tools-right { /* These don't exist in chat.html, but keeping for consistency if added later */
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}
#tools-left button, #tools-right button {
    background: none;
    border: none;
    padding: 5px;
    border-radius: 5px;
    line-height: 1;
    box-shadow: none; /* No shadow on icon buttons */
}
/* Explicitly size image icons within buttons */
#attach-button img, #mic-button img {
    width: 24px; /* Fixed smaller size */
    height: 24px; /* Fixed smaller size */
    vertical-align: middle;
    display: block;
}
#tools-left button:hover, #tools-right button:hover {
    background-color: rgba(0,0,0,0.05);
}


/* Dropzone styling */
#dropzone.drag-active::before { /* This #dropzone ID doesn't exist in chat.html, assuming it's for general app-layout-wrapper */
  content: "Drop file to upload 📎";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: var(--clr-bg-light);
  font-size: 2rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Thinking Indicator (iMessage style) */
#thinking-indicator, #parent-thinking-indicator {
  display: none; /* Controlled by JS */
  align-items: center;
  justify-content: flex-start; /* Aligned left for AI bubble feel */
  gap: 6px;
  padding: 8px 16px;
  margin-left: 15px; /* Indent slightly like an AI bubble */
  border-radius: 18px; /* Bubble shape, matching new .message styles */
  border-bottom-left-radius: 4px; /* Match AI bubble */
  background-color: #e0e0e0; /* AI bubble background */
  flex-shrink: 0;
  font-size: 0.95em;
  color: var(--clr-text-dim);
  max-width: 75%;
  align-self: flex-start; /* Align left */
  box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* Match AI bubble shadow */
}
/* Corrected dot animation for thinking indicator */
#thinking-indicator .dot, #parent-thinking-indicator .dot {
  width: 8px; /* Smaller dots */
  height: 8px;
  background-color: var(--clr-text-dim); /* Darker dots */
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;
}
#thinking-indicator .dot:nth-child(1), #parent-thinking-indicator .dot:nth-child(1) { animation-delay: -0.32s; }
#thinking-indicator .dot:nth-child(2), #parent-thinking-indicator .dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}


/* Lesson Header in Chat */
#lessons-pane #lesson-header, #chat-pane #lesson-header {
    background-color: var(--clr-primary-teal); /* Changed to primary teal */
    color: var(--clr-bg-light);
    padding: 10px;
    border-bottom: 1px solid #cceeff;
    margin-bottom: 10px;
    text-align: center;
    border-radius: var(--border-radius-base);
    flex-shrink: 0;
}
#lessons-pane #lesson-header h2, #chat-pane #lesson-header h2 { margin: 0; color: var(--clr-bg-light); }


/* Leaderboard Widget (Left Sidebar) */
#leaderboard-content {
    background-color: var(--clr-bg-light);
    border-radius: var(--border-radius-base);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;      /* This is the key change to make it fill vertical space */
    min-height: 0;     /* This is a crucial fix for flexbox scrolling */
}

/* Add this to specifically shrink the Leaderboard's header */
#leaderboard-content .dashboard-panel-header {
    font-size: 1rem;
    font-weight: bold;
    padding-bottom: 4px;
    margin-bottom: 10px;
}
#leaderboard-content .popup-header h2 {
    margin: 0;
    font-size: 1rem;
    color: var(--clr-bg-light);
}

#leaderboard-content .overflow-y-auto {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px 15px;
}


/* XP/Level Widget (Right Sidebar) */
#xp-level-display {
    background-color: var(--clr-bg-light);
    border-radius: var(--border-radius-base);
    overflow: hidden;
    text-align: center;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 15px;
}
#xp-level-display #level-badge {
    background-color: var(--clr-primary-teal);
    color: var(--clr-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: var(--font-weight-headlines);
    padding: 5px 10px;
    border-radius: var(--border-radius-base);
    margin-bottom: 10px;
}

#xp-level-display #xp-text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--clr-text-dim);
}

/* Student's Parent Link Code Display */
#student-parent-link-display {
    background-color: rgba(var(--clr-primary-teal-rgb), 0.05); /* Subtle teal tint */
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-sm); /* Lighter shadow than leaderboard */
    padding: 12px; /* Slightly smaller padding */
    text-align: center;
    border: 1px solid rgba(var(--clr-primary-teal-rgb), 0.15);
}

#student-parent-link-display h3 {
    font-size: 0.95rem; /* Smaller heading */
    margin-bottom: 0.5rem;
    color: var(--clr-text-dark);
}

#student-parent-link-display p {
    font-size: 0.85rem; /* Smaller description text */
    margin-bottom: 0.75rem;
    color: var(--clr-text-muted);
}

#student-link-code-value {
    background-color: rgba(var(--clr-primary-teal-rgb), 0.1);
    padding: 8px 15px;
    border-radius: var(--border-radius-base);
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--clr-primary-teal);
    cursor: copy;
    margin: 10px 0;
    display: block;
}

/* Tutor Avatar Styling in Sidebar */
#avatar-container {
  height: auto;
  min-height: 500px;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: visible; /* Allow landscape videos to overflow */
  margin-top: auto;
  margin-bottom: 1rem;
  flex-grow: 1;
  border-radius: var(--border-radius-base);
  box-shadow: var(--shadow-md);
  /* Gradient background for overflowing landscape videos */
  background: linear-gradient(to bottom,
    rgba(var(--clr-primary-teal-rgb), 0.03) 0%,
    rgba(var(--clr-primary-teal-rgb), 0.08) 100%);
  position: relative;
}

#student-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--clr-bg-light);
    border-radius: var(--border-radius-base);
    overflow: hidden;
}

#student-avatar img {
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--border-radius-base);
}

/* Course Card in Sidebar (Guided Path) */
.course-card-wrapper {
    margin-top: 15px;
    padding: 10px;
    background-color: var(--clr-bg-light);
    border-radius: var(--border-radius-base);
    border: 1px solid rgba(var(--clr-primary-teal-rgb), 0.1);
    text-align: center;
}
.course-card {
    padding: 15px 5px;
    border-radius: var(--border-radius-base);
    background-color: var(--clr-bg-light);
    box-shadow: var(--shadow-sm);
}
.course-card h3 {
    font-size: 1.1em;
    margin-bottom: 10px;
}
.course-card p {
    font-size: 0.8em;
    margin-bottom: 1em;
}
.course-card button {
    margin: 5px 0;
    padding: 8px 10px;
    border-radius: 5px;
    width: 90%;
}
.course-card .enroll-btn { background-color: var(--clr-success-green); color: var(--clr-bg-light); }
.course-card .enroll-btn:hover { background-color: #16c86d; }


/* Progress Circle for Course Cards */
.progress-circle-container {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 10px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e0e0e0;
}
.progress-circle-inner {
    background-color: var(--clr-bg-light);
    width: 70%;
    height: 70%;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    color: var(--clr-text);
}


/* --- 9. Login, Signup, and Profile Completion Pages --- */

/* Login/Signup/Profile wrappers (children of the <main> tag) */
.login-page-wrapper, .signup-page-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically if it doesn't fill the scrollable space */
    align-items: center; /* Center content horizontally */
    flex-grow: 1; /* Allow this wrapper to fill available space within <main> */
    padding: 1rem var(--page-horizontal-padding); /* Keep original padding for these specific pages */
    height: auto; /* Let content dictate height, flex-grow will stretch */
    min-height: 0; /* Allow it to shrink correctly */
    overflow-y: visible; /* Let <main> handle the scrolling */
}


.login-container, .signup-container, .profile-container {
  max-width: 600px;
  width: 100%;
  padding: 30px;
  background: var(--clr-bg-light);
  border-radius: var(--border-radius-base);
  box-shadow: var(--shadow-md);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 0; /* Important: Don't let the inner card grow unnecessarily */
  overflow-y: visible; /* Content within card will not scroll independently unless explicitly set */
  min-height: fit-content;
}
.login-container { max-width: 400px; }

/* The logo-header in these pages (login, signup, profile) - will be mostly removed by main header */

.subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

form label, .password-label-row label {
  display: block;
  margin: 15px 0 5px;
  font-weight: bold;
  color: var(--clr-text);
}

.submit-btn {
  margin-top: 25px;
  width: 100%;
  padding: 12px;
  font-size: 1.1rem;
  background: var(--clr-primary-teal);
  color: var(--clr-bg-light);
  border-radius: var(--border-radius-base);
  font-weight: bold;
}
.submit-btn:hover { background: #109a9a; }

/* Centering the "OR" text */
.or-separator {
    text-align: center;
    margin: 20px 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.or-separator::before,
.or-separator::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background-color: var(--clr-text-dim);
}
.or-separator span {
    padding: 0 15px;
    color: var(--text-secondary);
    font-weight: bold;
}

.social-login-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  width: 100%;
  flex-wrap: wrap;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: var(--border-radius-base);
  font-weight: bold;
  font-size: 0.95rem;
  min-width: 120px;
  flex-grow: 1;
  color: var(--clr-text);
  background-color: var(--clr-bg-light);
  text-decoration: none;
}
.social-btn:hover { background-color: #f0f0f0; }
.social-btn img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.password-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.password-label-row a { color: var(--clr-primary-teal); text-decoration: none; font-size: 0.85rem;}
.password-label-row a:hover { text-decoration: underline; }

.signup-link {
    margin-top: 20px;
    font-size: 0.95rem;
    text-align: center;
}
.signup-link a { color: var(--clr-primary-teal); font-weight: bold; text-decoration: none; }
.signup-link a:hover { text-decoration: underline; }

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 15px;
}
.checkbox-group label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    font-weight: normal;
    color: var(--clr-text);
}


/* --- 10. Tutor Selection Page (Responsive & Fluid) --- */

/* This centers the content and reduces the vertical space */
.pick-tutor-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem var(--page-horizontal-padding);
    min-height: auto; /* Allow content to determine height */
    flex: 1; /* Take available space and allow scrolling */
}

/* This creates the 5-column grid and uses a fluid gap */
.tutor-selection-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(15px, 2vw, 25px);
    width: 100%;
    max-width: var(--content-max-width);
    margin-bottom: 2rem;
}

/* This section makes the cards and their content scale smoothly */
.tutor-card {
    background-color: var(--clr-bg-light);
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(10px, 1.5vw, 20px); /* Fluid padding */
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: visible; /* Changed from hidden to show all content */
    min-height: fit-content; /* Ensure card grows with content */
}

.tutor-card-image {
    width: clamp(100px, 12vw, 150px); /* Fluid image size */
    height: auto; /* Maintain aspect ratio */
    border-radius: 50%;
    object-fit: cover;
    object-position: center 15%;
    margin-bottom: 10px;
    border: 3px solid var(--clr-primary-teal);
    box-shadow: var(--shadow-sm);
}

.tutor-card-name {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem); /* Fluid font size */
    font-weight: var(--font-weight-headlines);
    color: var(--clr-text);
    margin-bottom: 5px;
}

.tutor-card-tagline {
    font-size: clamp(0.8rem, 1.2vw, 0.9rem); /* Fluid font size */
    color: var(--clr-text-dim);
    text-align: center;
    margin-bottom: 10px;
    min-height: 2.8em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- All your existing styles for hover, selection, and the overlay are preserved below --- */

.tutor-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--clr-primary-teal);
}

.tutor-card.selected {
    border-color: var(--clr-accent-hotpink);
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
}

.tutor-card-details-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
    font-size: 0.9em;
    color: var(--clr-text-dim);
    border-top: 1px solid rgba(var(--clr-primary-teal-rgb), 0.2);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    overflow-y: auto;
}

.tutor-card:hover .tutor-card-details-overlay,
.tutor-card.details-visible .tutor-card-details-overlay {
    transform: translateY(0%);
    opacity: 1;
}
.tutor-card-details-overlay h4 {
    font-size: 1.1em;
    margin-bottom: 8px;
    color: var(--clr-primary-teal);
    text-align: center;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(var(--clr-primary-teal-rgb), 0.2);
}
.tutor-card-details-overlay p {
    margin-bottom: 10px;
    font-size: 0.95em;
}

.tutor-actions-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}
.tutor-actions-bar .btn {
    min-width: 180px;
}
.tutor-actions-bar .btn-play {
    background-color: var(--clr-success-green);
}
.tutor-actions-bar .btn-play:hover {
    background-color: #16c86d;
}
.tutor-actions-bar .btn-select {
    background-color: var(--clr-primary-teal);
}
.tutor-actions-bar .btn-select:hover {
    background-color: #109a9a;
}

/* --- Media Queries for Structural Changes --- */

@media (max-width: 1024px) {
    .tutor-selection-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns on tablets */
    }
}

@media (max-width: 767px) {
    .tutor-selection-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on phones */
    }
}
/* --- 11. Parent/Teacher Dashboard Specific Styles --- */

/* Student Card (Teacher Dashboard) */
.student-card {
    background-color: var(--clr-bg-light);
    border: 1px solid rgba(var(--clr-primary-teal-rgb), 0.1);
    border-radius: var(--border-radius-base);
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}
.student-card strong {
    font-size: 1.1em;
    margin-bottom: 5px;
    color: var(--clr-text);
}
.student-card p {
    margin: 0 0 5px 0;
    color: var(--clr-text-dim);
}
.student-card .card-buttons {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.student-card .card-buttons .btn {
    padding: 8px 12px;
    font-size: 0.9em;
}


/* Parent Dashboard Specifics */
.child-card {
    background-color: var(--clr-bg-light);
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-md);
    padding: 15px;
    margin-bottom: 15px;
}

.child-card .child-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.child-card .child-header h2 {
    margin: 0;
    font-size: 1.3em;
    color: var(--clr-primary-teal);
}

.child-card .child-stats {
    font-size: 0.9em;
    color: var(--clr-success-green);
    font-weight: bold;
}

.child-card .child-summary-details {
    font-size: 0.9em;
    color: var(--clr-text-dim);
    margin-bottom: 15px;
    border-bottom: 1px dashed var(--clr-text-dim);
    padding-bottom: 10px;
}

.child-card .session-log-container {
    max-height: 150px;
    overflow-y: auto;
    font-size: 0.85em;
}

.child-card .session-entry {
    margin-bottom: 5px;
    padding: 5px;
    background-color: #f8f8f8;
    border-radius: 5px;
}
.child-card .session-entry em {
    color: #666;
}

/* Parent Chat Widget */
.parent-chat-widget {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}

.chat-header-widget {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--clr-text-dim);
}
.chat-header-widget select {
    width: auto;
    padding: 5px;
    font-size: 0.9em;
}

.chat-display-widget {
    flex-grow: 1;
    overflow-y: auto;
    border: 1px solid var(--clr-text-dim);
    border-radius: var(--border-radius-base);
    padding: 10px;
    background-color: #fefefe;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chat-display-widget .message-widget {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.9em;
}

.chat-input-widget {
    display: flex;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--clr-text-dim);
}
.chat-input-widget textarea {
    flex-grow: 1;
    min-height: 40px;
    max-height: 100px;
    font-size: 0.95em;
}
.chat-input-widget .send-button-widget {
    padding: 8px 15px;
    font-size: 0.95em;
    flex-shrink: 0;
}


/* --- 12. Modal Styles (CORRECTED) --- */

/* This rule hides the modal by default and prepares it for a fade-in transition */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none; /* Use display to truly hide it */
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0; /* Start transparent */
    transition: opacity 0.3s ease;
}

/* This is the class JavaScript will add to show the modal */
.modal-overlay.is-visible {
    display: flex; /* Change display to show the element */
    opacity: 1; /* Fade it into view */
}

/* Modal Content Box */
.modal-content {
    background: var(--clr-bg-light);
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-lg);
    padding: 30px;
    position: relative;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Adjust max-width for IEP/Conversation history if needed */
#iep-editor-modal .modal-content, #conversation-history-modal .modal-content {
    max-width: 800px;
}

.modal-overlay.is-visible .modal-content {
    transform: translateY(0);
    opacity: 1;
}

/* Equation Modal - Draggable Positioning */
#equation-modal .modal-content {
    position: fixed;
    /* Allow JavaScript to position it */
}

#equation-modal .modal-header-eq {
    user-select: none; /* Prevent text selection while dragging */
    padding: 10px 15px;
    background: linear-gradient(135deg, #12B3B3, #0ea5a5);
    color: white;
    border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
    margin: -30px -30px 20px -30px;
}

/* MathLive Virtual Keyboard - Fix Z-Index */
.ML__keyboard {
    z-index: 10000 !important; /* Above modal overlay (z-index: 2000) */
}

.ML__keyboard-backdrop {
    z-index: 9999 !important; /* Just below keyboard */
}

/* Ensure modal allows keyboard to show */
#equation-modal {
    overflow: visible !important;
}

#equation-modal .modal-content {
    overflow: visible !important;
}

/* Send Button - Full Width */
.send-button-fullwidth {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* --- Inline Equation Palette (MS Word-like) --- */
.inline-equation-palette {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 15px;
    margin-bottom: 10px;
    z-index: 1000;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.equation-palette-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.equation-palette-header span {
    font-weight: 600;
    color: #333;
    font-size: 0.9em;
}

.palette-close-btn {
    background: none;
    border: none;
    font-size: 1.5em;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    line-height: 1;
}

.palette-close-btn:hover {
    color: #333;
}

.equation-symbols-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
    gap: 6px;
    margin-bottom: 15px;
}

.symbol-btn {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.symbol-btn:hover {
    background: #12B3B3;
    color: white;
    border-color: #12B3B3;
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(18, 179, 179, 0.3);
}

.inline-math-field-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.inline-math-field-container label {
    font-size: 0.85em;
    color: #666;
    white-space: nowrap;
}

.inline-math-field {
    flex: 1;
    font-size: 1.1rem;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fdfdfd;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.85em;
}

/* Close Button (top-right 'x') */
.modal-close-button {
    position: absolute;
    top: 15px; right: 15px;
    background: none;
    border: none;
    font-size: 2em;
    cursor: pointer;
    color: #aaa;
    padding: 0 5px;
}
.modal-close-button:hover, .modal-close-button:focus {
    color: var(--clr-text);
    text-decoration: none;
}

/* Modal Section Headers */
.modal-section h3 {
    margin-top: 25px;
    margin-bottom: 15px;
    color: var(--clr-text);
    border-bottom: 1px solid var(--clr-text-dim);
    padding-bottom: 5px;
}
.modal-form-group {
    margin-bottom: 15px;
}
.modal-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
.modal-form-group input[type="text"],
.modal-form-group input[type="email"],
.modal-form-group input[type="number"],
.modal-form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}


/* Modal Action Buttons (Save/Cancel) */
.modal-actions, .form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--clr-text-dim);
}

.save-button, .cancel-button {
    padding: 12px 25px;
    border-radius: var(--border-radius-base);
    font-size: 1.1em;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.save-button { background-color: var(--clr-primary-teal); color: var(--clr-bg-light); border: none; }
.save-button:hover { background-color: #109a9a; }
.cancel-button { background-color: var(--clr-text-dim); color: var(--clr-bg-light); border: none; }
.cancel-button:hover { background-color: #4a5763; }

/* Specific IEP Editor Styles */
#iep-editor-content {
    padding-top: 10px;
}
#iep-editor-content .checkbox-group label {
    margin-right: 20px;
}
#iep-editor-content input[type="number"],
#iep-editor-content input[type="date"],
#iep-editor-content input[type="text"],
#iep-editor-content textarea,
#iep-editor-content select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}
#iep-goals-list {
    list-style: none;
    padding: 0;
}
.iep-goal-item {
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius-base);
    padding: 15px;
    margin-bottom: 15px;
    background-color: var(--clr-bg-light);
    box-shadow: var(--shadow-sm);
}
.iep-goal-item label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}
.iep-goal-item hr {
    margin: 15px 0;
    border: 0;
    border-top: 1px dashed #eee;
}
.remove-goal-btn {
    background-color: var(--clr-error-red);
    color: var(--clr-bg-light);
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 10px;
    float: right;
}
.remove-goal-btn:hover {
    background-color: #ed4040;
}
#add-iep-goal-btn {
    background-color: var(--clr-primary-teal);
    color: var(--clr-bg-light);
    padding: 10px 20px;
    border-radius: 10px;
}
#add-iep-goal-btn:hover { background-color: #109a9a; }


/* Admin Dashboard Modal Specifics */
.info-display-group {
    margin-bottom: 10px;
    padding: 8px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
}
.info-display-group strong {
    color: var(--clr-text);
}
.conversation-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: var(--border-radius-base);
    background-color: #fefefe;
}
.conversation-item {
    padding: 10px;
    border-bottom: 1px dashed #eee;
    margin-bottom: 10px;
}
.conversation-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}


/* Conversation Summary Cards (Teacher Dashboard) */
.conversation-card {
    background-color: var(--clr-bg-light);
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius-base);
    padding: 15px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
}
.conversation-card h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--clr-text);
    font-size: 1.1em;
}
.conversation-card p {
    margin: 0 0 5px 0;
    font-size: 0.95em;
    line-height: 1.4;
    color: var(--clr-text-dim);
}
.conversation-card .session-date {
    font-size: 0.85em;
    color: #7f8c8d;
    margin-bottom: 5px;
}


/* --- 13. Animations --- */
.xp-animation-text, .level-up-animation-text {
    font-weight: bold;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    font-size: 1.2rem;
    position: fixed;
}

.xp-animation-text { color: var(--clr-success-green); }
.xp-animation-text.special-xp { color: var(--clr-warning-gold); font-size: 1.4rem; }
.level-up-animation-text { color: var(--clr-primary-teal); font-size: 1.6rem; }

.animate-xp { animation: xpFlyUpFade 1.5s ease-out forwards; }
@keyframes xpFlyUpFade {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-100px); }
}

.animate-level-up { animation: levelUpPopFade 2s ease-out forwards; }
@keyframes levelUpPopFade {
    0% { opacity: 0; transform: scale(0.5); }
    30% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(0.9) translateY(-50px); }
}


/* --- 14. Mobile Drawers & Responsiveness --- */

/* Drawers for mobile (hidden by default) */
.drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 280px;
    max-width: 80%;
    overflow-y: auto;
    background: var(--clr-bg-light);
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s ease;
    z-index: 900;
    padding: var(--dashboard-panel-padding);
    display: flex;
    flex-direction: column;
    gap: var(--dashboard-panel-padding);
    box-sizing: border-box;
}
.drawer.left {
    left: 0;
    transform: translateX(-100%);
    border-right: 1px solid var(--clr-text-dim);
}
.drawer.right {
    right: 0;
    transform: translateX(100%);
    border-left: 1px solid var(--clr-text-dim);
}
.drawer.open {
    transform: translateX(0);
}

/* Drawer Toggles for Mobile */
.drawer-toggle {
    display: none;
    position: fixed;
    top: 15px;
    width: 45px;
    height: 45px;
    border: none;
    background: var(--clr-primary-teal);
    color: var(--clr-bg-light);
    font-size: 1.5rem;
    z-index: 910;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
}
.drawer-toggle:hover {
    background: #109a9a;
}
.drawer-toggle.left {
    left: 15px;
}
.drawer-toggle.right {
    right: 15px;
}


@media screen and (max-width: 1024px) {
    /* Adjustments for larger tablets/smaller desktops */
    :root {
        --section-gap: 50px;
        --brand-h1-font-size: 2.5em;
        --brand-h3-font-size: 1.3em;
    }
    h1 { font-size: var(--brand-h1-font-size); }
    h3 { font-size: var(--brand-h3-font-size); }

    .hero-tagline {
        font-size: 2.2em;
    }
    .hero-subtagline {
        font-size: 1.1em;
    }
    /* Header responsiveness for wrapped state */
    .landing-header {
        flex-direction: row; /* Keep row for wider tablets */
        align-items: center;
        flex-wrap: nowrap; /* Prevent wrapping unless truly necessary */
    }
    .header-logo-container {
        width: auto;
        flex-grow: 0; /* Let logo be its size */
    }
    .landing-nav {
        margin-top: 0;
    }
    .hero-section {
        flex-direction: column; /* Back to column for tablets if side-by-side gets cramped */
        text-align: center;
    }
    .hero-content {
        max-width: 800px; /* Allow content to use more width */
    }
    .hero-actions {
        justify-content: center;
    }


    .pricing-cards-grid,
    .visual-feature-grid,
    .approach-grid,
    .feature-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;
    }
    .testimonial-grid {
        grid-template-columns: 1fr; /* Single column on tablet if two get too narrow */
    }

    /* Avatar container responsive - prevent too tall on tablets */
    #avatar-container {
        min-height: 350px;
        max-height: 450px;
    }

    /* Chat layout adjustments */
    #app-layout-wrapper {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - var(--footer-height) - 20px);
        padding: 0px 15px;
    }
    .admin-main-content {
        flex-direction: column;
        align-items: center;
        gap: var(--section-gap);
        height: auto;
    }
    .admin-widget-sidebar, .widget-sidebar-left, .widget-sidebar-right {
        width: 100%;
        flex: auto;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        overflow-y: visible;
        min-width: unset;
        padding: 0;
        gap: 20px;
    }
    .admin-central-content, #chat-container {
        width: 100%;
        min-width: unset;
        flex: auto;
        height: auto;
        border: 1px solid var(--clr-text-dim);
        border-radius: var(--border-radius-base);
        box-shadow: var(--shadow-sm);
    }
    .dashboard-panel {
        flex-grow: 1;
    }

    /* Tutor selection */
    .tutor-selection-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media screen and (max-width: 767px) {
    /* Adjustments for phones */
    :root {
        --header-height: 60px;
        --page-horizontal-padding: 10px;
        --section-gap: 40px;
        --brand-h1-font-size: 2em;
        --brand-h3-font-size: 1.2em;
        --brand-base-font-size: 0.95rem;
    }
    h1 { font-size: var(--brand-h1-font-size); }
    h2 { font-size: 1.8em; }
    h3 { font-size: var(--brand-h3-font-size); }

    .landing-header {
        padding: 10px var(--page-horizontal-padding);
        border-radius: 0;
        box-shadow: none;
        flex-direction: column; /* Stack logo and nav vertically on very small screens */
        align-items: center;
    }
    .header-logo-container {
        width: 100%; /* Take full width for centering */
        justify-content: center; /* Center logo on small screens */
    }
    .main-logo-hero {
        max-height: 60px;
    }
    .landing-nav {
        gap: 10px;
        margin-top: 10px; /* Add margin after logo */
    }
    .btn-primary, .btn-primary-outline, .btn-secondary, .btn-tertiary {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
    .hero-tagline {
        font-size: 1.8em;
    }

    /* Avatar container responsive - smaller on mobile */
    #avatar-container {
        min-height: 250px;
        max-height: 350px;
    }

    .hero-subtagline {
        font-size: 1em;
    }
    .hero-actions {
        flex-direction: column;
        gap: 10px;
    }
    .btn-hero-primary, .btn-hero-secondary {
        width: 100%;
        font-size: 1rem;
        padding: 0.8rem 1.5rem;
    }
    .section-title {
        font-size: 2em;
        margin-bottom: 30px;
    }
    .visual-feature-grid,
    .approach-grid,
    .pricing-cards-grid,
    .feature-cards-grid,
    .testimonial-grid { /* Ensure testimonial grid also goes to single column */
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .visual-feature-item {
        min-height: auto;
        padding: 20px;
    }
    .visual-feature-image {
        height: 80px; /* Smaller image height on mobile */
    }
    .approach-icon {
        width: 70px; /* Even smaller approach icons */
        height: 70px;
    }

    .accordion-container {
        padding: 0 10px;
    }
    .accordion-header {
        font-size: 1em;
    }

    /* Chat layout mobile */
    #app-layout-wrapper {
        padding: 0;
    }
    .admin-main-content {
        gap: var(--dashboard-panel-padding);
    }
    .admin-widget-sidebar, .widget-sidebar-left, .widget-sidebar-right {
        display: none;
    }
    .drawer-toggle {
        display: flex;
    }
    #chat-container {
        padding: 10px;
        min-width: unset;
        border-radius: 0;
        box-shadow: none;
    }
    #input-container {
        padding-top: 5px;
    }
    #user-input {
        min-height: 40px;
        font-size: 14px;
    }
    #send-button {
        padding: 8px 15px;
        font-size: 0.9rem;
    }
    .message {
        font-size: 0.85em;
        padding: 10px 14px;
    }

    /* Tutor selection mobile */
    .tutor-selection-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .tutor-card {
        padding: 30px;
    }
    .tutor-card-image {
        width: 100px;
        height: 100px;
    }
    .tutor-card-name {
        font-size: 1.2em;
    }
    .tutor-card-tagline {
        font-size: 0.9em;
    }
    .tutor-actions-bar {
        flex-direction: column;
        gap: 15px;
    }
    .tutor-actions-bar .btn {
        width: 100%;
    }
}


/* Print Styles */
@media print {
    body {
        background-color: white !important;
        color: black !important;
    }
    /* Hide navigational elements */
    header, footer, .drawer, .drawer-toggle, #input-container, #thinking-indicator,
    .logout-button, .btn, .modal-overlay, .submit-btn, .cancel-btn,
    .admin-widget-sidebar, .widget-sidebar-left, .widget-sidebar-right,
    .landing-nav, .hero-actions, .pricing-card .btn, .access-grants-note,
    .testimonial-carousel, .school-logos-container, .accordion-header, .final-cta-section .btn {
        display: none !important;
    }
    /* Make main content flow */
    #app-layout-wrapper, .admin-main-content, #chat-container, .tutor-details,
    main,
    .pricing-equity-section, .how-it-works-section,
    .feature-grid-section, .social-proof-section, .faq-section, .final-cta-section,
    .pricing-cards-grid, .stepper-container, .feature-cards-grid, .accordion-container {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        background-color: white !important;
    }

    .hero-section {
        display: flex !important;
        flex-direction: column !important;
        text-align: left !important;
        padding: 0 !important;
        background: none !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    .hero-image-card {
        max-width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        box-shadow: none !important;
        margin: 10px 0 !important;
    }
    .hero-classroom-image {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        border-radius: 0 !important;
        display: block !important;
    }

    .message {
        border: 1px solid #ddd;
        page-break-inside: avoid;
        margin-bottom: 10px;
    }
    .user-table, #leaderboardTable {
        border: 1px solid #000;
    }
    .user-table th, .user-table td, #leaderboardTable th, #leaderboardTable td {
        border: 1px solid #000;
        padding: 5px;
    }
    /* Ensure cards and accordions render content */
    .card-style-1, .accordion-item {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        margin-bottom: 15px !important;
        padding: 15px !important;
        border-radius: 0 !important;
    }
    .accordion-content {
        max-height: unset !important;
        display: block !important;
        padding: 0 10px !important;
    }
}


.settings-form {
    margin-top: 20px;
}
.form-group.settings-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.setting-description {
    font-size: 0.9em;
    color: var(--clr-text-dim);
    margin-bottom: 20px;
}
/* Basic toggle switch styling */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* --- NEW: Per-Message Play Button --- */
.message.ai {
    position: relative; /* Needed for positioning the button */
    padding-right: 40px; /* Add space for the button */
}
.play-audio-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--clr-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease;
}
.message.ai:hover .play-audio-btn {
    opacity: 1; /* Show on hover */
}
.play-audio-btn:hover {
    background-color: rgba(0, 0, 0, 0.2);
}
/* --- 15. Exquisite Math Rendering Enhancements --- */

/*
 * Tweak 1: Better Vertical Alignment for Inline Math
 * This rule helps center inline math (like a variable 'x') with the
 * surrounding text, preventing it from looking slightly misaligned.
*/
.message .ML__base[display="inline"] {
    vertical-align: -0.1ex; /* Adjusts baseline alignment */
}

/*
 * Tweak 2: More Generous Spacing for Standalone Equations
 * You already added vertical margins, which is great! This adds a subtle
 * background color and padding to make display equations a focal point.
*/
.message .ML__base[display="block"] {
    padding-block: 0.5em;        /* Adds a bit more padding top/bottom */
    padding-inline: 1em;         /* Adds padding left/right */
    margin-block: 1em;           /* Increases existing vertical margin slightly */
    border-radius: 6px;          /* Softly rounded corners */
    background-color: rgba(var(--clr-primary-teal-rgb), 0.03); /* Faint, elegant background */
    overflow-x: auto;            /* Allows scrolling for very wide equations */
}

/*
 * Tweak 3: Increase Font Size for Better Readability
 * Making the math slightly larger than the surrounding text makes
 * complex fractions, exponents, and subscripts much easier to read.
*/
.message .ML__math-part {
    font-size: 1.05em; /* A 5% increase is subtle but effective */
}

/*
 * Tweak 4: Refine the Math Editor in the Modal
 * This gives the input area where users type LaTeX more breathing room
 * and a cleaner look, improving the creation experience.
*/
#equation-modal .math-editor-input {
    font-size: 1.25rem;       /* Larger font for easy typing */
    padding: 15px;            /* More internal padding */
    border-radius: 6px;
    border: 1px solid #ddd;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
    background-color: #fdfdfd;
}

/* --- 16. Graph Rendering Styles --- */
.graph-render-area {
    width: 100%;
    height: 300px;
    margin-top: 15px;
    background-color: #fff;
    border-radius: var(--border-radius-base);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    padding: 10px;
}
.graph-render-area svg {
    width: 100%;
    height: 100%;
}

/* Add these styles to make the login form more compact */

.login-container {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem; /* Reduces top/bottom padding */
}

.login-container .main-logo-hero {
    margin-bottom: 1.25rem; /* Reduces space below logo */
    max-height: 50px;
}

.login-container h1 {
    margin-bottom: 0.25em; /* Tucks the subtitle closer to the title */
}

.login-container .subtitle {
    margin-bottom: 1rem; /* Reduces space below subtitle */
}

.login-container form label {
  margin-top: 0.75rem; /* Reduces space above form labels */
}

.login-container .submit-btn {
  margin-top: 1.25rem; /* Reduces space above the main login button */
}

.login-container .or-separator {
    margin-top: 1rem;
    margin-bottom: 1rem; /* Reduces space around the "OR" text */
}

.login-container .signup-link {
    margin-top: 1rem; /* Reduces space at the very bottom */
}

/* --- UI Layout Fix for Scrollable Chat --- */

/* 1. Constrain the body to the viewport height and prevent it from scrolling. */
body {
    height: 100vh;
    overflow: hidden;
}

/* 2. Ensure the main content area properly fills the space between the header and footer. */
main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Crucial for nested flex layouts */
    overflow: hidden;
}

/* 3. Make the app wrapper fill the main content area. */
#app-layout-wrapper {
    flex-grow: 1;
    min-height: 0;
}

/* 4. Change the chat container to stretch vertically instead of growing with content. */
#chat-container {
    /* This overrides the problematic 'height: auto' */
    height: 100%;

    /* The original 50px gap is too large for this context; let's reduce it. */
    gap: 1rem; /* 16px */
}

/* 5. Your message container is already correctly configured with flex-grow and overflow.
      These rules are here just to confirm the setup. With its parent's height now
      fixed, it will behave as expected. */
#chat-messages-container {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
}

/* --- Confetti Canvas Style --- */
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Allows clicks to pass through */
  z-index: 9999; /* Ensures it's on top of everything */
}

/* --- Enhanced Speak UX Styles --- */

/* Style for the new global stop button */
#stop-audio-btn {
    background-color: var(--clr-error-red);
    color: var(--clr-bg-light);
}
#stop-audio-btn:hover {
    background-color: #e63c3c; /* Darken red on hover */
}

/* Style for the per-message play button when audio is playing */
.play-audio-btn.is-playing .fa-play {
    display: none; /* Hide the play icon */
}
.play-audio-btn .fa-wave-square {
    display: none; /* Hide the wave icon by default */
}
.play-audio-btn.is-playing .fa-wave-square {
    display: inline-block; /* Show the wave icon when playing */
    animation: pulse 1.2s infinite ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Add a spinner for the loading state */
.play-audio-btn .fa-spinner {
    display: none; /* Hide spinner by default */
}
.play-audio-btn.is-loading .fa-spinner {
    display: inline-block; /* Show spinner when loading */
    animation: fa-spin 1s infinite linear;
}
.play-audio-btn.is-loading .fa-play,
.play-audio-btn.is-loading .fa-wave-square {
    display: none; /* Hide other icons when loading */
}

.message.mastery-quiz {
  border: 2px solid var(--clr-primary-teal);
  background-color: rgba(var(--clr-primary-teal-rgb), 0.05);
  box-shadow: var(--shadow-md);
}

/* --- Tutor Unlock System Styles --- */
.tutor-card.locked {
    cursor: not-allowed;
    filter: grayscale(80%) brightness(70%);
}

.tutor-card.locked:hover {
    transform: none; /* Disable hover effect */
    box-shadow: var(--shadow-md); /* Keep original shadow */
    border-color: transparent;
}

.tutor-card-image.silhouette {
    filter: brightness(0) invert(0.1); /* Creates a dark silhouette effect */
    opacity: 0.8;
}

.tutor-card-name.locked-name {
    color: var(--clr-text-dim);
}

.tutor-card .tutor-card-tagline .fa-lock {
    margin-right: 8px;
    font-size: 0.9em;
}

/* --- Right Sidebar Layout Fix --- */

/* 1. Give the right sidebar a smaller, more reasonable gap between widgets. */
.widget-sidebar-right {
    gap: 20px;
}

/* 2. The top two panels don't need to change, their default styles are fine. */
#xp-level-display,
#student-parent-link-display {
    flex-grow: 0; /* Prevents them from shrinking */
}

/* 3. Make the avatar container flexible and push it to the bottom. */
#avatar-container {
    height: auto;       /* Remove the fixed 350px height */
    flex-grow: 1;       /* Allow the container to grow and fill empty space */
    flex-shrink: 1;     /* Allow the container to shrink if needed */
    margin-top: auto;   /* This pushes the avatar to the bottom of the sidebar */
    min-height: 150px;  /* Give it a minimum height so it doesn't disappear */
}

/* 4. Ensure the image inside the avatar container scales properly. */
#student-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Keeps the image's aspect ratio without stretching */
}

/* --- Compact Signup Form Styles --- */

/* Reduce the signup form's main top/bottom padding */
.signup-container {
    padding-top: 25px;
    padding-bottom: 25px;
}

/* This is the most important change: it reduces the large space above each form field label */
.signup-container form label {
    margin-top: 12px;
    margin-bottom: 4px;
}

/* Reduces the space below the descriptive paragraphs */
.signup-container p {
    margin-bottom: 12px;
}

/* Tucks the checkbox/radio button group closer to its label */
.signup-container .checkbox-group {
    margin-top: 5px;
    margin-bottom: 15px;
}

/* Reduces the space above the final submit button */
.signup-container .submit-btn {
    margin-top: 20px;
}

/* --- Enhanced Locked Tutor Silhouette Styles --- */

/* This prepares the container that holds the image */
.tutor-card.locked .tutor-card-image {
    position: relative; /* Needed to position the lock icon */
    border-style: dashed;
    border-color: var(--clr-text-dim);
}

/* This targets the actual image and turns it into a silhouette */
.tutor-card-image.silhouette {
    filter: brightness(0) saturate(0%) opacity(40%);
}

/* This adds the lock icon on top of the silhouetted image */
.tutor-card.locked .tutor-card-image::after {
    content: '\f023'; /* Font Awesome lock icon unicode */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.6); /* Semi-transparent white */
    
    /* Center the icon */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* --- Tutor Selection Page Layout Fix --- */

/* Reduce the top/bottom space of the main container */
.pick-tutor-main {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Reduce the space below the title */
.pick-tutor-main h1 {
    margin-bottom: 0.25rem;
}

/* Reduce the space below the subtitle */
.pick-tutor-main p {
    margin-bottom: 2rem;
}

/* Reduce the bottom margin of the tutor grid */
.tutor-selection-grid {
    margin-bottom: 2rem;
}

/* --- Modal Styles --- */
.modal-overlay {
    display: none; /* Hidden by default */
    position: fixed; /* Stays in place even if the page scrolls */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    z-index: 1000; /* Ensures it's on top */
    justify-content: center;
    align-items: center;
}

/* This class is added by JavaScript to show the modal */
.modal-overlay.is-visible {
    display: flex; /* Use flexbox to center the content */
}

.modal-content {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 800px; /* Adjust max-width as needed */
    max-height: 90vh;
    overflow-y: auto;
}

/* Fix 1: Tutor Page Spacing & Card Redesign */

/* Tighten the header and instruction spacing */
.pick-tutor-main h1.section-title {
    margin-bottom: 0.5rem; /* Reduces space after the main title */
}
.pick-tutor-main p.subtitle {
    margin-bottom: 2rem; /* Reduces space after the instructions */
}

/* Make the cards shorter by default */
.tutor-card {
    min-height: 220px; /* Reduces the default height of the cards */
}

/* Hide the tagline by default */
.tutor-card .tutor-card-tagline {
    display: none;
}

/* Show the tagline INSIDE the hover overlay */
.tactor-card:hover .tutor-card-tagline {
    display: block; /* Or 'flex' if you need alignment */
    font-size: 1em;
    font-style: italic;
    color: var(--clr-text-dim);
    margin-bottom: 15px;
    text-align: center;
}

/* Fix 2: Complete Profile Page Header Overlap & Scrolling */

.login-page-wrapper {
    justify-content: flex-start; /* Aligns the form to the top */
    padding-top: 3rem;          /* Adds some space below the header */
    padding-bottom: 3rem;       /* Adds space above the footer */
}

./* --- Toast Message --- */
.toast-message {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 100%); /* Start hidden below */
    background-color: #12B3B3;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 10000;
    opacity: 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    font-size: 1rem;
    font-weight: 500;
}

.toast-message.visible {
    transform: translate(-50%, 0); /* Move to final position */
    opacity: 1;
}

/* --- Floating Draggable Whiteboard Panel --- */
#whiteboard-panel {
    /* Core floating properties */
    position: absolute;
    top: 10%;
    right: 20px;
    z-index: 1000;

    /* Sizing and appearance */
    width: 450px;
    height: 550px;
    background-color: #fff;
    box-shadow: 0 8px 30px rgba(18, 179, 179, 0.15);
    border-radius: var(--border-radius-base);
    border: 2px solid var(--clr-primary-teal);

    /* Flex layout for header/toolbar/canvas */
    display: flex;
    flex-direction: column;

    /* Transition for smooth show/hide */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#whiteboard-panel.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#whiteboard-panel .dashboard-panel-header {
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--clr-primary-teal), #0D9999);
    color: white;
    border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
    border-bottom: 2px solid var(--clr-primary-teal);
}

#whiteboard-panel .dashboard-panel-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: white;
}

.whiteboard-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.icon-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

#close-whiteboard-btn {
    font-size: 1.5rem;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

#close-whiteboard-btn:hover {
    transform: scale(1.2);
}

/* --- Whiteboard Toolbar --- */
.whiteboard-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #f9f9f9;
    border-bottom: 1px solid #e0e0e0;
    flex-wrap: wrap;
}

.tool-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--clr-text);
}

.tool-btn:hover {
    border-color: var(--clr-primary-teal);
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(18, 179, 179, 0.2);
}

.tool-btn.active {
    background: var(--clr-primary-teal);
    border-color: var(--clr-primary-teal);
    color: white;
}

.toolbar-divider {
    width: 1px;
    height: 30px;
    background: #ddd;
    margin: 0 4px;
}

.color-palette {
    display: flex;
    gap: 6px;
    align-items: center;
}

.color-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.color-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.color-btn.active {
    border-color: var(--clr-primary-teal);
    transform: scale(1.15);
}

.brush-size-control {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--clr-text-dim);
}

.brush-size-control label {
    font-weight: 600;
}

#brush-size {
    width: 60px;
    accent-color: var(--clr-primary-teal);
}

#brush-size-value {
    font-weight: 700;
    color: var(--clr-primary-teal);
    min-width: 20px;
    text-align: center;
}

.template-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--clr-text-dim);
}

.template-selector label {
    font-weight: 600;
}

#background-template {
    padding: 4px 8px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 0.85rem;
    background: white;
    color: var(--clr-text);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

#background-template:hover {
    border-color: var(--clr-primary-teal);
}

#background-template:focus {
    outline: none;
    border-color: var(--clr-primary-teal);
    box-shadow: 0 0 0 3px rgba(18, 179, 179, 0.1);
}

/* --- Canvas Styling --- */
#tutor-canvas {
    width: 100%;
    flex: 1;
    background-color: #ffffff;
    border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
    cursor: crosshair;
}

/* --- UI Overhaul Based on Design Notes --- */

/* 1. Logo Prominence */
.main-logo-hero {
  transform: scale(1.5);
  transform-origin: left center;
  margin-left: 1rem;
}

/* 2. Consistent Panel Titles */
.dashboard-panel-header h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 3. Right Sidebar Flex Layout & Widget Sizing */
.widget-sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Adds space between sidebar panels */
}

#xp-level-display, #student-parent-link-display {
  flex-grow: 0;
  flex-shrink: 0;
}

/* 4. Enlarge Avatar */
#avatar-container {
  flex-grow: 1;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#avatar-container #student-avatar img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

/* 5. Widen Chat Window */
#app-layout-wrapper {
  /* Adjust these values to your preference */
  /* Format: left-sidebar center-chat right-sidebar */
  grid-template-columns: 240px 1fr 240px;
}

/* --- Universal Widget Styling --- */
.dashboard-panel {
  border: 2px solid #000; /* The black outline from your sketch */
  border-radius: 12px;     /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Optional: A subtle shadow for depth */
}

/* --- Proportional Right Sidebar Layout (Final) --- */

/* 1. Set up the sidebar as a flexible column */
.widget-sidebar-right {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px); /* Adjust 120px to match header/footer height */
  gap: 1rem;
}

/* 2. Assign the growth proportions and apply the fix */
#avatar-container {
  flex-grow: 9; /* 9/8 = 1.5x taller than previous 6/8 */
  min-height: 0; /* FIX: Allows the element to shrink */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff !important; /* Force white background */
}

#xp-level-display {
  flex-grow: 3; /* 3/8 of the space */
  min-height: 0; /* FIX: Allows the element to shrink */
}

#student-parent-link-display {
  flex-grow: 0.5; /* 0.5/8 of the space - half the previous size */
  min-height: 0; /* FIX: Allows the element to shrink */
}

/* 3. Ensure the avatar image fits its container */
#avatar-container #student-avatar {
  height: 100%;
  width: 100%;
}

#avatar-container #student-avatar img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

/* Videos fill container vertically (landscape optimized) */
#avatar-container #student-avatar video {
  height: 100%;
  width: auto; /* Allow width to expand based on aspect ratio */
  object-fit: cover;
  object-position: center 25%;
  min-width: 100%; /* Ensure video fills at least the container width */
}

/* --- Tutor Selection Page - BALANCED LAYOUT FIX --- */

/* 1. Restore comfortable vertical padding for the main container. */
.pick-tutor-main {
    padding-top: 2rem;
    padding-bottom: 2rem;
    gap: 0;
}

/* 2. Maintain tight spacing for the title and subtitle. */
.pick-tutor-main h1.section-title {
    margin-bottom: 0.5rem;
}
.pick-tutor-main .subtitle {
    margin-bottom: 2rem;
}

/* 3. Re-introduce better spacing for the tutor grid. */
.tutor-selection-grid {
    gap: clamp(15px, 2vw, 25px); /* Restore a responsive gap */
    margin-bottom: 2rem;
}

/* 4. Restore the card design with a polished, less-cramped look. */
.tutor-card {
    min-height: auto;
    padding: 20px; /* Increase padding for a better feel */
    background-color: var(--clr-bg-light); /* Restore white background */
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-md); /* Bring back the shadow */
    border: 2px solid transparent; /* Restore border for hover/selection */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* 5. Slightly enlarge the avatar and name for better visibility. */
.tutor-card-image {
    width: 110px; /* Enlarge avatar from the cramped 90px */
    height: 110px;
    margin-bottom: 12px;
}

.tutor-card-name {
    font-size: 1rem; /* Restore original font size */
    font-weight: var(--font-weight-headlines);
    margin-bottom: 0;
}

/* 6. Ensure the action bar is positioned correctly. */
.tutor-actions-bar {
    margin-top: 0;
}

/* --- Video Avatar Sizing & Cropping Fix --- */

#tutor-video {
    width: 100%;
    height: 100%;
    
    /* This is the key property. It zooms the video to fill the space. */
    object-fit: cover; 
    
    /* This helps position the character. 'center' is horizontal, 
       '25%' is vertical (pulls the character up slightly).
       You can adjust the 25% value to frame it perfectly. */
    object-position: center 25%;
}

/* ============================================
   ELEGANT FILE UPLOAD SYSTEM
   ============================================ */

/* File Grid Container */
.file-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    padding: 12px 0;
    max-height: 300px;
    overflow-y: auto;
    width: 100%;
}

.file-grid-container:empty {
    display: none;
}

/* Individual File Card */
.file-card {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fileCardEnter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fileCardEnter {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes fileCardExit {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.8) translateY(-10px);
    }
}

.file-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* File Preview Image */
.file-card-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #f5f5f5;
}

/* File Overlay */
.file-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.file-card-name {
    color: white;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: 4px;
}

/* Remove Button */
.file-card-remove {
    background: rgba(255, 59, 48, 0.9);
    border: none;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}
/* ============================================
   TEACHER DASHBOARD TABS & HOMEWORK
   ============================================ */

/* Tab Navigation */
.dashboard-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.tab-btn {
    background: #fff;
    border: 2px solid #e9ecef;
    padding: 10px 20px;
    border-radius: 8px 8px 0 0;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-btn:hover {
    border-color: #12B3B3;
    background: #f8f9fa;
}

.tab-btn.active {
    background: #12B3B3;
    color: white;
    border-color: #12B3B3;
}

.tab-btn i {
    font-size: 14px;
}

/* Tab Content */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Homework Table */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table thead {
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
}

.data-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: #18202B;
}

.data-table td {
    padding: 12px;
    border-bottom: 1px solid #e9ecef;
}

.data-table tbody tr:hover {
    background: #f8f9fa;
}

.data-table .btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}

/* Question Items in Modal */
.question-item {
    position: relative;
}

.question-item label {
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 0.9em;
}

.question-item input[type="text"],
.question-item input[type="number"],
.question-item textarea,
.question-item select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.question-item textarea {
    resize: vertical;
}

.file-grid-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ============================================
   ANIMATED TUTOR AVATAR SYSTEM
   ============================================ */

.tutor-animated-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    border-radius: 16px; /* Changed from 50% to match rectangular portrait frame */
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

#student-avatar {
    position: relative;
    overflow: hidden; /* Clips the scaled video to hide black bars */
    border-radius: 16px; /* Changed from 50% to rectangular portrait frame */
    background: #ffffff !important; /* Force white background */
}

/* White background behind all content */
#student-avatar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    border-radius: 16px; /* Match the container border-radius */
    z-index: -1;
}

/* Smooth video transitions */
#tutor-video {
    display: block;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff !important; /* Force white background */
    position: relative;
    z-index: 1;
}

/* Secondary video for crossfade transitions */
#tutor-video-secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff !important;
    z-index: 2;
}

/* ============================================
   CSS ANIMATIONS FOR ALL TUTORS
   ============================================ */

/* Gentle breathing effect - subtle scale */
@keyframes tutorBreathe {
    0%, 100% {
        transform: scale(1) translateY(0);
    }
    50% {
        transform: scale(1.02) translateY(-2px);
    }
}

/* Floating motion - smooth up/down */
@keyframes tutorFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Subtle pulse for extra life */
@keyframes tutorPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}

/* Glow effect when speaking */
@keyframes tutorSpeakGlow {
    0%, 100% {
        filter: drop-shadow(0 0 0 transparent);
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(18, 179, 179, 0.4));
    }
}

/* Level-up celebration glow */
@keyframes tutorLevelUpGlow {
    0%, 100% {
        filter: drop-shadow(0 0 0 transparent);
    }
    50% {
        filter: drop-shadow(0 0 25px rgba(18, 179, 179, 0.7));
    }
}

/* Apply breathing to static tutor images */
#student-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    border-radius: 16px; /* Changed from 50% to match rectangular frame */
    animation: tutorBreathe 4s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Speaking state - add glow */
#student-avatar.speaking img,
#student-avatar.speaking video {
    animation: tutorBreathe 4s ease-in-out infinite,
               tutorSpeakGlow 2s ease-in-out infinite;
}

/* Level-up state - celebration */
#student-avatar.level-up img,
#student-avatar.level-up video {
    animation: tutorPulse 1.5s ease-in-out,
               tutorLevelUpGlow 2s ease-in-out;
}

/* Idle state enhancement - gentle float */
#student-avatar.idle img {
    animation: tutorBreathe 5s ease-in-out infinite;
}

/* Hover effect - extra engagement */
#student-avatar:hover img {
    transform: scale(1.05);
    filter: drop-shadow(0 0 10px rgba(18, 179, 179, 0.3));
}

/* Unique timing variations for different tutors */
#student-avatar[data-tutor="maya"] img {
    animation: tutorBreathe 3.5s ease-in-out infinite;
}

#student-avatar[data-tutor="ms-maria"] img {
    animation: tutorBreathe 4.5s ease-in-out infinite;
}

#student-avatar[data-tutor="bob"] img {
    animation: tutorBreathe 3.8s ease-in-out infinite;
}

#student-avatar[data-tutor="dr-g"] img {
    animation: tutorBreathe 4.2s ease-in-out infinite;
}

#student-avatar[data-tutor="sigma"] img {
    animation: tutorPulse 3s ease-in-out infinite;
}

/* Smooth transitions between states */
#student-avatar,
#student-avatar img,
#student-avatar video {
    transition: filter 0.5s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Admin Reports - Stat Cards */
.stat-card {
    background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
    border: 2px solid #e0e6ed;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-color: #12B3B3;
}

.stat-label {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: #2c3e50;
    background: linear-gradient(135deg, #12B3B3, #FF3B7F);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Live Activity Cards */
.activity-card {
    background: white;
    border: 2px solid #e0e6ed;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.activity-card:hover {
    border-color: #12B3B3;
    box-shadow: 0 4px 12px rgba(18, 179, 179, 0.1);
}

.activity-card.struggling {
    border-left: 4px solid #FF3B7F;
    background: linear-gradient(to right, rgba(255, 59, 127, 0.05), white);
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.activity-student-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: #2c3e50;
}

.activity-time {
    font-size: 0.85rem;
    color: #666;
}

.activity-topic {
    display: inline-block;
    background: #12B3B3;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    margin-right: 8px;
}

.activity-stats {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.activity-stat {
    font-size: 0.9rem;
    color: #555;
}

.activity-stat i {
    color: #12B3B3;
    margin-right: 5px;
}

.struggle-alert {
    background: rgba(255, 59, 127, 0.1);
    border-left: 3px solid #FF3B7F;
    padding: 8px 12px;
    margin-top: 10px;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #c7254e;
}

.no-activity-message {
    text-align: center;
    padding: 40px;
    color: #999;
    font-size: 1.1rem;
}

.no-activity-message i {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.3;
}