@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&display=swap');

/* ═══════════════════════════════════════════════════════════
   SCHOOLCHAT v6 — True iOS 18 Liquid Glass Design System
   Specular highlights · Depth layers · Chromatic blur
   Full auto + manual dark mode
════════════════════════════════════════════════════════════ */

:root {
    /* ── iOS 18 System Colors ── */
    --blue:      #007AFF;
    --blue-deep: #0056CC;
    --green:     #34C759;
    --red:       #FF3B30;
    --orange:    #FF9500;
    --purple:    #AF52DE;
    --indigo:    #5856D6;
    --teal:      #30B0C7;
    --yellow:    #FFCC00;
    --pink:      #FF2D55;
    --gold:      #FFD700;

    /* ── Rank Colors ── */
    --rank-newcomer: #8E8E93;
    --rank-member:   #34C759;
    --rank-rising:   #007AFF;
    --rank-active:   #FF9500;
    --rank-pro:      #AF52DE;
    --rank-legend:   #FFD700;

    /* ── Light Mode Backgrounds ── */
    --bg:         #F2F2F7;
    --bg2:        #FFFFFF;
    --bg3:        #F2F2F7;
    --bg-chat:    #E5DDD5;

    /* ── Liquid Glass (Light) ──
       True specular glass: light refracts, shows highlights
    ── */
    --glass:           rgba(255,255,255,0.65);
    --glass2:          rgba(255,255,255,0.82);
    --glass3:          rgba(255,255,255,0.45);
    --glass-border:    rgba(255,255,255,0.75);
    --glass-border2:   rgba(255,255,255,0.45);
    --glass-inset:     inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(0,0,0,0.03);
    --glass-shadow:    0 8px 40px rgba(0,0,0,0.09), 0 2px 8px rgba(0,0,0,0.06);
    --glass-shadow2:   0 20px 60px rgba(0,0,0,0.12);
    --glass-blur:      blur(28px) saturate(200%) brightness(105%);
    --glass-blur2:     blur(16px) saturate(180%);

    /* ── Specular Highlight (the KEY to real liquid glass) ── */
    --specular: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 50%);

    /* ── Text (Light) ── */
    --t1: rgba(0,0,0,0.95);
    --t2: rgba(0,0,0,0.65);
    --t3: rgba(0,0,0,0.38);
    --t4: rgba(0,0,0,0.18);

    /* ── Separators ── */
    --sep:  rgba(60,60,67,0.1);
    --sep2: rgba(60,60,67,0.2);

    /* ── Bubbles ── */
    --bubble-out:    linear-gradient(155deg, #1B84FF 0%, #0A6AE6 40%, #4F46E5 100%);
    --bubble-in:     rgba(255,255,255,0.88);
    --bubble-in-border: rgba(0,0,0,0.05);
    --bubble-out-tail: #0A58CF;
    --bubble-in-tail:  rgba(255,255,255,0.88);

    /* ── Input ── */
    --input-bg: rgba(120,120,128,0.09);

    /* ── Gradients ── */
    --grad-page: linear-gradient(160deg,#E8F1FE 0%,#EEF0FA 40%,#F2F2F7 100%);
    --grad-blue: linear-gradient(135deg,#007AFF,#5856D6);
    --grad-green: linear-gradient(135deg,#34C759,#30D158);
    --grad-orange: linear-gradient(135deg,#FF9500,#FF6B35);
    --grad-purple: linear-gradient(135deg,#AF52DE,#5856D6);
    --grad-gold:   linear-gradient(135deg,#FFD700,#FF9500);

    /* ── Radius ── */
    --r1: 6px;  --r2: 10px; --r3: 14px;
    --r4: 18px; --r5: 24px; --r6: 999px;

    /* ── Timing ── */
    --spring: cubic-bezier(0.34,1.56,0.64,1);
    --ease:   cubic-bezier(0.4,0,0.2,1);
    --snap:   cubic-bezier(0.175,0.885,0.32,1.1);
    --t-fast: 0.15s; --t-med: 0.26s; --t-slow: 0.40s;

    /* ── Tab bar ── */
    --tab-h: 84px;
}

/* ══ DARK MODE ═══════════════════════════════════════ */
body.dark, [data-theme="dark"] {
    --bg:        #000000;
    --bg2:       #1C1C1E;
    --bg3:       #2C2C2E;
    --bg-chat:   #0A0A0A;

    --glass:          rgba(28,28,30,0.72);
    --glass2:         rgba(44,44,46,0.90);
    --glass3:         rgba(28,28,30,0.48);
    --glass-border:   rgba(255,255,255,0.10);
    --glass-border2:  rgba(255,255,255,0.06);
    --glass-inset:    inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.2);
    --glass-shadow:   0 8px 40px rgba(0,0,0,0.50), 0 2px 8px rgba(0,0,0,0.30);
    --glass-shadow2:  0 20px 60px rgba(0,0,0,0.60);
    --glass-blur:     blur(28px) saturate(160%) brightness(85%);

    --specular: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 50%);

    --t1: rgba(255,255,255,0.95);
    --t2: rgba(255,255,255,0.65);
    --t3: rgba(255,255,255,0.38);
    --t4: rgba(255,255,255,0.15);
    --sep:  rgba(255,255,255,0.08);
    --sep2: rgba(255,255,255,0.14);

    --bubble-in:       rgba(44,44,46,0.92);
    --bubble-in-border: rgba(255,255,255,0.07);
    --bubble-in-tail:  rgba(44,44,46,0.92);

    --input-bg: rgba(255,255,255,0.07);
    --grad-page: linear-gradient(160deg,#0A0E1A 0%,#0D0D12 40%,#000000 100%);
}

/* Auto detect system dark mode */
@media (prefers-color-scheme: dark) {
    body:not(.light):not([data-theme="light"]) {
        --bg: #000000; --bg2: #1C1C1E; --bg3: #2C2C2E; --bg-chat: #0A0A0A;
        --glass: rgba(28,28,30,0.72); --glass2: rgba(44,44,46,0.90);
        --glass3: rgba(28,28,30,0.48); --glass-border: rgba(255,255,255,0.10);
        --glass-border2: rgba(255,255,255,0.06);
        --glass-inset: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.2);
        --glass-shadow: 0 8px 40px rgba(0,0,0,0.50), 0 2px 8px rgba(0,0,0,0.30);
        --glass-blur: blur(28px) saturate(160%) brightness(85%);
        --specular: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 50%);
        --t1: rgba(255,255,255,0.95); --t2: rgba(255,255,255,0.65);
        --t3: rgba(255,255,255,0.38); --t4: rgba(255,255,255,0.15);
        --sep: rgba(255,255,255,0.08); --sep2: rgba(255,255,255,0.14);
        --bubble-in: rgba(44,44,46,0.92); --bubble-in-border: rgba(255,255,255,0.07);
        --bubble-in-tail: rgba(44,44,46,0.92);
        --input-bg: rgba(255,255,255,0.07);
        --grad-page: linear-gradient(160deg,#0A0E1A 0%,#0D0D12 40%,#000000 100%);
    }
}

/* ══ RESET ═══════════════════════════════════════════ */
*, *::before, *::after {
    margin: 0; padding: 0; box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html, body {
    height: 100%; height: 100dvh; overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    background: var(--bg); color: var(--t1);
    transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
::-webkit-scrollbar { width: 0; height: 0; }

/* ══ LIQUID GLASS COMPONENTS ═════════════════════════ */

/* Base glass card */
.glass-card {
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-inset);
    border-radius: var(--r4);
    position: relative;
    overflow: hidden;
}
/* Specular shine layer */
.glass-card::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--specular);
    border-radius: inherit; pointer-events: none; z-index: 0;
}

.glass-card > * { position: relative; z-index: 1; }

.glass-heavy {
    background: var(--glass2);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-inset);
}

/* ══ BOTTOM TAB BAR ══════════════════════════════════ */
#bottom-tabs {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--tab-h);
    padding-bottom: env(safe-area-inset-bottom, 16px);
    padding-top: 8px;
    display: flex; align-items: flex-start;
    background: var(--glass2);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--glass-border);
    z-index: 1000;
}
.tab-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; gap: 4px; cursor: pointer;
    transition: transform var(--t-fast) var(--spring);
    -webkit-user-select: none; user-select: none;
}
.tab-item:active { transform: scale(0.88); }
.tab-icon {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; position: relative;
    transition: transform var(--t-fast) var(--spring);
}
.tab-badge {
    position: absolute; top: -5px; right: -8px;
    background: var(--red); color: white;
    font-size: 10px; font-weight: 700; min-width: 17px; height: 17px;
    border-radius: var(--r6); display: none; align-items: center;
    justify-content: center; padding: 0 4px;
    border: 2px solid var(--bg);
}
.tab-badge.show { display: flex; }
.tab-label { font-size: 10px; font-weight: 600; color: var(--t3); letter-spacing: -0.1px; }
.tab-item.active .tab-icon { transform: scale(1.12); }
.tab-item.active .tab-label { color: var(--blue); font-weight: 700; }

