/* =========================================================
   Elitopolis STUDENT PORTAL
   Version 2.0
========================================================= */

/* =========================================================
   GOOGLE FONT
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap');

/* =========================================================
   ROOT
========================================================= */

:root{

    /* Teal -> indigo: a CS-portal identity, not a generic SaaS gradient */
    --primary:#14C7B4;
    --primary-dark:#0D9488;

    --secondary:#6366F1;

    /* Alias so every existing var(--primary-color) reference resolves
       instead of silently falling back to transparent (it was never
       defined before, so .btn-primary and friends had no background) */
    --primary-color:var(--primary);

    --success:#10B981;

    --danger:#EF4444;

    --warning:#F59E0B;

    --info:#3B82F6;

    --urgent:#DC2626;

    --important:#F59E0B;

    --information:#2563EB;

    --white:#FFFFFF;

    --background:#F5F7FB;

    --surface:#FFFFFF;

    --surface-hover:#F8FAFC;

    --border:#E5E7EB;

    --text:#1F2937;

    --text-light:#6B7280;

    --font-display:"Space Grotesk", "Inter", sans-serif;

    --font-mono:"JetBrains Mono", Consolas, monospace;

    --shadow-sm:0 2px 8px rgba(0,0,0,.06);

    --shadow-md:0 10px 30px rgba(0,0,0,.08);

    --shadow-lg:0 20px 40px rgba(0,0,0,.12);

    --radius:18px;

    --transition:.25s ease;

}

h1, h2, h3, h4, h5, h6{

    font-family:var(--font-display);

    letter-spacing:-0.02em;

}

/* =========================================================
   RESET
========================================================= */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;

    background:var(--background);

    color:var(--text);

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

button{

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

}

input{

    font-family:inherit;

}

a{

    text-decoration:none;

    color:inherit;

}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#edf2f7;

}

/* =========================================================
   LOADING SCREEN
========================================================= */

#loading-screen{

    display:none;

}

.loader{

    width:70px;

    height:70px;

    border-radius:50%;

    border:6px solid #dbeafe;

    border-top:6px solid var(--primary);

    animation:spin 1s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

#loading-screen h2{

    color:var(--primary);

    font-size:1.8rem;

}

#loading-screen p{

    color:var(--text-light);

}

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

.portal-container{

    display:flex;

    min-height:100vh;

}

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

.sidebar{

    width:285px;

    background:white;

    position:fixed;

    top:0;

    left:0;

    bottom:0;

    overflow-y:auto;

    box-shadow:var(--shadow-md);

    padding:28px;

    z-index:500;

    transform: translateX(0);

}

.sidebar-header{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:35px;

}

.branding-logo{

    display:block;

    width:44px;

    height:44px;

    object-fit:contain;

    border-radius:12px;

    background:#fff;

    padding:4px;

    flex-shrink:0;

}

.branding-logo[hidden]{

    display:none;

}

.sidebar-header-text h2{

    color:var(--primary);

    font-size:1.7rem;

    font-weight:800;

}

.sidebar-header-text p{

    color:var(--text-light);

    margin-top:4px;

}

.sidebar nav{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.nav-group h4{

    color:var(--text-light);

    font-size:.75rem;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:10px;

}

.nav-item{

    position:relative;

    width:100%;

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 16px;

    border-radius:14px;

    background:transparent;

    transition:var(--transition);

    color:var(--text);

    font-size:.95rem;

    margin-bottom:6px;

}

/* Small unread-count pill for nav items (currently used by Forum) -
   shared by the sidebar .nav-item and the .bottom-nav-item variant,
   see .bottom-nav-item positioning further down for the mobile case. */
.forum-nav-badge{
    display:none;
    align-items:center;
    justify-content:center;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:#EF4444;
    color:#fff;
    font-size:.68rem;
    font-weight:700;
    line-height:1;
    margin-left:auto;
}

.forum-nav-badge.has-count{
    display:inline-flex;
}

/* Same pill, separate class so Forum's unread count and Announcements'
   unread count never fight over the same DOM nodes. */
.announcements-nav-badge{
    display:none;
    align-items:center;
    justify-content:center;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:#EF4444;
    color:#fff;
    font-size:.68rem;
    font-weight:700;
    line-height:1;
    margin-left:auto;
}

.announcements-nav-badge.has-count{
    display:inline-flex;
}

.nav-item:hover{

    background:#eef5ff;

    color:var(--primary);

}

.nav-item.active{

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    color:white;

    box-shadow:var(--shadow-md);

}

.nav-item .material-icons{

    font-size:22px;

}

/* =========================================================
   MAIN CONTENT
========================================================= */

.main-content{

    flex:1;

    margin-left:285px;

    padding:32px;

}

/* =========================================================
   TOP BAR
========================================================= */

.topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.topbar-left{

    display:flex;

    align-items:center;

    gap:18px;

}

.topbar-right{

    display:flex;

    align-items:center;

    gap:18px;

}

.icon-btn{

    width:48px;

    height:48px;

    border-radius:14px;

    background:var(--card-bg, white);

    border:1px solid var(--border-color, transparent);

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.icon-btn:hover{

    transform:translateY(-2px);

}

.notification-btn{

    position:relative;

}

.notification-badge{

    position:absolute;

    top:-5px;

    right:-5px;

    width:20px;

    height:20px;

    background:var(--danger);

    color:white;

    font-size:.7rem;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

}

@media (max-width: 768px) {
    /* 1. Prevent the page layout from overflowing or shifting horizontally */
    html, body {
        width: 100%;
        overflow-x: hidden;
        font-size: 14px; /* Slightly lowers global base text size scale for smaller screens */
    }

    .portal-container, .ai-layout {
        max-width: 100vw !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 2. FORBID AUTOMATIC MOBILE INPUT ZOOM
       Browsers force-zoom if input text font-size is below 16px */
    .ai-input-container textarea,
    .ai-input-container input,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    textarea {
        font-size: 16px !important; /* Overrides smaller sizes to eliminate input-focus zoom */
    }

    /* 3. RESPONSIVE CHAT & TEXT SIZING 
       Adjust text elements dynamically so they look proportional on small displays */
    .ai-header h1 {
        font-size: 1.5rem !important; /* Scaled header */
    }

    .ai-header p {
        font-size: 0.85rem !important;
    }

    .chat-message p {
        font-size: 0.95rem !important;
        line-height: 1.4;
    }

    /* Force layouts to strictly respect width bounds */
    * {
        box-sizing: border-box;
    }
}

/* =========================================================
   PROFILE
========================================================= */

.student-profile{

    display:flex;

    align-items:center;

    gap:12px;

    background:white;

    padding:8px 14px;

    border-radius:50px;

    box-shadow:var(--shadow-sm);

}

.student-profile img{

    width:48px;

    height:48px;

    border-radius:50%;

    object-fit:cover;

}

.student-profile h4{

    font-size:.95rem;

}

.student-profile small{

    color:var(--text-light);

}

/* =========================================
   TOPBAR - MOBILE
   Prevents the topbar overflowing narrow phone
   screens: shrinks icon buttons, truncates the
   page title instead of forcing overflow, and
   collapses the profile block down to just the
   avatar (name/details text is the biggest
   space hog and isn't essential here - it's
   already shown on the Profile page).
========================================= */

@media (max-width: 600px) {

    .topbar{
        gap:8px;
    }

    .topbar-left{
        gap:8px;
        min-width:0;
        flex:1 1 auto;
    }

    .topbar-left > div{
        min-width:0;
    }

    .topbar-left h2{
        font-size:1rem;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .topbar-left small{
        display:none;
    }

    .topbar-right{
        gap:6px;
        flex-shrink:0;
    }

    .topbar .icon-btn{
        width:38px;
        height:38px;
        border-radius:10px;
    }

    .topbar .icon-btn .material-icons{
        font-size:1.2rem;
    }

    .student-profile{
        padding:4px;
        gap:0;
    }

    .student-profile img{
        width:36px;
        height:36px;
    }

    .student-profile > div{
        display:none;
    }

}

/* =========================================================
   PAGE SYSTEM
========================================================= */

.page{

    display:none;

    animation:fadeIn .35s ease;

}

.page.active{

    display:block;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.page-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:28px;

    gap:20px;

    flex-wrap:wrap;

}

.page-header h2{

    font-size:1.8rem;

    font-weight:700;

}

.page-header p{

    color:var(--text-light);

    margin-top:4px;

}

.page-header input{

    width:320px;

    max-width:100%;

    background:white;

    border:1px solid var(--border);

    border-radius:14px;

    padding:14px 18px;

    outline:none;

    transition:var(--transition);

}

.page-header input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(74,144,226,.12);

}

/* =========================================================
   WELCOME CARD
========================================================= */

.welcome-card{

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    color:white;

    padding:38px;

    border-radius:24px;

    margin-bottom:28px;

    position:relative;

    overflow:hidden;

}

.welcome-card::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);

    background-size:28px 28px;

    pointer-events:none;

}

.welcome-card::after{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    right:-70px;

    top:-70px;

}

.welcome-card h1{

    font-size:2rem;

    font-weight:800;

    margin-bottom:10px;

}

.welcome-card p{

    opacity:.92;

    max-width:650px;

    line-height:1.7;

}

/* =========================================================
   HERO ANNOUNCEMENT
========================================================= */

.hero-slider{

    margin-bottom:32px;

}

.announcement-slider{

    position:relative;

}

.announcement-card{

    background:white;

    border-radius:24px;

    padding:30px;

    box-shadow:var(--shadow-md);

    min-height:250px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    border-left:8px solid var(--information);

}

.announcement-card.information{

    border-left-color:var(--information);

}

.announcement-card.important{

    border-left-color:var(--important);

}

.announcement-card.urgent{

    border-left-color:var(--urgent);

}

.announcement-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.announcement-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 16px;

    border-radius:999px;

    font-size:.75rem;

    font-weight:700;

    letter-spacing:.6px;

    text-transform:uppercase;

    color:white;

}

.information .announcement-badge{

    background:var(--information);

}

.important .announcement-badge{

    background:var(--important);

}

.urgent .announcement-badge{

    background:var(--urgent);

}

.announcement-date{

    color:var(--text-light);

    font-size:.9rem;

}

.announcement-image{

    width:100%;

    max-height:220px;

    object-fit:cover;

    border-radius:16px;

    margin-bottom:18px;

}

.announcement-card h2{

    font-size:1.8rem;

    margin-bottom:18px;

    line-height:1.3;

}

.announcement-preview{

    color:var(--text-light);

    line-height:1.8;

    margin-bottom:25px;

}

.announcement-footer{

    display:flex;

    justify-content:flex-end;

}

/* =========================================================
   SLIDER BUTTONS
========================================================= */

.slider-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:52px;

    height:52px;

    border-radius:50%;

    background:white;

    box-shadow:var(--shadow-md);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:var(--transition);

}

.slider-arrow:hover{

    transform:translateY(-50%) scale(1.08);

}

.slider-arrow.left{

    left:-24px;

}

.slider-arrow.right{

    right:-24px;

}

@media (max-width: 600px) {

    .slider-arrow{

        width:40px;

        height:40px;

    }

    .slider-arrow.left{

        left:8px;

    }

    .slider-arrow.right{

        right:8px;

    }

}

.slider-dots{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:18px;

}

.slider-dots span{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#CBD5E1;

    transition:var(--transition);

    cursor:pointer;

}

.slider-dots span.active{

    width:34px;

    border-radius:999px;

    background:var(--primary);

}

/* =========================================================
   DASHBOARD CARDS
========================================================= */

.dashboard-cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:22px;

    margin-bottom:34px;

}

@media (max-width: 768px) {
    .dashboard-cards{
        display:none;
    }
    }


.dashboard-card{

    background:white;

    border-radius:22px;

    padding:28px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

    text-align:center;

}

.dashboard-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-lg);

}

.dashboard-card .material-icons{

    font-size:42px;

    color:var(--primary);

    margin-bottom:18px;

}

.dashboard-card h2{

    font-size:2rem;

    margin-bottom:6px;

}

.dashboard-card p{

    color:var(--text-light);

}

/* =========================================================
   DASHBOARD GRID
========================================================= */

.dashboard-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

}

.dashboard-widget{

    background:white;

    border-radius:22px;

    padding:24px;

    box-shadow:var(--shadow-sm);

}

.widget-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;

}

.widget-header h3{

    font-size:1.15rem;

    font-weight:700;

}

.widget-body{

    min-height:180px;

}

/* =========================================================
   AI CARD
========================================================= */

.ai-widget{

    background:linear-gradient(135deg,#4A90E2,#9013FE);

    color:white;

}

.ai-widget p{

    line-height:1.8;

    margin-bottom:24px;

    opacity:.95;

}

.ai-widget .primary-btn{

    background:white;

    color:var(--primary);

}

/* =========================================================
   EMPTY STATES
========================================================= */

.empty-state{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-height:180px;

    text-align:center;

    color:var(--text-light);

}

.empty-state .material-icons{

    font-size:56px;

    margin-bottom:18px;

    color:#CBD5E1;

}

.empty-state p{

    font-size:.95rem;

    line-height:1.6;

}

/* =========================================================
   CONTENT PAGES
========================================================= */

.content-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));

    gap:24px;

}

.content-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/* =========================================================
   COURSE CARD
========================================================= */

.course-card{

    background:white;

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.course-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-lg);

}

.course-banner{

    height:120px;

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

}

.course-banner .material-icons{

    font-size:52px;

}

.course-content{

    padding:24px;

}

.course-code{

    display:inline-flex;

    align-items:center;

    gap:2px;

    font-family:var(--font-mono);

    color:var(--primary);

    background:rgba(20,199,180,.1);

    border:1px solid rgba(20,199,180,.25);

    padding:3px 10px;

    border-radius:6px;

    font-weight:600;

    font-size:.8rem;

    letter-spacing:.02em;

    margin-bottom:8px;

}

.course-code::before{

    content:"<";

    opacity:.5;

}

.course-code::after{

    content:"/>";

    opacity:.5;

}

.course-title{

    font-size:1.2rem;

    font-weight:700;

    margin-bottom:12px;

}

.course-info{

    display:flex;

    justify-content:space-between;

    color:var(--text-light);

    font-size:.9rem;

    margin-top:20px;

}

.course-footer{

    display:flex;

    justify-content:flex-end;

    margin-top:24px;

}

/* =========================================================
   NOTE CARD
========================================================= */

.note-card{

    background:white;

    border-radius:20px;

    padding:22px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.note-card:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow-md);

}

.note-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:14px;

}

.note-title{

    font-size:1.05rem;

    font-weight:700;

}

.note-course{

    color:var(--primary);

    font-size:.9rem;

    margin-top:4px;

}

.note-date{

    color:var(--text-light);

    font-size:.85rem;

}

.note-description{

    color:var(--text-light);

    line-height:1.7;

    margin:16px 0;

}

.note-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.file-size{

    color:var(--text-light);

    font-size:.85rem;

}

/* =========================================================
   MATERIAL CARD
========================================================= */
.material-card{

    display:flex;

    flex-direction:column;

    padding:24px;

    gap:16px;

    background:var(--card-bg);

    border-radius:18px;

    box-shadow:var(--shadow-md);

    transition:.3s;

    height:100%;

}
.material-card:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow-md);

}

.material-icon{

    width:62px;

    height:62px;

    border-radius:18px;

    background:#EEF5FF;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.material-icon .material-icons{

    font-size:32px;

}

.material-body{

    flex:1;

}

.material-body h3{

    font-size:1.05rem;

    margin-bottom:8px;

}

.material-body p{

    color:var(--text-light);

    line-height:1.6;

}

.material-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:18px;

}

/* =========================================================
   ASSIGNMENT CARD
========================================================= */

.assignment-card{

    background:white;

    border-radius:20px;

    padding:22px;

    box-shadow:var(--shadow-sm);

    border-left:6px solid var(--primary);

}

.assignment-card.overdue{

    border-left-color:var(--danger);

}

.assignment-card.pending{

    border-left-color:var(--warning);

}

.assignment-card.completed{

    border-left-color:var(--success);

}

.assignment-header{

    display:flex;

    justify-content:space-between;

    margin-bottom:14px;

}

.assignment-title{

    font-size:1.1rem;

    font-weight:700;

}

.assignment-course{

    color:var(--primary);

    margin-top:6px;

}

.assignment-description{

    margin:18px 0;

    color:var(--text-light);

    line-height:1.7;

}

.assignment-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.status-pill{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 16px;

    border-radius:999px;

    font-size:.8rem;

    font-weight:600;

}

.status-pill.pending{

    background:#FEF3C7;

    color:#92400E;

}

.status-pill.completed{

    background:#DCFCE7;

    color:#166534;

}

.status-pill.overdue{

    background:#FEE2E2;

    color:#991B1B;

}

/* =========================================================
   ANNOUNCEMENT LIST
========================================================= */

.announcement-item{

    background:white;

    border-radius:20px;

    padding:24px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.announcement-item:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);

}

.announcement-item h3{

    margin:16px 0;

    font-size:1.15rem;

}

.announcement-item-image{

    width:100%;

    max-height:200px;

    object-fit:cover;

    border-radius:14px;

    margin-bottom:12px;

}

.announcement-item p{

    color:var(--text-light);

    line-height:1.8;

}

.announcement-item-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:22px;

}

/* =========================================================
   SYLLABUS CARD
========================================================= */

.syllabus-card{

    background:white;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.syllabus-card:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow-lg);

}

.syllabus-header{

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    color:white;

    padding:20px;

}

.syllabus-header h3{

    font-size:1.15rem;

}

.syllabus-body{

    padding:22px;

}

.syllabus-body ul{

    list-style:none;

}

.syllabus-body li{

    padding:12px 0;

    border-bottom:1px solid var(--border);

    color:var(--text-light);

}

.syllabus-body li:last-child{

    border-bottom:none;

}

.syllabus-footer{

    display:flex;

    justify-content:flex-end;

    padding:20px;

}


/* =========================================================
   CSC AI
========================================================= */

/* ========= Layout ========= */

.ai-layout{

    display:grid;

    grid-template-columns:280px 1fr;

    gap:0;

    height:calc(100vh - 120px);

    min-height:700px;

}

/* ========= Sidebar ========= */

.ai-sidebar{

    display:flex;

    flex-direction:column;

    background:var(--card-bg);

    border:none;

    border-right:1px solid var(--border-color);

    border-radius:0;

    overflow:hidden;

    box-shadow:none;

}

.ai-sidebar-header{

    padding:20px;

    border-bottom:1px solid var(--border-color);

    display:flex;

    flex-direction:column;

    gap:18px;

}

/* ========= New Chat ========= */

.new-chat-btn{

    width:100%;

    height:52px;

    border:none;

    border-radius:16px;

    background:var(--brand-gradient);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    cursor:pointer;

    font-size:.96rem;

    font-weight:600;

    transition:.25s;

}

.new-chat-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 24px rgba(74,144,226,.35);

}

.new-chat-btn:active{

    transform:scale(.98);

}

/* ========= Search ========= */

.ai-search{

    display:flex;

    align-items:center;

    gap:12px;

    background:var(--surface);

    border:1px solid var(--border-color);

    border-radius:14px;

    padding:12px 14px;

}

.ai-search .material-icons{

    color:var(--text-secondary);

    font-size:20px;

}

.ai-search input{

    flex:1;

    border:none;

    outline:none;

    background:none;

    color:var(--text-primary);

    font-size:.95rem;

}

.ai-search input::placeholder{

    color:var(--text-secondary);

}

/* ========= Chat List ========= */

.chat-list{

    flex:1;

    overflow-y:auto;

    padding:16px;

}

/* ========= Sidebar Footer (Memory) ========= */

.ai-sidebar-footer{

    padding:12px;

    border-top:1px solid var(--border-color);

}

.ai-sidebar-footer-btn{

    width:100%;
    display:flex;
    align-items:center;
    gap:10px;

    padding:10px 12px;
    border:none;
    border-radius:12px;
    background:transparent;

    color:var(--text-secondary);
    font-size:.88rem;
    font-weight:600;
    font-family:inherit;

    cursor:pointer;
    transition:.15s ease;

}

