/*
==============================================
=== MATERIAL 3 EXPRESSIVE DESIGN SYSTEM ======
==============================================
*/

:root {
    /* M3: Animation & Physics Timing Functions */
    --m3-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --m3-ease-emphasized: cubic-bezier(0.3, 0.0, 0.0, 1.0); /* Overshoot */
    --m3-ease-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);
    --m3-duration-short: 200ms;
    --m3-duration-medium: 400ms;
    --m3-duration-long: 600ms;

    /* M3: Shape & Radius System */
    --m3-radius-xs: 4px;
    --m3-radius-s: 8px;
    --m3-radius-m: 12px;
    --m3-radius-l: 16px;
    --m3-radius-xl: 28px;
    --m3-radius-full: 999px;

    /* M3: Typography */
    --m3-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* M3: Light & Dark Color Themes */
    color-scheme: light dark;
    
    /* --- DEFAULT THEME (BLUE) --- */
    --primary-hue: 210; --primary-sat: 100%;
    --secondary-hue: 210; --secondary-sat: 15%;
    --tertiary-hue: 260; --tertiary-sat: 100%;
    --error-hue: 0; --error-sat: 84%;
}

/* ================================== */
/* === MULTI-THEME SYSTEM =========== */
/* ================================== */
[data-theme="green"] { --primary-hue: 140; --primary-sat: 80%; }
[data-theme="pink"]  { --primary-hue: 330; --primary-sat: 100%; }
[data-theme="red"]   { --primary-hue: 0;   --primary-sat: 84%; }
[data-theme="purple"]{ --primary-hue: 260; --primary-sat: 100%; }
[data-theme="yellow"]{ --primary-hue: 45;  --primary-sat: 100%; }
[data-theme="blue"]  { --primary-hue: 210; --primary-sat: 100%; }

:root {
    --primary: var(--primary-hue) var(--primary-sat) 50%;
    --on-primary: 0 0% 100%;
    --primary-container: var(--primary-hue) var(--primary-sat) 90%;
    --on-primary-container: var(--primary-hue) var(--primary-sat) 10%;
    --secondary: var(--secondary-hue) var(--secondary-sat) 40%;
    --on-secondary: 0 0% 100%;
    --secondary-container: var(--secondary-hue) var(--secondary-sat) 90%;
    --on-secondary-container: var(--secondary-hue) var(--secondary-sat) 10%;
    --tertiary: var(--tertiary-hue) var(--tertiary-sat) 60%;
    --on-tertiary: 0 0% 100%;
    --tertiary-container: var(--tertiary-hue) var(--tertiary-sat) 90%;
    --on-tertiary-container: var(--tertiary-hue) var(--tertiary-sat) 10%;
    --error: var(--error-hue) var(--error-sat) 60%;
    --on-error: 0 0% 100%;
    --background: 0 0% 98%;
    --on-background: 0 0% 10%;
    --surface: 0 0% 100%;
    --on-surface: 0 0% 10%;
    --surface-variant: 210 25% 90%;
    --on-surface-variant: 210 25% 20%;
    --outline: 210 15% 50%;
    --shadow-color: 220 40% 22%;
    --scrim: 0 0% 0%;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: var(--primary-hue) var(--primary-sat) 70%;
        --on-primary: var(--primary-hue) 100% 10%;
        --primary-container: var(--primary-hue) var(--primary-sat) 20%;
        --on-primary-container: var(--primary-hue) var(--primary-sat) 90%;
        --secondary: 190 30% 70%;
        --on-secondary: 190 25% 15%;
        --secondary-container: 190 30% 25%;
        --on-secondary-container: 190 30% 90%;
        --tertiary: 280 80% 75%;
        --on-tertiary: 280 100% 15%;
        --tertiary-container: 280 80% 25%;
        --on-tertiary-container: 280 80% 90%;
        --error: 0 70% 70%;
        --on-error: 0 100% 15%;
        --background: 220 15% 8%;
        --on-background: 0 0% 90%;
        --surface: 220 15% 12%;
        --on-surface: 0 0% 90%;
        --surface-variant: 220 15% 20%;
        --on-surface-variant: 220 15% 80%;
        --outline: 220 15% 45%;
        --shadow-color: 0 0% 0%;
        --scrim: 0 0% 0%;
    }
}

/* M3: Keyframe Animations */
@keyframes m3-pop-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes m3-slide-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes m3-loader-spin { 100% { transform: rotate(360deg); } }
@keyframes m3-loader-morph { 0% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; } 25% { border-radius: 70% 30% 50% 50% / 50% 70% 30% 50%; } 50% { border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%; } 75% { border-radius: 50% 50% 70% 30% / 30% 50% 50% 70%; } 100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; } }

/* --- Base Styles --- */
html, body {height: 100%;margin: 0;padding: 0;font-family: var(--m3-font-family);background-color: hsl(var(--background));/* color: hsl(var(--on-background)); */overflow: hidden;-webkit-tap-highlight-color: transparent;}
* { box-sizing: border-box; }
body.focus-active .view.padded { padding-bottom: 100px; }

/* --- Main App Structure --- */
#app-container { display: flex; flex-direction: column; height: 100%; width: 100%; }
main#main-content {flex-grow: 1;overflow: auto;position: relative;}
.view { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; flex-direction: column; overflow-y: auto; background-color: hsl(var(--background)); transition: opacity var(--m3-duration-medium) var(--m3-ease-standard), transform var(--m3-duration-medium) var(--m3-ease-standard); opacity: 0; transform: scale(0.98); }
.view.active { display: flex; z-index: 10; opacity: 1; transform: scale(1); }
.view.padded { padding: 16px; }

