/* =========================================================
   AL-TAFSIR USER BASE — FRONTEND06
   Locked DNA: dark, warm, scholarly, spacious, premium.
   Charcoal surfaces, muted antique gold accent.
   Theme contract: al_tafsir_theme (light default),
   data-theme di <html>, sama dengan workspace.
   ========================================================= */


/* =========================================================
   1. RESET + INITIAL PAINT
   ========================================================= */

* {
    box-sizing:
        border-box;
}


html,
body {

    margin:
        0;

    padding:
        0;

    width:
        100%;

    min-height:
        100%;

    overflow-x:
        hidden;

    background:
        #F7F1DE;

    color:
        #3B241C;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    transition:
        opacity .4s ease;
}


html[data-theme="dark"] body {

    background:
        #191512;

    color:
        #F2EAD7;
}


body.page-transition {

    opacity:
        0;
}


/* =========================================================
   2. PAGE TOKENS
   Didefinisikan di scope html agar semua halaman user
   (dengan/tanpa wrapper .user-page) selalu resolve.
   ========================================================= */

html {

    /* IDENTITY PALETTE (locked PO): light = warm manuscript /
       parchment. Pale gold #FFF1A6 + warm ink #6B352A sebagai
       identitas; accent memakai turunan tinta hangat #6B352A
       (8.6:1 di atas kertas), star memakai turunan emas #C9A83B
       (focus ring, kontras >= old #D4AF37). Token saja — tanpa
       hardcode warna baru di elemen. */

    --bg:
        #F7F1DE;

    --panel:
        #FDFAF0;

    --panel-soft:
        #F0E8D3;

    --border:
        #DFD5BE;

    --border-soft:
        rgba(59, 36, 28, .08);

    --text:
        #3B241C;

    --muted:
        #7A5A4C;

    --muted-soft:
        #AB937F;

    --accent:
        #6B352A;

    --accent-dark:
        #52261D;

    --accent-soft:
        #F3E7CB;

    --star:
        #C9A83B;

    /* Konversi tinta wordmark krem -> tinta gelap hangat untuk
       permukaan terang. sepia(1) menjaga nib tetap dalam keluarga
       emas antik (invert saja akan menggeser emas ke biru).
       Geometri artwork tidak diubah. */

    --brand-ink-filter:
        invert(.86)
        sepia(1)
        saturate(1.6)
        hue-rotate(-8deg)
        brightness(.66);
}


html[data-theme="dark"] {

    /* IDENTITY PALETTE: dark = warm charcoal / lamplight.
       Charcoal hangat + emas pale-gold (identitas #FFF1A6 →
       #E3C64F untuk teks/glyph 10.8:1) + tinta #6B352A sebagai
       warm ink. Bukan abu dingin. */

    --bg:
        #191512;

    --panel:
        #221C17;

    --panel-soft:
        #2B241D;

    --border:
        #3C332A;

    --border-soft:
        rgba(242, 234, 215, .07);

    --text:
        #F2EAD7;

    --muted:
        #B3A68F;

    --muted-soft:
        #847A68;

    --accent:
        #C9A83B;

    --accent-dark:
        #B8962F;

    --accent-soft:
        rgba(227, 198, 79, .08);

    --star:
        #E3C64F;
}


.user-page {

    min-height:
        100vh;

    width:
        100%;

    background:
        var(--bg);

    color:
        var(--text);

    padding:
        0;
}


/* =========================================================
   3. HEADER
   ========================================================= */

.chat-header {

    width:
        100%;

    max-width:
        900px;

    height:
        72px;

    margin:
        auto;

    padding:
        0 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    font-size:
        22px;

    font-weight:
        700;
}


.brand-text {

    font-size:
        22px;

    font-weight:
        700;
}


.nav-menu button,

.nav-menu .nav-link {

    background:
        none;

    border:
        none;

    color:
        var(--muted);

    font-family:
        inherit;

    font-size:
        14px;

    text-decoration:
        none;

    cursor:
        pointer;
}



.nav-menu button:hover,

.nav-menu .nav-link:hover {

    color:
        var(--text);
}


/* =========================================================
   4. MAIN CHAT
   ========================================================= */