.ai-sidebar-footer-btn:hover{
    background:var(--surface);
    color:var(--brand-primary);
}

.ai-sidebar-footer-btn .material-icons{
    font-size:20px;
}

/* ========= Model Picker ========= */

.ai-model-picker{
    position:relative;
    margin-bottom:4px;
}

.ai-model-picker .ai-sidebar-footer-btn{
    justify-content:flex-start;
}

.ai-model-btn-chevron{
    margin-left:auto;
    font-size:18px !important;
    transition:transform .15s ease;
}

#ai-model-btn[aria-expanded="true"] .ai-model-btn-chevron{
    transform:rotate(180deg);
}

.ai-model-menu{

    position:absolute;
    bottom:calc(100% + 6px);
    left:0;
    right:0;
    z-index:20;

    background:var(--surface);
    border:1px solid var(--border-color);
    border-radius:12px;
    box-shadow:var(--shadow-lg);

    padding:6px;
    max-height:260px;
    overflow-y:auto;

}

.ai-model-menu.hide{
    display:none;
}

.ai-model-option{

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;

    width:100%;
    padding:8px 10px;
    border:none;
    border-radius:9px;
    background:transparent;

    font-family:inherit;
    text-align:left;
    cursor:pointer;
    transition:.15s ease;

}

.ai-model-option:hover{
    background:var(--surface-hover);
}

.ai-model-option.active{
    background:rgba(74,144,226,.1);
}

.ai-model-option-name{
    display:flex;
    align-items:center;
    gap:6px;

    font-size:.86rem;
    font-weight:600;
    color:var(--text-primary);
}

.ai-model-option.active .ai-model-option-name{
    color:var(--brand-primary);
}

.ai-model-option-name .material-icons{
    font-size:16px;
    color:var(--brand-primary);
    visibility:hidden;
}

.ai-model-option.active .ai-model-option-name .material-icons{
    visibility:visible;
}

.ai-model-option-desc{
    font-size:.74rem;
    color:var(--text-secondary);
    font-weight:500;
}

/* ========= "Answered by" indicator ========= */

.ai-provider-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    margin-top:6px;
    font-size:.72rem;
    font-weight:600;
    color:var(--text-secondary);
}

.ai-provider-row.hide{
    display:none;
}

.ai-provider-row .material-icons{
    font-size:14px;
}

/* Shown instead when the picked model failed and something further
   down the fallback chain answered - see the comparison in ai.js. */
.ai-provider-row.fallback{
    color:var(--warning,#F59E0B);
}

.chat-group{

    margin-bottom:28px;

}

.chat-group-title{

    font-size:.72rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:var(--text-secondary);

    margin-bottom:10px;

    padding-left:10px;

}

/* ========= Chat Card ========= */

.chat-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px;

    border-radius:16px;

    cursor:pointer;

    transition:.25s;

    margin-bottom:8px;

    position:relative;

}

.chat-item:hover{

    background:rgba(74,144,226,.08);

}

/* LIGHT */

body:not(.dark) .chat-item.active{

    background:var(--brand-gradient);

    color:#fff;

}

/* DARK */

body.dark .chat-item.active{

    background:#26344c;

    color:#fff;

}

body.dark .chat-item.active .chat-preview,

body.dark .chat-item.active .chat-time{

    color:rgba(255,255,255,.75);

}

body:not(.dark) .suggestion-card .material-icons{

    background:rgba(74,144,226,.10);

}

body.dark .suggestion-card .material-icons{

    background:#243248;

    color:#7db6ff;

}

.chat-item.active .chat-preview,

.chat-item.active .chat-time{

    color:rgba(255,255,255,.82);

}

.chat-icon{

    width:42px;

    height:42px;

    border-radius:12px;

    background:rgba(74,144,226,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.chat-item.active .chat-icon{

    background:rgba(255,255,255,.18);

}

.chat-details{

    flex:1;

    overflow:hidden;

}

.chat-title{

    font-size:.94rem;

    font-weight:600;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.chat-preview{

    margin-top:4px;

    font-size:.82rem;

    color:var(--text-secondary);

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.chat-time{

    font-size:.74rem;

    color:var(--text-secondary);

    margin-top:6px;

}

/* ========= Main ========= */

.ai-main{

    display:flex;

    flex-direction:column;

    background:var(--card-bg);

    border-radius:0;

    border:none;

    overflow:hidden;

    box-shadow:none;

}

/* ========= Header ========= */

.ai-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:24px 30px;

    border-bottom:1px solid var(--border-color);

    

}

body:not(.dark) .ai-header{

background:#ffffff;

}

body.dark .ai-header{

background:#101827;

}

.ai-header h1{

    font-size:1.8rem;

    margin:0;

    font-weight:700;

}

.ai-header p{

    margin-top:6px;

    color:var(--text-secondary);

}

.ai-status{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    background:rgba(74,144,226,.08);

    border-radius:999px;

    font-size:.88rem;

    font-weight:600;

}

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22c55e;

    box-shadow:0 0 12px #22c55e;

}

/* ========= Chat Area ========= */

.chat-messages{

    flex:1;

    min-height:0;

    overflow-y:auto;

    overflow-x:hidden;

    padding:20px;

    scroll-behavior:smooth;

}

.chat-messages > *{

    max-width:800px;

    margin-left:auto;

    margin-right:auto;

}


body:not(.dark) .chat-messages{

background:#ffffff;

}

body.dark .chat-messages{

background:#0B0F14;

}

body:not(.dark) .ai-sidebar {
    background: #ffffff;
}

body:not(.dark) .ai-main {
    background: #ffffff;
}

/* Locate this block and add 'padding' */
.message.user .message-bubble{ 
    max-width:68%; 
    padding: 16px 20px;       /* <-- ADD THIS */
    border-radius: 18px 18px 4px 18px; /* Optional: adds beautiful chat-bubble tail styling */
}

.message.assistant .message-bubble{ 
    max-width:88%; 
    padding: 16px 20px;       /* <-- ADD THIS */
    border-radius: 18px 18px 18px 4px; /* Optional: adds assistant bubble tail */
}

/* Add these missing variables to support Light Mode */
:root {
    --text-primary: var(--text);        /* Resolves to #1F2937 */
    --text-secondary: var(--text-light);  /* Resolves to #6B7280 */
    --border-color: var(--border);      /* Resolves to #E5E7EB */
    --brand-primary: var(--primary);    /* Resolves to #4A90E2 */
    --brand-gradient: linear-gradient(135deg, var(--primary), var(--secondary));
    --card-bg: #FFFFFF;
}

/* Ensure these update when switched to dark mode */
body.dark {
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --border-color: #2b3547;
    --brand-primary: #2DD4BF;
    --card-bg: #101827;
}


/* Ensure the chat item container serves as the reference point */
.chat-item {
    position: relative;
    padding-right: 40px; /* Leave breathing space so text doesn't slide under the delete button */
}

/* Position the delete button to the right side of the chat container */
.delete-chat-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%); /* Perfectly centers it vertically */
    opacity: 0;
    visibility: hidden;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #dc3545; /* Clean destructive red color */
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.2s ease;
}

/* Reveal the delete icon when hovering over the parent .chat-item wrapper */
.chat-item:hover .delete-chat-btn {
    opacity: 1;
    visibility: visible;
}

/* Add a subtle background highlight when hovering directly over the button itself */
.delete-chat-btn:hover {
    background-color: rgba(220, 53, 69, 0.1); /* Soft red tint */
    color: #bd2130; /* Slightly darker red for high contrast */
}

/* Size adjustment for the trash icon */
.delete-chat-btn .material-icons {
    font-size: 18px;
}


/* Ensure the message bubble acts as a coordinate base for the copy button */
.message-bubble {
    position: relative;
    padding-bottom: 24px; /* Gives uniform breathing space for timestamp/actions */
}

.message.assistant .message-bubble{
    padding-bottom: 0;
}

/* Position your actions container in the corner of the message bubble */
.message-actions {
    position: absolute;
    right: 8px;
    bottom: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Reveal the copy container only when hovering over the parent .message wrapper */
.message:hover .message-actions {
    opacity: 1;
    visibility: visible;
}

/* Clean UI styling for the copy icon button */
.copy-message-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #6c757d;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.copy-message-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #212529;
}

/* If it's a dark mode wrapper or dark background chat bubble adjust accordingly */
.message.assistant .copy-message-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.copy-message-btn .material-icons {
    font-size: 16px; /* Keeps the copy icon clean and compact */
}
/* =========================================================
   AI WELCOME
========================================================= */

.welcome-screen{

    max-width:900px;

    margin:40px auto;

    text-align:center;

    animation:fadeUp .6s ease;

}

.welcome-icon{

    width:120px;

    height:120px;

    margin:0 auto 28px;

    border-radius:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--brand-gradient);

    color:#fff;

    box-shadow:
        0 20px 50px rgba(74,144,226,.35);

    animation:floatBot 5s ease-in-out infinite;

}

.welcome-icon .material-icons{

    font-size:60px;

}

.welcome-screen h2{

    font-size:2.4rem;

    font-weight:700;

    margin-bottom:14px;

}

.welcome-screen p{

    max-width:680px;

    margin:0 auto 42px;

    color:var(--text-secondary);

    line-height:1.8;

    font-size:1rem;

}

/* =========================================================
   Suggestions
========================================================= */

.ai-suggestions{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}

.suggestion-card{

    background:var(--card-bg);

    border:1px solid var(--border-color);

    border-radius:22px;

    padding:28px;

    cursor:pointer;

    transition:.3s;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    text-align:left;

    position:relative;

    overflow:hidden;

}

.suggestion-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(74,144,226,.06),

        transparent

    );

    opacity:0;

    transition:.3s;

}

.suggestion-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(0,0,0,.10);

}

.suggestion-card:hover::before{

    opacity:1;

}

.suggestion-card .material-icons{

    width:56px;

    height:56px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(74,144,226,.12);

    color:var(--brand-primary);

    font-size:30px;

    margin-bottom:18px;

}

.suggestion-card h4{

    font-size:1.05rem;

    margin-bottom:8px;

    font-weight:700;

}

.suggestion-card small{

    color:var(--text-secondary);

    line-height:1.6;

    font-size:.9rem;

}

/* =========================================================
   Empty Conversation
========================================================= */

.empty-chat{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:80px 20px;

    text-align:center;

}

.empty-chat h3{

    margin-top:18px;

    font-size:1.4rem;

}

.empty-chat p{

    margin-top:10px;

    max-width:520px;

    color:var(--text-secondary);

}

/* =========================================================
   Scrollbar
========================================================= */

.chat-list::-webkit-scrollbar,

.chat-messages::-webkit-scrollbar{

    width:8px;

}

.chat-list::-webkit-scrollbar-thumb,

.chat-messages::-webkit-scrollbar-thumb{

    background:rgba(0,0,0,.12);

    border-radius:20px;

}

.chat-list::-webkit-scrollbar-track,

.chat-messages::-webkit-scrollbar-track{

    background:transparent;

}

/* =========================================================
   Animations
========================================================= */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes floatBot{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/* =========================================================
   Tablet
========================================================= */

@media(max-width:1100px){

.ai-suggestions{

    grid-template-columns:repeat(2,1fr);

}

}

/* =========================================================
   Mobile
========================================================= */

@media(max-width:768px){

.welcome-screen{

    margin:20px;

}

.welcome-screen h2{

    font-size:2rem;

}

.ai-suggestions{

    grid-template-columns:1fr;

}

.suggestion-card{

    padding:22px;

}

}

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

.message{

    display:flex;

    margin-bottom:24px;

    animation:fadeUp .25s ease;

}

.message.user{

    justify-content:flex-end;

}

.message.assistant{

    justify-content:flex-start;

}

/* Bubble */

.message.user .message-bubble{

    max-width:68%;

}

.message.assistant .message-bubble{

    max-width:100%;

}

/* LIGHT MODE */

body:not(.dark) .message.user .message-bubble{

    background:#EEF0F3;

    color:var(--text-primary);

    border-radius:20px;

    padding:12px 18px;

}

body:not(.dark) .message.assistant .message-bubble{

    background:transparent;

    color:var(--text-primary);

    border:none;

    padding:2px 0;

}

/* DARK MODE */

body.dark .message.user .message-bubble{

    background:#2A303C;

    color:#f3f4f6;

    border-radius:20px;

    padding:12px 18px;

}

body.dark .message.assistant .message-bubble{

    background:transparent;

    color:#f3f4f6;

    border:none;

    padding:2px 0;

}
/* Avatar */

.message-avatar{

    display:none;

}
/* =========================================================
   EXPANDED ACTION ROW (copy / feedback / regenerate)
   Matches the icon row under each assistant reply in
   ChatGPT/Gemini - left-aligned, quiet ghost icons.
========================================================= */

.message.assistant .message-actions{

    position:static;

    display:flex;

    align-items:center;

    gap:2px;

    margin-top:6px;

    opacity:0;

    visibility:hidden;

}

.message.assistant:hover .message-actions{

    opacity:1;

    visibility:visible;

}

.feedback-btn,
.regenerate-btn{

    background:transparent;

    border:none;

    cursor:pointer;

    color:#8b98a5;

    padding:5px;

    border-radius:6px;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:background-color .2s ease, color .2s ease;

}

.feedback-btn .material-icons,
.regenerate-btn .material-icons{

    font-size:16px;

}

.feedback-btn:hover,
.regenerate-btn:hover{

    background-color:rgba(127,127,127,.12);

    color:var(--text-primary);

}

.feedback-btn.active[data-rating="up"]{

    color:var(--success);

}

.feedback-btn.active[data-rating="down"]{

    color:var(--danger);

}

/* Timestamp */

.message-time{

    margin-top:10px;

    font-size:.74rem;

    opacity:.65;

}

/* =========================================================
   MARKDOWN
========================================================= */

.message-bubble h1,
.message-bubble h2,
.message-bubble h3,
.message-bubble h4{

    margin-top:22px;

    margin-bottom:12px;

    font-weight:700;

}

.message-bubble h1{

    font-size:1.9rem;

}

.message-bubble h2{

    font-size:1.5rem;

}

.message-bubble h3{

    font-size:1.25rem;

}

.message-bubble p{

    margin:14px 0;

}

.message-bubble ul,
.message-bubble ol{

    margin:14px 0;

    padding-left:26px;

}

.message-bubble li{

    margin:8px 0;

}

.message-bubble blockquote{

    border-left:4px solid var(--brand-primary);

    padding-left:18px;

    margin:18px 0;

    color:var(--text-secondary);

    font-style:italic;

}

/* =========================================================
   INLINE CODE
========================================================= */

.message-bubble code{

    font-family:Consolas, monospace;

    background:rgba(74,144,226,.08);

    color:var(--brand-primary);

    padding:3px 7px;

    border-radius:8px;

    font-size:.92em;

}

/* =========================================================
   CODE BLOCKS
========================================================= */

.message-bubble pre{

    position:relative;

    margin:22px 0;

    border-radius:18px;

    overflow:hidden;

    background:#111827;

}

.message-bubble pre code{

    display:block;

    padding:22px;

    overflow:auto;

    background:none;

    color:#f8fafc;

    font-size:.9rem;

    line-height:1.7;

}

/* Copy button */

.copy-code-btn{

    position:absolute;

    top:12px;

    right:12px;

    width:36px;

    height:36px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.12);

    color:#fff;

    transition:.25s;

}

.copy-code-btn:hover{

    background:rgba(255,255,255,.24);

}

/* =========================================================
   TABLES
========================================================= */

/* ==========================================
   Responsive Tables
========================================== */

.message-bubble .table-wrapper{

    width:100%;

    overflow-x:auto;

    overflow-y:hidden;

    margin:20px 0;

    -webkit-overflow-scrolling:touch;

}

.message-bubble .table-wrapper::-webkit-scrollbar{

    height:6px;

}

.message-bubble .table-wrapper::-webkit-scrollbar-thumb{

    background:#999;

    border-radius:20px;

}

.message-bubble table{

    width:max-content;

    min-width:100%;

    border-collapse:collapse;

}



.message-bubble th{

    background:rgba(74,144,226,.08);

    font-weight:700;

}

.message-bubble td,
.message-bubble th{

    padding:14px;

    border:1px solid var(--border-color);

    text-align:left;

}

/* =========================================================
   LINKS
========================================================= */

.message-bubble a{

    color:var(--brand-primary);

    text-decoration:none;

}

.message-bubble a:hover{

    text-decoration:underline;

}

/* =========================================================
   IMAGES
========================================================= */

.message-bubble img{

    max-width:100%;

    border-radius:16px;

    margin:18px 0;

}

/* =========================================================
   TYPING INDICATOR
========================================================= */

.typing-indicator{

    display:flex;

    align-items:center;

    gap:6px;

    padding:18px 22px;

    width:70px;

}

.typing-indicator span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--brand-primary);

    animation:typingBounce 1.2s infinite;

}

.typing-indicator span:nth-child(2){

    animation-delay:.2s;

}

.typing-indicator span:nth-child(3){

    animation-delay:.4s;

}

@keyframes typingBounce{

    0%,80%,100%{

        transform:scale(.6);

        opacity:.4;

    }

    40%{

        transform:scale(1);

        opacity:1;

    }

}

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

@media(max-width:768px){

.message-bubble{

    max-width:92%;

    padding:16px 18px;

}

.message-bubble pre code{

    padding:18px;

}

}

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

.chat-footer{

    position:sticky;

    bottom:0;

    z-index:100;

    background:transparent;

    border-top:none;

    padding:12px 16px 20px;

    padding-bottom:max(20px, env(safe-area-inset-bottom));

    flex-shrink:0;

}

.chat-footer::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:100%;

    height:40px;

    background:linear-gradient(to bottom, transparent, var(--chat-bg, inherit));

    pointer-events:none;

}

body:not(.dark) .chat-footer::before{

    --chat-bg:#ffffff;

}

body.dark .chat-footer::before{

    --chat-bg:#0B0F14;

}

.chat-input-pill{

    display:flex;

    align-items:flex-end;

    gap:10px;

    width:100%;

    max-width:900px;

    margin:0 auto;

}

/* ========= File Preview (staged, pre-upload) ========= */

.file-preview-row{

    width:100%;
    max-width:900px;
    margin:0 auto 10px;

}

.file-preview-chip{

    display:flex;
    align-items:center;
    gap:10px;

    width:fit-content;
    max-width:100%;

    padding:8px 10px;
    border:1px solid var(--border-color);
    border-radius:14px;
    background:var(--surface);

}

.file-preview-thumb{

    width:40px;
    height:40px;
    border-radius:8px;
    object-fit:cover;
    flex-shrink:0;

}

.file-preview-icon{

    width:40px;
    height:40px;
    border-radius:8px;
    background:var(--brand-gradient);
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    flex-shrink:0;

}

.file-preview-info{

    display:flex;
    flex-direction:column;
    gap:1px;
    min-width:0;

}

.file-preview-name{

    font-size:.85rem;
    font-weight:600;
    color:var(--text-primary);

    max-width:220px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

}

.file-preview-size{

    font-size:.72rem;
    color:var(--text-secondary);

}

.file-preview-chip #file-preview-remove{

    background:transparent;
    border:none;
    cursor:pointer;
    padding:4px;
    border-radius:50%;
    display:flex;
    color:var(--text-secondary);
    flex-shrink:0;

}

.file-preview-chip #file-preview-remove:hover{
    background:rgba(239,68,68,.12);
    color:var(--danger,#EF4444);
}

.file-preview-chip #file-preview-remove .material-icons{
    font-size:18px;
}

#chat-input{

    flex:1;

    resize:none;

    overflow-y:auto;

    max-height:140px;

    min-height:44px;

}

#chat-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    padding: 8px 4px;
    resize: none; /* Prevents textareas from being manually dragged larger */
    max-height: 80px; /* Limits growth if it's an auto-expanding input */
}

/* =========================================================
   INPUT
========================================================= */

.chat-footer textarea{

    flex:1;

    resize:none;

    min-height:56px;

    max-height:220px;

    padding:16px 20px;

    border-radius:18px;

    border:1px solid var(--border-color);

    background:var(--surface);

    color:var(--text-primary);

    outline:none;

    font-size:.96rem;

    line-height:1.7;

    transition:.25s;

    overflow-y:auto;

}