/* --- Bottom Navigation --- */
.bottom-nav { flex-shrink: 0; display: flex; justify-content: space-around; background-color: hsl(var(--surface) / 0.8); backdrop-filter: blur(10px); padding: 8px 4px; border-top: 1px solid hsl(var(--outline) / 0.3); box-shadow: 0 -2px 20px -5px hsl(var(--shadow-color) / 0.1); z-index: 100; }
.nav-button { background: none; border: none; color: hsl(var(--on-surface-variant)); cursor: pointer; display: flex; flex-direction: column; align-items: center; padding: 4px 12px; font-size: 12px; font-weight: 900; border-radius: var(--m3-radius-full); transition: color var(--m3-duration-short) var(--m3-ease-standard), background-color var(--m3-duration-short) var(--m3-ease-standard); position: relative; overflow: hidden; }
.nav-button .material-symbols-outlined { font-size: 22px; margin-bottom: 4px; padding: 4px 16px; border-radius: var(--m3-radius-full); transition: background-color var(--m3-duration-medium) var(--m3-ease-standard), color var(--m3-duration-medium) var(--m3-ease-standard); }
.nav-button:hover .material-symbols-outlined { background-color: hsl(var(--primary-container)); }
.nav-button.active { color: hsl(var(--on-primary-container)); }
.nav-button.active .material-symbols-outlined { background-color: hsl(var(--primary-container)); color: hsl(var(--on-primary-container)); }

/* --- Generic UI Components --- */
.ai-glow::before { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: inherit; background: hsl(var(--primary)); animation: m3-loader-morph 2s infinite ease-in-out, m3-loader-spin 4s linear infinite; transform: translate(-50%, -50%) scale(1.5); opacity: 0.15; z-index: -1; }
.page-title { font-size: clamp(1.8rem, 5vw, 2.2rem); font-weight: 700; margin-bottom: 24px; padding: 16px 16px 12px; color: hsl(var(--on-background)); text-align: center; border-bottom: 1px solid hsl(var(--outline) / 0.3); }
.styled-button { background-color: hsl(var(--secondary-container)); color: hsl(var(--on-secondary-container)); border: 1px solid transparent; padding: 12px 24px; border-radius: var(--m3-radius-full); font-size: 1em; font-weight: 700; cursor: pointer; transition: all var(--m3-duration-short) var(--m3-ease-standard); display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; box-shadow: 0 1px 3px hsl(var(--shadow-color) / 0.1); text-decoration: none; }
.styled-button:hover { box-shadow: 0 4px 8px hsl(var(--shadow-color) / 0.15); transform: translateY(-2px); }
.styled-button:active { transform: translateY(-1px) scale(0.98); }
.styled-button.primary { background-color: hsl(var(--primary)); color: hsl(var(--on-primary)); border: none; }
.styled-card { background: hsl(var(--surface)); padding: 20px; border-radius: var(--m3-radius-l); border: 1px solid hsl(var(--outline) / 0.3); margin-bottom: 24px; }