.chat-container {

    width:
        720px;

    max-width:
        calc(100% - 32px);

    margin:
        60px auto 120px;
}


.chat-intro {

    max-width:
        600px;

    margin:
        0 auto 45px;

    text-align:
        center;
}


.chat-intro h1 {

    font-size:
        52px;

    margin:
        20px 0 15px;

    letter-spacing:
        -1.5px;
}


.chat-intro p {

    color:
        var(--muted);

    font-size:
        18px;

    line-height:
        1.8;
}


/* =========================================================
   5. COMPOSER
   ========================================================= */

.main-input {

    width:
        100%;

    min-height:
        72px;

    display:
        flex;

    align-items:
        center;

    padding:
        8px 12px 8px 24px;

    border-radius:
        18px;

    background:
        var(--panel);

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

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.main-input:hover {

    border-color:
        var(--accent-dark);
}


.main-input:focus-within {

    border-color:
        var(--accent);

    box-shadow:
        0 0 0 3px var(--accent-soft);
}


.main-input input {

    flex:
        1;

    height:
        100%;

    background:
        none;

    border:
        none;

    outline:
        none;

    color:
        var(--text);

    font-size:
        16px;
}


.main-input input::placeholder {

    color:
        var(--muted-soft);
}


.send-button {

    appearance:
        none;

    -webkit-appearance:
        none;

    width:
        48px;

    height:
        48px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    margin:
        0;

    border:
        none;

    border-radius:
        50%;

    background:
        transparent;

    outline:
        none;

    color:
        var(--accent);

    font-size:
        24px;

    cursor:
        pointer;

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


.send-button:hover {

    background:
        var(--accent-soft);

    transform:
        translateX(2px);
}


/* Keyboard focus — pola workspace:
   outline emas, tidak menghilangkan indikator. */

button:focus-visible,

.nav-menu .nav-link:focus-visible {

    outline:
        2px solid var(--star);

    outline-offset:
        2px;
}


/* =========================================================
   6. EXAMPLE PROMPTS
   ========================================================= */

.example-area {

    margin-top:
        45px;

    text-align:
        center;
}


.example-area h3 {

    color:
        var(--muted-soft);

    font-size:
        14px;

    font-weight:
        500;

    margin-bottom:
        18px;
}


.example-list {

    display:
        flex;

    justify-content:
        center;

    gap:
        12px;

    flex-wrap:
        wrap;
}


.example-card {

    appearance:
        none;

    -webkit-appearance:
        none;

    font:
        inherit;

    padding:
        14px 20px;

    border-radius:
        10px;

    background:
        var(--panel);

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

    color:
        var(--muted);

    cursor:
        pointer;

    transition:
        border-color .2s ease,
        color .2s ease;
}


.example-card:hover {

    border-color:
        var(--accent);

    color:
        var(--text);
}


/* =========================================================
   7. BRAND — PNG PRODUCTION ASSETS (W3)
   Logo utama = wordmark-primary.png (krem, otentik di tema
   gelap). Pada tema terang tinta digelapkan via filter —
   geometri artwork tidak diubah. Icon qalam-icon.png hanya
   untuk slot icon (navbar chat).
   ========================================================= */

.brand-text {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;
}


.brand-text .brand-qalam-icon {

    height:
        20px;

    width:
        auto;

    display:
        block;
}


.brand-text .brand-wordmark {

    height:
        16px;

    width:
        auto;

    display:
        block;

    filter:
        var(--brand-ink-filter);
}


html[data-theme="dark"] .brand-text .brand-wordmark {

    filter:
        none;
}


/* judul intro chat */

.chat-intro h1 .intro-wordmark {

    height:
        44px;

    width:
        auto;

    display:
        block;

    margin:
        0 auto;

    filter:
        var(--brand-ink-filter);
}


html[data-theme="dark"] .chat-intro h1 .intro-wordmark {

    filter:
        none;
}


/* =========================================================
   8. LOGIN PAGE (AUTH-02G)
   ========================================================= */

.login-page {

    min-height:
        100vh;

    background:
        var(--bg);

    color:
        var(--text);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;
}


.login-card {

    width:
        100%;

    max-width:
        380px;

    text-align:
        center;

    padding:
        40px 28px;

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

    border-radius:
        10px;

    background:
        var(--panel);
}


/* wordmark PNG pada kartu login; tinta adaptif tema */

.login-brand {

    margin:
        0 0 14px;
}


/* D3: halaman publik invitation/access-request closed-beta.
   Reuse login-card; hanya tambahan tombol respons + lebar. */

.beta-invitation-card {

    max-width:
        440px;

    text-align:
        left;
}


.beta-invitation-note {

    font-size:
        14px;

    color:
        var(--muted);
}


.beta-response-form {

    margin-top:
        10px;
}


.beta-accept-btn,

.beta-decline-btn {

    width:
        100%;

    padding:
        11px 16px;

    border-radius:
        999px;

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

    cursor:
        pointer;

    font-size:
        14px;
}


.beta-accept-btn {

    background:
        var(--accent);

    color:
        var(--accent-soft);
}


.beta-decline-btn {

    background:
        transparent;

    color:
        var(--text);
}


/* CATATAN (fix produksi /login):
   Sebelumnya rule di atas ditutup "}}" (kurung ganda) — parser CSS
   membuang rule .login-brand .login-wordmark berikutnya (height 34px
   dsb.), sehingga wordmark login dirender ukuran natural 2172px dan
   mendorong Google Sign-In keluar viewport awal. Kurung ganda sudah
   diperbaiki; styling lain tidak berubah. */


.login-brand .login-wordmark {

    height:
        34px;

    width:
        auto;

    display:
        block;

    margin:
        0 auto;

    filter:
        var(--brand-ink-filter);
}


html[data-theme="dark"] .login-brand .login-wordmark {

    filter:
        none;
}





.login-tagline {

    margin:
        8px 0 32px;

    color:
        var(--muted);

    font-size:
        14px;
}


.login-gsi {

    display:
        flex;

    justify-content:
        center;

    min-height:
        44px;

    margin-bottom:
        16px;
}


.login-error {

    color:
        #b4552e;

    font-size:
        13px;

    margin:
        12px 0 0;
}


/* Status "Memproses masuk…" (Phase A — feedback login seketika).
   Restrained: spinner garis tipis, palet muted, tanpa ornament.
   Muncul sebagai satu baris di bawah tombol GSI (yang meredup);
   kartu bertambah ±44px — masih jauh dalam viewport awal. */

.login-pending {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        44px;

    margin:
        0;

    color:
        var(--muted);

    font-size:
        14px;
}


/* Elemen ber-display:flex meng-override semantik [hidden] default UA
   — sembunyikan secara eksplisit (status default: tersembunyi). */

.login-pending[hidden] {

    display:
        none;
}


.login-pending-spinner {

    width:
        16px;

    height:
        16px;

    flex:
        0 0 auto;

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

    border-top-color:
        var(--accent);

    border-radius:
        50%;

    animation:
        login-pending-spin 0.9s linear infinite;
}


@keyframes login-pending-spin {

    to {

        transform:
            rotate(360deg);
    }
}


/* Reduced motion: tanpa rotasi — status teks tetap cukup. */

@media (prefers-reduced-motion: reduce) {

    .login-pending-spinner {

        animation:
            none;
    }
}


.login-note {

    color:
        var(--muted-soft);

    font-size:
        12px;

    margin-top:
        28px;
}


/* =========================================================
   9. RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

    .chat-header {

        padding:
            0 16px;
    }

    .chat-container {

        margin-top:
            40px;
    }

    .chat-intro h1 {

        font-size:
            40px;
    }

    .chat-intro p {

        font-size:
            16px;
    }

    .main-input {

        padding:
            8px 10px 8px 18px;
    }
}


@media (max-width: 420px) {

    .chat-intro h1 {

        font-size:
            34px;
    }

    .main-input {

        min-height:
            64px;
    }

    .send-button {

        width:
            42px;

        height:
            42px;

        font-size:
            21px;
    }

    .example-list {

        gap:
            10px;
    }

    .example-card {

        padding:
            12px 16px;

        font-size:
            14px;
    }
}