.chat-footer textarea:focus{

    border-color:var(--brand-primary);

    box-shadow:0 0 0 4px rgba(74,144,226,.12);

}

.chat-footer textarea::placeholder{

    color:var(--text-secondary);

}

/* =========================================================
   TOOL BUTTONS
========================================================= */

.chat-tool{

    width:50px;

    height:50px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--surface);

    color:var(--text-secondary);

    transition:.25s;

}

.chat-tool:hover{

    background:rgba(74,144,226,.12);

    color:var(--brand-primary);

    transform:translateY(-2px);

}

.chat-tool:active{

    transform:scale(.95);

}

/* =========================================================
   SEND BUTTON
========================================================= */

.send-btn{

    width:54px;

    height:54px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--brand-gradient);

    color:#fff;

    transition:.25s;

    box-shadow:0 10px 24px rgba(74,144,226,.25);

}

.send-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 14px 30px rgba(74,144,226,.35);

}

.send-btn:active{

    transform:scale(.95);

}

/* =========================================================
   EMPTY CHAT LIST
========================================================= */

.chat-list-empty{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:60px 20px;

    text-align:center;

    color:var(--text-secondary);

}

.chat-list-empty .material-icons{

    font-size:52px;

    margin-bottom:16px;

    opacity:.55;

}

/* =========================================================
   DARK MODE
========================================================= */

/* Assistant replies stay unboxed (no bubble) in dark mode too */
body.dark .message.assistant .message-bubble{

    background:transparent;

}

body.dark .chat-footer{

    background:#101827;

}

body.dark .chat-tool{

    background:#1b2434;

}

body.dark .chat-footer textarea{

    background:#1b2434;

}

body.dark .suggestion-card{

    background:#182131;

}

body.dark .ai-sidebar{

    background:#101827;

}

body.dark .ai-main{

    background:#101827;

}

body.dark .chat-item:hover{

    background:rgba(255,255,255,.05);

}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:1024px){

.ai-layout{

    grid-template-columns:90px 1fr;

}

.ai-search{

    display:none;

}

.chat-details{

    display:none;

}

.new-chat-btn span:last-child{

    display:none;

}

.new-chat-btn{

    padding:0;

}

}

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

@media(max-width:768px){

.ai-layout{

    display:block;

    position:relative;

    height:calc(100vh - 120px);

    overflow:hidden;

}

.ai-sidebar{

    position:fixed;

    top:0;

    left:-320px;

    width:300px;

    height:100vh;

    z-index:1000;

    transition:.35s;

    border-radius:0;

}

.ai-sidebar.show{

    left:0;

}

.ai-main{

    border-radius:0;

}

.ai-header{

    padding:18px;

}

.ai-header h1{

    font-size:1.4rem;

}

.chat-messages{

    padding:20px;

}

.chat-footer{

    padding:14px;

}

.chat-tool{

    width:46px;

    height:46px;

}

.send-btn{

    width:50px;

    height:50px;

}

}

/* =========================================================
   SMALL PHONES
========================================================= */

@media(max-width:480px){

.chat-footer textarea{

    font-size:.9rem;

}

.welcome-screen h2{

    font-size:1.7rem;

}

.welcome-icon{

    width:90px;

    height:90px;

}

.welcome-icon .material-icons{

    font-size:48px;

}

.suggestion-card{

    padding:18px;

}

}



/* =========================================================
   END CSC AI
========================================================= */

/* =========================================================
   PROFILE
========================================================= */

.profile-card{

    background:white;

    border-radius:24px;

    padding:40px;

    box-shadow:var(--shadow-sm);

}

.profile-header{

    display:flex;

    align-items:center;

    gap:24px;

    margin-bottom:35px;

}

.profile-avatar{

    width:120px;

    height:120px;

    border-radius:50%;

    object-fit:cover;

    border:6px solid #EEF5FF;

}

.profile-name{

    font-size:1.8rem;

    font-weight:700;

}

.profile-matric{

    color:var(--primary);

    margin-top:6px;

    font-weight:600;

}

.profile-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.profile-item{

    background:#F8FAFC;

    padding:18px;

    border-radius:16px;

}

.profile-item label{

    display:block;

    color:var(--text-light);

    margin-bottom:8px;

    font-size:.85rem;

}

.profile-item span{

    font-weight:600;

}

/* =========================================================
   SETTINGS
========================================================= */

.settings-card{

    background:white;

    border-radius:24px;

    padding:32px;

    box-shadow:var(--shadow-sm);

}

.setting-group{

    margin-bottom:30px;

}

.setting-group h3{

    margin-bottom:16px;

}

.setting-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    border-bottom:1px solid var(--border);

}

.setting-item:last-child{

    border-bottom:none;

}

.toggle{

    position:relative;

    width:56px;

    height:30px;

    background:#CBD5E1;

    border-radius:999px;

    cursor:pointer;

    transition:.25s;

}

.toggle::before{

    content:"";

    position:absolute;

    width:24px;

    height:24px;

    background:white;

    border-radius:50%;

    left:3px;

    top:3px;

    transition:.25s;

}

.toggle.active{

    background:var(--primary);

}

.toggle.active::before{

    left:29px;

}

/* =========================================================
   UNIVERSAL MODAL
========================================================= */

.modal-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(4px);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:5000;

    padding:24px;

}

.modal-overlay.show{

    display:flex;

}

.modal{

    background:white;

    width:min(900px,100%);

    max-height:90vh;

    overflow:auto;

    border-radius:24px;

    animation:fadeIn .3s ease;

}

.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    padding:28px;

    border-bottom:1px solid var(--border);

}

.modal-content{

    padding:30px;

    line-height:1.9;

}

.announcement-modal-image{

    width:100%;

    max-height:320px;

    object-fit:cover;

    border-radius:16px;

    margin-bottom:20px;

}

#announcement-modal-body p{

    margin:0 0 16px;

}

#announcement-modal-body p:last-child{

    margin-bottom:0;

}

#announcement-modal-body a{

    color:var(--primary);

    text-decoration:underline;

    word-break:break-word;

}

/* =========================================================
   BUTTONS
========================================================= */

.primary-btn{

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    color:white;

    padding:14px 22px;

    border-radius:14px;

    font-weight:600;

    transition:var(--transition);

}

.primary-btn:hover{

    transform:translateY(-2px);

    box-shadow:var(--shadow-md);

}

.secondary-btn{

    background:#EEF5FF;

    color:var(--primary);

    padding:14px 22px;

    border-radius:14px;

    font-weight:600;

}

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

@media (max-width:900px){

    .sidebar{
    position: fixed;
    top: 0;
    left: 0;

    width: 280px;
    height: 100vh;

    transform: translateX(0);

    transition: transform .35s ease;
}
   

    

   .sidebar.hidden{

    transform:translateX(-100%);

}

    .main-content{

    margin-left:280px;

    transition:margin-left .35s ease;

}

body.sidebar-hidden .main-content{

    margin-left:0;

}

}
/* =========================================================
   PREMIUM ANIMATIONS
========================================================= */

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes pulseGlow{

    0%{

        box-shadow:0 0 0 rgba(74,144,226,.35);

    }

    50%{

        box-shadow:0 0 30px rgba(74,144,226,.35);

    }

    100%{

        box-shadow:0 0 0 rgba(74,144,226,.35);

    }

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.animate-float{

    animation:float 4s ease infinite;

}

.animate-glow{

    animation:pulseGlow 2s infinite;

}

.animate-slide{

    animation:slideUp .45s ease;

}

/* =========================================================
   GLASSMORPHISM
========================================================= */

.glass{

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.35);

}

/* =========================================================
   BEAUTIFUL HOVER EFFECTS
========================================================= */

.dashboard-card,
.course-card,
.note-card,
.material-card,
.assignment-card,
.announcement-item,
.syllabus-card,
.dashboard-widget{

    transition:

        transform .3s ease,

        box-shadow .3s ease,

        border-color .3s ease;

}

.dashboard-card:hover,
.course-card:hover,
.note-card:hover,
.material-card:hover,
.assignment-card:hover,
.announcement-item:hover,
.syllabus-card:hover,
.dashboard-widget:hover{

    transform:

        translateY(-8px);

    box-shadow:

        0 22px 45px rgba(0,0,0,.12);

}

/* =========================================================
   BEAUTIFUL BUTTONS
========================================================= */

.primary-btn{

    position:relative;

    overflow:hidden;

}

.primary-btn::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.4),

        transparent

    );

    transform:translateX(-120%);

}

.primary-btn:hover::after{

    transform:translateX(120%);

    transition:1s;

}

/* =========================================================
   SKELETON LOADING
========================================================= */

.skeleton{

    position:relative;

    overflow:hidden;

    background:#edf2f7;

}

.skeleton::before{

    content:"";

    position:absolute;

    inset:0;

    transform:translateX(-100%);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.7),

        transparent

    );

    animation:skeleton 1.2s infinite;

}

@keyframes skeleton{

    100%{

        transform:translateX(100%);

    }

}

/* =========================================================
   TOASTS
========================================================= */

.toast-container{

    position:fixed;

    top:25px;

    right:25px;

    z-index:9000;

    display:flex;

    flex-direction:column;

    gap:15px;

}

.toast{

    background:white;

    min-width:320px;

    border-radius:18px;

    padding:18px;

    display:flex;

    gap:14px;

    align-items:center;

    box-shadow:var(--shadow-lg);

    animation:slideUp .35s ease;

}

.toast.success{

    border-left:5px solid var(--success);

}

.toast.error{

    border-left:5px solid var(--danger);

}

.toast.warning{

    border-left:5px solid var(--warning);

}

/* =========================================================
   NOTIFICATION PANEL
========================================================= */

.notification-panel{

    position:absolute;

    top:70px;

    right:0;

    width:360px;

    background:white;

    border-radius:22px;

    box-shadow:var(--shadow-lg);

    display:none;

    overflow:hidden;

}

.notification-panel.show{

    display:block;

}

.notification-item{

    padding:18px 20px;

    border-bottom:1px solid var(--border);

    transition:.25s;

}

.notification-item:hover{

    background:#F8FAFC;

}

.notification-item:last-child{

    border-bottom:none;

}

/* =========================================================
   BADGES
========================================================= */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    padding:8px 16px;

    font-size:.75rem;

    font-weight:700;

}

.badge.blue{

    background:#DBEAFE;

    color:#1D4ED8;

}

.badge.green{

    background:#DCFCE7;

    color:#166534;

}

.badge.red{

    background:#FEE2E2;

    color:#991B1B;

}

.badge.orange{

    background:#FEF3C7;

    color:#92400E;

}

/* =========================================================
   FAB
========================================================= */

.fab{

    position:fixed;

    bottom:28px;

    right:28px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:

    linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:var(--shadow-lg);

    z-index:200;

    transition:.3s;

}

.fab:hover{

    transform:scale(1.08);

}

/* =========================================================
   DARK MODE
========================================================= */

body.dark{

    --background:#0F172A;

    --surface:#1E293B;

    --surface-hover:#334155;

    --text:#F8FAFC;

    --text-light:#CBD5E1;

    --border:#334155;

}

body.dark .sidebar,
body.dark .dashboard-card,
body.dark .dashboard-widget,
body.dark .course-card,
body.dark .note-card,
body.dark .material-card,
body.dark .assignment-card,
body.dark .announcement-item,
body.dark .syllabus-card,
body.dark .profile-card,
body.dark .settings-card,
body.dark .announcement-card,
body.dark .modal{

    background:var(--surface);

    color:var(--text);

}

body.dark .announcement-item.unread{

    background:rgba(74,144,226,.12);

}

body.dark .student-profile{

    background:var(--surface);

}

body.dark input,
body.dark textarea{

    background:var(--surface-hover);

    color:var(--text);

    border-color:var(--border);

}

body.dark .glass{

    background:rgba(30,41,59,.72);

}

/* =========================================================
   SELECTION
========================================================= */

::selection{

    background:var(--primary);

    color:white;

}

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

.sidebar{

    transition:
        width .3s ease,
        left .3s ease,
        transform .3s ease;

}

 .sidebar.hidden{

    transform:translateX(-100%);

}

.main-content{

    transition:margin-left .3s ease;

}

.main-content.expanded{

    margin-left:0;

}

.announcement-badge.information{

    background:#2196f3;

}

.announcement-badge.event{

    background:#4caf50;

}

.announcement-badge.reminder{

    background:#ff9800;

}

.announcement-badge.urgent{

    background:#f44336;

}

/* ==========================================
   MATERIALS PAGE
========================================== */

.materials-page{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.page-header h2{
    font-size:2rem;
    font-weight:700;
    color:var(--text-primary);
}

.page-header p{
    color:var(--text-secondary);
    margin-top:8px;
}

.materials-toolbar{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    align-items:center;
}

.materials-toolbar input{

    flex:1;

    min-width:280px;

    padding:14px 18px;

    border:none;

    border-radius:12px;

    background:var(--card-bg);

    color:var(--text-primary);

    box-shadow:var(--shadow-sm);

    outline:none;

}

.materials-toolbar select{

    padding:14px 18px;

    border:none;

    border-radius:12px;

    background:var(--card-bg);

    color:var(--text-primary);

    box-shadow:var(--shadow-sm);

    cursor:pointer;

}

.materials-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(420px,1fr));

    gap:25px;

}

.material-card{

    background:var(--card-bg);

    border-radius:18px;

    padding:24px;

    box-shadow:var(--shadow-md);

    transition:.3s;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.material-card:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow-lg);

}

.material-title{

    display:flex;

    align-items:center;

    gap:15px;

}

.material-title .material-icons{

    font-size:38px;

    color:var(--brand-primary);

}

.material-title h3{

    font-size:1.15rem;

    color:var(--text-primary);

}

.material-meta{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.material-meta span{

    padding:6px 14px;

    border-radius:50px;

    background:rgba(74,144,226,.12);

    color:var(--brand-primary);

    font-size:.85rem;

    font-weight:600;

}

.material-description{

    color:var(--text-secondary);

    line-height:1.7;

    min-height:45px;

}

.material-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;

    margin-top:auto;

    padding-top:18px;

    border-top:1px solid rgba(0,0,0,.08);

}

.material-footer small{

    color:var(--text-secondary);

}

.material-footer a{

    display:flex;

    align-items:center;

    gap:8px;

}

@media(max-width:768px){

.materials-grid{

    grid-template-columns:1fr;

}

.material-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:20px;

    padding-top:15px;

    border-top:1px solid rgba(255,255,255,.08);

}

.material-footer small{

    color:var(--text-secondary);

}

.material-footer .primary-btn{

    width:auto !important;

    flex:none !important;

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    margin-left:20px;

}


/* Compact toolbar row (search + course filter + upload) instead of
   stacking each control on its own full-width line - shrinking each
   control keeps them all reachable in a single row without eating
   vertical space on small screens. */
.materials-toolbar{

    flex-wrap:nowrap;

    gap:8px;

}

.materials-toolbar input{

    min-width:0;

    flex:1;

    padding:10px 14px;

    font-size:14px;

}

.materials-toolbar select{

    flex:0 0 auto;

    width:auto;

    max-width:92px;

    padding:10px 8px;

    font-size:13px;

}

.materials-toolbar .primary-btn{

    flex:0 0 auto;

    width:44px;

    height:44px;

    padding:0;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}

.materials-toolbar .primary-btn .btn-label{

    display:none;

}

}


/* ==========================================
   ANNOUNCEMENTS PAGE
========================================== */

#announcement-list{
    display:grid;
    gap:1.5rem;
    margin-top:1.5rem;
}

.announcement-item{
    background:var(--surface,#fff);
    border-radius:16px;
    padding:1.5rem;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    border-left:5px solid var(--brand-primary,#4a90e2);
    transition:.25s ease;
}

.announcement-item:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 24px rgba(0,0,0,.12);
}

.announcement-item.pinned{
    border-left-color:#f39c12;
}

/* Unread highlight - a tinted card plus a small dot next to the type
   badge, cleared the moment the student taps "Read More" on it. */
.announcement-item.unread{
    background:rgba(74,144,226,.06);
    border-left-color:var(--brand-primary,#4a90e2);
}

.announcement-unread-dot{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#EF4444;
    margin-right:8px;
    vertical-align:middle;
}

.announcement-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    margin-bottom:1rem;
    flex-wrap:wrap;
}

.announcement-title{
    margin:0;
    font-size:1.2rem;
    font-weight:700;
}

.announcement-body{
    line-height:1.7;
    margin:1rem 0;
    color:var(--text-secondary,#666);
}

.announcement-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:1.25rem;
    flex-wrap:wrap;
    gap:1rem;
}

.announcement-date{
    color:#888;
    font-size:.9rem;
}

@media(max-width:768px){

    .announcement-header,
    .announcement-footer{

        flex-direction:column;
        align-items:flex-start;

    }

}

.course-card{
    background:#fff;
    border:1px solid #e6eaf2;
    border-radius:14px;
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:16px;
    transition:.25s;
    box-shadow:0 4px 16px rgba(0,0,0,.05);
}

.course-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(0,0,0,.12);
}

.course-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
}

.course-header h3{
    margin:0;
    font-size:1.45rem;
    color:var(--brand-primary);
    font-weight:700;
}

.course-card h4{
    margin:0;
    font-size:1.05rem;
    font-weight:600;
    color:#2d3748;
    line-height:1.4;
}

.course-meta{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:6px;
}

.course-meta span{
    background:#f7f9fc;
    border-radius:10px;
    padding:10px;
    text-align:center;
    font-size:.9rem;
    font-weight:600;
    color:#555;
}

.course-status{
    padding:6px 12px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:700;
    white-space:nowrap;
}

.course-status.active{
    background:#d9fbe5;
    color:#15803d;
}

.course-status.inactive{
    background:#fde2e2;
    color:#b91c1c;
}

.course-elective-badge{
    background:#fef3c7 !important;
    color:#92400e !important;
}

.course-group-picker{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--border);
}

.course-group-picker label{
    font-size:.85rem;
    font-weight:600;
    color:var(--text-light);
}

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

.course-remove-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:8px;
    background:transparent;
    color:var(--text-light);
    transition:.15s ease;
}

.course-remove-btn .material-icons{
    font-size:1.1rem;
}

.course-remove-btn:hover{
    background:rgba(239,68,68,.1);
    color:var(--danger);
}

.course-group-pills{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.course-group-pill{
    min-width:34px;
    padding:6px 12px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    font-size:.82rem;
    font-weight:600;
    transition:.15s ease;
}

.course-group-pill:hover{
    border-color:var(--primary);
    color:var(--primary-dark);
}

.course-group-pill.active{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    border-color:transparent;
    color:#fff;
}

/* ===== Dark Mode Courses ===== */

body.dark .course-card{
    background: var(--surface-dark);
    border-color: rgba(255,255,255,.08);
}

body.dark .course-header h3{
    color: var(--brand-primary);
}

body.dark .course-card h4{
    color: #f8fafc;
}

body.dark .course-meta span{
    background: rgba(255,255,255,.06);
    color: #d1d5db;
}

/* ========================================
   PROFILE PAGE
======================================== */

.profile-container{

    max-width:1100px;
    margin:30px auto;
    display:flex;
    flex-direction:column;
    gap:24px;

}

.profile-header{

    background:var(--surface);
    border-radius:20px;
    padding:40px;
    text-align:center;
    box-shadow:var(--shadow);

}

.profile-avatar{

    width:130px;
    height:130px;
    border-radius:50%;
    object-fit:cover;
    border:5px solid var(--brand-primary);
    margin-bottom:18px;

}

.profile-header h2{

    font-size:2rem;
    margin-bottom:8px;
    color:var(--text-primary);

}

.profile-header p{

    color:var(--text-secondary);
    margin-bottom:18px;

}

.profile-status{

    display:inline-block;
    padding:8px 18px;
    border-radius:999px;
    background:#e8f7ec;
    color:#198754;
    font-size:.9rem;
    font-weight:600;

}

body.dark .profile-status{

    background:#21452f;
    color:#7dffad;

}

/* Cards */

.profile-card{

    background:var(--surface);
    border-radius:18px;
    padding:28px;
    box-shadow:var(--shadow);

}

.profile-card h3{

    margin-bottom:24px;
    color:var(--text-primary);
    font-size:1.2rem;

}

/* Grid */

.profile-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;

}