/* ============================ */
/* === HOME VIEW ========= */
/* ============================ */
#home-view { padding: 0; overflow-x: hidden; }
.home-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; background-color: hsl(var(--surface)); border-bottom: 1px solid hsl(var(--outline) / 0.3); }
.app-name { font-size: 1.5em; font-weight: 800; color: hsl(var(--on-surface)); }
.profile-btn { background: none; border: none; cursor: pointer; padding: 8px; border-radius: var(--m3-radius-full); }
.profile-btn .material-symbols-outlined { font-size: 28px; color: hsl(var(--on-surface-variant)); }
.home-content { padding: 0 0 16px 0; margin-left: 10px; }
#video-search-form { padding: 0 16px 16px; display: flex; gap: 8px; align-items: center; margin-top: 9px; }
#video-search-input { width: 100%; }
.subject-carousel-group { margin-bottom: 24px; }
.subject-carousel-group h2 { font-size: 1.4em; font-weight: 700; color: hsl(var(--on-background)); margin: 16px; }
.video-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding: 0 16px; scrollbar-width: none; }
.video-carousel::-webkit-scrollbar { display: none; }
.video-card { flex: 0 0 280px; scroll-snap-align: start; cursor: pointer; border-radius: var(--m3-radius-l); overflow: hidden; background-color: hsl(var(--surface)); border: 1px solid hsl(var(--outline) / 0.3); transition: transform 0.2s var(--m3-ease-standard); }
.video-card:hover { transform: translateY(-4px); }
.video-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.video-card-info { padding: 12px; }
.video-card-title { font-weight: bold; color: hsl(var(--on-surface)); margin: 0 0 4px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-card-channel { font-size: 0.9em; color: hsl(var(--on-surface-variant)); }

/* Playlist Progress Bar (New Feature Styled to Match M3) */
.playlist-progress-bar { height: 6px; width: 100%; background-color: hsl(var(--surface-variant)); margin-top: 10px; border-radius: var(--m3-radius-full); overflow: hidden; }
.playlist-progress-fill { height: 100%; background-color: hsl(var(--primary)); width: 0%; transition: width 0.5s var(--m3-ease-standard); border-radius: var(--m3-radius-full); }
.playlist-progress-text { font-size: 0.75em; color: hsl(var(--on-surface-variant)); margin-top: 6px; font-weight: 700; text-align: right; }

/* ============================ */
/* === VIDEO VIEW ======== */
/* ============================ */
#video-view {padding: 16px;gap: 16px;justify-content: center;align-items: center;overflow: auto;}
#video-player-wrapper {width: 100%;max-width: 800px;aspect-ratio: 16 / 9;background-color: #000;border-radius: var(--m3-radius-xl);overflow:hidden;box-shadow: 0 8px 24px hsl(var(--shadow-color) / 0.2);margin-top: 10%;}
#video-player { width: 100%; height: 100%; }
#video-details {text-align: center;width: 100%;max-width: 800px;overflow: auto;margin-bottom: 10%;}
#video-title { font-size: 1.5em; font-weight: 700; margin: 0 0 16px 0; }
#video-actions {display: flex;flex-wrap: wrap;gap: 12px;justify-content: center;margin-bottom: 8%;}

/* Chat Components */
.chat-container { width: 100%; display: flex; flex-direction: column; background: hsl(var(--surface)); border-top: 1px solid hsl(var(--outline) / 0.3); }
.chat-messages { flex-grow: 1; overflow-y: auto; padding: 16px; }
.chat-message { max-width: 85%; padding: 12px 16px; border-radius: var(--m3-radius-l); margin-bottom: 12px; line-height: 1.5; word-wrap: break-word; animation: m3-slide-in-up var(--m3-duration-medium) var(--m3-ease-emphasized); }
.user-message, .my-message { background: hsl(var(--primary-container)); color: hsl(var(--on-primary-container)); margin-left: auto; border-bottom-right-radius: var(--m3-radius-xs); }
.ai-message, .buddy-message { background: hsl(var(--surface-variant)); color: hsl(var(--on-surface-variant)); margin-right: auto; border-bottom-left-radius: var(--m3-radius-xs); }
.chat-input-area { display: flex; padding: 8px 8px; gap: 2px; align-items: center; border-top: 1px solid hsl(var(--outline) / 0.3); }
.chat-input { flex-grow: 1; background: hsl(var(--surface-variant)); border: none; border-radius: var(--m3-radius-full); padding: 12px 20px; color: hsl(var(--on-surface-variant)); font-size: 1em; }
.chat-input:focus { outline: 2px solid hsl(var(--primary)); }
.chat-send-btn { background: hsl(var(--primary)); border: none; color: hsl(var(--on-primary)); width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--m3-radius-full); cursor: pointer; display: grid; place-items: center; transition: transform var(--m3-duration-short) var(--m3-ease-standard); }
.chat-send-btn:active { transform: scale(0.9); }
.chat-send-btn .material-symbols-outlined { font-size: 24px; }

/* Modal Styles */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 5000; background: hsl(var(--scrim) / 0.6); display: none; justify-content: center; align-items: center; padding: 16px; animation: m3-pop-in var(--m3-duration-medium) var(--m3-ease-emphasized); }
.modal-content { background: hsl(var(--surface)); width: 100%; max-width: 500px; padding: 24px; border-radius: var(--m3-radius-xl); box-shadow: 0 8px 32px hsl(var(--shadow-color) / 0.2); max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; border: 1px solid hsl(var(--outline) / 0.2); }
.modal-step { display: none; } .modal-step.active { display: block; animation: m3-pop-in 0.5s var(--m3-ease-emphasized); }
.modal h2 { color: hsl(var(--primary)); font-size: 1.8em; margin-top: 0; }
.modal p { color: hsl(var(--on-surface-variant)); line-height: 1.6; }
.modal label { display: block; margin-top: 16px; margin-bottom: 8px; font-weight: 500; color: hsl(var(--on-surface-variant)); }
.modal input, .modal textarea, .modal select { width: 100%; padding: 12px; border-radius: var(--m3-radius-m); border: 1px solid hsl(var(--outline)); background: hsl(var(--surface)); color: hsl(var(--on-surface)); font-size: 1em; transition: border-color var(--m3-duration-short) var(--m3-ease-standard); }
.modal input:focus, .modal textarea:focus, .modal select:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / 0.3); }
.modal-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.close-modal-btn { position: absolute; top: 16px; right: 16px; background: hsl(var(--surface-variant)); border: none; border-radius: var(--m3-radius-full); width: 40px; height: 40px; font-size: 24px; color: hsl(var(--on-surface-variant)); cursor: pointer; z-index: 2001; display: grid; place-items: center; }

/* ============================ */
/* === STUDY VIEW LAYOUT ==== */
/* ============================ */
#study-text-input {
    padding: 14px;
    border-radius: var(--m3-radius-m);
    border: 1px solid hsl(var(--outline));
    background: hsl(var(--surface));
    color: hsl(var(--on-surface));
    font-size: 1em;
    resize: vertical;
    min-height: 80px;
}
#study-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    justify-content: flex-start;
}

/* ============================ */
/* === PLAYLIST & EXAM CARDS === */
/* ============================ */
#playlist-container, #exam-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.playlist-card { background: hsl(var(--surface)); border: 1px solid hsl(var(--outline) / 0.4); border-radius: var(--m3-radius-l); padding: 20px; transition: all var(--m3-duration-short) var(--m3-ease-standard); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.playlist-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px hsl(var(--shadow-color) / 0.1); }
.playlist-card h3 {
    margin: 0 0 4px;
    font-size: 1.3em;
    color: hsl(var(--on-surface));
    max-width: 200px;
    overflow-wrap: break-word;
    word-break: break-word;
}
.playlist-card p { margin: 0; color: hsl(var(--on-surface-variant)); }
.playlist-card-actions { display: flex; gap: 8px; align-items: center; }
.playlist-delete-btn { background: none; border: none; color: hsl(var(--on-surface-variant)); cursor: pointer; border-radius: var(--m3-radius-full); width: 40px; height: 40px; display: grid; place-items:center; }
.playlist-delete-btn:hover { color: hsl(var(--error)); background-color: hsl(var(--error) / 0.1); }