/* ══ RANK BADGE ══════════════════════════════════════ */
.rank-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: var(--r6);
    font-size: 11px; font-weight: 700;
    border: 1px solid var(--glass-border);
    background: var(--glass);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.rank-pill.legend { background: linear-gradient(135deg,rgba(255,215,0,0.2),rgba(255,149,0,0.2)); border-color: rgba(255,215,0,0.4); color: var(--gold); }
.rank-pill.pro     { background: rgba(175,82,222,0.12); border-color: rgba(175,82,222,0.3); color: var(--purple); }
.rank-pill.active  { background: rgba(255,149,0,0.12); border-color: rgba(255,149,0,0.3);  color: var(--orange); }
.rank-pill.rising  { background: rgba(0,122,255,0.10); border-color: rgba(0,122,255,0.25); color: var(--blue); }
.rank-pill.member  { background: rgba(52,199,89,0.10); border-color: rgba(52,199,89,0.25); color: var(--green); }

/* ══ TEACHER BADGE ═══════════════════════════════════ */
.teacher-badge {
    display: inline-flex; align-items: center;
    background: linear-gradient(135deg,#FF9500,#FF6B35);
    color: white; font-size: 9px; font-weight: 800;
    padding: 2px 7px; border-radius: var(--r6); letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(255,149,0,0.35);
}

/* ══ TOAST ════════════════════════════════════════════ */
#toast-wrap {
    position: fixed; top: 12px; right: 12px; left: 12px;
    z-index: 9999; display: flex; flex-direction: column; gap: 8px;
    pointer-events: none; max-width: 380px; margin: 0 auto;
}
.toast {
    background: var(--glass2);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r4); padding: 12px 14px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: var(--glass-shadow2);
    pointer-events: all; cursor: pointer;
    animation: toastIn var(--t-med) var(--spring);
    position: relative; overflow: hidden;
}
.toast::before { content:''; position:absolute; inset:0; background:var(--specular); pointer-events:none; }
@keyframes toastIn { from{transform:scale(0.75) translateY(-8px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
.toast-icon  { font-size: 22px; flex-shrink: 0; }
.toast-title { font-size: 13px; font-weight: 700; color: var(--t1); }
.toast-msg   { font-size: 12px; color: var(--t3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ══ ACHIEVEMENT POPUP ════════════════════════════════ */
.achievement-popup {
    position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
    background: var(--glass2); backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255,215,0,0.4);
    border-radius: var(--r4); padding: 14px 20px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 8px 32px rgba(255,215,0,0.2), var(--glass-shadow);
    z-index: 9998; animation: achIn var(--t-med) var(--spring);
    min-width: 240px;
}
@keyframes achIn { from{transform:translateX(-50%) scale(0.8) translateY(-10px);opacity:0} to{transform:translateX(-50%) scale(1) translateY(0);opacity:1} }
.ach-emoji { font-size: 28px; }
.ach-title { font-size: 12px; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.ach-name  { font-size: 15px; color: var(--t1); font-weight: 700; }

/* ══ RANK UP POPUP ════════════════════════════════════ */
.rankup-popup {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px); z-index: 9998;
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn var(--t-fast) ease;
}
.rankup-card {
    background: var(--glass2); backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255,215,0,0.4);
    border-radius: var(--r5); padding: 36px 28px;
    text-align: center; max-width: 300px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,215,0,0.2);
    animation: rankupIn var(--t-med) var(--spring);
}
@keyframes rankupIn { from{transform:scale(0.7);opacity:0} to{transform:scale(1);opacity:1} }
.rankup-emoji { font-size: 56px; margin-bottom: 10px; display: block; }
.rankup-label { font-size: 12px; color: var(--t3); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.rankup-name  { font-size: 28px; font-weight: 900; margin: 6px 0 12px; letter-spacing: -0.5px; }
.rankup-desc  { font-size: 13px; color: var(--t2); line-height: 1.5; margin-bottom: 20px; }
.rankup-ok    { width: 100%; padding: 12px; border: none; border-radius: var(--r3); background: var(--grad-gold); color: #7A5200; font-size: 15px; font-weight: 800; cursor: pointer; font-family: inherit; }

/* ══ SPINNER ══════════════════════════════════════════ */
.spinner { width: 18px; height: 18px; border: 2px solid var(--sep2); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.65s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ══ IOS TOGGLE ══════════════════════════════════════ */
.ios-toggle {
    width: 50px; height: 30px; border-radius: 15px;
    background: rgba(120,120,128,0.22); border: none; cursor: pointer;
    position: relative; flex-shrink: 0;
    transition: background var(--t-med) var(--ease);
}
.ios-toggle.on { background: var(--green); }
.ios-toggle::after {
    content: ''; position: absolute; width: 26px; height: 26px;
    border-radius: 13px; background: white; top: 2px; left: 2px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    transition: transform var(--t-med) var(--spring);
}
.ios-toggle.on::after { transform: translateX(20px); }

/* ══ SEGMENT CONTROL ═════════════════════════════════ */
.segment {
    display: flex; background: rgba(120,120,128,0.10);
    border-radius: var(--r3); padding: 2px;
}
.seg-btn {
    flex: 1; padding: 7px; border: none; background: none;
    font-family: inherit; font-size: 13px; font-weight: 600;
    color: var(--t3); cursor: pointer;
    border-radius: calc(var(--r3) - 2px);
    transition: all var(--t-fast) var(--ease);
}
.seg-btn.active {
    background: var(--bg2); color: var(--blue);
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

/* ══ IOS SETTINGS ROW ════════════════════════════════ */
.settings-card {
    background: var(--glass);
    backdrop-filter: var(--glass-blur2); -webkit-backdrop-filter: var(--glass-blur2);
    border: 1px solid var(--glass-border2);
    border-radius: var(--r4); overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05), var(--glass-inset);
}
.settings-row {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px; border-bottom: 1px solid var(--sep);
    cursor: pointer; transition: background var(--t-fast);
}
.settings-row:last-child { border-bottom: none; }
.settings-row:active { background: rgba(120,120,128,0.08); }
.settings-icon {
    width: 30px; height: 30px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0; color: white;
}
.settings-label { flex: 1; font-size: 16px; font-weight: 500; color: var(--t1); }
.settings-sub   { font-size: 12px; color: var(--t3); margin-top: 1px; }
.settings-value { font-size: 14px; color: var(--t3); }
.settings-arrow { font-size: 14px; color: var(--t4); }
.settings-row.danger .settings-label { color: var(--red); font-weight: 600; }
.settings-group-label {
    font-size: 12px; font-weight: 600; color: var(--t3);
    text-transform: uppercase; letter-spacing: 0.5px;
    padding: 0 4px; margin-bottom: 6px;
}