.profile-item{

    display:flex;
    align-items:flex-start;
    gap:15px;
    padding:16px;
    border-radius:14px;
    background:rgba(74,144,226,.06);

}

body.dark .profile-item{

    background:rgba(255,255,255,.05);

}

.profile-item .material-icons{

    font-size:30px;
    color:var(--brand-primary);

}

.profile-item small{

    display:block;
    color:var(--text-secondary);
    margin-bottom:6px;

}

.profile-item strong{

    color:var(--text-primary);
    font-size:1rem;

}

/* Statistics */

.profile-stats{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:20px;

}

.profile-stat{

    text-align:center;
    padding:28px 20px;
    border-radius:16px;
    background:linear-gradient(
        135deg,
        var(--brand-primary),
        var(--brand-purple)
    );
    color:black;

}

.body.dark .profile-stat{

    background:linear-gradient(
        135deg,
        var(--brand-primary),
        var(--brand-purple)
    );

    color: white;

}

.profile-stat h2{

    font-size:2rem;
    margin-bottom:8px;

}

.profile-stat span{

    opacity:.95;
    font-size:.95rem;

}

/* Mobile */

@media(max-width:768px){

    .profile-header{
        display: flex;
        align-items: center;
        gap: 16x;
        padding:28px 20px;
        flex-wrap: wrap;

    }

    .profile-avatar{

        width:100px;
        height:100px;

    }

    .profile-card{

        padding:20px;

    }

    .profile-stats{

        grid-template-columns:repeat(2,1fr);

    }

}

/* ========================================
   SETTINGS PAGE
======================================== */

.settings-container{

    max-width:1000px;
    margin:30px auto;
    display:flex;
    flex-direction:column;
    gap:24px;

}

.settings-card{

    background:var(--surface);
    border-radius:18px;
    padding:28px;
    box-shadow:var(--shadow);

}

.settings-card h3{

    margin-bottom:24px;
    color:var(--text-primary);

}

.setting-item{

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:18px 0;
    border-bottom:1px solid rgba(0,0,0,.08);

}

.setting-item:last-child{

    border-bottom:none;

}

body.dark .setting-item{

    border-bottom:1px solid rgba(255,255,255,.08);

}

.setting-item strong{

    display:block;
    color:var(--text-primary);
    margin-bottom:6px;

}

.setting-item p{

    color:var(--text-secondary);
    font-size:.95rem;
    margin:0;

}

/* =========================
   IOS STYLE SWITCH
========================= */

.switch{

    position:relative;
    display:inline-block;
    width:56px;
    height:30px;

}

.switch input{

    opacity:0;
    width:0;
    height:0;

}

.slider{

    position:absolute;
    inset:0;
    cursor:pointer;
    background:#cfd3d7;
    border-radius:50px;
    transition:.3s;

}

.slider::before{

    content:"";
    position:absolute;
    height:24px;
    width:24px;
    left:3px;
    top:3px;
    background:white;
    border-radius:50%;
    transition:.3s;
    box-shadow:0 3px 8px rgba(0,0,0,.2);

}

.switch input:checked + .slider{

    background:var(--brand-primary);

}

.switch input:checked + .slider::before{

    transform:translateX(26px);

}

/* =========================
   DANGER CARD
========================= */

.settings-card.danger{

    background:none;
    box-shadow:none;
    padding:0;

}

.danger-btn{

    width:100%;
    padding:18px;
    border:none;
    border-radius:16px;
    background:#dc3545;
    color:#fff;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;

    transition:.25s;

}

.danger-btn:hover{

    background:#bb2d3b;
    transform:translateY(-2px);

}

/* =========================
   BUTTONS
========================= */

.setting-item .primary-btn{

    min-width:150px;
    justify-content:center;

}

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

@media(max-width:768px){

    .settings-card{

        padding:22px;

    }

    .setting-item{

        flex-direction:column;
        align-items:flex-start;

    }

    .setting-item .primary-btn{

        width:100%;

    }

    .switch{

        align-self:flex-end;

    }

}

body.dark .settings-card{

    background:#1b1e24;

    border:1px solid rgba(255,255,255,.06);

    box-shadow:
        0 10px 30px rgba(0,0,0,.45);

}

body.dark .settings-card h3{

    color:#ffffff;

}

body.dark .setting-item strong{

    color:#f5f5f5;

}

body.dark .setting-item p{

    color:#b6bcc7;

}

.setting-item .primary-btn{

    min-width:170px;

    justify-content:center;

    border-radius:14px;

    font-weight:600;

    background:linear-gradient(
        135deg,
        #4a90e2,
        #9013fe
    );

    color:#ffffff;

    border:none;

    transition:.25s;

}

.setting-item .primary-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 24px rgba(74,144,226,.35);

}

.setting-item .primary-btn .material-icons{

    color:#ffffff;

}


body.dark .setting-item .primary-btn{

    box-shadow:

        0 10px 25px rgba(0,0,0,.35);

}

.danger-btn{

    width:100%;

    padding:18px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    font-size:1rem;

    font-weight:700;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    background:linear-gradient(

        135deg,

        #ff4d4d,

        #d63031

    );

    transition:.3s;

}

.danger-btn:hover{

    transform:translateY(-3px);

    box-shadow:

        0 14px 30px rgba(214,48,49,.4);

}

/* ===========================================
   UNIVERSAL MODAL
=========================================== */

.ui-modal-overlay{

    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.55);

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:9999;

    backdrop-filter:blur(6px);

}

.ui-modal-overlay.show{

    opacity:1;
    visibility:visible;

}

.ui-modal{

    width:min(420px,92%);

    background:#ffffff;

    border-radius:22px;

    padding:36px;

    text-align:center;

    transform:translateY(30px);

    transition:.3s;

    box-shadow:

        0 30px 70px rgba(0,0,0,.25);

}

.ui-modal-overlay.show .ui-modal{

    transform:none;

}

body.dark .ui-modal{

    background:#1d2028;

    color:#fff;

}

.ui-modal h2{

    margin:18px 0 12px;

}

.ui-modal p{

    color:var(--text-secondary);

    line-height:1.6;

}

body.dark .ui-modal p{

    color:#b8bec8;

}

.ui-modal-icon{

    width:72px;
    height:72px;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    margin:auto;

    font-size:38px;

}

.ui-modal-icon span{

    font-size:40px;

}

/* Success */

.ui-modal-icon.success{

    background:#d4edda;

    color:#28a745;

}

/* Error */

.ui-modal-icon.error{

    background:#fde2e2;

    color:#dc3545;

}

/* Warning */

.ui-modal-icon.warning{

    background:#fff3cd;

    color:#f39c12;

}

/* Info */

.ui-modal-icon.info{

    background:#d9ecff;

    color:#3498db;

}

.ui-modal-actions{

    display:flex;

    gap:16px;

    margin-top:30px;

}

.ui-modal-actions button{

    flex:1;

}

/* ==========================================
    AI MEMORY PANEL
========================================== */

.memory-modal{

    width:min(560px,92%);
    max-height:85vh;

    background:var(--card-bg,#fff);
    border-radius:22px;
    padding:28px;

    display:flex;
    flex-direction:column;
    gap:18px;

    transform:translateY(30px);
    transition:.3s;

    box-shadow:0 30px 70px rgba(0,0,0,.25);

}

.ui-modal-overlay.show .memory-modal{
    transform:none;
}

.memory-modal-header{

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;

}

.memory-modal-header h2{

    display:flex;
    align-items:center;
    gap:8px;

    margin:0 0 4px;
    font-size:1.25rem;
    color:var(--text-primary);

}

.memory-modal-header p{

    margin:0;
    color:var(--text-secondary);
    font-size:.9rem;

}

.memory-list{

    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:80px;

}

.memory-item{

    display:flex;
    align-items:flex-start;
    gap:8px;

    padding:10px 12px;
    border:1px solid var(--border-color);
    border-radius:14px;

}

.memory-text{

    flex:1;
    resize:none;
    border:none;
    background:transparent;
    color:var(--text-primary);
    font:inherit;
    line-height:1.4;
    min-height:44px;

}

.memory-text:focus{
    outline:none;
}

.memory-item-actions{

    display:flex;
    flex-direction:column;
    gap:4px;

}

.memory-save-btn,
.memory-delete-btn{

    background:transparent;
    border:none;
    cursor:pointer;
    padding:6px;
    border-radius:50%;
    display:flex;
    color:var(--text-secondary);

}

.memory-save-btn:hover{
    background:rgba(16,185,129,.12);
    color:var(--success,#10B981);
}

.memory-delete-btn:hover{
    background:rgba(239,68,68,.12);
    color:var(--danger,#EF4444);
}

.memory-empty{

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
    padding:24px 12px;
    color:var(--text-secondary);

}

.memory-empty .material-icons{
    font-size:2rem;
    opacity:.6;
}

.memory-loading{
    text-align:center;
    color:var(--text-secondary);
    padding:20px;
}

.memory-add-row{

    display:flex;
    gap:8px;
    border-top:1px solid var(--border-color);
    padding-top:16px;

}

.memory-add-row input{

    flex:1;
    padding:10px 14px;
    border-radius:12px;
    border:1px solid var(--border-color);
    background:transparent;
    color:var(--text-primary);
    font:inherit;

}

.memory-add-row input:focus{
    outline:none;
    border-color:var(--brand-primary);
}

.memory-add-row .primary-btn{

    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 16px;
    border-radius:12px;

}

/* ===========================
   TOASTS - DARK MODE
=========================== */

body.dark .toast{

    background:#1f242d;

    color:#ffffff;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:0 12px 30px rgba(0,0,0,.45);

}

body.dark .toast.success{

    border-left:4px solid #22c55e;

}

body.dark .toast.error{

    border-left:4px solid #ef4444;

}

body.dark .toast.info{

    border-left:4px solid #3b82f6;

}

body.dark .toast .material-icons{

    color:inherit;

}

/* =========================================
   PASSWORD MODAL
========================================= */

.password-modal{
    width:min(460px,92vw);
    border-radius:20px;
    overflow:hidden;
    background:var(--card-bg,#ffffff);
    box-shadow:0 25px 60px rgba(0,0,0,.18);
    animation:modalPop .25s ease;
}

.password-modal .modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 26px;
    border-bottom:1px solid rgba(0,0,0,.08);
}

.password-modal .modal-header h2{
    margin:0;
    font-size:1.25rem;
    font-weight:700;
    color:var(--text-primary,#222);
}

.password-modal .modal-header button{
    border:none;
    background:none;
    font-size:24px;
    cursor:pointer;
    color:#888;
    transition:.2s;
}

.password-modal .modal-header button:hover{
    color:#f44336;
    transform:rotate(90deg);
}

.password-modal .modal-content{
    padding:25px;
}

.password-modal .form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:18px;
}

.password-modal label{
    font-size:.9rem;
    font-weight:600;
    color:var(--text-secondary,#555);
}

.password-modal input{
    width:100%;
    padding:14px 16px;
    border:1px solid #d8d8d8;
    border-radius:12px;
    outline:none;
    font-size:.95rem;
    transition:.25s;
    background:#fff;
    color:#222;
}

.password-modal input:focus{
    border-color:var(--brand-primary,#4a90e2);
    box-shadow:0 0 0 3px rgba(74,144,226,.15);
}

.password-modal .modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    margin-top:25px;
}

.password-modal .secondary-btn{
    padding:12px 22px;
    border-radius:12px;
    border:1px solid #d0d0d0;
    background:#f5f5f5;
    color:#444;
    cursor:pointer;
    transition:.25s;
}

.password-modal .secondary-btn:hover{
    background:#ececec;
}

.password-modal .primary-btn{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 22px;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,#4a90e2,#7b61ff);
    color:#fff;
    cursor:pointer;
    font-weight:600;
    transition:.25s;
}

.password-modal .primary-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(74,144,226,.25);
}

/* =========================================
   MATERIAL UPLOAD MODAL
========================================= */

.material-upload-modal .form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:18px;
}

.material-upload-modal label{
    font-size:.9rem;
    font-weight:600;
    color:var(--text-secondary,#555);
}

.material-upload-modal .form-hint{
    font-size:.8rem;
    color:var(--text-secondary,#666);
    line-height:1.4;
}

.material-upload-modal input,
.material-upload-modal select,
.material-upload-modal textarea{
    width:100%;
    padding:14px 16px;
    border:1px solid #d8d8d8;
    border-radius:12px;
    outline:none;
    font-size:.95rem;
    transition:.25s;
    background:#fff;
    color:#222;
    font-family:inherit;
    resize:vertical;
}

.material-upload-modal input:focus,
.material-upload-modal select:focus,
.material-upload-modal textarea:focus{
    border-color:var(--brand-primary,#4a90e2);
    box-shadow:0 0 0 3px rgba(74,144,226,.15);
}

body.dark .material-upload-modal input,
body.dark .material-upload-modal select,
body.dark .material-upload-modal textarea{
    background:var(--card-bg);
    color:var(--text-primary);
    border-color:rgba(255,255,255,.12);
}

/* =========================================
   DARK MODE
========================================= */

body.dark .password-modal{
    background:#1d1f24;
}

body.dark .password-modal .modal-header{
    border-bottom:1px solid rgba(255,255,255,.08);
}

body.dark .password-modal h2{
    color:#fff;
}

body.dark .password-modal label{
    color:#d8d8d8;
}

body.dark .password-modal input{
    background:#2b2e35;
    border:1px solid #3b4048;
    color:#fff;
}

body.dark .password-modal input::placeholder{
    color:#9aa2ac;
}

body.dark .password-modal input:focus{
    border-color:#4a90e2;
    box-shadow:0 0 0 3px rgba(74,144,226,.25);
}

body.dark .password-modal .secondary-btn{
    background:#2b2e35;
    border:1px solid #3b4048;
    color:#fff;
}

body.dark .password-modal .secondary-btn:hover{
    background:#383d46;
}

@keyframes modalPop{

    from{
        transform:scale(.9);
        opacity:0;
    }

    to{
        transform:scale(1);
        opacity:1;
    }

}

.password-input{

    position:relative;

}

.password-input input{

    padding-right:50px;

}

.password-toggle{

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    cursor:pointer;

    color:#888;

    user-select:none;

    transition:.2s;

}

.password-toggle:hover{

    color:var(--brand-primary);

}

body.dark .password-toggle{

    color:#b5b5b5;

}

body.dark .password-toggle:hover{

    color:#4a90e2;

}

#notification-panel {
    position: absolute;
    top: 60px;
    right: 15px;

    display: none;          /* Hidden by default */
    opacity: 0;
    visibility: hidden;

    transition: opacity .25s ease;
}

#notification-panel.show {
    display: block;
    opacity: 1;
    visibility: visible;
}

#notification-panel {
    position: absolute;          /* or fixed */
    top: 60px;
    right: 20px;

    width: 340px;
    max-height: 450px;
    overflow-y: auto;

    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(0,0,0,.18);

    z-index: 99999;

    display: none;
}

#notification-panel.show {
    display: block;
}

/* =========================================================
   MOBILE RESPONSIVENESS FIXES
========================================================= */
@media(max-width:768px){
    .sidebar {
        width: 280px;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        /* Hide off-screen by default on mobile */
        transform: translateX(-100%); 
        transition: transform .35s ease;
        z-index: 1000; /* Ensure it stays above mobile content */
    }

    /* Class to slide the sidebar into view when hamburger is clicked */
    .sidebar.show {
        transform: translateX(0);
    }

    .main-content {
        /* Let the main content take up 100% width on mobile */
        margin-left: 0 !important; 
        padding: 20px;
        transition: padding .35s ease;
    }
    
    /* Add an overlay background when sidebar is open (Optional but recommended) */
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 999;
        display: none;
    }
    .sidebar-overlay.show {
        display: block;
    }

    /* ==========================================
        BOTTOM NAVBAR
        z-index sits BELOW the sidebar (1000) and its overlay (999)
        on purpose - opening the hamburger menu should visually cover
        this too, not float above the dimmed backdrop.
    ========================================== */
    .bottom-navbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 500;

        background: var(--card-bg, #fff);
        border-top: 1px solid var(--border-color, #e5e7eb);
        box-shadow: 0 -2px 12px rgba(0,0,0,.05);

        padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    }

    .bottom-nav-item {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;

        background: transparent;
        border: none;
        padding: 4px 2px;
        border-radius: 12px;

        color: var(--text-secondary, #6b7280);
        font-size: 10.5px;
        font-weight: 600;
        font-family: inherit;
        line-height: 1.1;
        letter-spacing: .1px;

        cursor: pointer;
        transition: color .2s ease, transform .15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .bottom-nav-item:active {
        transform: scale(.94);
    }

    .bottom-nav-item .material-icons {
        font-size: 21px;
        padding: 4px 16px;
        border-radius: 999px;
        transition: background-color .2s ease, color .2s ease;
    }

    .bottom-nav-item.active {
        background: transparent;
    color: var(--primary);
    box-shadow: none;
    }

    .bottom-nav-item .forum-nav-badge {
        position: absolute;
        top: 0px;
        right: calc(50% - 22px);
        margin-left: 0;
    }

    .bottom-nav-item.active .material-icons {
        background: rgba(20, 199, 180, 0.14);
    color: var(--primary);
    padding: 6px 12px;
    border-radius: 999px;
    }

    /* Keep the last bit of every page from hiding behind the navbar */
    .main-content {
        padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }
}

@media (min-width: 769px) {
    .bottom-navbar {
        display: none;
    }
}

/* =========================================================
   CSC AI SIDEBAR RESPONSIVE TOGGLE
========================================================= */
@media (max-width: 768px) {
    /* Container setup */
    .ai-layout {
        position: relative;
        overflow: hidden;
        display: flex;
        width: 100%;
        height: calc(100vh - 70px); /* Adjust based on topbar height */
    }

    /* Hide AI sidebar off-screen by default */
    .ai-sidebar {
        position: absolute;
        top: 0;
        left: -100%;
        width: 260px;
        height: 100%;
        background: #fff; /* Match your theme surface color */
        z-index: 90;
        transition: left 0.3s ease;
    }

    /* Push main chat panel to fill the screen on mobile */
    .ai-main {
        width: 100% !important;
        flex: 1;
        position: relative;
    }

    /* Active class toggled by JS to slide the sidebar out */
    .ai-layout.show-sidebar .ai-sidebar {
        left: 0;
    }

    /* Floating hamburger button - the AI page has no header bar to
       anchor it in anymore, so it sits fixed over the top-left of
       the chat area instead. */
    .ai-toggle-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 12px;
        left: 12px;
        width: 38px;
        height: 38px;
        background: var(--card-bg, #fff);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        padding: 0;
        color: inherit;
        box-shadow: 0 2px 10px rgba(0,0,0,.12);
        z-index: 20;
    }
}

body.dark .ai-toggle-btn {
    background: #1d1d1f;
}

/* Hide the toggle button when on desktop views */
@media (min-width: 769px) {
    .ai-toggle-btn {
        display: none !important;
    }
}

/* Small chevron button toggling the MAIN app sidebar (not the chat
   list) from the AI page. Shown at every width now - sidebar.js's
   toggle handler is viewport-aware (mobile overlay vs. desktop
   collapse), so there's no longer a width range where this would be
   wired to the wrong toggle logic. Previously this only appeared
   above 900px, which is why it never showed up on mobile at all. */
.ai-toggle-btn-right {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 12px;
    /* #ai-main-sidebar-toggle carries BOTH .ai-toggle-btn and
       .ai-toggle-btn-right in the markup, so it also picks up
       .ai-toggle-btn's "left: 12px". This rule only sets "right",
       so that inherited "left" never gets cleared - and per the
       CSS spec, an absolutely positioned box with left, width and
       right all pinned resolves in favor of "left" (in LTR), so
       the button was actually rendering at left:12px too, directly
       on top of the AI sidebar toggle. Explicitly clearing "left"
       here is what makes "right" actually take effect. */
    left: auto;
    right: 12px;
    width: 32px;
    height: 32px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    z-index: 20;
}

body.dark .ai-toggle-btn-right {
    background: #1d1d1f;
    border-color: rgba(255,255,255,.12);
}

/* =========================================================
   MOBILE RESPONSIVENESS SCREEN BOUNDS FIXES
========================================================= */
@media (max-width: 768px) {
    /* Ensure the document body fills the view exactly without horizontal clipping */
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Override fixed margins intended for the desktop sidebar layout */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important; /* Reduces padding to save horizontal real estate */
    }

    /* Correct grid containers that overflow on narrower mobile screens */
    .dashboard-grid, 
    .content-grid, 
    .materials-grid, 
    .ai-suggestions {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 16px !important;
    }

    /* Stop page headers from blowing past bounds. The toolbar
       (search/filter/upload) is handled separately above as a
       compact single row rather than being stacked full-width. */
    .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .page-header input {
        width: 100% !important;
        max-width: 100% !important;
    }

    .materials-toolbar {
        max-width: 100% !important;
    }

    /* Make large cards fluid to prevent clipping */
    .welcome-card, 
    .announcement-card, 
    .dashboard-card, 
    .course-card, 
    .note-card, 
    .material-card, 
    .assignment-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 20px !important; /* Keep internal padding compact */
    }

    /* Force the main AI wrapper to stay bound within screen limits */
    .ai-layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100vh - 80px) !important;
    }

    .ai-main {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 !important;
    }
}