/* ===================================== */
/* === FOCUS MINI PLAYER  ==== */
/* ===================================== */
#focus-mini-player {
    display: none;
    position: fixed;
    bottom: 79px;
    left: 16px;
    right: 16px;
    z-index: 2000;
    background: hsl(var(--surface) / 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid hsl(var(--outline) / 0.3);
    border-radius: var(--m3-radius-xl);
    padding: 12px;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 5px 25px hsl(var(--shadow-color) / 0.2);
    animation: m3-slide-in-up var(--m3-duration-medium) var(--m3-ease-emphasized);
    height: 10%;
}

div#focus-mini-player {}
#focus-mini-player-info { display: flex; align-items: center; gap: 16px; overflow: hidden; }
#focus-timer-info { text-align: left; }
#focus-subject-display {
    font-size: 1.2em; font-weight: 700; margin: 0; color: hsl(var(--on-surface));
    text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
#focus-session-timer-display { font-size: 0.9em; color: hsl(var(--on-surface-variant)); margin: 0; font-variant-numeric: tabular-nums; }
#focus-mini-player-controls { display: flex; align-items: center; gap: 8px; }
#focus-music-mic-btn {
    background: hsl(var(--primary)); border: none; color: hsl(var(--on-primary));
    width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--m3-radius-full);
    cursor: pointer; display: grid; place-items: center;
}
#exit-focus-btn {
    background: hsl(var(--surface-variant)); border: none; color: hsl(var(--on-surface-variant));
    width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--m3-radius-full);
    cursor: pointer; display: grid; place-items: center;
}
#focus-music-player-container { display:none; }

/* ================================= */
/* === FLASHCARDS VIEW === */
/* ================================= */
#flashcard-set-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.flashcard-set { background: hsl(var(--surface)); border: 1px solid hsl(var(--outline) / 0.4); border-radius: var(--m3-radius-l); padding: 20px; cursor: pointer; transition: all var(--m3-duration-medium) var(--m3-ease-emphasized); display: flex; flex-direction: column; justify-content: space-between; min-height: 140px; position: relative; }
.flashcard-set:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 24px hsl(var(--shadow-color) / 0.1); border-color: hsl(var(--primary)); }
.flashcard-set-checkbox { position: absolute; top: 12px; left: 12px; width: 20px; height: 20px; accent-color: hsl(var(--primary)); display: none; }
.selection-active .flashcard-set-checkbox { display: block; }
.flashcard-set h3 { margin: 0 0 10px; color: hsl(var(--on-surface)); font-size: 1.4em; }
.flashcard-set-footer { display: flex; justify-content: space-between; align-items: center; color: hsl(var(--on-surface-variant)); font-size: 0.9em; }
.flashcard-set-delete-btn { background: none; border: none; color: hsl(var(--on-surface-variant)); cursor: pointer; border-radius: var(--m3-radius-full); width: 36px; height: 36px; display: grid; place-items:center; }
.flashcard-set-delete-btn:hover { color: hsl(var(--error)); background-color: hsl(var(--error) / 0.1); }

/* Flashcard Viewer */
#flashcard-viewer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: hsl(var(--background)); z-index: 4000; display: none; flex-direction: column; justify-content: center; align-items: center; padding: 10px; animation: m3-pop-in var(--m3-duration-medium) var(--m3-ease-emphasized); }
#flashcard-viewer-content { width: 100%; max-width: 600px; aspect-ratio: 16/10; overflow: hidden; position: relative; }
#flashcard-swiper { display: flex; height: 100%; transition: transform var(--m3-duration-medium) var(--m3-ease-emphasized); }
.flashcard-slide { width: 100%; height: 100%; flex-shrink: 0; perspective: 1200px; }
.flashcard-inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s var(--m3-ease-emphasized); transform-style: preserve-3d; background: hsl(var(--surface)); border: 1px solid hsl(var(--outline) / 0.5); border-radius: var(--m3-radius-xl); cursor: pointer; box-shadow: 0 4px 15px hsl(var(--shadow-color) / 0.1); }
.flashcard-slide.is-flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard-front, .flashcard-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px; text-align: center; font-size: clamp(1.2rem, 4vmin, 1.8rem); overflow-y: auto; }
.flashcard-back { transform: rotateY(180deg); color: hsl(var(--primary)); }
.flashcard-back img { max-width: 100%; max-height: 100%; border-radius: var(--m3-radius-s); object-fit: contain; }
#flashcard-viewer-controls { display: flex; justify-content: space-around; align-items: center; width: 100%; max-width: 700px; margin-top: 24px; }
.flashcard-eval-btn { flex-grow: 1; margin: 0 10px; padding: 16px 24px; font-size: 1.2em; }
#flashcard-didnt-know-btn { background-color: hsl(var(--error) / 0.1); color: hsl(var(--error)); }
#flashcard-knew-btn { background-color: hsl(140, 60%, 40%) ; color: white; }
#flashcard-counter { position: absolute; bottom: -35px; left: 50%; transform: translateX(-50%); color: hsl(var(--on-surface-variant)); font-variant-numeric: tabular-nums; }
#flashcard-viewer-header { position: absolute; top: 15px; left: 15px; right: 15px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
#flashcard-viewer-header .header-group-left { margin-right: auto; display: flex; align-items: center; gap: 10px; }
#flashcard-viewer-header .styled-button { font-size: 0.8em; padding: 8px 16px;}
#close-viewer-btn { background: hsl(var(--surface-variant) / 0.8); border: none; border-radius: var(--m3-radius-full); width: 48px; height: 48px; color: hsl(var(--on-surface-variant)); cursor: pointer; flex-shrink: 0; display: grid; place-items: center; }
#close-viewer-btn .material-symbols-outlined { font-size: 32px; }
#flashcard-focus-timer { color: hsl(var(--primary)); font-size: 1.1em; font-weight: bold; background: hsl(var(--primary-container) / 0.5); padding: 8px 16px; border-radius: var(--m3-radius-full); font-variant-numeric: tabular-nums; }

