/* ========================================
   BASE STYLES - Variables, Reset, Typography
   Load this first in all pages
   ======================================== */

/* ========== FONTS ========== */
@font-face {
    font-family: Gilroy;
    src: url('/static/fonts/gilroy/Gilroy-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Gilroy;
    src: url('/static/fonts/gilroy/Gilroy-RegularItalic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: Gilroy;
    src: url('/static/fonts/gilroy/Gilroy-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Gilroy;
    src: url('/static/fonts/gilroy/Gilroy-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: Gilroy;
    src: url('/static/fonts/gilroy/Gilroy-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Gilroy;
    src: url('/static/fonts/gilroy/Gilroy-SemiboldItalic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: Gilroy;
    src: url('/static/fonts/gilroy/Gilroy-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Gilroy;
    src: url('/static/fonts/gilroy/Gilroy-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ========== RESET ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Form controls don't inherit the page font from <body> — force them to. */
button,
input,
select,
textarea {
    font-family: inherit;
}

/* ========== CSS VARIABLES ========== */
:root {
    /* Background Colors (Dark - warm browns) */
    --bg-primary: #1A1714;
    --bg-secondary: #1F1C18;
    --bg-tertiary: #282420;
    --bg-hover: #332E28;

    /* Text Colors (Dark) */
    --text-primary: #E8E2D6;
    --text-secondary: #B8AFA0;
    --text-tertiary: #7D756A;

    /* Accent Colors */
    --accent: #332E28;
    --accent-hover: #3D372F;
    --accent-primary: #D4725E;
    --accent-secondary: #D4725E;
    --accent-warning: #DAA520;
    --accent-warning-bg: rgb(218 165 32 / 8%);
    --accent-warning-border: rgb(218 165 32 / 25%);
    --accent-danger: #D94A4A;
    --text-on-accent: #FFF;
    --text-on-accent-dark: #1C1C1C;
    --chat-user-link: color-mix(in srgb, var(--text-primary) 96%, transparent);
    --chat-user-link-underline: color-mix(in srgb, var(--text-primary) 70%, transparent);
    --chat-user-link-hover: var(--text-primary);

    /* Status Colors */
    --green: #10b981;
    --orange: #f59e0b;
    --blue: #3b82f6;
    --gray: #6b7280;
    --red: #ef4444;
    --success: #6ee7b7;
    --danger: #fca5a5;
    --danger-hover: #c82333;
    --file-icon-pdf: #dc3545;
    --file-icon-doc: #06c;
    --warning-gradient: linear-gradient(90deg, #d97706 0%, #fbbf24 50%, #d97706 100%);
    --image-placeholder-bg: #222;

    /* Material level tags */
    --level-beginner: #8b5cf6;
    --level-elementary: #d94a4a;
    --level-pre-intermediate: #4580ff;
    --level-intermediate: #59b165;
    --level-upper-intermediate: #ff8c00;
    --level-advanced: #08e6ffb7;
    --level-any: #8d3881;

    /* Calendar color swatches */
    --cal-swatch-blue: #93b5e3;
    --cal-swatch-green: #86ceac;
    --cal-swatch-pink: #e0a0c0;

    /* Border & Shadow */
    --border-color: #332E28;
    --shadow-color: rgb(0 0 0 / 30%);

    /* Fonts */
    --font-sans: 'Gilroy', 'Helvetica Neue', -apple-system, blinkmacsystemfont, sans-serif;
    --font-serif-display: 'Gilroy', 'Helvetica Neue', -apple-system, sans-serif;
    --font-serif-body: 'Source Serif 4', georgia, serif;

    /* Input & Scrollbar */
    --input-placeholder: #6B6358;
    --scroll-thumb: #3D372F;
    --scroll-hover: #4A4339;

    /* Floating UI */
    --input-bar-bg: #1F1C18F2;
    --input-shadow: 0 4px 24px #00000025, 0 1px 4px #00000020;
    --input-focus-shadow: 0 0 0 4px #D4725E12, 0 4px 24px #00000030;
    --send-idle-bg: #282420;

    /* Calendar drag & preview */
    --cal-drag-bg: rgb(212 114 94 / 18%);
    --cal-drag-border: #D4725E;
    --cal-drag-text: #D4725E;

    /* Image collage */
    --collage-more-overlay: rgb(26 23 20 / 60%);
    --cal-drop-placeholder-bg: rgb(212 114 94 / 12%);
    --cal-drop-placeholder-border: #D4725E;
    --cal-preview-shadow: 0 8px 24px rgb(0 0 0 / 28%);
    --cal-clone-shadow: 0 6px 20px rgb(0 0 0 / 35%);
    --cal-confirm-shadow: 0 4px 16px rgb(0 0 0 / 28%);

    /* Grain */
    --grain-opacity: 0.018;

    /* Login illustration (cut-paper landscape) */
    --paper-teal: hsl(180deg 20% 36%);
    --paper-sage: hsl(110deg 16% 38%);
    --paper-sand: hsl(30deg 22% 34%);
    --paper-drop: rgb(0 0 0 / 50%);

    /* Easing */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-snappy: cubic-bezier(0.4, 0, 0.2, 1);

    /* Redesign motion: calm, quick, no bounce. */
    --dur-fast: 120ms;   /* hover, press, closing */
    --dur-base: 180ms;   /* fades, scrims */
    --dur-slow: 240ms;   /* things that enter or move */
    --ease-calm: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ========== LIGHT THEME ========== */
[data-theme="light"] {
    --bg-primary: #F7F4ED;
    --bg-secondary: #FFFDF8;
    --bg-tertiary: #F2EEE5;
    --bg-hover: #EDE9DF;
    --text-primary: #1B2838;
    --text-secondary: #3A4D5E;
    --text-tertiary: #6B7D8D;
    --accent: #E8E2D6;
    --accent-hover: #DDD7CB;
    --accent-primary: #C8553D;
    --accent-secondary: #C8553D;
    --text-on-accent: #FFF;
    --chat-user-link: color-mix(in srgb, var(--text-primary) 96%, transparent);
    --chat-user-link-underline: color-mix(in srgb, var(--text-primary) 70%, transparent);
    --chat-user-link-hover: var(--text-primary);
    --border-color: #E8E2D6;
    --shadow-color: rgb(0 0 0 / 8%);
    --input-placeholder: #A09882;
    --scroll-thumb: #D5CFBF;
    --scroll-hover: #C0BAA8;
    --collage-more-overlay: rgb(247 244 237 / 70%);
    --input-bar-bg: #FFFDF8F2;
    --input-shadow: 0 4px 24px #1B283808, 0 1px 4px #1B283806;
    --input-focus-shadow: 0 0 0 4px #C8553D08, 0 4px 24px #1B283810;
    --send-idle-bg: #F2EEE5;
    --grain-opacity: 0.012;
    --paper-teal: hsl(180deg 28% 62%);
    --paper-sage: hsl(110deg 22% 58%);
    --paper-sand: hsl(30deg 45% 80%);
    --paper-drop: rgb(60 35 20 / 22%);

    /* Calendar drag & preview */
    --cal-drag-bg: rgb(200 85 61 / 14%);
    --cal-drag-border: #C8553D;
    --cal-drag-text: #C8553D;
    --cal-drop-placeholder-bg: rgb(200 85 61 / 10%);
    --cal-drop-placeholder-border: #C8553D;
    --cal-preview-shadow: 0 8px 24px rgb(0 0 0 / 10%);
    --cal-clone-shadow: 0 6px 20px rgb(0 0 0 / 14%);
    --cal-confirm-shadow: 0 4px 16px rgb(0 0 0 / 10%);
}

/* ========== BODY ========== */
body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
    transition: background 0.4s ease, color 0.4s ease;
}

/* ========== GRAIN OVERLAY ========== */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar {
    width: 7px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scroll-hover);
}

/* ========== LAYOUT CONTAINERS ========== */
.container,
.chat-container {
    display: flex;
    height: calc(100vh - var(--app-header-h, 0px));
}

/* ========== PAGE LOAD ANIMATIONS ========== */
@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.main-chat-area { animation: fade-up 0.4s var(--ease-out-expo) 0.05s both; }

/* ========== UTILITY CLASSES ========== */
.spacer {
    flex: 1;
}

/* ========== GLOBAL INTERACTIVE STYLES ==========
   Hover is each button's own tint (no global fade); press shrinks slightly. */
button:active {
    transform: scale(0.98);
}

input::placeholder {
    color: var(--input-placeholder) !important;
    font-style: italic;
}

/* ============ Account Menu ============ */
.account-menu-wrap {
    position: relative;
    display: inline-block;
}

.account-menu-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 220px;
    padding: 7px 10px;
    border-radius: 12px;
    background: var(--bg-primary);
    border: 0 solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.account-menu-btn:hover {
    opacity: 1 !important;
    background: var(--bg-hover);
}

.account-menu-btn-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--bg-hover), var(--border-color));
    border: 1.5px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif-display);
    font-size: 14px;
    font-style: italic;
    color: var(--text-primary);
    flex-shrink: 0;
    overflow: hidden;
}

.account-menu-btn-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Account tab head: name-editing column on the left, avatar floated right. */
.profile-account-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 2px;
}

.profile-account-head-main {
    flex: 1;
    min-width: 0;
}

/* Profile-modal avatar control — the circle is the click target (opens the
   file picker); hovering reveals an overlay tint and, when an avatar exists,
   an × badge to remove it. */
.profile-avatar-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.profile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--bg-hover), var(--border-color));
    border: 1.5px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif-display);
    font-size: 21px;
    font-style: italic;
    color: var(--text-primary);
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    position: relative;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.profile-avatar-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--text-primary);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.profile-avatar:hover .profile-avatar-overlay {
    opacity: 0.12;
}