/* Additional layout security for extra-small devices */
@media (max-width: 480px) {
    .main-content {
        padding: 12px !important;
    }

    .welcome-card h1 {
        font-size: 1.5rem !important;
    }
}

/* ==========================================================================
   CONSOLIDATED MOBILE RESPONSIVENESS & AI INTERFACE FIXES
   ========================================================================== */

/* --- 1. Global Viewport Safety Blocks --- */
@media (max-width: 768px) {
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .portal-container {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }
}

/* --- 2. Structural AI Viewport Lockdown (Strict Table Wrapping Fix) --- */
#ai.page.active,
.ai-layout,
.ai-main,
.chat-message,
.message-bubble,
.message-content {
    min-width: 0 !important;      /* Forces browser layout engines to allow shrinking */
    max-width: 100% !important;    /* Locks layout frame parameters */
}

.chat-body {
    overflow-x: hidden !important; /* Disallows horizontal shift gestures on message lists */
}

.chat-body {
    flex: 1;                  /* Absorbs all remaining height */
    overflow-y: auto;         /* Forces scrolling inside the messages */
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}

.chat-footer {
    padding: 12px 16px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* CRITICAL: Stops the footer from compressing or changing size */
    width: 100%;
}

.chat-input-pill {
    display: flex;
    align-items: center;
    background: var(--background);
    border: none;
    border-radius: 24px;
    padding: 6px 12px;
    flex: 1;
    min-width: 0;
}

#chat-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    padding: 8px 4px;
    resize: none; /* Prevents textareas from being manually dragged larger */
    max-height: 80px; /* Limits growth if it's an auto-expanding input */
}

.chat-container {
    display: flex;
    flex-direction: column;
    height: 500px; /* Or whatever fixed height you prefer */
    width: 100%;
    max-width: 400px; /* Adjust to match your design UI */
    position: fixed;
    bottom: 90px;
    right: 30px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    overflow: hidden; /* Prevents the container itself from stretching or growing */
}

.message-content {
    width: 100% !important;
    overflow: hidden !important;
}

/* Strict Table Confinement Box Layout */
.message-content table {
    display: block !important;     /* Changes formatting context so table respects boundaries */
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;    /* Forces localized finger scrolling inside message bubble */
    white-space: nowrap !important; /* Preserves structure grid rows layout alignment */
    border-collapse: collapse;
    margin: 14px 0 !important;
    -webkit-overflow-scrolling: touch;
}

.message-content th,
.message-content td {
    padding: 8px 12px !important;
    border: 1px solid var(--border);
    white-space: normal !important; /* Enables smooth paragraph lines inside cells */
}

/* --- 3. Unified Input Actions & Attachment Button Layout --- */
.ai-input-container {
    display: flex !important;
    align-items: flex-end !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px !important;
}

.ai-input-container textarea {
    flex: 1 !important;
    font-size: 16px !important;    /* Essential parameter to completely block iOS/Safari auto-zoom */
}

/* Attachment Trigger Style Button Setup */
.attachment-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.attachment-btn:hover {
    background: var(--surface-hover);
    color: var(--primary);
    border-color: var(--primary);
}

.attachment-btn .material-icons {
    font-size: 22px;
}

@media (max-width: 768px) {
    .ai-layout {
        grid-template-columns: 1fr !important; /* Forces vertical stacked mobile layout matrix */
        width: 100% !important;
    }

    .attachment-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 10px;
    }
    
    .attachment-btn .material-icons {
        font-size: 20px;
    }
}

/* Dark Mode Alignment Variables Rules Mapping */
body.dark .attachment-btn {
    background: #242931;
    border-color: #3b4048;
    color: #b5b5b5;
}

body.dark .attachment-btn:hover {
    background: #2c323c;
    color: #4a90e2;
    border-color: #4a90e2;
}

@media (max-width: 768px) {

    #ai {

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        left: 0 !important;

        right: 0 !important;

    }

}

@media (max-width:768px){
    .ai-main
    .chat-messages{

        width:100%;

        max-width:100%;

        margin:0;

        border-radius:0;

    }

}

.chat-input-wrapper{

    display:flex;

    align-items:flex-end;

    gap:8px;

    padding:10px 14px;

    border-radius:28px;

    background:white;

    border:1px solid #ddd;

}

#chat-input{

    flex:1;

    border:none;

    resize:none;

    background:none;

    outline:none;

    min-height:24px;

    max-height:120px;

}

.input-action{

    transition:.25s ease;

}

.input-action.hide{

    opacity:0;

    transform:scale(.8);

    width:0;

    margin:0;

    overflow:hidden;

    pointer-events:none;

}

.input-action.hide{

    opacity:0;

    transform:translateX(-10px);

    width:0;

}

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

.chat-footer{

    position:sticky;

    bottom:0;

    width:100%;

    padding:14px 18px 20px;

    background:transparent;

    border-top:none;

    box-sizing:border-box;

    z-index:100;

}

/* ==========================================
   INPUT PILL
========================================== */

.chat-input-pill{

    width:100%;

    display:flex;

    align-items:flex-end;

    gap:10px;

    padding:10px 14px;

    border-radius:30px;

    background:var(--input-bg,#f8fafc);

    border:none;

    transition:.25s ease;

    box-sizing:border-box;

    box-shadow:

        0 4px 18px rgba(0,0,0,.05);

}

/* ==========================================
   TEXTAREA
========================================== */

#chat-input{

    flex:1;

    width:100%;

    min-width:0;

    min-height:24px;

    max-height:140px;

    border:none;

    outline:none;

    resize:none;

    overflow-y:auto;

    background:transparent;

    color:var(--text-color,#222);

    font-size:15px;

    line-height:1.5;

    font-family:inherit;

    padding:6px 0;

}

/* Placeholder */

#chat-input::placeholder{

    color:#8a8f98;

}

/* Scrollbar */

#chat-input::-webkit-scrollbar{

    width:5px;

}

#chat-input::-webkit-scrollbar-thumb{

    background:#bdbdbd;

    border-radius:20px;

}

/* ==========================================
   ICON BUTTONS
========================================== */

.input-btn{

    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:transparent;

    color:#666;

    cursor:pointer;

    transition:

        .25s ease;

    flex-shrink:0;

}

.input-btn:hover{

    background:#ececec;

    color:#6C4CFF;

}

/* ==========================================
   SEND BUTTON
========================================== */

#send-btn{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    cursor:pointer;

    color:white;

    background:linear-gradient(

        135deg,

        #5D5FEF,

        #8C3DFF

    );

    transition:.25s ease;

    box-shadow:

        0 5px 15px rgba(108,76,255,.35);

}

#send-btn:hover{

    transform:scale(1.05);

}

#send-btn:active{

    transform:scale(.95);

}

/* ==========================================
   HIDE ICONS
========================================== */

.input-btn.hide{

    width:0;

    margin:0;

    opacity:0;

    overflow:hidden;

    pointer-events:none;

    transform:translateX(-10px);

}

/* ==========================================
   DARK MODE
========================================== */

body.dark .chat-footer{

    background:#1d1d1f;

    border-top:1px solid #353535;

}

body.dark .chat-input-pill{

    background:#2a2a2d;

    border:none;

    box-shadow:none;

}

body.dark #chat-input{

    color:white;

}

body.dark #chat-input::placeholder{

    color:#9ca3af;

}

body.dark .input-btn{

    color:#cfcfcf;

}

body.dark .input-btn:hover{

    background:#3a3a3d;

    color:#9F8CFF;

}

body.dark #send-btn{

    background:linear-gradient(

        135deg,

        #6C63FF,

        #9B59FF

    );

}

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

@media (max-width:768px){

    .chat-footer{

        padding:10px;

    }

    .chat-input-pill{

        border-radius:26px;

        padding:8px 12px;

        gap:8px;

    }

    #chat-input{

        font-size:16px;

    }

    .input-btn{

        width:34px;

        height:34px;

    }

    #send-btn{

        width:38px;

        height:38px;

    }

}

#send-btn:disabled,
.input-btn:disabled{

    opacity:.45;

    cursor:not-allowed;

    pointer-events:none;

}

#chat-input:disabled{

    opacity:.75;

    cursor:wait;

}

#voice-btn.recording{

    background:#ef4444;

    color:white;

    animation:pulseMic 1s infinite;

}

@keyframes pulseMic{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.15);

    }

    100%{

        transform:scale(1);

    }

}

.message-bubble.streaming::after{

    content:"▋";

    animation:blinkCursor .8s infinite;

    margin-left:2px;

}

/* The streaming bubble is fully re-rendered as markdown every few
   words (so bold/code/lists/etc. show up live), and this class is
   toggled off/on each tick from JS to replay a tiny settle motion on
   the whole bubble. No opacity here on purpose - animating opacity on
   a container that spans most of the screen reads as the entire page
   flashing/blinking, not just the new text. */
.glide-refresh{

    animation:glideIn .28s ease;

}

@keyframes glideIn{

    from{

        transform:translateY(4px);

    }

    to{

        transform:translateY(0);

    }

}

@keyframes blinkCursor{

    50%{

        opacity:0;

    }

}

.current-class{

    border:3px solid #22c55e;

    animation:pulse 2s infinite;

}

/* =========================================
   WEEKLY TIMETABLE
========================================= */

#weekly-timetable{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
    margin-top:20px;
}

/* =========================================
   DAY COLUMN
========================================= */

.day-column{
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(16px);
    border-radius:20px;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    transition:.25s ease;
}

.day-column:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.today-column{
    border:2px solid var(--brand-primary,#4a90e2);
    box-shadow:0 0 0 4px rgba(74,144,226,.15);
}

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

.day-header{
    padding:18px;
    background:linear-gradient(135deg,
        var(--brand-primary,#4a90e2),
        var(--brand-purple,#9013fe));
    color:#fff;
    text-align:center;
}

.day-header h3{
    margin:0;
    font-size:1.1rem;
    font-weight:700;
    letter-spacing:.5px;
}

/* =========================================
   EVENTS
========================================= */

.day-events{
    padding:15px;
    display:flex;
    flex-direction:column;
    gap:14px;
}

/* =========================================
   CARD
========================================= */

.timetable-card{
    background:#fff;
    border-radius:14px;
    padding:15px;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
    transition:.2s ease;
    border-left:6px solid #4a90e2;
}

.timetable-card:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(0,0,0,.1);
}

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

.card-header .time{
    font-size:.82rem;
    color:#777;
    font-weight:600;
}

.timetable-card h4{
    margin:0 0 8px;
    font-size:1rem;
    font-weight:700;
    color:#222;
}

.timetable-card p{
    margin:4px 0;
    font-size:.9rem;
    color:#666;
}

/* =========================================
   BADGES
========================================= */



/* =========================================
   EVENT COLOURS
========================================= */

.badge-lecture,
.type-lecture{
    background:#2563eb;
}

.badge-practical,
.type-practical{
    background:#7c3aed;
}

.badge-tutorial,
.type-tutorial{
    background:#16a34a;
}

.badge-test,
.type-test{
    background:#f59e0b;
}

.badge-exam,
.type-exam{
    background:#dc2626;
}

.badge-seminar,
.type-seminar{
    background:#0891b2;
}

.badge-event,
.type-event{
    background:#ea580c;
}

.badge-holiday,
.type-holiday{
    background:#64748b;
}

/* left borders */

.type-lecture{
    border-left-color:#2563eb;
}

.type-practical{
    border-left-color:#7c3aed;
}

.type-tutorial{
    border-left-color:#16a34a;
}

.type-test{
    border-left-color:#f59e0b;
}

.type-exam{
    border-left-color:#dc2626;
}

.type-seminar{
    border-left-color:#0891b2;
}

.type-event{
    border-left-color:#ea580c;
}

.type-holiday{
    border-left-color:#64748b;
}

/* =========================================
   CURRENT CLASS
========================================= */

.current-class{
    border:2px solid #22c55e !important;
    box-shadow:0 0 18px rgba(34,197,94,.25);
    animation:pulseCurrent 2s infinite;
}

@keyframes pulseCurrent{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.015);
    }

    100%{
        transform:scale(1);
    }

}

/* =========================================
   EMPTY DAY
========================================= */

.no-class{
    padding:40px 15px;
    text-align:center;
    color:#999;
}

.no-class .material-icons{
    font-size:42px;
    display:block;
    margin-bottom:10px;
    opacity:.6;
}

.no-class p{
    margin:0;
    font-size:.92rem;
}

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

@media(max-width:900px){

    #weekly-timetable{

        grid-template-columns:1fr;

    }

}

@media(max-width:600px){

    .day-header{

        padding:14px;

    }

    .timetable-card{

        padding:12px;

    }

    .card-header{

        flex-direction:column;
        align-items:flex-start;
        gap:6px;

    }

}

.timetable-card{
    background:#fff;
    border-left:6px solid #2563eb;
}

.badge{
    display:inline-block;
    padding:4px 10px;
    border-radius:999px;
    font-size:.72rem;
}

.time{
    color:#6b7280;
    font-weight:600;
}

.timetable-card h4{

    font-size:1.05rem;

    color:#111827;

    font-weight:700;

}

.timetable-card p{

    color:#64748b;

}

.card-header{

    margin-bottom:12px;

}

.timetable-card h4{

    margin-bottom:10px;

}

.badge-group {
    display: flex;
    gap: 4px;
    align-items: center;
}

.badge-once {
    background-color: #ff9800; /* Distinct orange for one-time events */
    color: #ffffff;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.forum-page{

    max-width:900px;

    margin:auto;

    padding:20px;

}

.forum-toolbar{

    display:flex;

    gap:15px;

    align-items:center;

    margin-bottom:25px;

}

.forum-search{

    flex:1;

    display:flex;

    align-items:center;

    background:#fff;

    border-radius:12px;

    padding:10px 15px;

    border:1px solid #ddd;

}

.forum-search input{

    border:none;

    outline:none;

    flex:1;

    margin-left:10px;

    background:none;

}

.thread-card{

    background:#fff;

    border-radius:14px;

    padding:18px;

    margin-bottom:16px;

    cursor:pointer;

    transition:.25s;

    border:1px solid #ececec;

}

.thread-card:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(0,0,0,.08);

}

.thread-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

}

.thread-top h3{

    margin:0;

    color:#1f2937;

}

.thread-preview{

    color:#6b7280;

    margin-bottom:16px;

    line-height:1.5;

}

.thread-footer{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    font-size:.9rem;

    color:#888;

}

.thread-pin{

    font-size:18px;

}

.forum-empty{

    text-align:center;

    padding:60px 20px;

    color:#888;

}

.forum-empty .material-icons{

    font-size:60px;

    color:#cbd5e1;

}

.floating-add{

    position:fixed;

    right:25px;

    bottom:25px;

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    cursor:pointer;

    box-shadow:0 8px 20px rgba(37,99,235,.35);

}

.floating-add:hover{

    transform:scale(1.08);

}

.forum-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:9999;

}

.hidden{

    display:none;

}

.forum-modal-content{

    width:min(650px,95%);

    background:#fff;

    border-radius:18px;

    overflow:hidden;

}

.forum-modal-header{

    padding:20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:1px solid #eee;

}

.forum-modal-header h2{

    margin:0;

}

.forum-modal-header button{

    background:none;

    border:none;

    font-size:28px;

    cursor:pointer;

}

.forum-modal-body{

    padding:20px;

}

.forum-modal-footer{

    padding:20px;

    display:flex;

    justify-content:flex-end;

    border-top:1px solid #eee;

}

.forum-modal textarea{

    width:100%;

    resize:vertical;

}

.anonymous-toggle{

    display:flex;

    gap:10px;

    align-items:center;

    margin-top:15px;

}

/* ========================================
   THREAD PAGE
======================================== */

#forum-thread {
    padding: 20px;
    background: #f5f7fb;
}

#forum-thread-container {
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* ========================================
   THREAD HEADER (slim nav bar, WhatsApp-style)
======================================== */

#thread-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    padding: 8px 12px;
    min-height: 44px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    flex-shrink: 0;
}

#thread-header .back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
    background: transparent;
    border: none;
}

#thread-header .back-btn .material-icons {
    font-size: 20px;
    color: #374151;
}

.thread-header-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.thread-header-info h2 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thread-header-meta {
    font-size: 0.7rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thread-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.thread-header-actions .icon-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: none;
}

.thread-header-actions .icon-btn .material-icons {
    font-size: 18px;
    color: #6b7280;
}

.thread-no-replies {
    text-align: center;
    color: #9ca3af;
    font-size: 0.8rem;
    padding: 8px 0 4px;
}

/* ========================================
   REPLIES
======================================== */

#thread-replies {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-right: 6px;
}

/* Scrollbar */

#thread-replies::-webkit-scrollbar {
    width: 8px;
}

#thread-replies::-webkit-scrollbar-thumb {
    background: #d4d4d8;
    border-radius: 20px;
}

/* ========================================
   MESSAGE
======================================== */

.forum-message {
    display: flex;
    flex-direction: column;
    max-width: 78%;
    animation: fadeIn .25s ease;
    position: relative;
    transition: transform 0.2s ease;
    touch-action: pan-y; /* let vertical scroll through; we handle horizontal ourselves */
}

.forum-message::before {
    content: "reply";
    font-family: "Material Icons";
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #9ca3af;
    opacity: 0;
    pointer-events: none;
}

.forum-message.swiping::before {
    opacity: var(--swipe-progress, 0);
}

.forum-message.other {
    align-self: flex-start;
}

.forum-message.mine {
    align-self: flex-end;
}

.message-card {
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 5px 12px rgba(0,0,0,.05);
    position: relative;
    word-break: break-word;
}

/* Others */

.forum-message.other .message-card {
    background: #ffffff;
}

/* Mine */

.forum-message.mine .message-card {
    background: #2563eb;
    color: white;
}

.message-author {
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 6px;
    opacity: .9;
}

.message-time {
    font-size: .72rem;
    opacity: .7;
    margin-top: 8px;
}

/* ========================================
   REPLY PREVIEW INSIDE MESSAGE
======================================== */

.reply-reference {
    background: rgba(0,0,0,.06);
    border-left: 4px solid #2563eb;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.forum-message.mine .reply-reference {
    background: rgba(255,255,255,.15);
    border-left-color: white;
}

.reply-reference strong {
    display: block;
    margin-bottom: 4px;
    font-size: .82rem;
}

.reply-reference p {
    margin: 0;
    font-size: .82rem;
    opacity: .8;
}

/* ========================================
   MESSAGE ACTIONS
======================================== */