#unknown-cards-list { list-style: none; padding: 0; margin-top: 16px; max-height: 150px; overflow-y: auto; }
#unknown-cards-list li { background: hsl(var(--surface-variant)); padding: 12px; border-radius: var(--m3-radius-m); margin-bottom: 8px; font-size: 0.9em; }

/* Profile View */
#profile-view .styled-card { background: hsl(var(--surface)); padding: 20px; border-radius: var(--m3-radius-l); border: 1px solid hsl(var(--outline) / 0.3); margin-bottom: 24px; }
#profile-view h3 { color: hsl(var(--primary)); font-size: 1.2em; margin-top: 0; margin-bottom: 8px; }
.theme-picker { display: flex; gap: 12px; justify-content: center; margin-top: 10px; }
.theme-swatch { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: border-color 0.2s; }
.theme-swatch.active { border-color: hsl(var(--primary)); }
#swatch-blue { background-color: #3B82F6; }
#swatch-green { background-color: #22C55E; }
#swatch-pink { background-color: #EC4899; }
#swatch-red { background-color: #EF4444; }
#swatch-purple { background-color: #8B5CF6; }
#swatch-yellow { background-color: #EAB308; }

/* Playlist Controls */
#playlist-controls {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3500;
    padding: 12px 16px;
    background: hsl(var(--surface) / 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid hsl(var(--outline) / 0.3);
    align-items: center;
    justify-content: space-between;
}
#playlist-item-info {
     font-size: 0.9em;
     font-weight: 500;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     color: hsl(var(--on-surface-variant));
     display: none;
}
.playlist-selection-item {
    padding: 16px;
    border-bottom: 1px solid hsl(var(--outline) / 0.3);
    cursor: pointer;
}
.playlist-selection-item:hover {
    background: hsl(var(--primary-container));
}

.modal-tabs { display: flex; gap: 8px; margin-bottom: 16px; border-bottom: 1px solid hsl(var(--outline) / 0.3); }
.tab-button { background: none; border: none; padding: 12px 16px; cursor: pointer; border-bottom: 2px solid transparent; color: hsl(var(--on-surface-variant)); font-weight: 700; }
.tab-button.active { color: hsl(var(--primary)); border-bottom-color: hsl(var(--primary)); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: m3-pop-in 0.4s var(--m3-ease-standard); }

.playlist-search-result-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--m3-radius-m); }
.playlist-search-result-item:hover { background-color: hsl(var(--surface-variant)); }
.playlist-search-result-item img { width: 80px; height: 45px; object-fit: cover; border-radius: var(--m3-radius-s); }
.playlist-search-result-info { flex-grow: 1; }
.playlist-search-result-info h4 { margin: 0 0 4px 0; font-size: 1em; }
.playlist-search-result-info p { margin: 0; font-size: 0.9em; color: hsl(var(--on-surface-variant)); }
.import-playlist-btn { padding: 8px 16px; font-size: 0.9em; }

/* ============================== */
/* ==== AUTHENTICATION ==== */
/* ============================== */
#auth-view {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999; background-color: hsl(var(--background));
    display: flex; justify-content: center; align-items: flex-start;
    overflow-y: auto; padding: 20px 0;
}
.auth-container { width: 100%; }
.auth-card {
    background: hsl(var(--surface)); max-width: 400px; margin: 40px auto; 
    padding: 32px; border-radius: var(--m3-radius-xl);
    border: 1px solid hsl(var(--outline) / 0.3);
    box-shadow: 0 8px 32px hsl(var(--shadow-color) / 0.1);
    animation: m3-pop-in var(--m3-duration-medium) var(--m3-ease-emphasized);
}
.auth-title { text-align: center; font-size: 2.5em; font-weight: 800; margin: 0 0 8px 0; color: hsl(var(--primary)); }
.auth-subtitle { text-align: center; margin: 0 0 24px 0; color: hsl(var(--on-surface-variant)); }
.input-group { margin-bottom: 16px; }
.input-group label { display: block; margin-bottom: 4px; font-size: 0.9em; color: hsl(var(--on-surface-variant)); }
.input-group input { width: 100%; padding: 12px; border-radius: var(--m3-radius-m); border: 1px solid hsl(var(--outline)); background: hsl(var(--surface-variant)); color: hsl(var(--on-surface)); font-size: 1em; }
.input-group input:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / 0.3); }
.auth-button { width: 100%; padding: 14px; font-size: 1.1em; }
.auth-divider { text-align: center; margin: 20px 0; color: hsl(var(--outline)); position: relative; }
.auth-divider span { background: hsl(var(--surface)); padding: 0 10px; }
.auth-divider::before { content: ''; display: block; width: 100%; height: 1px; background: hsl(var(--outline) / 0.5); position: absolute; left: 0; top: 50%; z-index: -1; }
.auth-error { margin-top: 16px; color: hsl(var(--error)); text-align: center; font-size: 0.9em; min-height: 1.2em; }