.profile-avatar-remove {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.profile-avatar-remove:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.profile-avatar-wrap:hover .profile-avatar-remove {
    opacity: 1;
}

.account-menu-theme {
    display: flex;
    gap: 2px;
    margin: 2px 4px 0;
    padding: 3px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.account-menu-theme-opt {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.12s ease;
}

.account-menu-theme-opt:not(.active):hover {
    color: var(--text-tertiary);
}

.account-menu-theme-opt.active {
    background: color-mix(in srgb, var(--bg-hover) 82%, var(--text-primary));
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
}

/* ========== TOOLTIPS ========== */

/* Replaces the native `title` popup. One reused node, positioned by
   components/tooltip.js; --tip-arrow is the arrow's offset from the left edge. */
.tooltip {
    position: fixed;
    z-index: 1200;
    max-width: 260px;
    padding: 7px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 22%), 0 1px 4px rgb(0 0 0 / 10%);
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.15s var(--ease-snappy), transform 0.15s var(--ease-snappy);
}

.tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Arrow: a rotated square, half-covered by the body so only the tip shows. */
.tooltip::after {
    content: '';
    position: absolute;
    left: var(--tip-arrow, 50%);
    width: 7px;
    height: 7px;
    margin-left: -4px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    transform: rotate(45deg);
}

.tooltip:not(.below)::after {
    bottom: -4.5px;
}

/* Flipped below the trigger: the arrow moves to the top and points up. */
.tooltip.below::after {
    top: -4.5px;
    border-right: none;
    border-bottom: none;
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
}

/* Reduced motion: snap instead of animating. 1ms (not none) keeps
   animationend/transitionend firing for code that waits on them.
   Progress indicators keep moving so a wait never looks like a hang. */
@media (prefers-reduced-motion: reduce) {
    *:not(.loading-dots span, .processing-text, .lesson-chip-skeleton, .file-pending .file-icon),
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}