.message-actions {
    display: flex;
    gap: 14px;
    margin-top: 10px;
    font-size: .8rem;
    opacity: .75;
}

.message-actions span {
    cursor: pointer;
    transition: .2s;
}

.message-actions span:hover {
    opacity: 1;
    color: #2563eb;
}

/* ========================================
   INPUT AREA
======================================== */

#thread-input-area {
    margin-top: 20px;
    background: white;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 -4px 14px rgba(0,0,0,.05);
}

/* Reply preview */

#reply-preview {
    background: #eef4ff;
    border-left: 4px solid #2563eb;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 14px;
}

#reply-preview.hidden {
    display: none;
}

/* Input */

.thread-input-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

#reply-input {
    flex: 1;
    resize: none;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    padding: 14px;
    font-size: .95rem;
    min-height: 54px;
    max-height: 160px;
    outline: none;
    transition: .2s;
}

#reply-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

/* Send */

#send-reply {
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: #2563eb;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .25s;
}

#send-reply:hover {
    transform: scale(1.08);
    background: #1d4ed8;
}

#send-reply .material-icons {
    font-size: 26px;
}

/* ========================================
   ANIMATION
======================================== */

@keyframes fadeIn {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

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

@media (max-width:768px){

    #forum-thread{
        padding:12px;
    }

    .forum-message{
        max-width:92%;
    }

    #thread-header{
        padding: 8px 12px;
    }

}

/* ==========================================================================
   FORUM CREATE THREAD MODAL
   ========================================================================== */

/* Overlay */
.forum-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  padding: 1rem;
}

.forum-modal.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Modal Container */
.forum-modal-content {
  background-color: var(--card-bg, #ffffff);
  color: var(--text-color, #1f2937);
  width: 100%;
  max-width: 580px;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color, #e5e7eb);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(0) scale(1);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.forum-modal.hidden .forum-modal-content {
  transform: translateY(16px) scale(0.97);
}

/* Header */
.forum-modal-header {
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color, #f3f4f6);
}

.forum-modal-header h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: var(--heading-color, #111827);
}

#close-thread-modal {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#close-thread-modal:hover {
  background-color: var(--hover-bg, #f3f4f6);
  color: var(--text-color, #111827);
}

/* Body & Inputs */
.forum-modal-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-height: 70vh;
  overflow-y: auto;
}

.forum-modal-body .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.forum-modal-body label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--heading-color, #374151);
}

/* Inputs, Selects, and Textarea */
.forum-modal-body input[type="text"],
.forum-modal-body select,
.forum-modal-body textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  border-radius: 10px;
  border: 1px solid var(--border-color, #d1d5db);
  background-color: var(--input-bg, #f9fafb);
  color: var(--text-color, #111827);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  font-family: inherit;
}

/* Placeholder Styling */
.forum-modal-body input[type="text"]::placeholder,
.forum-modal-body textarea::placeholder {
  color: var(--text-muted, #9ca3af);
  opacity: 1;
}

/* Dropdown Options Explicit Styling */
.forum-modal-body select option {
  background-color: var(--card-bg, #ffffff);
  color: var(--text-color, #111827);
}

.forum-modal-body textarea {
  resize: vertical;
  min-height: 120px;
}

.forum-modal-body input[type="text"]:focus,
.forum-modal-body select:focus,
.forum-modal-body textarea:focus {
  border-color: var(--primary-color, #4A90E2);
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

/* Anonymous Checkbox Toggle */
.anonymous-toggle {
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-color, #374151);
  user-select: none;
  margin-top: 0.25rem;
}

.anonymous-toggle input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--primary-color, #4A90E2);
  cursor: pointer;
}

/* Footer */
.forum-modal-footer {
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--border-color, #f3f4f6);
  background-color: var(--footer-bg, #fafafa);
}

.forum-modal-footer .btn-primary {
  background-color: var(--primary-color, #4A90E2);
  color: #ffffff;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.1s ease;
}

.forum-modal-footer .btn-primary:hover {
  filter: brightness(1.08);
}

.forum-message.other .message-card {
  background: var(--card-bg, #ffffff);
  color: var(--text-color, #1f2937);
}

/* ==========================================================================
   DARK MODE COMPATIBILITY
   ========================================================================== */

/* Triggers when 'dark-mode' class is on <body> or html attribute [data-theme="dark"] */
body.dark-mode,
body.dark,
[data-theme="dark"] {
  --card-bg: #1e293b;
  --text-color: #f8fafc;
  --heading-color: #f1f5f9;
  --text-muted: #94a3b8;
  --border-color: #334155;
  --input-bg: #0f172a;
  --hover-bg: #334155;
  --footer-bg: #1e293b;
}

/* Fallback fix if global dark class overrides aren't picking up variables */
body.dark-mode #thread-modal .forum-modal-content,
body.dark #thread-modal .forum-modal-content,
[data-theme="dark"] #thread-modal .forum-modal-content {
  background-color: #1e293b;
  color: #f8fafc;
}

body.dark-mode #thread-modal h2,
body.dark-mode #thread-modal label,
body.dark #thread-modal h2,
body.dark #thread-modal label,
[data-theme="dark"] #thread-modal h2,
[data-theme="dark"] #thread-modal label {
  color: #f8fafc !important;
}

body.dark-mode #thread-modal input,
body.dark-mode #thread-modal select,
body.dark-mode #thread-modal textarea,
body.dark #thread-modal input,
body.dark #thread-modal select,
body.dark #thread-modal textarea,
[data-theme="dark"] #thread-modal input,
[data-theme="dark"] #thread-modal select,
[data-theme="dark"] #thread-modal textarea {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

body.dark-mode #thread-modal option,
body.dark #thread-modal option,
[data-theme="dark"] #thread-modal option {
  background-color: #1e293b !important;
  color: #f8fafc !important;
}

body.dark-mode #thread-modal ::placeholder,
body.dark #thread-modal ::placeholder,
[data-theme="dark"] #thread-modal ::placeholder {
  color: #94a3b8 !important;
}

/* FIXED CSS: Only display flex when the page is ACTIVE */
#forum-thread {
    display: none; /* Hide by default like all other pages */
}

#forum-thread.active,
#forum-thread.page.active {
    display: flex !important; /* Show ONLY when active */
    flex-direction: column;
    height: calc(100vh - 80px); /* Fill screen without overflowing */
    min-height: 0;
    overflow: hidden;
}

#forum-thread-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#thread-replies {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

#thread-input-area {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: var(--surface, #ffffff);
    z-index: 10;
}

#forum-thread-container{

    display:flex;

    flex-direction:column;

    flex:1;

    min-height:0;

}

#thread-replies{

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

    padding:16px;

    min-height:0;

}

#thread-input-area{

    position:sticky;

    bottom:0;

    background:var(--surface-color);

    padding:14px;

    border-top:1px solid var(--border-color);

    z-index:10;

}

.message-card{

    max-width:min(85%,700px);

    overflow:hidden;

    border-radius:18px;

}

img{

    max-width:100%;

    height:auto;

}

.message-card{

    overflow-wrap:anywhere;

    word-break:break-word;

}

#thread-input-area{

    padding-bottom:

        max(14px, env(safe-area-inset-bottom));

}

/* =========================================================
   FORUM THREAD FULL-HEIGHT & FIXED INPUT LAYOUT
========================================================= */

/* Hide topbar when thread, forum or AI is active */
/* =========================================================
   COMPACT TOPBAR FOR FORUM, AI, AND THREAD PAGES
========================================================= */