/* ============================== */
/* ===== LOADING OVERLAY === */
/* ============================== */
#loading-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10000; background-color: hsl(var(--background));
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; gap: 20px; color: hsl(var(--on-surface-variant));
}
.loader {
    width: 60px; height: 60px; border: 5px solid hsl(var(--primary-container));
    border-top-color: hsl(var(--primary)); border-radius: 50%;
    animation: m3-loader-spin 1s linear infinite;
}

/* ============================== */
/* ===== BUDDY & CHAT   ==== */
/* ============================== */
.buddy-search-result, .chat-history-item {
    display: flex; align-items: center; padding: 12px;
    border-radius: var(--m3-radius-m); cursor: pointer;
    transition: background-color var(--m3-duration-short) var(--m3-ease-standard);
}
.buddy-search-result:hover, .chat-history-item:hover {
    background-color: hsl(var(--surface-variant));
}
.chat-history-item {
    gap: 12px; border-bottom: 1px solid hsl(var(--outline) / 0.2);
}
.chat-history-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background-color: hsl(var(--tertiary-container));
    color: hsl(var(--on-tertiary-container));
    display: grid; place-items: center;
    font-weight: bold; font-size: 1.2em; flex-shrink: 0;
}
.chat-history-info { flex-grow: 1; overflow: hidden; }
.chat-history-name { font-weight: 700; color: hsl(var(--on-surface)); }
.chat-history-last-msg, .chat-history-study-time {
    font-size: 0.9em; color: hsl(var(--on-surface-variant));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-history-study-time { color: hsl(var(--primary)); font-weight: 500;}

#chat-view { padding: 0; display: none; }
#chat-view-header {
    display: flex; align-items: center; gap: 8px; padding: 12px;
    background-color: hsl(var(--surface));
    border-bottom: 1px solid hsl(var(--outline) / 0.3); flex-shrink: 0;
}
#chat-buddy-name { font-size: 1.2em; font-weight: 700; }
#chat-buddy-status { font-size: 0.8em; color: hsl(var(--on-surface-variant));}
#chat-messages-container {
    flex-grow: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column;
}
.shared-content-card {
    padding: 12px; border-left: 4px solid hsl(var(--primary));
    border-radius: var(--m3-radius-s); background-color: hsl(var(--surface));
    cursor: pointer; margin-top: 8px;
}
.shared-content-card:hover { background-color: hsl(var(--surface-variant)); }
.shared-content-title {
    font-weight: 700; color: hsl(var(--on-surface)); font-size: 1em;
    margin: 0 0 4px 0;
}
.shared-content-type {
    font-size: 0.8em; color: hsl(var(--primary)); text-transform: uppercase;
}
.share-item {
    padding: 16px; border-bottom: 1px solid hsl(var(--outline) / 0.2);
    display: flex; justify-content: space-between; align-items: center;
}

/* ============================== */
/* ===== EXAM FEATURE   ==== */
/* ============================== */
#exam-view {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 7000; background-color: hsl(var(--background));
    display: none; flex-direction: column;
    animation: m3-pop-in var(--m3-duration-medium) var(--m3-ease-emphasized);
}
#exam-header {
    padding: 12px 16px; display: flex; justify-content: space-between;
    align-items: center; flex-shrink: 0;
    border-bottom: 1px solid hsl(var(--outline) / 0.3);
    background-color: hsl(var(--surface));
}
#exam-header h2 { margin: 0; font-size: 1.2em; }
#exam-timer-display { font-weight: 700; color: hsl(var(--primary)); font-variant-numeric: tabular-nums; }
#exam-content {
    flex-grow: 1; overflow-y: auto; padding: 24px;
    max-width: 800px; width: 100%; margin: 0 auto;
}
#exam-question-counter {
    text-align: center; color: hsl(var(--on-surface-variant));
    margin-bottom: 16px; font-weight: 500;
}
#exam-question-text { font-size: 1.4em; line-height: 1.6; margin-bottom: 24px; }
#exam-question-text p, #exam-feedback-explanation p { margin: 0 0 1em 0; }
#exam-question-text strong, #exam-feedback-explanation strong { color: hsl(var(--primary)); }
#exam-question-text code {
    background: hsl(var(--surface-variant)); padding: 0.2em 0.4em;
    border-radius: var(--m3-radius-s); font-family: 'Courier New', Courier, monospace;
}
#exam-question-text sup { font-size: 0.7em; vertical-align: super; }
#exam-options-container { display: flex; flex-direction: column; gap: 12px; }
.exam-option {
    display: block; background: hsl(var(--surface));
    border: 1px solid hsl(var(--outline) / 0.5); padding: 16px;
    border-radius: var(--m3-radius-m); cursor: pointer;
    transition: all 0.2s var(--m3-ease-standard);
}
.exam-option:hover {
    border-color: hsl(var(--primary));
    background: hsl(var(--primary-container) / 0.5);
}
.exam-option.selected {
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 2px hsl(var(--primary));
    background: hsl(var(--primary-container));
}
.exam-option.correct { background: hsl(140, 80%, 90%); border-color: hsl(140, 60%, 40%); }
.exam-option.incorrect { background: hsl(0, 100%, 95%); border-color: hsl(var(--error)); }