/* Target topbar when Forum, AI, or Thread page is active */
body:has(#forum.page.active) .topbar,
body:has(#ai.page.active) .topbar,
body:has(#forum-thread.page.active) .topbar {
    margin-bottom: 12px !important;  /* Reduce space below topbar from 35px to 12px */
    padding: 6px 0 !important;      /* Slim vertical padding */
}

body:has(#ai.page.active) .topbar {
    padding: 6px 20px !important;
}

/* Shrink subtext / details in the topbar */
body:has(#forum.page.active) .topbar small,
body:has(#ai.page.active) .topbar small,
body:has(#forum-thread.page.active) .topbar small {
    display: none;                  /* Hide 'University of Ibadan...' subtitle to save height */
}

/* Scale down section title */
body:has(#forum.page.active) .topbar h2,
body:has(#ai.page.active) .topbar h2,
body:has(#forum-thread.page.active) .topbar h2 {
    font-size: 1.2rem !important;
}

/* Shrink action buttons (Dark mode & Notifications) */
body:has(#forum.page.active) .topbar .icon-btn,
body:has(#ai.page.active) .topbar .icon-btn,
body:has(#forum-thread.page.active) .topbar .icon-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
}

body:has(#forum.page.active) .topbar .icon-btn .material-icons,
body:has(#ai.page.active) .topbar .icon-btn .material-icons,
body:has(#forum-thread.page.active) .topbar .icon-btn .material-icons {
    font-size: 20px !important;
}

/* Compact Student Profile pill */
body:has(#forum.page.active) .topbar .student-profile,
body:has(#ai.page.active) .topbar .student-profile,
body:has(#forum-thread.page.active) .topbar .student-profile {
    padding: 4px 10px !important;
    gap: 8px !important;
}

body:has(#forum.page.active) .topbar .student-profile img,
body:has(#ai.page.active) .topbar .student-profile img,
body:has(#forum-thread.page.active) .topbar .student-profile img {
    width: 32px !important;
    height: 32px !important;
}

body:has(#forum.page.active) .topbar .student-profile h4,
body:has(#ai.page.active) .topbar .student-profile h4,
body:has(#forum-thread.page.active) .topbar .student-profile h4 {
    font-size: 0.85rem !important;
}
/* Ensure thread page occupies full available viewport height */
#forum-thread.page.active {
    display: flex !important;
    flex-direction: column;
    height: calc(100vh - 64px); /* Full screen height minus padding */
    box-sizing: border-box;
    overflow: hidden; /* Prevents outer page window from scrolling */
}

/* Ensure the main container grows to fill the page height */
#forum-thread-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* Critical flex property allowing nested scroll area to function */
    overflow: hidden;
}

/* Make ONLY the thread messages / replies list scroll */
#thread-replies {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-right: 8px; /* Breathing room for scrollbar */
}

/* Keep input form anchored perpetually at the bottom */
#forum-thread form,
.thread-reply-input-container {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: var(--surface, #ffffff);
    padding-top: 12px;
    z-index: 10;
}

.ai-main{

    display:flex;

    flex-direction:column;

    height:100%;

    min-height:0;

    overflow:hidden;

}

/* =========================================================
   SHOW ONLY SIDEBAR TOGGLE ON AI, FORUM, AND THREAD PAGES
========================================================= */

/* 1. Hide the title sub-wrapper and the right topbar tools */
body:has(#ai.active) .topbar-left > div,
body:has(#ai.active) .topbar-right,
body:has(#forum.active) .topbar-left > div,
body:has(#forum.active) .topbar-right,
body:has(#forum-thread.active) .topbar-left > div,
body:has(#forum-thread.active) .topbar-right {
    display: none !important;
}

/* 2. Adjust topbar styling to cleanly fit just the menu toggle button */
body:has(#ai.active) .topbar,
body:has(#forum.active) .topbar,
body:has(#forum-thread.active) .topbar {
    padding: 8px 0 !important;
    margin-bottom: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    min-height: unset !important;
}

.reply-preview-card{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    padding:12px;

    border-left:4px solid var(--primary);

    background:var(--surface-color);

    margin-bottom:10px;

    border-radius:10px;

}

.reply-preview{

    margin-bottom:10px;

}

.reply-preview.hidden{

    display:none;

}

.reply-preview-card{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:12px;

    padding:12px;

    border-left:4px solid var(--primary-color);

    background:var(--surface-color);

    border-radius:10px;

}

body.dark .reply-preview-card {
    background: #1E293B; /* Soft dark elevation surface */
    border-left: 4px solid var(--brand-primary); /* Bright blue accent line */
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    color: #F3F4F6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Text & Title Details in Dark Mode */
body.dark .reply-preview-title {
    color: #60A5FA; /* Highlighted accent text */
    font-weight: 600;
    font-size: 0.85rem;
}

body.dark .reply-preview-text {
    color: var(--text-secondary); /* Matches dark mode secondary text (#9CA3AF) */
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Close / Dismiss Action Button */
.reply-preview-close {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 4px;
    transition: var(--transition);
}

.reply-preview-card p{

    margin-top:4px;

    opacity:.8;

}

.message-action{

    margin-top:8px;

    display:flex;

    justify-content:flex-end;

}

.reply-btn{

    font-size:.85rem;

    color:var(--primary-color);

    cursor:pointer;

    font-weight:600;

    transition:.2s;

}

.reply-btn:hover{

    text-decoration:underline;

    opacity:.8;

}

.reply-reference{

cursor:pointer;

transition:.2s;

}

.reply-reference:hover{

opacity:.85;

}

.reply-highlight{

animation:flashReply 1.5s ease;

}

@keyframes flashReply{

0%{

background:#4f9cff55;

}

100%{

background:transparent;

}

}

.forum-admin-btn{

    width:42px;
    height:42px;

    border:none;

    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--surface-color);

    color:var(--text-secondary);

    cursor:pointer;

    transition:.2s;

}

.forum-admin-btn:hover{

    background:var(--primary-color);

    color:white;

}

.forum-admin-btn.active{

    background:#1b8a3b;

    color:white;

}

.modal-card{

    width:min(420px,90vw);

    background:var(--surface-color);

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.25);

}

.modal-header{

    display:flex;

    align-items:center;

    gap:10px;

    padding:18px;

    border-bottom:1px solid var(--border-color);

}

.modal-header .material-icons{

    color:var(--primary-color);

}

.modal-body{

    padding:20px;

}

.modal-body input{

    width:100%;

    margin-top:12px;

    padding:12px 14px;

    border-radius:10px;

    border:1px solid var(--border-color);

    background:var(--background-color);

    color:var(--text-color);

}

.modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:10px;

    padding:16px;

    border-top:1px solid var(--border-color);

}



/* ==========================================
   FORUM MODERATOR LOGIN MODAL
========================================== */

.modal-card{

    width:min(420px,92vw);

    background:var(--surface-color);

    border:1px solid var(--border-color);

    border-radius:18px;

    overflow:hidden;

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);

    animation:modalPop .25s ease;

}

.modal-header{

    display:flex;
    align-items:center;
    gap:12px;

    padding:18px 22px;

    border-bottom:1px solid var(--border-color);

}

.modal-header .material-icons{

    font-size:2rem;
    color:var(--primary-color);

}

.modal-header h2{

    margin:0;
    font-size:1.25rem;
    font-weight:600;

}

.modal-body{

    padding:24px 22px;

}

.modal-body p{

    margin:0 0 16px;

    color:var(--text-secondary);

    font-size:.95rem;

}

.modal-body input{

    width:100%;

    padding:14px 16px;

    border:1px solid var(--border-color);

    border-radius:12px;

    background:var(--background-color);

    color:var(--text-color);

    font-size:1rem;

    outline:none;

    transition:.2s;

}

.modal-body input:focus{

    border-color:var(--primary-color);

    box-shadow:0 0 0 3px rgba(79,156,255,.15);

}

.modal-footer{

    display:flex;
    justify-content:flex-end;
    gap:12px;

    padding:18px 22px;

    border-top:1px solid var(--border-color);

}

.btn-secondary{

    padding:10px 18px;

    border:none;

    border-radius:10px;

    background:var(--background-color);

    color:var(--text-color);

    cursor:pointer;

    transition:.2s;

}

.btn-secondary:hover{

    opacity:.85;

}

.btn-primary{

    padding:10px 22px;

    border:none;

    border-radius:10px;

    background:var(--primary-color);

    color:#fff;

    cursor:pointer;

    font-weight:600;

    transition:.2s;

}

.btn-primary:hover{

    transform:translateY(-1px);

    box-shadow:0 8px 20px rgba(79,156,255,.3);

}

@keyframes modalPop{

    from{

        transform:translateY(15px) scale(.96);

        opacity:0;

    }

    to{

        transform:translateY(0) scale(1);

        opacity:1;

    }

}

.thread-admin-actions {
    display: flex;
    justify-content: flex-end; /* Moves child elements (button) to the right */
    margin-top: 6px;
}





.clar-btn:hover {
    background: #b71c1c;
    transform: translateY(-1px);
}

.second-btn .material-icons {
    font-size: 18px;
}

.second-btn:hover {
    background: blanchedalmond;
    transform: translateY(-1px);
}

.delete-reply-btn{

    color:#d32f2f;

    cursor:pointer;

    font-size:.85rem;

    font-weight:600;

    margin-left:16px;

}

.delete-reply-btn:hover{

    text-decoration:underline;

}

.thread-title-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    margin-bottom:8px;

}

.thread-title-row h2{

    margin:0;

    flex:1;

}

.clar-btn{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:8px 14px;

    width:auto;

    border:none;

    border-radius:10px;

    background:whitesmoke;

    color:#3B82F6;

    cursor:pointer;

    white-space:nowrap;

}



.thread-locked-banner{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:14px;

    padding:12px 14px;

    border-radius:10px;

    background:#fff3cd;

    color:#856404;

    font-size:.9rem;

}

.second-btn{
    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:8px 14px;

    width:auto;

    border:none;

    border-radius:10px;

    background:whitesmoke;

    color:#3498db;

    cursor:pointer;

    white-space:nowrap;
}

.thread-pin{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:8px 14px;

    width:auto;

    border:none;

    border-radius:10px;

    background:whitesmoke;

    color:#3498db;

    cursor:pointer;

    white-space:nowrap;

}

.back-btn{

    display:flex;

    align-items:center;

    gap:6px;

    border:none;

    border-radius:12px;

    background:black;

    color:white;

    cursor:pointer;

    font-weight:600;

    transition:.2s;

}

.back-btn:hover{
    transform:translateX(-2px);

}

.thread-pin:hover {
    background: blanchedalmond;
    transform: translateY(-1px);
}

.thread-pin-out{

    display:inline-flex;

    align-items:center;

    gap:4px;

    padding:4px 10px;

    border-radius:999px;

    background:#fff0c2;

    color:#8a6a00;

    font-size:.75rem;

    font-weight:600;

}

/* ==========================================
REACTIONS
========================================== */

.reaction-bar{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:10px;

    position:relative;

}

.reaction-picker{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:var(--surface-color);

    cursor:pointer;

    font-size:1rem;

    transition:.2s;

}

.reaction-picker:hover{

    transform:scale(1.08);

    background:var(--primary-light);

}

.reaction-counts{

    display:flex;

    align-items:center;

    gap:8px;

    flex-wrap:wrap;

}

.reaction-chip{

    display:flex;

    align-items:center;

    gap:4px;

    padding:4px 10px;

    border-radius:999px;

    background:var(--surface-color);

    font-size:.8rem;

    font-weight:600;

    transition:.2s;

}

.reaction-chip:hover{

    background:var(--primary-light);

    cursor:pointer;

}

/* ==========================================
REACTION POPUP
========================================== */

.reaction-popup{

    position:fixed;

    display:flex;

    flex-direction:column;

    gap:6px;

    padding:8px;

    border-radius:20px;

    background:var(--card-bg);

    box-shadow:0 8px 30px rgba(0,0,0,.18);

    z-index:99999;

    animation:reactionPopup .18s ease;

}

.reaction-popup.hidden{

    display:none;

}

.reaction-popup-emojis{

    display:flex;

    align-items:center;

    gap:8px;

    padding:2px 6px;

}

.reaction-popup-menu{

    display:flex;

    flex-direction:column;

    border-top:1px solid rgba(0,0,0,.08);

    padding-top:4px;

}

.popup-menu-item{

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px 10px;

    border:none;

    background:transparent;

    border-radius:10px;

    font-size:.85rem;

    color:#ef4444;

    cursor:pointer;

    text-align:left;

    width:100%;

}

.popup-menu-item .material-icons{

    font-size:18px;

}

.popup-menu-item:hover{

    background:rgba(239,68,68,.08);

}

.reaction-option{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    cursor:pointer;

    font-size:1.35rem;

    transition:.18s;

}

.reaction-option:hover{

    transform:translateY(-5px) scale(1.2);

    background:rgba(0,0,0,.06);

}

/* ==========================================
YOUR REACTION
========================================== */

.reaction-chip.mine{

    background:var(--primary-color);

    color:#fff;

}

/* ==========================================
ANIMATION
========================================== */

@keyframes reactionPopup{

    from{

        opacity:0;

        transform:translateY(10px) scale(.9);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

/* ==========================================
DARK MODE
========================================== */

body.dark .reaction-popup{

    background:#252525;

}

body.dark .reaction-option:hover{

    background:#3a3a3a;

}

body.dark .reaction-popup-menu{

    border-top-color: rgba(255,255,255,.12);

}

body.dark .popup-menu-item:hover{

    background:rgba(239,68,68,.15);

}

body.dark .reaction-chip{

    background:#2f2f2f;

}

body.dark .reaction-picker{

    background:#2f2f2f;

}

.reply-image-preview{

    position:relative;

    width:80px;

    max-width:110px;

    margin-bottom:10px;

    border-radius:12px;

    overflow:hidden;

}

.reply-image-preview.hidden{

    display:none;

}

#reply-preview-image{

    display:block;

    width:90%;

    height: 80px;

    object-fit:cover;

    border-radius:12px;

}

#remove-preview{

    position:absolute;

    top:6px;

    right:6px;

    width:22px;

    height:22px;

    border:none;

    border-radius:50%;

    background:rgba(0,0,0,.6);

    color:#fff;

    cursor:pointer;

}

.reply-toolbar{

    display:flex;

    gap:8px;

    margin-bottom:8px;

}

.reply-toolbar button{

    width:38px;

    height:38px;

    border:none;

    border-radius:10px;

    cursor:pointer;

}

#reply-upload-progress{

    width:100%;

    height:6px;

    border-radius:999px;

    background:#ddd;

    overflow:hidden;

    margin-bottom:10px;

}

#reply-upload-fill{

    width:0;

    height:100%;

    background:var(--primary-color);

    transition:.2s;

}

.reply-image{

    display:block;

    max-width:220px;

    max-height:260px;

    width:auto;

    height:auto;

    object-fit:cover;

    border-radius:14px;

    margin-bottom:8px;

    cursor:pointer;

    transition:.2s;

}

.reply-image:hover{

    transform:scale(1.02);

}

@media (max-width:768px){

    .reply-image{

        max-width:180px;

        max-height:220px;

    }

}

.reply-image{

    display:block;

    width:100%;

    max-width:100%;

    height:auto;

    border-radius:12px;

    margin-bottom:8px;

}

.image-viewer{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.9);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:100000;

}

.image-viewer.hidden{

    display:none;

}

#viewer-image{

    max-width:95vw;

    max-height:95vh;

    border-radius:12px;

    object-fit:contain;

}

.reaction-chip.mine{

    background:var(--primary-color);

    color:white;

}
/* =========================================
   FORMS (student)
========================================= */

.status {
    font-size: 0.7rem;
    font-weight: bold;
    padding: 0.25rem 0.65rem;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}

.status.open { background-color: #e8f5e9; color: #2e7d32; }
.status.closed { background-color: #ffebee; color: #c62828; }

.required-star {
    color: #c62828;
}

.fill-field {
    margin-bottom: 1.25rem;
}

.fill-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-weight: normal;
}

.fill-file-current {
    display: block;
    margin-top: 0.4rem;
    color: var(--text-secondary,#666);
}

#form-fill-fields textarea,
#form-fill-fields input[type="text"],
#form-fill-fields input[type="number"],
#form-fill-fields input[type="date"],
#form-fill-fields select {
    width: 100%;
    padding: 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--border-color,#ddd);
}

#form-fill-card {
    display: block;
    padding: 1.5rem;
}


/* =========================================
   FORMS - STUDENT FILL-OUT VIEW
========================================= */

/* Main Container Card */
#form-fill-view {
    max-width: 800px;
    margin: 0 auto;
    background: var(--surface, #ffffff);
    border-radius: var(--radius, 18px);
    padding: 32px;
    box-shadow: var(--shadow-md, 0 10px 30px rgba(0, 0, 0, .08));
    border: 1px solid var(--border, #E5E7EB);
    transition: var(--transition, 0.25s ease);
}

/* Header & Back Button Navigation */
.form-fill-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border, #E5E7EB);
}

#form-fill-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--background, #F5F7FB);
    color: var(--text, #1F2937);
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition, 0.25s ease);
}

#form-fill-back:hover {
    background: #EEF5FF;
    color: var(--primary, #4A90E2);
}

/* Form Title & Description */
#form-fill-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text, #1F2937);
    margin-bottom: 8px;
    line-height: 1.3;
}

#form-fill-description {
    color: var(--text-light, #6B7280);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 28px;
}

/* Read-only / Closed Banner Note */
#form-fill-readonly-note {
    background-color: #FFFBEB;
    border: 1px solid #FCD34D;
    color: #92400E;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

/* Form Field Layout Groups */
.fill-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
}

.fill-field label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text, #1F2937);
}

.required-star {
    color: var(--danger, #EF4444);
    font-weight: bold;
    margin-left: 2px;
}

/* Base Form Controls (Inputs, Selects, Textareas) */
.fill-answer {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.95rem;
    color: var(--text, #1F2937);
    background: var(--surface, #ffffff);
    border: 1.5px solid var(--border, #E5E7EB);
    border-radius: 12px;
    outline: none;
    transition: all 0.2s ease;
}

.fill-answer:focus {
    border-color: var(--primary, #4A90E2);
    box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.15);
}

.fill-answer:disabled {
    background-color: #F8FAFC;
    color: var(--text-light, #6B7280);
    cursor: not-allowed;
    border-color: #E2E8F0;
}

/* Textarea / Paragraph Fields */
textarea.fill-answer {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

/* Custom Styled Radio & Checkbox Options */
.fill-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 12px;
    background: var(--surface, #ffffff);
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text, #1F2937);
    margin-bottom: 8px;
    transition: all 0.2s ease;
    user-select: none;
}

.fill-option:hover {
    background: #F8FAFC;
    border-color: var(--primary, #4A90E2);
}

.fill-option input[type="radio"],
.fill-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary, #4A90E2);
    cursor: pointer;
}

.fill-option:has(input:checked) {
    background: #EEF5FF;
    border-color: var(--primary, #4A90E2);
    font-weight: 600;
}

.fill-option:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.7;
}

/* File Upload Field Styling */
.fill-file {
    padding: 10px;
    cursor: pointer;
    background: #F8FAFC;
}

.fill-file::-webkit-file-upload-button {
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    background: var(--primary, #4A90E2);
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
    margin-right: 12px;
    transition: background 0.2s ease;
}

.fill-file::-webkit-file-upload-button:hover {
    background: var(--primary-dark, #2563EB);
}

.fill-file-current {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--text-light, #6B7280);
}

.fill-file-current a {
    color: var(--primary, #4A90E2);
    font-weight: 600;
    text-decoration: underline;
}

/* Action Footer & Submit Button */
.form-fill-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border, #E5E7EB);
}

#form-fill-submit {
    min-width: 160px;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary, #4A90E2), var(--secondary, #9013FE));
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(74, 144, 226, 0.25);
    transition: all 0.25s ease;
}

#form-fill-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(74, 144, 226, 0.35);
}

#form-fill-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    #form-fill-view {
        padding: 20px 16px;
        border-radius: 14px;
    }

    #form-fill-title {
        font-size: 1.4rem;
    }

    #form-fill-submit {
        width: 100%;
    }
}
/* =========================================
   QUIZ RESULTS (student)
========================================= */

.quiz-score-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #eef6ff;
    border: 1px solid #cfe4fb;
    border-radius: 10px;
    padding: 0.9rem 1rem;
    margin-bottom: 1.25rem;
}

.quiz-score-banner .material-icons {
    color: #4A90E2;
    font-size: 1.8rem;
}

.quiz-score-banner strong {
    display: block;
    font-size: 1.05rem;
}

.quiz-score-banner small {
    color: #6b7280;
}

.quiz-feedback {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    margin-top: 0.4rem;
    font-weight: 600;
}

.quiz-feedback .material-icons {
    font-size: 1rem;
}

.quiz-feedback-correct {
    color: #1b7f3a;
}

.quiz-feedback-wrong {
    color: #c62828;
}

/* Interactive AI quiz cards */
.ai-quiz {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--border-color, #d9e1ec);
    border-radius: 14px;
    background: var(--card-bg, #fff);
}

.ai-quiz-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ai-quiz-header .material-icons { color: var(--primary, #4a90e2); }
.ai-quiz-question { margin: 0 0 14px; padding: 12px; border: 1px solid var(--border-color, #d9e1ec); border-radius: 10px; }
.ai-quiz-question legend { padding: 0 4px; font-weight: 700; }
.ai-quiz-option { display: flex; align-items: flex-start; gap: 8px; padding: 7px; border-radius: 7px; cursor: pointer; }
.ai-quiz-option:hover { background: rgba(74, 144, 226, .08); }
.ai-quiz-option.correct-answer { background: #e7f7ec; color: #176b35; }
.ai-quiz-option.wrong-answer { background: #fdeaea; color: #9e1f1f; }
.ai-quiz-explanation { margin: 10px 0 0; color: var(--text-secondary, #5f6b7a); font-size: .9rem; }
.ai-quiz-result { margin-top: 12px; padding: 10px; border-radius: 8px; background: #eef6ff; color: #1d5e98; }
/* =========================================
   CGPA CALCULATOR
========================================= */

.cgpa-summary-card {
    display: flex;
    gap: 2.5rem;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
}

.cgpa-summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cgpa-summary-label {
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.cgpa-summary-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-primary, #4A90E2);
    transition: color .2s ease;
}

/* Performance tiers - shared between the summary card and each
   semester's GPA badge, so the whole page reads as one system. */
.cgpa-summary-value.tier-excellent,
.cgpa-semester-gpa.tier-excellent strong { color: var(--success, #10B981); }
.cgpa-summary-value.tier-good,
.cgpa-semester-gpa.tier-good strong { color: var(--brand-primary, #4A90E2); }
.cgpa-summary-value.tier-fair,
.cgpa-semester-gpa.tier-fair strong { color: var(--warning, #F59E0B); }
.cgpa-summary-value.tier-low,
.cgpa-semester-gpa.tier-low strong { color: var(--danger, #EF4444); }
.cgpa-summary-value.tier-empty,
.cgpa-semester-gpa.tier-empty strong { color: var(--text-secondary, #9ca3af); }

.cgpa-semester {
    margin-bottom: 1rem;
    padding: 1.1rem 1.25rem;
}

.cgpa-semester-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.cgpa-semester-label {
    flex: 1;
    font-weight: 600;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--text-primary);
    padding: 0.3rem 0;
    border-bottom: 1px solid transparent;
}

.cgpa-semester-label:focus {
    outline: none;
    border-bottom-color: var(--brand-primary, #4A90E2);
}

.cgpa-semester-gpa {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.cgpa-semester-gpa strong {
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0;
}

/* Compact, contextual icon buttons - overriding the global .icon-btn
   (48px, solid white bg) which is sized for standalone toolbar use,
   not an inline row action inside a dense list. */
.cgpa-semester-header .cgpa-remove-semester,
.cgpa-course-row .cgpa-remove-course {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.cgpa-semester-header .cgpa-remove-semester:hover,
.cgpa-course-row .cgpa-remove-course:hover {
    background: rgba(239, 68, 68, .1);
    color: var(--danger, #EF4444);
    transform: none;
}

.cgpa-semester-header .cgpa-remove-semester .material-icons,
.cgpa-course-row .cgpa-remove-course .material-icons {
    font-size: 18px;
}

.cgpa-course-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Left-edge accent color-codes each row by the grade entered, so a
   whole semester's grade distribution is scannable at a glance
   without reading every select. Falls back to a neutral border when
   no grade context applies. */
.cgpa-course-row {
    display: grid;
    grid-template-columns: 1fr 76px 68px auto;
    gap: 0.6rem;
    align-items: center;

    padding: 0.4rem 0 0.4rem 0.7rem;
    border-left: 3px solid var(--border-color);
    border-radius: 4px;
    transition: border-color .15s ease, background .15s ease;
}

.cgpa-course-row:hover {
    background: var(--hover-bg, rgba(74,144,226,.04));
}

.cgpa-course-row[data-grade="A"] { border-left-color: #10B981; }
.cgpa-course-row[data-grade="B"] { border-left-color: #65A30D; }
.cgpa-course-row[data-grade="C"] { border-left-color: #F59E0B; }
.cgpa-course-row[data-grade="D"] { border-left-color: #F97316; }
.cgpa-course-row[data-grade="E"] { border-left-color: #EF4444; }
.cgpa-course-row[data-grade="F"] { border-left-color: #DC2626; }

.cgpa-course-row input,
.cgpa-course-row select {
    padding: 0.55rem 0.6rem;
    border-radius: 9px;
    border: 1px solid var(--border-color, #ddd);
    background: var(--card-bg, #fff);
    color: var(--text-primary);
    font-size: 0.9rem;
    min-width: 0;
}

.cgpa-course-row input:focus,
.cgpa-course-row select:focus {
    outline: none;
    border-color: var(--brand-primary, #4A90E2);
}

.cgpa-course-row input::placeholder {
    color: var(--text-secondary);
    opacity: .7;
}

/* "Add Course" as a dashed add-row affordance, matching the pattern
   spreadsheet/table UIs use for appending a row - distinct from the
   solid Add Semester button above it, since the two act at different
   scopes. Previously relied on a .text-btn class that didn't exist
   anywhere in the stylesheet, so this rendered as an unstyled
   browser-default button. */
.cgpa-add-course {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 10px;
    margin-top: 2px;

    background: transparent;
    border: 1.5px dashed var(--border-color);
    border-radius: 10px;

    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;

    transition: .15s ease;
}

.cgpa-add-course:hover {
    border-color: var(--brand-primary, #4A90E2);
    color: var(--brand-primary, #4A90E2);
    background: rgba(74, 144, 226, .06);
}

.cgpa-add-course .material-icons {
    font-size: 1.1rem;
}

.cgpa-import-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.cgpa-import-row:last-child {
    border-bottom: none;
}

.cgpa-import-row span {
    flex: 1;
}

.cgpa-import-row em {
    color: var(--text-light);
    font-style: normal;
    font-size: .85rem;
}

.cgpa-import-loading {
    padding: 20px 4px;
    color: var(--text-light);
    text-align: center;
}

/* Grade legend - same accent colors as the row markers above, so it
   doubles as a key for what the colors mean rather than being
   disconnected reference text. */
.cgpa-scale-note {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.cgpa-scale-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.cgpa-scale-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cgpa-scale-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.cgpa-scale-chip em {
    font-style: normal;
    font-weight: 500;
    opacity: .85;
}

.cgpa-scale-chip[data-grade="A"] { background: rgba(16,185,129,.12); color: #10B981; border-color: rgba(16,185,129,.3); }
.cgpa-scale-chip[data-grade="B"] { background: rgba(101,163,13,.12); color: #65A30D; border-color: rgba(101,163,13,.3); }
.cgpa-scale-chip[data-grade="C"] { background: rgba(245,158,11,.14); color: #D97706; border-color: rgba(245,158,11,.32); }
.cgpa-scale-chip[data-grade="D"] { background: rgba(249,115,22,.14); color: #EA580C; border-color: rgba(249,115,22,.32); }
.cgpa-scale-chip[data-grade="E"] { background: rgba(239,68,68,.12); color: #EF4444; border-color: rgba(239,68,68,.3); }
.cgpa-scale-chip[data-grade="F"] { background: rgba(220,38,38,.14); color: #DC2626; border-color: rgba(220,38,38,.32); }

@media (max-width: 600px) {
    .cgpa-course-row {
        grid-template-columns: 1fr 58px 58px auto;
        gap: 0.4rem;
    }
    .cgpa-summary-card {
        flex-direction: column;
        gap: 0.85rem;
    }
}

/* =========================================================
   JOTTER

   Treated as a notebook rather than another dashboard card -
   it's the student's own space, not admin-managed content, so
   it earns a different material: warm paper, ruled lines, a
   margin rule. Everything else on the page (toolbar, footer)
   stays quiet so that one idea reads clearly.
========================================================= */

.jotter-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.4rem;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.jotter-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.jotter-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    flex: 1;
    min-width: 0;
}

.jotter-title-wrap .material-icons {
    color: var(--primary);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.jotter-note-title {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    padding: 0.15rem 0.3rem;
    border-radius: 8px;
}

.jotter-note-title:focus {
    outline: none;
    background: rgba(20, 199, 180, 0.08);
}

.jotter-note-title::placeholder {
    color: var(--text-light);
    font-weight: 500;
}

/* Notes rail - the row of saved notes, styled like sticky-note
   tabs peeking out along the top of the notebook. */

.jotter-notes-rail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    scrollbar-width: thin;
}

.jotter-note-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    max-width: 200px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    padding: 0.4rem 0.6rem 0.4rem 0.85rem;
    background: rgba(15, 23, 42, 0.03);
    color: var(--text-light);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    transition: 0.15s ease;
}

.jotter-note-chip:hover {
    color: var(--text);
    background: rgba(15, 23, 42, 0.06);
}

.jotter-note-chip.active {
    color: var(--primary-dark);
    background: rgba(20, 199, 180, 0.12);
    border-color: rgba(20, 199, 180, 0.4);
}

.jotter-note-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jotter-note-chip-delete {
    font-size: 0.95rem !important;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0.6;
}

.jotter-note-chip-delete:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.jotter-new-note-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    border: 1px dashed rgba(20, 199, 180, 0.5);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    background: transparent;
    color: var(--primary-dark);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    transition: 0.15s ease;
}

.jotter-new-note-btn .material-icons {
    font-size: 1rem;
}

.jotter-new-note-btn:hover {
    background: rgba(20, 199, 180, 0.1);
}

#jotter-empty-state {
    display: none;
}

#jotter-empty-state .primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.jotter-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.jotter-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-light);
    transition: 0.15s ease;
}

.jotter-icon-btn .material-icons {
    font-size: 1.2rem;
}

.jotter-icon-btn:hover {
    background: rgba(20, 199, 180, 0.1);
    color: var(--primary-dark);
}

/* Index tabs - clipped onto the top edge of the paper below,
   like the plastic dividers in a physical notebook. Each gets
   its own quiet tint so they read as separate sections rather
   than three copies of the same button. */

.jotter-tabs {
    display: flex;
    gap: 0.4rem;
    padding-left: 0.35rem;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}

.jotter-template-btn {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    padding: 0.45rem 0.9rem 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-light);
    background: rgba(15, 23, 42, 0.03);
    transition: 0.15s ease;
}

.jotter-template-btn:hover {
    color: var(--text);
    transform: translateY(-1px);
}

.jotter-tab-study { background: rgba(99, 102, 241, 0.09); }
.jotter-tab-todo { background: rgba(20, 199, 180, 0.1); }
.jotter-tab-class { background: rgba(245, 158, 11, 0.1); }

/* The paper itself - the one bold move on this page. */

.jotter-paper {
    --rule-gap: 2.05rem;
    --margin-x: 2.6rem;
    background:
        linear-gradient(
            to right,
            transparent calc(var(--margin-x) - 1px),
            rgba(193, 91, 74, 0.35) calc(var(--margin-x) - 1px),
            rgba(193, 91, 74, 0.35) var(--margin-x),
            transparent var(--margin-x)
        ),
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent calc(var(--rule-gap) - 1px),
            rgba(15, 23, 42, 0.08) calc(var(--rule-gap) - 1px),
            rgba(15, 23, 42, 0.08) var(--rule-gap)
        ),
        #FBF8F1;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 4px 14px 14px 14px;
    box-shadow: var(--shadow-sm);
}

#jotter-input {
    display: block;
    width: 100%;
    min-height: 320px;
    resize: vertical;
    border: none;
    background: transparent;
    padding: 0.6rem 1.3rem 1rem calc(var(--margin-x, 2.6rem) + 0.9rem);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.92rem;
    line-height: 2.05rem;
}

#jotter-input:focus {
    outline: none;
}

.jotter-paper:focus-within {
    border-color: rgba(20, 199, 180, 0.45);
    box-shadow: 0 0 0 3px rgba(20, 199, 180, 0.12);
}

.jotter-preview {
    display: none;
    padding: 1rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    min-height: 120px;
    color: var(--text);
    line-height: 1.6;
}

.jotter-preview.visible {
    display: block;
}

.jotter-preview h1,
.jotter-preview h2,
.jotter-preview h3,
.jotter-preview h4,
.jotter-preview h5,
.jotter-preview h6 {
    font-family: var(--font-display);
    margin: 0.9rem 0 0.5rem;
    color: var(--text);
}

.jotter-preview ul,
.jotter-preview ol {
    margin: 0.75rem 0;
    padding-left: 1.2rem;
}

.jotter-preview code {
    font-family: var(--font-mono);
    background: rgba(148, 163, 184, 0.12);
    border-radius: 6px;
    padding: 0.12rem 0.35rem;
}

.jotter-preview pre {
    background: rgba(15, 23, 42, 0.92);
    color: #e2e8f0;
    padding: 0.8rem;
    border-radius: 12px;
    overflow-x: auto;
}

.jotter-preview-empty {
    opacity: 0.7;
    color: var(--text-light);
}

.jotter-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.jotter-meta {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-light);
}

.jotter-word-count {
    font-weight: 600;
    color: var(--text);
}

.jotter-status {
    min-height: 1.1rem;
}

.jotter-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.jotter-text-btn {
    border: none;
    background: transparent;
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.4rem 0.2rem;
    transition: 0.15s ease;
}

.jotter-text-btn:hover {
    color: var(--danger);
}

.jotter-actions .primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

@media (max-width: 768px) {
    .jotter-paper {
        --margin-x: 1.8rem;
        --rule-gap: 1.9rem;
    }

    #jotter-input {
        min-height: 240px;
        font-size: 0.88rem;
    }

    .jotter-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .jotter-actions {
        justify-content: space-between;
    }

    .jotter-note-chip {
        max-width: 140px;
    }
}

/* =========================================================
   BOTTOM NAVBAR CLEARANCE - AI CHAT & FORUM
   The AI page and an open forum thread both run their own
   fixed-height, internally-scrolling layouts, independent of
   .main-content's padding-bottom - so the bottom navbar has to be
   subtracted from their height math directly, and the forum reply
   box's sticky offset needs the same amount added. Placed at the
   end of the file deliberately: several earlier rules target the
   same selectors at equal specificity, and later source order wins
   the cascade - this is what actually takes effect on mobile.
========================================================= */
@media(max-width:768px){

    :root {
        --nav-bottom-space: calc(72px + env(safe-area-inset-bottom));
    }

    .ai-layout {
        height: calc(100vh - 120px - var(--nav-bottom-space)) !important;
    }

    #forum-thread form,
    .thread-reply-input-container {
        bottom: var(--nav-bottom-space) !important;
    }

}

/* =========================================================
   HIDE TOPBAR FOR AI CHAT, FORUM & THREAD PAGES
========================================================= */
body:has(#ai.page.active) .main-content,
body:has(#forum.page.active) .main-content,
body:has(#forum-thread.page.active) .main-content {
    padding: 0 !important;
}

body:has(#ai.page.active) .topbar,
body:has(#forum.page.active) .topbar,
body:has(#forum-thread.page.active) .topbar {
    display: none !important;
}

/* Give AI layout full height when topbar is hidden */
body:has(#ai.page.active) .ai-layout {
    height: calc(100vh - 40px) !important;
}

@media (max-width: 768px) {
    body:has(#ai.page.active) .ai-layout {
        height: calc(100vh - 65px - env(safe-area-inset-bottom)) !important;
    }
}

/* ---------- Floating sidebar toggle (replaces the topbar there) ---------- */

.forum-sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 14px;
    left: 14px;
    width: 34px;
    height: 34px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    z-index: 50;
}

body.dark .forum-sidebar-toggle {
    background: #1d1d1f;
    border-color: rgba(255, 255, 255, .12);
}

body:has(#forum.page.active) .forum-sidebar-toggle,
body:has(#forum-thread.page.active) .forum-sidebar-toggle {
    display: inline-flex;
}

/* Give the toolbar / thread-header room so the floating toggle
   doesn't sit on top of the search bar or the thread's back button -
   both of which also live in the top-left corner. */
body:has(#forum.page.active) .forum-toolbar {
    padding-left: 44px;
}

body:has(#forum-thread.page.active) #thread-header {
    padding-left: 44px;
}

/* =========================================================
   PERCENTAGE-BASED RESPONSIVE LAYOUT (MOBILE <= 768px)
========================================================= */
@media (max-width: 768px) {

    /* 1. Make the viewport container take full screen height */
    body, .portal-container {
        height: 100vh;
        overflow: hidden;
    }

    /* 2. Set the Bottom Navbar to take 15% (or fixed 60-70px max) */
    .bottom-navbar {
        height: 8vh !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        /* Must stay below the sidebar (1000) and its overlay (999) -
           this was accidentally set equal to the sidebar's z-index,
           and being later in the DOM, it was winning the stacking
           order and covering the sidebar's own bottom content
           (the Logout button) whenever the sidebar was open. */
        z-index: 500;
    }

    /* 3. Set the Page Container / Content Area to take 85% height */
    .main-content {
        height: 92vh !important;
        overflow-y: auto;
        padding-bottom: 20px !important;
    }

    /* 4. Full-height sub-layouts (AI & Forum) inside the 85% container */
    .ai-layout,
    .forum-container,
    .thread-container {
        height: 100% !important;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* Keeps chat messages and forum posts scrollable inside the 85% area */
    .chat-messages,
    .forum-posts-container,
    .thread-replies {
        flex: 1;
        overflow-y: auto;
    }

    /* Keeps inputs docked right above the bottom 15% navbar */
    .ai-input-container,
    .forum-reply-bar,
    .thread-input-container {
        position: sticky;
        bottom: 0;
        background: var(--surface, #ffffff);
        z-index: 100;
    }
}
/* =========================================
   AI CHAT FOOTER - STACK PREVIEW ABOVE INPUT
   .chat-footer was a flex row (display:flex was
   set, but flex-direction was never set to
   column anywhere), so the staged-file preview
   chip and the actual input row (attach/voice/
   send buttons) were direct siblings competing
   for the same horizontal line - showing the
   preview squeezed the input controls out.
   Stacking them vertically instead (preview
   chip above, full input row below) matches how
   attachment previews work in most chat/AI
   interfaces. Added last so it wins regardless
   of the earlier, overlapping .chat-footer
   rules elsewhere in this file.
========================================= */

.chat-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px;
}

/* =========================================
   AI CHAT COMPOSER - MATCH FORUM REPLY PILL
   Restyled to match the forum reply composer
   (#thread-input-area / .thread-input-row):
   a plain, low-chrome wrapper instead of a
   distinct "footer" bar (no background, no
   top border, no fade-out gradient), with the
   attach button living inside the pill and
   the send button sitting snug against its
   right edge instead of floating in a wide
   gap. Added last so it wins regardless of
   the several older, overlapping
   .chat-footer/.chat-input-pill rules earlier
   in this file.
========================================= */

.chat-footer {
    background: transparent;
    border-top: none;
    box-shadow: none;
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
}

.chat-footer::before {
    content: none;
}

.chat-input-pill {
    max-width: none;
    margin: 0;
    align-items: center;
    background: var(--input-bg, #f8fafc);
    border-radius: 999px;
    padding: 6px 8px 6px 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    gap: 4px;
}

#chat-input {
    border: none;
    background: transparent;
    min-height: 24px;
    padding: 6px 4px;
}

#chat-input:focus {
    border-color: transparent;
    box-shadow: none;
    outline: none;
}

#attach-btn,
#voice-btn {
    width: 34px;
    height: 34px;
    background: transparent;
}

#attach-btn:hover,
#voice-btn:hover {
    background: rgba(15, 23, 42, .06);
}

#send-btn {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    margin-left: 2px;
}

body.dark .chat-input-pill {
    background: #2a2a2d;
    box-shadow: none;
}

body.dark #attach-btn:hover,
body.dark #voice-btn:hover {
    background: rgba(255, 255, 255, .08);
}

/* Keep the AI composer visually identical to the forum's light composer.
   --input-bg is also used by dark forum controls, so it must not determine
   the chat pill's light appearance. */
body:not(.dark):not(.dark-mode) .chat-footer {
    background: transparent !important;
    border-top: none !important;
    box-shadow: none !important;
}

body:not(.dark):not(.dark-mode) .chat-input-pill {
    background: var(--surface, #ffffff) !important;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

body:not(.dark):not(.dark-mode) #chat-input {
    background: transparent !important;
    color: var(--text-primary, #0f172a);
}

/* On phones the conversation list opens over the chat.  Keep the composer
   and the active-material chip inside the remaining visible chat space,
   rather than letting them run beneath the open drawer. */
@media (max-width: 768px) {
    .ai-layout.show-sidebar .ai-main {
        width: calc(100% - 260px) !important;
        max-width: calc(100% - 260px) !important;
        margin-left: 260px;
        flex: 0 1 calc(100% - 260px) !important;
        min-width: 0 !important;
    }

    /* The portal navigation drawer is slightly wider than the AI chat
       drawer, so its visible-space calculation is intentionally separate. */
    body:has(.sidebar.show) .ai-layout .ai-main {
        width: calc(100% - 280px) !important;
        max-width: calc(100% - 280px) !important;
        margin-left: 280px;
        flex-basis: calc(100% - 280px) !important;
    }

    .ai-layout.show-sidebar .chat-footer,
    .ai-layout.show-sidebar .material-context-row,
    body:has(.sidebar.show) .chat-footer,
    body:has(.sidebar.show) .material-context-row {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    .ai-layout.show-sidebar .material-context-chip,
    body:has(.sidebar.show) .material-context-chip {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}

/* =========================================================
   FLOATING ADD FORUM BUTTON
========================================================= */
.floating-add {
    position: fixed;
    right: 25px;
    bottom: 85px; /* Raised up from 25px so it floats above the bottom navbar */
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
    z-index: 99; /* Ensures button stays on top of content */
    transition: transform 0.2s ease, bottom 0.2s ease;
}

.floating-add:hover {
    transform: scale(1.08);
}

/* Adjust for mobile viewports with safe area padding */
@media (max-width: 768px) {
    .floating-add {
        bottom: calc(85px + env(safe-area-inset-bottom)) !important;
    }
}

/* =========================================================
   ADD ELECTIVE MODAL

   This modal had no real styling before - .form-group/label/input
   rules in this file are all scoped to specific modals (password,
   material-upload, forum), never a shared default, so this one was
   rendering with nothing but browser defaults. Scoped the same way
   the others are, plus a couple of small aids (semester as a
   two-option toggle instead of a dropdown, a live summary of what's
   about to be added) since this form doubles as the only place a
   student defines a brand new course from scratch.
========================================================= */

.elective-modal-subtitle{
    margin-top:6px;
    color:var(--text-light);
    font-size:.85rem;
    line-height:1.5;
}

.elective-modal .form-group{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:16px;
}

.elective-modal .form-group label{
    font-size:.85rem;
    font-weight:600;
    color:var(--text-light);
}

.elective-modal .form-group input,
.elective-modal .form-group select{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:12px;
    outline:none;
    font-size:.95rem;
    background:var(--surface);
    color:var(--text);
    transition:.2s ease;
}

.elective-modal .form-group input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(20,199,180,.14);
}

.elective-field-row{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:14px;
}

.elective-semester-toggle{
    display:flex;
    gap:8px;
}

.elective-semester-option{
    flex:1;
    padding:10px 14px;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text-light);
    font-weight:600;
    font-size:.9rem;
    transition:.15s ease;
}

.elective-semester-option:hover{
    border-color:var(--primary);
    color:var(--primary-dark);
}

.elective-semester-option.active{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    border-color:transparent;
    color:#fff;
}

.elective-existing-note{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-top:4px;
    padding:12px 14px;
    border-radius:12px;
    background:rgba(59,130,246,.08);
    border:1px solid rgba(59,130,246,.2);
    color:var(--text);
    font-size:.85rem;
    line-height:1.5;
}

.elective-existing-note .material-icons{
    font-size:1.1rem;
    color:var(--info);
    margin-top:1px;
}

.elective-preview{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:6px;
    padding:12px 14px;
    border-radius:12px;
    background:rgba(20,199,180,.06);
    border:1px dashed rgba(20,199,180,.3);
}

.elective-preview .material-icons{
    color:var(--primary);
    font-size:1.4rem;
}

.elective-preview > div{
    display:flex;
    flex-direction:column;
    flex:1;
    min-width:0;
}

.elective-preview strong{
    font-family:var(--font-mono);
    font-size:.85rem;
    color:var(--text);
}

.elective-preview span{
    font-size:.82rem;
    color:var(--text-light);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.elective-preview .elective-preview-meta{
    flex-shrink:0;
    font-size:.78rem;
    color:var(--text-light);
    text-align:right;
    white-space:nowrap;
}

@media (max-width:520px){
    .elective-field-row{
        grid-template-columns:1fr;
    }
}
/* =========================================================
   FORUM - WHATSAPP / MESSENGER STYLE REDESIGN

   Two surfaces get the treatment:
   1. The thread list (.forum-page) becomes a flat "Chats" list -
      avatar circle, title + timestamp, one-line preview, unread
      badge - instead of a grid of shadowed cards.
   2. The thread view (#forum-thread) becomes a chat screen -
      a doodled wallpaper background, tailed bubbles left/right,
      small avatar chips on incoming messages, and a pill-shaped
      composer with the attach icon inside it.

   This section is appended last on purpose so it wins ties over
   the earlier, older forum rules already in this file without
   having to touch/remove them.
========================================================= */

/* ---------- Chat list (forum-page) ---------- */

.forum-page {
    max-width: 720px;
    background: var(--surface);
}

.forum-toolbar {
    padding: 0 4px;
}

.forum-search {
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.04);
    border: none;
}

#forum-thread-list {
    display: flex;
    flex-direction: column;
}

.thread-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 0;
    padding: 12px 4px;
    margin-bottom: 0;
    transition: background 0.15s ease;
}

.thread-card:hover {
    transform: none;
    box-shadow: none;
    background: rgba(15, 23, 42, 0.035);
}

.chat-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
}

.chat-row-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 2px;
}

.chat-row-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.chat-row-header h3 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-row-time {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--text-light);
}

.chat-row-subline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.thread-preview {
    margin: 0;
    color: var(--text-light);
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.chat-row-author {
    color: var(--text);
    font-weight: 500;
}

.chat-row-meta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.thread-reactions-count {
    font-size: 0.72rem;
    color: var(--text-light);
}

.chat-unread-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.chat-unread-badge.has-count {
    display: inline-flex;
}

.floating-add {
    background: var(--primary);
    box-shadow: 0 8px 20px rgba(20, 199, 180, 0.35);
}

/* ---------- Thread / chat screen (#forum-thread) ---------- */

#forum-thread,
#forum-thread.page.active {
    background:
        radial-gradient(circle at 20% 15%, rgba(20, 199, 180, 0.05) 0, transparent 45%),
        radial-gradient(circle at 80% 75%, rgba(20, 199, 180, 0.05) 0, transparent 45%),
        #EBE7DD;
    padding: 0;
}

body.dark #forum-thread,
body.dark #forum-thread.page.active {
    background:
        radial-gradient(circle at 20% 15%, rgba(20, 199, 180, 0.06) 0, transparent 45%),
        radial-gradient(circle at 80% 75%, rgba(20, 199, 180, 0.06) 0, transparent 45%),
        #0B141A;
}

#forum-thread-container {
    padding: 0 12px;
}

#thread-header {
    border-radius: 0;
    background: var(--surface);
}

#thread-replies {
    padding: 14px 4px;
    gap: 4px;
}

/* Messages */

.forum-message {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 82%;
    margin: 3px 0;
}

.forum-message.other {
    align-self: flex-start;
}

.forum-message.mine {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message-avatar-chip {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.message-card {
    border-radius: 14px;
    padding: 8px 10px 6px;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
    position: relative;
    max-width: 100%;
}

.forum-message.other .message-card {
    background: var(--surface, #ffffff) !important;
    color: var(--text, #1f2937) !important;
    border-top-left-radius: 4px;
}

.forum-message.mine .message-card {
    background: var(--primary, #14C7B4) !important;
    color: #ffffff !important;
    border-top-right-radius: 4px;
}

/* Little bubble tail, WhatsApp-style */

.forum-message.other .message-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -7px;
    width: 12px;
    height: 14px;
    background: var(--surface, #ffffff);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.forum-message.mine .message-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: -7px;
    width: 12px;
    height: 14px;
    background: var(--primary, #14C7B4);
    clip-path: polygon(0 0, 0 100%, 100% 0);
}

.message-author {
    font-size: 0.76rem;
    font-weight: 700;
    margin-bottom: 2px;
    color: var(--primary-dark, #0d9488);
}

.forum-message.mine .message-author {
    color: rgba(255,255,255,0.9);
}

.message-time {
    font-size: 0.65rem;
    opacity: 0.65;
    margin-top: 3px;
    text-align: right;
}

.reply-image {
    max-width: 220px;
    border-radius: 10px;
    margin-bottom: 6px;
    display: block;
}

/* ---------- Composer (pill-shaped, WhatsApp-style) ---------- */

#thread-input-area {
    background: transparent;
    box-shadow: none;
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
}

.thread-input-row {
    align-items: center;
    background: var(--surface, #ffffff);
    border-radius: 999px;
    padding: 6px 8px 6px 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.reply-toolbar {
    display: flex;
    align-items: center;
}

#reply-image-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

#reply-image-btn:hover {
    background: rgba(15, 23, 42, 0.06);
}

#reply-input {
    border: none;
    background: transparent;
    min-height: 24px;
    max-height: 120px;
    padding: 6px 4px;
    font-size: 0.92rem;
}

#reply-input:focus {
    border-color: transparent;
    box-shadow: none;
}

#send-reply {
    width: 42px;
    height: 42px;
    background: var(--primary, #14C7B4);
    flex-shrink: 0;
}

#send-reply:hover {
    background: var(--primary-dark, #0d9488);
    transform: scale(1.05);
}

#send-reply .material-icons {
    font-size: 20px;
}

@media (max-width: 768px) {
    .forum-message {
        max-width: 88%;
    }

    .chat-avatar {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }
}
/* =========================================================
   COURSES PAGE - "Add Elective Course" button on mobile

   A round, icon-only button that sits on the same row as the
   "Courses" heading instead of stacking below it and eating a
   whole row. The label is still there for screen readers (and for
   desktop, where it shows normally) via aria-label + a visually-
   hidden span - see index.html.
========================================================= */

@media (max-width: 768px) {

    #courses .page-header {
        flex-wrap: nowrap;
        align-items: center;
        gap: 12px;
    }

    #courses .page-header > div:first-child {
        flex: 1;
        min-width: 0;
    }

    #courses .page-header p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #add-elective-btn {
        flex-shrink: 0;
        width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
    }

    #add-elective-btn .btn-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    #add-elective-btn .material-icons {
        font-size: 22px;
    }
}

.material-context-row{
    width:100%;
    max-width:900px;
    margin:0 auto 10px;
}

.material-context-chip{
    display:flex;
    align-items:center;
    gap:10px;
    width:fit-content;
    max-width:100%;
    padding:8px 12px;
    border:1px solid var(--primary);
    border-radius:14px;
    background:rgba(20,199,180,.09);
    color:var(--text-primary);
    font-size:.85rem;
}

.material-context-chip .material-icons{
    color:var(--primary);
    font-size:19px;
}

.material-context-chip span:last-child{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

body.portal-document-viewer-open{
    overflow:hidden;
}

.portal-document-viewer-overlay{
    position:fixed;
    z-index:10000;
    inset:0;
    background:#111827;
}

.portal-document-viewer-frame{
    display:block;
    width:100%;
    height:100%;
    border:0;
    background:#111827;
}