#exam-feedback { margin-top: 24px; padding: 16px; border-radius: var(--m3-radius-l); display: none; }
#exam-feedback.correct { background: hsl(140, 80%, 95%); color: hsl(140, 80%, 20%); }
#exam-feedback.incorrect { background: hsl(0, 100%, 97%); color: hsl(0, 80%, 30%); }
#exam-feedback-result { font-size: 1.2em; font-weight: 700; margin: 0 0 8px 0; }
#exam-feedback-explanation { line-height: 1.5; }

#exam-footer {
    padding: 16px; border-top: 1px solid hsl(var(--outline) / 0.3);
    background-color: hsl(var(--surface)); display: flex;
    justify-content: flex-end; gap: 8px;
}

/* Subject Grouping (reused for playlists/exams) */
.subject-group {
    margin-bottom: 16px; border: 1px solid hsl(var(--outline) / 0.3);
    border-radius: var(--m3-radius-l); overflow: hidden;
}
.subject-group-summary {
    font-size: 1.2em; font-weight: 700; padding: 16px;
    cursor: pointer; background-color: hsl(var(--surface-variant));
    display: flex; justify-content: space-between; align-items: center;
}
.subject-group-summary .material-symbols-outlined { transition: transform 0.2s; }
.subject-group[open] > .subject-group-summary .material-symbols-outlined { transform: rotate(180deg); }
.subject-group-content { padding: 16px; display: flex; flex-direction: column; gap: 12px;}


/* Report Widgets */
.report-widget {
    background-color: hsl(var(--surface-container-high));
    border-radius: var(--m3-radius-l);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--m3-elevation-1);
    border: 1px solid hsl(var(--outline) / 0.2);
}
.timetable-now-next {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.timetable-card {
    flex: 1;
    min-width: 200px;
    background: hsl(var(--surface));
    border-radius: var(--m3-radius-m);
    padding: 16px;
    border-left: 5px solid hsl(var(--primary));
}
.timetable-card.next {
    border-left-color: hsl(var(--secondary));
    opacity: 0.8;
}
.timetable-time {
    font-size: 0.9em;
    color: hsl(var(--on-surface-variant));
    margin-bottom: 4px;
}
.timetable-subject {
    font-size: 1.4em;
    font-weight: 700;
    color: hsl(var(--on-surface));
}

/* Canvas Graph */
#study-graph-container {
    width: 100%;
    height: 250px;
    position: relative;
}
canvas#study-graph {
    width: 100%;
    height: 100%;
}

/* Progress Bars */
.subject-progress-item {
    margin-bottom: 16px;
}
.progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-weight: 500;
}
.progress-track {
    width: 100%;
    height: 12px;
    background-color: hsl(var(--surface-variant));
    border-radius: 6px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background-color: hsl(var(--primary));
    border-radius: 6px;
    transition: width 1s ease-in-out;
}

/* Desktop Styles */
@media (min-width: 768px) {
    #app-container { flex-direction: row; }
    #left-nav-pane {
        display: flex; flex-direction: column; width: 280px; height: 100vh;
        background-color: hsl(var(--surface)); border-right: 1px solid hsl(var(--outline) / 0.3);
        padding: 16px; flex-shrink: 0;
    }
    .left-nav-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
    .left-nav-header .app-name { font-size: 1.8em; }
    .side-nav { display: flex; flex-direction: column; gap: 8px; }
    .side-nav .nav-button {
        flex-direction: row; justify-content: flex-start; gap: 16px;
        padding: 12px 16px; font-size: 1em;
    }
    .side-nav .nav-button .material-symbols-outlined { padding: 0; margin: 0; background-color: transparent !important; }
    .side-nav .nav-button.active { background-color: hsl(var(--primary-container)); }
    main#main-content {flex-grow: 1;height: 100vh;overflow: auto;}
    .home-header { display: none; }
    .bottom-nav { display: none; }
    .profile-btn { background: none; border: none; cursor: pointer; padding: 8px; border-radius: var(--m3-radius-full); }
    .profile-btn .material-symbols-outlined { font-size: 28px; color: hsl(var(--on-surface-variant)); display: block; }
    #focus-mini-player { left: 296px; bottom: 16px; } /* Adjust mini players for desktop view */
}

@media (max-width: 767px) {
    #left-nav-pane { display: none; }
}
/* --- Store Page Styles --- */

#store-view {
    width: 100%;
}

/* Collapsible Category Styling */
.store-category {
    width: 100%;
    background-color: hsl(var(--surface-variant) / 0.3);
    border-radius: 16px;
    margin-bottom: 16px;
    border: 1px solid hsl(var(--outline) / 0.2);
    overflow: hidden; /* Ensures border-radius is respected */
    transition: all 0.2s ease-in-out;
}

.store-category[open] {
    background-color: hsl(var(--surface-variant) / 0.5);
}

.store-category-header {
    padding: 20px;
    cursor: pointer;
    list-style: none; /* Removes default dropdown arrow */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}

/* Removes the default marker in Safari/Chrome */
.store-category-header::-webkit-details-marker {
    display: none;
}

.store-category-header:hover {
    background-color: hsl(var(--surface-variant) / 0.6);
}

.store-category-header h3 {
    margin: 0;
    color: hsl(var(--on-surface));
    font-size: 1.2em;
}

/* Custom Arrow using Material Symbols */
.store-category-header::after {
    content: '\e5c5'; /* Material Symbols 'expand_more' icon */
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 28px;
    line-height: 1;
    color: hsl(var(--on-surface-variant));
    transition: transform 0.25s ease-in-out;
    transform-origin: center;
}

.store-category[open] > .store-category-header::after {
    transform: rotate(180deg);
}

/* Content inside the collapsible section */
.store-category-content {
    padding: 0 20px 20px 20px;
    border-top: 1px solid hsl(var(--outline) / 0.2);
}

/* Style tweaks for the item cards within the store */
.store-category-content .styled-card {
    background-color: hsl(var(--surface));
    border: 1px solid hsl(var(--outline) / 0.1);
}

.store-category-content .styled-card h4 {
    margin-top: 0;
    margin-bottom: 4px;
    font-size: 1.1em;
}

.store-category-content .styled-card p {
    font-size: 1em;
    margin-bottom: 16px;
}

/* --- Shade Pickup Section --- */

#shade-pickup-section h2 {
    font-size: 1.5em;
    margin-bottom: 16px;
    padding-left: 16px; /* Align with app padding */
}

/* Card for "Today's Progress" */
.activity-progress-card {
    background-color: hsl(var(--surface-container-high));
    border: 1px solid hsl(var(--outline) / 0.2);
    flex-shrink: 0; /* Prevent shrinking in the flex carousel */
    width: 320px;
    padding-bottom: 16px; /* Add padding to the bottom */
}

.activity-progress-card .video-card-info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-progress-card .video-card-title {
    margin: 0;
    font-size: 1.1em;
    font-weight: 700;
}

.progress-container {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Space between each progress bar group */
    width: 100%;
}

.progress-group {
    width: 100%;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85em;
    margin-bottom: 6px;
    color: hsl(var(--on-surface-variant));
}

.progress-label span:first-child {
    font-weight: 500;
    color: hsl(var(--on-surface));
}

.progress-track {
    width: 100%;
    height: 8px;
    background-color: hsl(var(--surface-variant));
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: hsl(var(--primary));
    border-radius: 4px;
    transition: width 0.5s ease-in-out;
}

.activity-progress-message {
    font-size: 0.9em;
    text-align: center;
    color: hsl(var(--on-surface-variant));
    margin: 8px 0 0 0;
}


/* Card for individual pickup items (flashcards, exams, playlists) */
.pickup-item-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background-color: hsl(var(--surface-container-high));
    border: 1px solid hsl(var(--outline) / 0.2);
    width: 320px; /* Match other cards */
    flex-shrink: 0;
}

/* Style for playlist thumbnails */
.pickup-item-card img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 12px;
    flex-shrink: 0;
}

/* Style for icon containers (flashcards, exams) */
.pickup-item-card .pickup-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: hsl(var(--primary-container));
}

.pickup-item-card .pickup-card-icon .material-symbols-outlined {
    font-size: 32px;
    color: hsl(var(--on-primary-container));
}

.pickup-item-card .video-card-info {
    padding: 0; /* Remove padding since the parent card has it */
    flex-grow: 1; /* Allow text to take remaining space */
    min-width: 0; /* Fix for flexbox overflow issues */
}

.pickup-item-card .video-card-title {
    font-size: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.pickup-item-card .video-card-channel {
    margin: 4px 0 0 0;
    font-size: 0.9em;
}

/* --- Video Page: Inline Flashcard Creator --- */

/* The main container for the entire feature */
#inline-flashcard-creator {
    margin-top: 24px;
    padding: 16px;
    border: 1px solid hsl(var(--outline) / 0.2);
    border-radius: 16px;
    background-color: hsl(var(--surface-container));
    display: flex;
    /* margin-bottom: 1%; */
    flex-direction: column;
    gap: 12px; /* Provides consistent spacing between elements */
}

#inline-flashcard-creator h4 {
    margin: 0;
    font-size: 1.2em;
    color: hsl(var(--on-surface));
    border-bottom: 1px solid hsl(var(--outline) / 0.1);
    padding-bottom: 8px;
}

/* The scrollable list where newly added cards appear */
#inline-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 150px; /* Limits the height to prevent the page from getting too long */
    overflow-y: auto; /* Adds a scrollbar if the content exceeds the max-height */
    padding: 8px;
    background-color: hsl(var(--surface));
    border-radius: 12px;
    border: 1px solid hsl(var(--outline) / 0.1);
}

/* Styling for each individual card preview in the list */
.mini-card-preview {
    padding: 8px 12px;
    background-color: hsl(var(--surface-container-high));
    border-radius: 8px;
    font-size: 0.9em;
    color: hsl(var(--on-surface-variant));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Ensures long text doesn't break the layout */
}

/* The form containing the inputs and 'Add Card' button */
#inline-flashcard-form {
    display: flex;
    flex-direction: column; /* Stack inputs vertically for mobile */
    gap: 10px;
}

/* A reusable input style to match other inputs in your app */
.styled-input {
    width: 100%;
    padding: 12px;
    border: 1px solid hsl(var(--outline));
    background-color: hsl(var(--surface));
    border-radius: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1em;
    color: hsl(var(--on-surface));
    box-sizing: border-box; /* Ensures padding doesn't affect the width */
}

.styled-input::placeholder {
    color: hsl(var(--on-surface-variant) / 0.7);
}

.styled-input:focus {
    outline: none;
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
}

/* Align the small 'Add Card' button to the right */
#inline-flashcard-form button {
    align-self: flex-end; 
    padding: 8px 16px;
}

/* The main 'Save Set' button at the bottom */
#save-video-flashcards-btn {
    width: 100%;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#save-video-flashcards-btn .material-symbols-outlined {
    font-size: 1.2em;
}