/* ==========================================================================
   ROBATY — Luxury Gold Moroccan Theme

   BASELINE
   + LAYER 01 — Presence Indicator
   + LAYER 02 — Portrait Micro-Life
   + LAYER 03 — Message Presence
   + PRESENCE STATES
   + INTERACTION LAYER — Buttons
   + GOLDEN FRAME GLINT
   + API KEY MODAL
   ========================================================================== */


:root {

    --bg-black: #050302;

    --gold-bright: #e5b35c;

    --gold-glow: #ffaa33;

    --gold-dark: #6e4a1b;

    --gold-border:
        rgba(229, 179, 92, 0.45);

    --gold-box-glow:
        rgba(229, 179, 92, 0.25);

    --bubble-bg: #110c08;

    --text-gold-light: #f7e8cf;

    --font-family:
        'Cairo', 'Roboto', sans-serif;

    /* Dynamic UI Themes — قاعدة الخلفية (كتتبدل حسب الوقت) والتوهج
       العاطفي (كيتبدل حسب حالة Robaty)، شوف data-time-theme/data-emotion */
    --app-bg-base-start: #180f08;

    --app-bg-base-end: #030201;

    --accent-glow: rgba(229, 179, 92, 0.15);

    /* خلفية فقاعات Robaty — كتتبع نفس لون قاعدة الخلفية ديال الشاشة
       (كتتبدل مع data-time-theme و data-color-mode بحال --app-bg-base-start) */
    --bubble-bg-theme: rgba(24, 15, 8, 0.95);
}


/* ==========================================================================
   DYNAMIC UI THEMES — الوقت (data-time-theme) والمشاعر (data-emotion)
   مطبقين على <body>، كيبدلو غير المتغيرات فوق، والباقي (transition)
   مضاف على .app-container و.glowing-ring باش يبان التبدل سلس.
   ========================================================================== */

/* الافتراضي (دايما مفعل): تدرج خفيف فنفس عائلة البني/الذهبي —
   نهار فاتح شوية، ليل داكن (بحال الأصل قبل هاد الميزة) */
body[data-time-theme="day"] {
    --app-bg-base-start: #241708;
    --app-bg-base-end: #0b0602;
    --accent-glow: rgba(229, 179, 92, 0.20);
    --bubble-bg-theme: rgba(36, 23, 8, 0.95);
}

body[data-time-theme="night"] {
    --app-bg-base-start: #180f08;
    --app-bg-base-end: #030201;
    --accent-glow: rgba(229, 179, 92, 0.15);
    --bubble-bg-theme: rgba(24, 15, 8, 0.95);
}

/* أجواء ملونة (اختياري، مفعلة غير من الإعدادات عبر data-color-mode="vivid"
   على body) — أزرق فالنهار، بنفسجي فالليل. specificity ديال جوج attributes
   باش تغلب القواعد الافتراضية فوق بلا ما تعتمد على ترتيب السطور. */
body[data-color-mode="vivid"][data-time-theme="day"] {
    --app-bg-base-start: #18222d;
    --app-bg-base-end: #080d12;
    --accent-glow: rgba(64, 156, 255, 0.12);
    --bubble-bg-theme: rgba(24, 34, 45, 0.95);
}

body[data-color-mode="vivid"][data-time-theme="night"] {
    --app-bg-base-start: #170d19;
    --app-bg-base-end: #070409;
    --accent-glow: rgba(180, 100, 255, 0.15);
    --bubble-bg-theme: rgba(23, 13, 25, 0.95);
}

/* أخضر ملكي (emerald) — نهار: #082b25، ليل: نسخة أغمق */
body[data-color-mode="emerald"][data-time-theme="day"] {
    --app-bg-base-start: #082b25;
    --app-bg-base-end: #020d0b;
    --accent-glow: rgba(229, 179, 92, 0.18);
    --bubble-bg-theme: rgba(8, 43, 37, 0.95);
}

body[data-color-mode="emerald"][data-time-theme="night"] {
    --app-bg-base-start: #051a16;
    --app-bg-base-end: #010504;
    --accent-glow: rgba(229, 179, 92, 0.15);
    --bubble-bg-theme: rgba(5, 26, 22, 0.95);
}

/* المشاعر: دايما مفعلة (فالافتراضي وفالـvivid بحال بعضياتهم) —
   [data-time-theme] زايدة هنا (بلا قيمة محددة) غير باش نرفعو الـspecificity
   لنفس المستوى ديال قواعد vivid فوق، ونضمنو أن التوهج العاطفي دايما
   كيغلب، حتى ملي أجواء الألوان مفعلة. */
body[data-time-theme][data-emotion="joy"],
body[data-time-theme][data-emotion="laugh"] {
    --accent-glow: rgba(255, 195, 0, 0.25);
}

body[data-time-theme][data-emotion="calm"],
body[data-time-theme][data-emotion="warmth"] {
    --accent-glow: rgba(229, 179, 92, 0.18);
}

body[data-time-theme][data-emotion="empathy"],
body[data-time-theme][data-emotion="touched"] {
    --accent-glow: rgba(186, 104, 200, 0.22);
}


* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

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


body {

    background-color: #000;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;
}


/* ==========================================================================
   OUTER FRAME
   ========================================================================== */

.outer-gold-frame {

    width: 100%;

    max-width: 426px;

    height: 100vh;

    max-height: 908px;

    padding: 6px;

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

    border-radius: 46px;

    background: #000;

    box-shadow:
        0 0 25px
        rgba(229, 179, 92, 0.4),
        inset 0 0 15px
        rgba(229, 179, 92, 0.2);

    display: flex;

    position: relative;

    overflow: hidden;
}


/* ==========================================================================
   GOLDEN FRAME GLINT
   ========================================================================== */

.golden-ambient-glow {

    position: absolute;

    z-index: 20;

    pointer-events: none;

    opacity: 0;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 210, 120, 0.28) 20%,
            rgba(255, 238, 180, 0.95) 50%,
            rgba(255, 190, 75, 0.48) 75%,
            transparent 100%
        );

    box-shadow:
        0 0 5px
        rgba(255, 205, 110, 0.65),
        0 0 10px
        rgba(255, 180, 70, 0.30);

    filter:
        blur(0.1px);
}


.golden-glow-top,
.golden-glow-bottom {

    width: 72px;

    height: 3px;
}


.golden-glow-left,
.golden-glow-right {

    width: 3px;

    height: 72px;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(255, 210, 120, 0.28) 20%,
            rgba(255, 238, 180, 0.95) 50%,
            rgba(255, 190, 75, 0.48) 75%,
            transparent 100%
        );
}


.golden-glow-active {

    animation:
        golden-ambient-sweep
        1.5s
        cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        )
        forwards;
}


@keyframes golden-ambient-sweep {

    0% {

        opacity: 0;

        filter:
            brightness(0.85)
            blur(0.3px);
    }


    18% {

        opacity: 0.72;

        filter:
            brightness(1.12)
            blur(0.1px);
    }


    50% {

        opacity: 1;

        filter:
            brightness(1.28)
            blur(0);
    }


    78% {

        opacity: 0.58;

        filter:
            brightness(1.05)
            blur(0.15px);
    }


    100% {

        opacity: 0;

        filter:
            brightness(0.85)
            blur(0.3px);
    }
}


/* ==========================================================================
   APP CONTAINER
   ========================================================================== */

.app-container {

    width: 100%;

    height: 100%;

    background:
        radial-gradient(
            var(--gold-box-glow) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at center,
            var(--app-bg-base-start) 0%,
            var(--app-bg-base-end) 100%
        );

    background-size:
        24px 24px,
        cover;

    border:
        1.5px solid
        var(--gold-bright);

    border-radius: 40px;

    display: flex;

    flex-direction: column;

    position: relative;

    overflow: hidden;

    transition:
        background 1.2s ease,
        box-shadow 0.8s ease;

    box-shadow:
        0 0 30px
        rgba(229, 179, 92, 0.3),
        inset 0 0 60px
        var(--accent-glow);
}


/* ==========================================================================
   CORNER ORNAMENTS
   ========================================================================== */

.corner-ornament {

    position: absolute;

    width: 60px;

    height: 60px;

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

    pointer-events: none;

    z-index: 1;

    opacity: 0.5;
}


.top-left {

    top: 10px;

    left: 10px;

    border-right: none;

    border-bottom: none;
}


.top-right {

    top: 10px;

    right: 10px;

    border-left: none;

    border-bottom: none;
}


.bottom-left {

    bottom: 10px;

    left: 10px;

    border-right: none;

    border-top: none;
}


.bottom-right {

    bottom: 10px;

    right: 10px;

    border-left: none;

    border-top: none;
}


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

.top-bar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding:
        15px 20px 0;

    z-index: 3;
}


.ornate-btn {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background:
        rgba(30, 20, 10, 0.8);

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

    color:
        var(--gold-bright);

    box-shadow:
        0 0 10px
        var(--gold-box-glow);

    cursor: pointer;
}


.top-bar-right-group {

    display: flex;

    align-items: center;

    gap: 8px;
}


/* زر مؤقت للاختبار فقط — مسح الذاكرة المحلية */
.ornate-btn-danger {

    border-color: #ff5b5b;

    color: #ff5b5b;

    box-shadow:
        0 0 10px
        rgba(255, 91, 91, 0.25);
}


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

.profile-section {

    display: flex;

    flex-direction: column;

    align-items: center;

    padding:
        0 20px 5px;

    margin-top: -28px;

    z-index: 2;
}


.avatar-container {

    position: relative;

    width: 230px;

    height: 230px;

    display: flex;

    justify-content: center;

    align-items: center;
}


/* ==========================================================================
   LAYER 02 — PORTRAIT MICRO-LIFE
   ========================================================================== */

.glowing-ring {

    width: 226px;

    height: 226px;

    border-radius: 50%;

    padding: 4px;

    background:
        linear-gradient(
            135deg,
            #ffc875,
            #805018
        );

    transition: box-shadow 0.8s ease;

    box-shadow:
        0 0 40px
        rgba(255, 170, 51, 0.6),
        0 0 25px
        var(--accent-glow);

    animation:
        robaty-portrait-breath
        8.8s
        infinite
        ease-in-out;
}


.avatar-inner {

    position: relative;

    width: 100%;

    height: 100%;

    border-radius: 50%;

    overflow: hidden;

    animation:
        robaty-portrait-life
        8.8s
        infinite
        ease-in-out;
}


/* ==========================================================================
   LAYER 04 — PORTRAIT STATE CROSSFADE
   12 حالة عاطفية: صورتين متراكبتين، الأنيميشن ديال "الحياة"
   على .avatar-inner (الحاوية) ماشي على الصورة، باش التبديل بين
   الحالات يبقى سلس بلا ما نمسو كود الأنيميشن.
   ========================================================================== */

.avatar-img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    border-radius: 50%;

    object-fit: cover;

    display: block;

    opacity: 0;

    transition:
        opacity 2400ms
        cubic-bezier(0.4, 0, 0.2, 1);
}


.avatar-img.is-active {

    opacity: 1;

    z-index: 2;
}


/* الصورة اللي كتخرج: كتبقى كاملة تحت الجديدة حتى يكمل الـfade (بلا فراغ) */
.avatar-img.is-leaving {

    opacity: 1;

    z-index: 1;

    transition: none;
}


@keyframes robaty-portrait-breath {
    /* الهالة كتمتد للداخل بنفس اللون والقوة (inset)، باش ما يبقاش فرق فاللون بين
       داخل الدائرة (من وراء الصورة الشفافة) وبرا الحلقة */
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 34px rgba(255, 170, 51, 0.48),
            inset 0 0 34px rgba(255, 170, 51, 0.48);
    }
    25%, 75% {
        transform: scale(1.004);
        box-shadow:
            0 0 38px rgba(255, 170, 51, 0.53),
            inset 0 0 38px rgba(255, 170, 51, 0.53);
    }
    50% {
        transform: scale(1.009);
        box-shadow:
            0 0 46px rgba(255, 170, 51, 0.68),
            inset 0 0 46px rgba(255, 170, 51, 0.68);
    }
}


@keyframes robaty-portrait-life {

    0% {

        transform: scale(1);

        filter:
            brightness(1)
            saturate(1);
    }


    25% {

        transform:
            scale(1.002);

        filter:
            brightness(1.008)
            saturate(1.004);
    }


    50% {

        transform:
            scale(1.004);

        filter:
            brightness(1.018)
            saturate(1.008);
    }


    75% {

        transform:
            scale(1.002);

        filter:
            brightness(1.008)
            saturate(1.004);
    }


    100% {

        transform: scale(1);

        filter:
            brightness(1)
            saturate(1);
    }
}


/* ==========================================================================
   IDENTITY
   ========================================================================== */

.identity-info {

    text-align: center;

    margin-top: -6px;
}


.bot-name {

    font-size: 22px;

    color: #fff;

    font-weight: bold;

    line-height: 1.1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;
}


/* ==========================================================================
   LAYER 01 — PRESENCE INDICATOR
   ========================================================================== */

.neon-target-ring {

    --voice-level: 0;

    display: inline-block;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background-color: #000;

    border:
        3.5px solid
        #23f287;

    outline:
        2px solid
        #000;

    position: relative;

    animation:
        robaty-presence-breath
        6.5s
        infinite
        ease-in-out;
}


.neon-target-ring::after {

    content: '';

    position: absolute;

    top: -4px;

    left: -4px;

    right: -4px;

    bottom: -4px;

    border-radius: 50%;

    border:
        1.2px solid
        rgba(35, 242, 135, 0.65);

    pointer-events: none;

    animation:
        robaty-presence-aura
        6.5s
        infinite
        ease-in-out;
}


@keyframes robaty-presence-breath {

    0% {

        transform: scale(1);

        box-shadow:
            0 0 10px
            rgba(35, 242, 135, 0.78),
            0 0 4px
            rgba(35, 242, 135, 0.55),
            inset 0 0 5px
            rgba(35, 242, 135, 0.58);

        opacity: 0.96;
    }


    25% {

        transform:
            scale(1.018);

        box-shadow:
            0 0 12px
            rgba(35, 242, 135, 0.84),
            0 0 5px
            rgba(35, 242, 135, 0.60),
            inset 0 0 6px
            rgba(35, 242, 135, 0.65);

        opacity: 0.98;
    }


    50% {

        transform:
            scale(1.055);

        box-shadow:
            0 0 18px
            rgba(35, 242, 135, 1),
            0 0 8px
            rgba(35, 242, 135, 0.75),
            inset 0 0 8px
            rgba(35, 242, 135, 0.78);

        opacity: 1;
    }


    75% {

        transform:
            scale(1.018);

        box-shadow:
            0 0 12px
            rgba(35, 242, 135, 0.84),
            0 0 5px
            rgba(35, 242, 135, 0.60),
            inset 0 0 6px
            rgba(35, 242, 135, 0.65);

        opacity: 0.98;
    }


    100% {

        transform: scale(1);

        box-shadow:
            0 0 10px
            rgba(35, 242, 135, 0.78),
            0 0 4px
            rgba(35, 242, 135, 0.55),
            inset 0 0 5px
            rgba(35, 242, 135, 0.58);

        opacity: 0.96;
    }
}


@keyframes robaty-presence-aura {

    0% {

        transform: scale(1);

        opacity: 0.48;
    }


    50% {

        transform:
            scale(1.22);

        opacity: 0.78;
    }


    100% {

        transform: scale(1);

        opacity: 0.48;
    }
}


/* ==========================================================================
   PRESENCE — LISTENING
   ========================================================================== */

.neon-target-ring.presence-listening {

    animation:
        robaty-presence-listening
        3.8s
        infinite
        ease-in-out;

    box-shadow:
        0 0
        calc(
            14px +
            (var(--voice-level) * 7px)
        )
        rgba(35, 242, 135, 0.82),
        0 0
        calc(
            5px +
            (var(--voice-level) * 4px)
        )
        rgba(35, 242, 135, 0.55),
        inset 0 0
        calc(
            6px +
            (var(--voice-level) * 3px)
        )
        rgba(35, 242, 135, 0.68);
}


.neon-target-ring.presence-listening::after {

    animation:
        robaty-listening-aura
        3.8s
        infinite
        ease-in-out;

    opacity:
        calc(
            0.55 +
            (var(--voice-level) * 0.25)
        );
}


@keyframes robaty-presence-listening {

    0%,
    100% {

        transform: scale(1);
    }


    50% {

        transform:
            scale(
                calc(
                    1.025 +
                    (var(--voice-level) * 0.035)
                )
            );
    }
}


@keyframes robaty-listening-aura {

    0% {

        transform: scale(1);

        opacity: 0.50;
    }


    50% {

        transform:
            scale(
                calc(
                    1.18 +
                    (var(--voice-level) * 0.20)
                )
            );

        opacity:
            calc(
                0.58 +
                (var(--voice-level) * 0.25)
            );
    }


    100% {

        transform: scale(1);

        opacity: 0.50;
    }
}


/* ==========================================================================
   PRESENCE — PROCESSING
   ========================================================================== */

.neon-target-ring.presence-processing {

    animation:
        robaty-presence-processing
        4.8s
        infinite
        ease-in-out;

    box-shadow:
        0 0 15px
        rgba(35, 242, 135, 0.90),
        0 0 7px
        rgba(35, 242, 135, 0.65),
        inset 0 0 7px
        rgba(35, 242, 135, 0.72);
}


.neon-target-ring.presence-processing::after {

    animation:
        robaty-processing-aura
        4.8s
        infinite
        ease-in-out;
}


@keyframes robaty-presence-processing {

    0%,
    100% {

        transform: scale(1);

        box-shadow:
            0 0 13px
            rgba(35, 242, 135, 0.82),
            0 0 5px
            rgba(35, 242, 135, 0.58),
            inset 0 0 6px
            rgba(35, 242, 135, 0.65);
    }


    50% {

        transform:
            scale(1.045);

        box-shadow:
            0 0 21px
            rgba(35, 242, 135, 1),
            0 0 10px
            rgba(35, 242, 135, 0.78),
            inset 0 0 9px
            rgba(35, 242, 135, 0.82);
    }
}


@keyframes robaty-processing-aura {

    0%,
    100% {

        transform: scale(1);

        opacity: 0.58;
    }


    50% {

        transform: scale(1.30);

        opacity: 0.88;
    }
}


/* ==========================================================================
   PRESENCE — SPEAKING
   ========================================================================== */

.neon-target-ring.presence-speaking {

    animation:
        robaty-presence-speaking
        2.9s
        infinite
        ease-in-out;

    box-shadow:
        0 0 18px
        rgba(35, 242, 135, 0.95),
        0 0 8px
        rgba(35, 242, 135, 0.72),
        inset 0 0 8px
        rgba(35, 242, 135, 0.78);
}


.neon-target-ring.presence-speaking::after {

    animation:
        robaty-speaking-aura
        2.9s
        infinite
        ease-in-out;
}


@keyframes robaty-presence-speaking {

    0%,
    100% {

        transform: scale(1);

        box-shadow:
            0 0 15px
            rgba(35, 242, 135, 0.86),
            0 0 6px
            rgba(35, 242, 135, 0.62),
            inset 0 0 7px
            rgba(35, 242, 135, 0.70);
    }


    50% {

        transform: scale(1.05);

        box-shadow:
            0 0 23px
            rgba(35, 242, 135, 1),
            0 0 11px
            rgba(35, 242, 135, 0.80),
            inset 0 0 10px
            rgba(35, 242, 135, 0.84);
    }
}


@keyframes robaty-speaking-aura {

    0%,
    100% {

        transform: scale(1.02);

        opacity: 0.60;
    }


    50% {

        transform: scale(1.34);

        opacity: 0.92;
    }
}


/* ==========================================================================
   DIVIDER + TAGLINE
   ========================================================================== */

.divider-line {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin-top: 2px;
}


.line {

    height: 1px;

    width: 16px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold-bright),
            transparent
        );
}


.tagline-star {

    color: var(--gold-bright);

    font-size: 11px;

    opacity: 0.85;
}


.tagline {

    color:
        var(--text-gold-light);

    font-size: 13px;

    font-weight: 600;
}


/* ==========================================================================
   MOMENT BUTTON
   ========================================================================== */

.gold-pill-btn {

    margin-top: 6px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    text-decoration: none;

    background: transparent;

    border:
        1.5px solid
        #e5b35c;

    color: #f4d068;

    padding:
        8px 18px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 600;

    box-shadow: none;

    cursor: pointer;

    transition: background 0.2s ease, color 0.2s ease;
}


.gold-pill-btn:hover {

    background: rgba(229, 179, 92, 0.12);
}


/* Moments button pulse: 2 gold pulses (1.8s each), then 6s pause (9.6s cycle) */
@keyframes momentsPulse {
    0%, 18.75%, 37.5%, 100% {
        box-shadow: 0 0 0 0 rgba(244, 208, 104, 0);
        border-color: #e5b35c;
    }
    9.375%, 28.125% {
        box-shadow: 0 0 14px 3px rgba(244, 208, 104, 0.55);
        border-color: #f4d068;
    }
}

.gold-pill-btn.pulse {
    animation: momentsPulse 9.6s ease-in-out infinite;
}

.gold-pill-btn.pulse:hover {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .gold-pill-btn.pulse { animation: none; }
}


/* ==========================================================================
   CHAT AREA
   ========================================================================== */

.chat-area {

    flex: 1;

    padding:
        10px 15px;

    overflow-y: auto;

    display: flex;

    flex-direction: column;

    gap: 10px;

    z-index: 2;
}


.message {

    display: flex;

    flex-direction: column;

    max-width: 85%;
}


.user-msg {

    align-self: flex-start;
}


.bot-msg {

    align-self: flex-end;

    width: 100%;
}


/* ==========================================================================
   LAYER 03 — MESSAGE PRESENCE
   ========================================================================== */

.bot-msg {

    animation:
        robaty-message-arrival
        0.85s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


.bot-msg:nth-of-type(2) {

    animation-delay: 0.12s;
}


.bot-msg:nth-of-type(4) {

    animation-delay: 0.26s;
}


@keyframes robaty-message-arrival {

    0% {

        opacity: 0;

        transform:
            translateY(7px);
    }


    55% {

        opacity: 0.75;

        transform:
            translateY(2px);
    }


    100% {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ==========================================================================
   USER MESSAGE
   14.4px = زيادة 20% عن 12px
   ========================================================================== */

.bubble-gold-border {

    position: relative;

    background:
        rgba(15, 10, 6, 0.95);

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

    border-radius:
        15px 15px 15px 2px;

    padding:
        8px 14px;

    font-size: 14.4px;

    color: #e0e0e0;

    box-shadow:
        0 0 10px
        rgba(229, 179, 92, 0.15);

    line-height: 1.55;

    white-space: pre-wrap;

    overflow-wrap: anywhere;
}


/* ==========================================================================
   ROBATY MESSAGE
   14.4px = زيادة 20% عن 12px
   ========================================================================== */

.bubble-dark-gold {

    position: relative;

    background:
        var(--bubble-bg-theme);

    transition: background 1.2s ease;

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

    border-radius:
        15px 2px 15px 15px;

    padding:
        10px 14px;

    font-size: 14.4px;

    color:
        var(--text-gold-light);

    line-height: 1.6;

    box-shadow:
        0 4px 15px
        rgba(0, 0, 0, 0.6);

    white-space: pre-wrap;

    overflow-wrap: anywhere;
}


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

.msg-header {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 4px;
}


.mini-avatar {

    width: 22px;

    height: 22px;

    border-radius: 50%;

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

    object-fit: cover;
}


.bot-label {

    font-size: 11px;

    color:
        var(--gold-bright);

    font-weight: bold;
}


.msg-time {

    font-size: 10px;

    color: #8c7860;

    margin-top: 3px;
}


/* ==========================================================================
   BOTTOM CONTROLS
   ========================================================================== */

.bottom-controls {

    padding:
        10px 15px 15px;

    background:
        linear-gradient(
            0deg,
            #050302 80%,
            transparent 100%
        );

    z-index: 2;
}


.input-wrapper {

    position: relative;

    width: 100%;
}


/* ==========================================================================
   MESSAGE INPUT
   يبدأ بسطر واحد
   يكبر تلقائيًا
   Enter = سطر جديد
   ========================================================================== */

.gold-input {

    width: 100%;

    min-height: 42px;

    max-height: 140px;

    resize: none;

    overflow-y: hidden;

    display: block;

    background:
        rgba(18, 11, 6, 0.95);

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

    border-radius: 25px;

    padding:
        10px 18px;

    color: #fff;

    font-size: 12px;

    line-height: 1.55;

    outline: none;

    box-shadow:
        inset 0 0 8px
        rgba(0, 0, 0, 0.8),
        0 0 10px
        rgba(229, 179, 92, 0.15);

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


/* ==========================================================================
   ACTION BAR
   ========================================================================== */

.ornate-action-bar {

    display: flex;

    justify-content: space-between;

    gap: 8px;

    margin-top: 10px;
}


.ornate-action-btn {

    flex: 1;

    background: transparent;

    border:
        1.5px solid
        #e5b35c;

    border-radius: 18px;

    padding:
        8px 5px;

    color: #f4d068;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    font-size: 10px;

    cursor: pointer;

    box-shadow: none;

    position: relative;

    overflow: hidden;

    transition:
        transform 120ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}


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

.send-highlight,
.send-highlight span,
.send-highlight i {

    color: #ffffff;
}


.send-highlight {

    background: transparent;

    cursor: not-allowed;

    transition: all 0.3s ease;
}


.send-highlight.active {

    background: #e5b35c;

    border-color: #f4d068;

    color: #ffffff;

    cursor: pointer;

    font-weight: bold;
}


.button-pressed {

    transform:
        scale(0.965);

    box-shadow:
        0 0 18px
        rgba(229, 179, 92, 0.55),
        inset 0 0 10px
        rgba(255, 235, 180, 0.20);
}


.button-pressed::after {

    content: '';

    position: absolute;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(0.4);

    background:
        rgba(255, 225, 160, 0.32);

    box-shadow:
        0 0 12px
        rgba(255, 210, 120, 0.5);

    pointer-events: none;

    animation:
        button-soft-glow
        320ms
        ease-out
        forwards;
}


@keyframes button-soft-glow {

    0% {

        opacity: 0.85;

        transform:
            translate(-50%, -50%)
            scale(0.4);
    }


    100% {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1.25);
    }
}


/* ==========================================================================
   RECORDING BUTTON
   ========================================================================== */

.record-btn.recording-active {

    border-color:
        rgba(255, 220, 160, 0.95);

    box-shadow:
        0 0 12px
        rgba(229, 179, 92, 0.32);

    animation:
        recording-breath
        1.8s
        infinite
        ease-in-out;
}


.record-btn.recording-active i {

    animation:
        microphone-soft-pulse
        1.8s
        infinite
        ease-in-out;
}


@keyframes recording-breath {

    0% {

        transform: scale(1);

        box-shadow:
            0 0 8px
            rgba(229, 179, 92, 0.18);
    }


    50% {

        transform:
            scale(1.018);

        box-shadow:
            0 0 15px
            rgba(229, 179, 92, 0.38);
    }


    100% {

        transform: scale(1);

        box-shadow:
            0 0 8px
            rgba(229, 179, 92, 0.18);
    }
}


@keyframes microphone-soft-pulse {

    0% {

        opacity: 0.78;
    }


    50% {

        opacity: 1;
    }


    100% {

        opacity: 0.78;
    }
}


/* ==========================================================================
   IMAGE BUTTON
   ========================================================================== */

.image-btn.button-pressed {

    box-shadow:
        0 0 17px
        rgba(229, 179, 92, 0.42);
}


/* ==========================================================================
   IMAGE PREVIEW
   ========================================================================== */

.image-preview {

    position: absolute;

    right: 10px;

    bottom: 7px;

    width: 42px;

    height: 42px;

    border-radius: 10px;

    overflow: hidden;

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

    background: #090604;

    opacity: 0;

    transform:
        translateY(5px)
        scale(0.94);

    pointer-events: none;

    transition:
        opacity 180ms ease,
        transform 220ms ease;

    z-index: 3;

    box-shadow:
        0 0 10px
        rgba(229, 179, 92, 0.25);
}


.image-preview-visible {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    pointer-events: auto;
}


.image-preview img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


.remove-image-btn {

    position: absolute;

    top: 2px;

    left: 2px;

    width: 16px;

    height: 16px;

    border:
        1px solid
        rgba(255,255,255,0.7);

    border-radius: 50%;

    background:
        rgba(0,0,0,0.75);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 8px;

    cursor: pointer;
}


.image-preview-visible ~ .gold-input {

    padding-right: 60px;
}


/* ==========================================================================
   NEW MESSAGE ARRIVAL
   ========================================================================== */

.new-user-message {

    opacity: 0;

    transform:
        translateY(6px)
        scale(0.985);
}


.message-enter-active {

    animation:
        user-message-arrival
        300ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        forwards;
}


@keyframes user-message-arrival {

    0% {

        opacity: 0;

        transform:
            translateY(6px)
            scale(0.985);
    }


    100% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


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

.bubble-image-message {

    width: 150px;

    height: 150px;

    border-radius: 15px;

    overflow: hidden;

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

    background: #0c0804;

    box-shadow:
        0 0 10px
        rgba(229, 179, 92, 0.15);
}


.bubble-image-message img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


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

.audio-message-bubble {

    background:
        rgba(18, 11, 6, 0.95);

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

    border-radius:
        15px 15px 15px 2px;

    padding: 7px;

    box-shadow:
        0 0 10px
        rgba(229, 179, 92, 0.15);
}


.audio-message-bubble audio {

    width: 190px;

    max-width: 100%;

    height: 34px;
}


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

.typing-dots {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 4px 2px;
}


.typing-dots span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--gold-bright);

    opacity: 0.5;

    animation:
        typing-dot-bounce
        1.1s
        infinite
        ease-in-out;
}


.typing-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.3s;
}


@keyframes typing-dot-bounce {

    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }

    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}


/* ==========================================================================
   API KEY MODAL
   ========================================================================== */

.api-key-modal-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.78);

    backdrop-filter: blur(4px);

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

    display: none;

    align-items: center;

    justify-content: center;

    z-index: 50;

    padding: 24px;
}


.api-key-modal-overlay.active {

    display: flex;
}


.api-key-modal-box {

    width: 100%;

    max-width: 300px;

    background:
        linear-gradient(
            180deg,
            #1c1208 0%,
            #0a0603 100%
        );

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

    border-radius: 22px;

    padding: 24px 20px;

    text-align: center;

    box-shadow:
        0 0 35px
        rgba(229, 179, 92, 0.35);
}


.api-key-modal-box h2 {

    color: var(--gold-bright);

    font-size: 17px;

    margin-bottom: 10px;
}


.api-key-modal-box p {

    color: var(--text-gold-light);

    font-size: 12.5px;

    line-height: 1.7;

    margin-bottom: 16px;

    opacity: 0.9;
}


/* ==========================================================================
   SETTINGS SECTIONS (لغة + API key، جوا نفس المودال)
   ========================================================================== */

.settings-section {

    margin-bottom: 18px;

    padding-bottom: 16px;

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

    text-align: start;
}


.settings-section:last-child {

    border-bottom: none;

    padding-bottom: 0;

    margin-bottom: 0;
}


.settings-section-title {

    color: var(--gold-bright);

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 10px;
}


.lang-options,
.color-options {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.lang-option,
.color-option {

    flex: 1 1 calc(50% - 8px);

    padding: 8px 10px;

    border-radius: 14px;

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

    background: rgba(0, 0, 0, 0.3);

    color: var(--text-gold-light);

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    text-align: center;

    font-family: inherit;
}


.lang-option.active,
.color-option.active {

    background:
        linear-gradient(
            135deg,
            var(--gold-bright) 0%,
            var(--gold-dark) 100%
        );

    color: #050302;

    border-color: var(--gold-bright);
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

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

    .neon-target-ring,
    .neon-target-ring::after,
    .glowing-ring,
    .avatar-inner,
    .bot-msg,
    .golden-ambient-glow,
    .record-btn.recording-active,
    .record-btn.recording-active i,
    .message-enter-active,
    .button-pressed::after,
    .typing-dots span {

        animation: none;
    }

}


/* ==========================================================================
   FIT-TO-SCREEN — الواجهة تناسب جميع الهواتف
   كنثبّتو الصفحة على المساحة المرئية الحقيقية (position: fixed + inset: 0)
   عوض vh/dvh، حيث بعض الهواتف/المتصفحات كتحسب 100vh أكبر من الشاشة المرئية.
   ========================================================================== */

html {
    height: 100%;
    overflow: hidden;
}

body {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    min-height: 0;
    overflow: hidden;
}

.outer-gold-frame {
    height: 100%;
    max-height: 908px;
}

/* الهواتف القصيرة: نصغّرو الحواف شوية باش كلشي يبقى مرئي */
@media (max-height: 700px) {
    .outer-gold-frame {
        padding: 4px;
        border-radius: 34px;
    }
    .app-container {
        border-radius: 30px;
    }
}


/* ==========================================================================
   الصورة الدائرية + اسم Robaty قابلين للضغط (يفتحو صفحة البروفايل)
   ========================================================================== */

.opens-profile {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.avatar-container.opens-profile:active .glowing-ring,
.bot-name.opens-profile:active {
    filter: brightness(1.15);
}

.opens-profile:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 4px;
    border-radius: 50%;
}

.bot-name.opens-profile:focus-visible {
    border-radius: 12px;
}


/* ==========================================================================
   الحلقة النابضة حول صورة Robaty = كاين Story جديد ما تشافش
   كتنبض بلا توقف حتى تفتح المستخدمة آخر Story (الكلاس hint-pulse كيتحكم فيه app.js)
   كتخدم على عنصر وهمي (::after) ماشي على الصورة نفسها.
   ========================================================================== */

.avatar-container.hint-pulse::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 2px solid rgb(244, 208, 104);
    box-shadow: 0 0 14px rgba(244, 208, 104, 0.45);
    pointer-events: none;
    opacity: 0;
    animation: robatyProfileHint 5s ease-out infinite;
}

@keyframes robatyProfileHint {
    0%   { transform: scale(1.02); opacity: 0; }
    10%  { opacity: 0.65; }
    45%  { transform: scale(1.1);  opacity: 0; }
    100% { transform: scale(1.1);  opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .avatar-container.hint-pulse::after { animation: none; }
}


/* ==========================================================================
   ثيم فاتح 1 — كريمي/عاجي (data-color-mode="cream")
   كيبدل المتغيرات + الألوان الثابتة (نصوص بيضاء، خلفيات سوداء) اللي كانت
   كتخلي الكتابة ما كتبانش على خلفية فاتحة. ماكيتبدلش مع الوقت (نهار/ليل).
   ========================================================================== */

body[data-color-mode="cream"],
body[data-color-mode="cream"][data-time-theme="day"],
body[data-color-mode="cream"][data-time-theme="night"] {
    --gold-bright: #c9a22f;
    --gold-dark: #8a6a1c;
    --gold-border: rgba(201, 162, 47, 0.60);
    --gold-box-glow: rgba(201, 162, 47, 0.28);
    --text-gold-light: #4a3b32;
    --app-bg-base-start: #fffcf7;
    --app-bg-base-end: #f3ead9;
    --accent-glow: rgba(212, 175, 55, 0.10);
    --bubble-bg-theme: rgba(243, 233, 210, 0.98);
}

/* إطار الصفحة */
body[data-color-mode="cream"] {
    background-color: #f5ecdc;
}

body[data-color-mode="cream"] .outer-gold-frame {
    background: #fcf8f2;
    box-shadow:
        0 8px 28px rgba(201, 162, 47, 0.25),
        inset 0 0 12px rgba(201, 162, 47, 0.15);
}

body[data-color-mode="cream"] .app-container {
    box-shadow:
        0 0 18px rgba(201, 162, 47, 0.22),
        inset 0 0 40px var(--accent-glow);
}

/* الأزرار العلوية */
body[data-color-mode="cream"] .ornate-btn {
    background: #fcf8f2;
    color: #4a3b32;
    box-shadow: 0 2px 6px rgba(201, 162, 47, 0.2);
}

body[data-color-mode="cream"] .ornate-btn-danger {
    color: #d84a4a;
    border-color: #e57373;
    box-shadow: 0 2px 6px rgba(229, 115, 115, 0.2);
}

/* الصورة والاسم */
body[data-color-mode="cream"] .glowing-ring {
    box-shadow:
        0 0 26px rgba(201, 162, 47, 0.38),
        0 0 18px var(--accent-glow);
}

body[data-color-mode="cream"] .bot-name {
    color: #3e2723;
}

body[data-color-mode="cream"] .neon-target-ring {
    outline-color: #fcf8f2;
}

body[data-color-mode="cream"] .tagline {
    color: #6d5646;
}

body[data-color-mode="cream"] .tagline-star {
    color: #b8902a;
}

/* زر "شوفي تصاوري ليوم" */
body[data-color-mode="cream"] .gold-pill-btn {
    background: linear-gradient(135deg, #fdfbf7 0%, #f4ebd0 100%);
    border-color: #c9a22f;
    color: #5d4037;
}

body[data-color-mode="cream"] .gold-pill-btn:hover {
    background: #f4ebd0;
}

/* الفقاعات */
body[data-color-mode="cream"] .bubble-dark-gold {
    background: linear-gradient(145deg, #f3e9d2, #e6d5b8);
    color: #3e2723;
    box-shadow: 0 4px 12px rgba(201, 162, 47, 0.18);
}

body[data-color-mode="cream"] .bubble-gold-border {
    background: #fffdf9;
    color: #4a3b32;
    box-shadow: 0 2px 8px rgba(201, 162, 47, 0.15);
}

body[data-color-mode="cream"] .audio-message-bubble {
    background: #fffdf9;
    box-shadow: 0 2px 8px rgba(201, 162, 47, 0.15);
}

body[data-color-mode="cream"] .bubble-image-message {
    background: #efe5d2;
    box-shadow: 0 2px 8px rgba(201, 162, 47, 0.15);
}

body[data-color-mode="cream"] .bot-label {
    color: #7a5a14;
}

body[data-color-mode="cream"] .msg-time {
    color: #a1887f;
}

/* منطقة الكتابة والأزرار السفلية */
body[data-color-mode="cream"] .bottom-controls {
    background: linear-gradient(0deg, #f3ead9 80%, transparent 100%);
}

body[data-color-mode="cream"] .gold-input {
    background: #fffdf9;
    color: #4a3b32;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.04),
        0 0 8px rgba(201, 162, 47, 0.15);
}

body[data-color-mode="cream"] .gold-input::placeholder {
    color: #bcaaa4;
}

body[data-color-mode="cream"] .image-preview {
    background: #efe5d2;
}

body[data-color-mode="cream"] .ornate-action-btn {
    background: linear-gradient(135deg, #fdfbf7 0%, #f4ebd0 100%);
    border-color: #c9a22f;
    color: #5d4037;
}

body[data-color-mode="cream"] .send-highlight,
body[data-color-mode="cream"] .send-highlight span,
body[data-color-mode="cream"] .send-highlight i {
    color: #a1887f;
}

body[data-color-mode="cream"] .send-highlight.active,
body[data-color-mode="cream"] .send-highlight.active span,
body[data-color-mode="cream"] .send-highlight.active i {
    background: #b8902a;
    border-color: #b8902a;
    color: #ffffff;
}

body[data-color-mode="cream"] .send-highlight.active span,
body[data-color-mode="cream"] .send-highlight.active i {
    background: transparent;
}

/* نافذة الإعدادات */
body[data-color-mode="cream"] .api-key-modal-overlay {
    background: rgba(74, 59, 50, 0.55);
}

body[data-color-mode="cream"] .api-key-modal-box {
    background: linear-gradient(180deg, #fffcf7 0%, #f3ead9 100%);
    box-shadow: 0 8px 30px rgba(201, 162, 47, 0.3);
}

body[data-color-mode="cream"] .api-key-modal-box h2,
body[data-color-mode="cream"] .settings-section-title {
    color: #7a5a14;
}

body[data-color-mode="cream"] .api-key-modal-box p {
    color: #4a3b32;
}

body[data-color-mode="cream"] .lang-option,
body[data-color-mode="cream"] .color-option {
    background: rgba(255, 255, 255, 0.65);
    color: #4a3b32;
}

body[data-color-mode="cream"] .lang-option.active,
body[data-color-mode="cream"] .color-option.active {
    background: linear-gradient(135deg, #e5c35c 0%, #b8902a 100%);
    color: #2e2118;
    border-color: #c9a22f;
}


/* ==========================================================================
   ثيم فاتح 3 — وردي أثيري (data-color-mode="blush")
   خلفية حريرية متدرجة + موجات شفافة + بقع ضوء (bokeh) عائمة، أزرار توتي لامعة،
   فقاعات زجاجية. ما كيتلمس حتى ثيم آخر. الحركات خفيفة (transform فقط).
   ========================================================================== */

body[data-color-mode="blush"],
body[data-color-mode="blush"][data-time-theme="day"],
body[data-color-mode="blush"][data-time-theme="night"] {
    --gold-bright: #f48fb1;
    --gold-dark: #d81b60;
    --gold-border: rgba(255, 255, 255, 0.85);
    --gold-box-glow: rgba(255, 255, 255, 0.0);
    --text-gold-light: #4a2c33;
    --app-bg-base-start: #ffd9e6;
    --app-bg-base-end: #f7a1c0;
    --accent-glow: rgba(255, 255, 255, 0.18);
    --bubble-bg-theme: rgba(255, 255, 255, 0.55);
}

body[data-color-mode="blush"] {
    background: linear-gradient(135deg, #ffccd5 0%, #ff8fa3 50%, #ffb3c6 100%);
    background-attachment: fixed;
}

body[data-color-mode="blush"] .outer-gold-frame {
    background: rgba(255, 240, 243, 0.88);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow:
        0 15px 35px rgba(255, 105, 135, 0.25),
        inset 0 0 12px rgba(255, 255, 255, 0.5);
}

/* الخلفية الحريرية */
body[data-color-mode="blush"] .app-container {
    background: linear-gradient(180deg, #ffd4e3 0%, #fec3d7 50%, #f8a8c4 100%);
    border-color: rgba(255, 255, 255, 0.9);
    isolation: isolate;
    box-shadow:
        0 0 22px rgba(240, 98, 146, 0.25),
        inset 0 0 40px rgba(255, 255, 255, 0.25);
}

/* بقع الضوء العائمة (خلف المحتوى) */
body[data-color-mode="blush"] .app-container::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -300px;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,0.75) 0, rgba(255,255,255,0.28) 7px, transparent 16px),
        radial-gradient(circle at 72% 12%, rgba(255,255,255,0.55) 0, rgba(255,255,255,0.20) 11px, transparent 24px),
        radial-gradient(circle at 46% 48%, rgba(255,255,255,0.45) 0, rgba(255,255,255,0.15) 5px, transparent 12px),
        radial-gradient(circle at 86% 66%, rgba(255,255,255,0.65) 0, rgba(255,255,255,0.22) 9px, transparent 20px),
        radial-gradient(circle at 24% 82%, rgba(255,255,255,0.50) 0, rgba(255,255,255,0.18) 13px, transparent 28px),
        radial-gradient(circle at 60% 90%, rgba(255,255,255,0.60) 0, rgba(255,255,255,0.20) 6px, transparent 14px);
    background-size: 260px 300px;
    animation: blush-float 60s linear infinite;
    will-change: transform;
}

/* الموجات الشفافة فالأسفل */
body[data-color-mode="blush"] .app-container::after {
    content: "";
    position: absolute;
    left: -10%;
    width: 120%;
    bottom: 0;
    height: 36%;
    z-index: -1;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath fill='%23f06292' fill-opacity='0.30' d='M0 130 Q150 70 300 130 T600 130 T900 130 T1200 130 V200 H0 Z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath fill='white' fill-opacity='0.38' d='M0 100 Q150 20 300 100 T600 100 T900 100 T1200 100 V200 H0 Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 100% 82%;
    background-position: 0 100%, 0 100%;
    animation: blush-wave 11s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes blush-float {
    from { transform: translateY(0); }
    to   { transform: translateY(300px); }
}

@keyframes blush-wave {
    from { transform: translateX(0); }
    to   { transform: translateX(-8%); }
}

@media (prefers-reduced-motion: reduce) {
    body[data-color-mode="blush"] .app-container::before,
    body[data-color-mode="blush"] .app-container::after {
        animation: none;
    }
}

/* الأزرار العلوية (الإعدادات + السهم) بنفس لون الأزرار الأربعة */
body[data-color-mode="blush"] .ornate-btn:not(.ornate-btn-danger) {
    background: #e14072;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(225, 64, 114, 0.30);
}

body[data-color-mode="blush"] .ornate-btn:not(.ornate-btn-danger) i,
body[data-color-mode="blush"] .ornate-btn:not(.ornate-btn-danger) svg,
body[data-color-mode="blush"] .ornate-btn:not(.ornate-btn-danger) span {
    color: #ffffff;
}

/* الزر الأحمر (المسح) يبقى كما كان */
body[data-color-mode="blush"] .ornate-btn-danger {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(232, 82, 127, 0.18);
}

body[data-color-mode="blush"] .ornate-btn-danger {
    color: #e0364f;
    border-color: #ff8a9a;
}

/* الصورة: إطار أبيض رفيع + هالة وردية ناعمة */
body[data-color-mode="blush"] .glowing-ring {
    background: linear-gradient(135deg, #ffffff, #ffc2d6);
    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.35),
        0 0 34px 8px rgba(240, 98, 146, 0.45);
}

body[data-color-mode="blush"] .bot-name {
    color: #9c1348;
}

body[data-color-mode="blush"] .neon-target-ring {
    outline-color: #ffe3ee;
}

body[data-color-mode="blush"] .tagline {
    color: #a3144a;
}

body[data-color-mode="blush"] .tagline-star {
    color: #ffffff;
}

/* الأزرار الأربعة (شوفي تصاوري ليوم + الثلاثة السفلية): وردي-أحمر مسطح، كبسولة، نص أبيض */
body[data-color-mode="blush"] .gold-pill-btn,
body[data-color-mode="blush"] .ornate-action-btn {
    background: #e14072;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: transparent !important;
    border-radius: 999px;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(225, 64, 114, 0.30);
}

body[data-color-mode="blush"] .gold-pill-btn:hover,
body[data-color-mode="blush"] .ornate-action-btn:hover {
    background: #cf3566;
}

/* الإرسال يبقى كما كان (#e8175d + شفافية لما يكون مطفأ) */
body[data-color-mode="blush"] .send-highlight {
    background: #e8175d;
}

body[data-color-mode="blush"] .gold-pill-btn span,
body[data-color-mode="blush"] .gold-pill-btn i,
body[data-color-mode="blush"] .gold-pill-btn svg,
body[data-color-mode="blush"] .ornate-action-btn span,
body[data-color-mode="blush"] .ornate-action-btn i,
body[data-color-mode="blush"] .ornate-action-btn svg {
    color: #ffffff;
}

/* الإرسال: مطفأ = نفس اللون بشفافية، مفعل = كامل + توهج */
body[data-color-mode="blush"] .send-highlight {
    opacity: 0.7;
}

body[data-color-mode="blush"] .send-highlight.active {
    opacity: 1;
    box-shadow: 0 6px 18px rgba(232, 23, 93, 0.50);
}

/* الفقاعات الزجاجية */
body[data-color-mode="blush"] .bubble-dark-gold {
    background: rgba(255, 255, 255, 0.58);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, 0.9);
    color: #9c1348;
    box-shadow: 0 6px 18px rgba(232, 82, 127, 0.15);
}

/* فقاعتك: توتي + نص أبيض */
body[data-color-mode="blush"] .bubble-gold-border {
    background: linear-gradient(135deg, #f06292 0%, #e8527f 100%);
    border-color: rgba(255, 255, 255, 0.55);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(232, 82, 127, 0.35);
}

body[data-color-mode="blush"] .audio-message-bubble {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(232, 82, 127, 0.15);
}

body[data-color-mode="blush"] .bubble-image-message {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(232, 82, 127, 0.15);
}

body[data-color-mode="blush"] .bot-label {
    color: #9c1348;
}

body[data-color-mode="blush"] .msg-time {
    color: #8e3a58;
}

/* منطقة الكتابة (فوق الموجات، بلا خلفية صلبة) */
body[data-color-mode="blush"] .bottom-controls {
    background: transparent;
}

body[data-color-mode="blush"] .gold-input {
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-color: rgba(255, 255, 255, 0.95);
    color: #4a2c33;
    box-shadow:
        inset 0 2px 5px rgba(232, 82, 127, 0.06),
        0 4px 14px rgba(232, 82, 127, 0.12);
}

body[data-color-mode="blush"] .gold-input::placeholder {
    color: #a3305f;
    opacity: 0.65;
}

body[data-color-mode="blush"] .image-preview {
    background: rgba(255, 255, 255, 0.55);
}

/* نافذة الإعدادات */
body[data-color-mode="blush"] .api-key-modal-overlay {
    background: rgba(92, 58, 66, 0.50);
}

body[data-color-mode="blush"] .api-key-modal-box {
    background: linear-gradient(180deg, #fff8f9 0%, #ffd9e6 100%);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 30px rgba(232, 82, 127, 0.35);
}

body[data-color-mode="blush"] .api-key-modal-box h2,
body[data-color-mode="blush"] .settings-section-title {
    color: #ad1457;
}

body[data-color-mode="blush"] .api-key-modal-box p {
    color: #4a2c33;
}

body[data-color-mode="blush"] .lang-option,
body[data-color-mode="blush"] .color-option {
    background: rgba(255, 255, 255, 0.7);
    color: #4a2c33;
}

body[data-color-mode="blush"] .lang-option.active,
body[data-color-mode="blush"] .color-option.active {
    background: #e8175d;
    color: #ffffff;
    border-color: #ffffff;
}


/* ===== وردي أثيري: توهجات "منشور جديد" (زر اللحظات + حلقة الصورة) ===== */

/* زر "شوفي تصاوري ليوم": نبضتان بحلقة بيضاء + هالة وردية غامقة */
@keyframes blushMomentsPulse {
    0%, 18.75%, 37.5%, 100% {
        box-shadow:
            0 0 0 0 rgba(255, 255, 255, 0),
            0 6px 14px rgba(225, 64, 114, 0.30);
    }
    9.375%, 28.125% {
        box-shadow:
            0 0 0 2px rgba(255, 255, 255, 0.95),
            0 0 17px 6px rgba(225, 64, 114, 0.55);
    }
}

body[data-color-mode="blush"] .gold-pill-btn.pulse {
    animation: blushMomentsPulse 9.6s ease-in-out infinite;
}

body[data-color-mode="blush"] .gold-pill-btn.pulse:hover {
    animation-play-state: paused;
}

/* حلقة صورة Robaty: موجة نابضة بلون وردي-أحمر + حد أبيض */
@keyframes blushProfileHint {
    0%   { transform: scale(1.02); opacity: 0; }
    10%  { opacity: 1; }
    45%  { transform: scale(1.12); opacity: 0; }
    100% { transform: scale(1.12); opacity: 0; }
}

body[data-color-mode="blush"] .avatar-container.hint-pulse::after {
    border: 3px solid #e8175d;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.85),
        0 0 22px 6px rgba(232, 23, 93, 0.55);
    animation: blushProfileHint 5s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    body[data-color-mode="blush"] .gold-pill-btn.pulse,
    body[data-color-mode="blush"] .avatar-container.hint-pulse::after {
        animation: none;
    }
}


/* ==========================================================================
   ثيم فاتح 2 — أزرق سماوي (data-color-mode="sky")
   خلفية حريرية متدرجة + موجات شفافة + بقع ضوء (bokeh) عائمة، أزرار أزرق لامعة،
   فقاعات زجاجية. ما كيتلمس حتى ثيم آخر. الحركات خفيفة (transform فقط).
   ========================================================================== */

body[data-color-mode="sky"],
body[data-color-mode="sky"][data-time-theme="day"],
body[data-color-mode="sky"][data-time-theme="night"] {
    --gold-bright: #8fc2f4;
    --gold-dark: #1b7fd8;
    --gold-border: rgba(255, 255, 255, 0.85);
    --gold-box-glow: rgba(255, 255, 255, 0.0);
    --text-gold-light: #2c384a;
    --app-bg-base-start: #d9ecff;
    --app-bg-base-end: #a1cef7;
    --accent-glow: rgba(255, 255, 255, 0.18);
    --bubble-bg-theme: rgba(255, 255, 255, 0.55);
}

body[data-color-mode="sky"] {
    background: linear-gradient(135deg, #ccddff 0%, #8fb6ff 50%, #b3d3ff 100%);
    background-attachment: fixed;
}

body[data-color-mode="sky"] .outer-gold-frame {
    background: rgba(240, 245, 255, 0.88);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow:
        0 15px 35px rgba(105, 160, 255, 0.25),
        inset 0 0 12px rgba(255, 255, 255, 0.5);
}

/* الخلفية الحريرية */
body[data-color-mode="sky"] .app-container {
    background: linear-gradient(180deg, #d4eaff 0%, #c3e1fe 50%, #a8d1f8 100%);
    border-color: rgba(255, 255, 255, 0.9);
    isolation: isolate;
    box-shadow:
        0 0 22px rgba(98, 170, 240, 0.25),
        inset 0 0 40px rgba(255, 255, 255, 0.25);
}

/* بقع الضوء العائمة (خلف المحتوى) */
body[data-color-mode="sky"] .app-container::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -300px;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.75) 0, rgba(255, 255, 255, 0.28) 7px, transparent 16px),
        radial-gradient(circle at 72% 12%, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0.20) 11px, transparent 24px),
        radial-gradient(circle at 46% 48%, rgba(255, 255, 255, 0.45) 0, rgba(255, 255, 255, 0.15) 5px, transparent 12px),
        radial-gradient(circle at 86% 66%, rgba(255, 255, 255, 0.65) 0, rgba(255, 255, 255, 0.22) 9px, transparent 20px),
        radial-gradient(circle at 24% 82%, rgba(255, 255, 255, 0.50) 0, rgba(255, 255, 255, 0.18) 13px, transparent 28px),
        radial-gradient(circle at 60% 90%, rgba(255, 255, 255, 0.60) 0, rgba(255, 255, 255, 0.20) 6px, transparent 14px);
    background-size: 260px 300px;
    animation: sky-float 60s linear infinite;
    will-change: transform;
}

/* الموجات الشفافة فالأسفل */
body[data-color-mode="sky"] .app-container::after {
    content: "";
    position: absolute;
    left: -10%;
    width: 120%;
    bottom: 0;
    height: 36%;
    z-index: -1;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath fill='%2362aaf0' fill-opacity='0.30' d='M0 130 Q150 70 300 130 T600 130 T900 130 T1200 130 V200 H0 Z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath fill='white' fill-opacity='0.38' d='M0 100 Q150 20 300 100 T600 100 T900 100 T1200 100 V200 H0 Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 100% 82%;
    background-position: 0 100%, 0 100%;
    animation: sky-wave 11s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes sky-float {
    from { transform: translateY(0); }
    to   { transform: translateY(300px); }
}

@keyframes sky-wave {
    from { transform: translateX(0); }
    to   { transform: translateX(-8%); }
}

@media (prefers-reduced-motion: reduce) {
    body[data-color-mode="sky"] .app-container::before,
    body[data-color-mode="sky"] .app-container::after {
        animation: none;
    }
}

/* الأزرار العلوية (الإعدادات + السهم) بنفس لون الأزرار الأربعة */
body[data-color-mode="sky"] .ornate-btn:not(.ornate-btn-danger) {
    background: #408de1;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(64, 141, 225, 0.30);
}

body[data-color-mode="sky"] .ornate-btn:not(.ornate-btn-danger) i,
body[data-color-mode="sky"] .ornate-btn:not(.ornate-btn-danger) svg,
body[data-color-mode="sky"] .ornate-btn:not(.ornate-btn-danger) span {
    color: #ffffff;
}

/* الزر الأحمر (المسح) يبقى كما كان */
body[data-color-mode="sky"] .ornate-btn-danger {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(82, 152, 232, 0.18);
}

body[data-color-mode="sky"] .ornate-btn-danger {
    color: #e0364f;
    border-color: #ff8a9a;
}

/* الصورة: إطار أبيض رفيع + هالة زرقاء ناعمة */
body[data-color-mode="sky"] .glowing-ring {
    background: linear-gradient(135deg, #ffffff, #c2e0ff);
    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.35),
        0 0 34px 8px rgba(98, 170, 240, 0.45);
}

body[data-color-mode="sky"] .bot-name {
    color: #135f9c;
}

body[data-color-mode="sky"] .neon-target-ring {
    outline-color: #e3f3ff;
}

body[data-color-mode="sky"] .tagline {
    color: #1462a3;
}

body[data-color-mode="sky"] .tagline-star {
    color: #ffffff;
}

/* الأزرار الأربعة (شوفي تصاوري ليوم + الثلاثة السفلية): أزرق مسطح، كبسولة، نص أبيض */
body[data-color-mode="sky"] .gold-pill-btn,
body[data-color-mode="sky"] .ornate-action-btn {
    background: #408de1;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: transparent !important;
    border-radius: 999px;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(64, 141, 225, 0.30);
}

body[data-color-mode="sky"] .gold-pill-btn:hover,
body[data-color-mode="sky"] .ornate-action-btn:hover {
    background: #3580cf;
}

/* الإرسال يبقى كما كان (#1780e8 + شفافية لما يكون مطفأ) */
body[data-color-mode="sky"] .send-highlight {
    background: #1780e8;
}

body[data-color-mode="sky"] .gold-pill-btn span,
body[data-color-mode="sky"] .gold-pill-btn i,
body[data-color-mode="sky"] .gold-pill-btn svg,
body[data-color-mode="sky"] .ornate-action-btn span,
body[data-color-mode="sky"] .ornate-action-btn i,
body[data-color-mode="sky"] .ornate-action-btn svg {
    color: #ffffff;
}

/* الإرسال: مطفأ = نفس اللون بشفافية، مفعل = كامل + توهج */
body[data-color-mode="sky"] .send-highlight {
    opacity: 0.7;
}

body[data-color-mode="sky"] .send-highlight.active {
    opacity: 1;
    box-shadow: 0 6px 18px rgba(23, 128, 232, 0.50);
}

/* الفقاعات الزجاجية */
body[data-color-mode="sky"] .bubble-dark-gold {
    background: rgba(255, 255, 255, 0.58);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, 0.9);
    color: #135f9c;
    box-shadow: 0 6px 18px rgba(82, 152, 232, 0.15);
}

/* فقاعتك: أزرق + نص أبيض */
body[data-color-mode="sky"] .bubble-gold-border {
    background: linear-gradient(135deg, #62aaf0 0%, #5298e8 100%);
    border-color: rgba(255, 255, 255, 0.55);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(82, 152, 232, 0.35);
}

body[data-color-mode="sky"] .audio-message-bubble {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(82, 152, 232, 0.15);
}

body[data-color-mode="sky"] .bubble-image-message {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(82, 152, 232, 0.15);
}

body[data-color-mode="sky"] .bot-label {
    color: #135f9c;
}

body[data-color-mode="sky"] .msg-time {
    color: #3a668e;
}

/* منطقة الكتابة (فوق الموجات، بلا خلفية صلبة) */
body[data-color-mode="sky"] .bottom-controls {
    background: transparent;
}

body[data-color-mode="sky"] .gold-input {
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-color: rgba(255, 255, 255, 0.95);
    color: #2c384a;
    box-shadow:
        inset 0 2px 5px rgba(82, 152, 232, 0.06),
        0 4px 14px rgba(82, 152, 232, 0.12);
}

body[data-color-mode="sky"] .gold-input::placeholder {
    color: #3072a3;
    opacity: 0.65;
}

body[data-color-mode="sky"] .image-preview {
    background: rgba(255, 255, 255, 0.55);
}

/* نافذة الإعدادات */
body[data-color-mode="sky"] .api-key-modal-overlay {
    background: rgba(58, 72, 92, 0.50);
}

body[data-color-mode="sky"] .api-key-modal-box {
    background: linear-gradient(180deg, #f8faff 0%, #d9ecff 100%);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 30px rgba(82, 152, 232, 0.35);
}

body[data-color-mode="sky"] .api-key-modal-box h2,
body[data-color-mode="sky"] .settings-section-title {
    color: #1471ad;
}

body[data-color-mode="sky"] .api-key-modal-box p {
    color: #2c384a;
}

body[data-color-mode="sky"] .lang-option,
body[data-color-mode="sky"] .color-option {
    background: rgba(255, 255, 255, 0.7);
    color: #2c384a;
}

body[data-color-mode="sky"] .lang-option.active,
body[data-color-mode="sky"] .color-option.active {
    background: #1780e8;
    color: #ffffff;
    border-color: #ffffff;
}


/* ===== أزرق سماوي: توهجات "منشور جديد" (زر اللحظات + حلقة الصورة) ===== */

/* زر "شوفي تصاوري ليوم": نبضتان بحلقة بيضاء + هالة زرقاء غامقة */
@keyframes skyMomentsPulse {
    0%, 18.75%, 37.5%, 100% {
        box-shadow:
            0 0 0 0 rgba(255, 255, 255, 0),
            0 6px 14px rgba(64, 141, 225, 0.30);
    }
    9.375%, 28.125% {
        box-shadow:
            0 0 0 2px rgba(255, 255, 255, 0.95),
            0 0 17px 6px rgba(64, 141, 225, 0.55);
    }
}

body[data-color-mode="sky"] .gold-pill-btn.pulse {
    animation: skyMomentsPulse 9.6s ease-in-out infinite;
}

body[data-color-mode="sky"] .gold-pill-btn.pulse:hover {
    animation-play-state: paused;
}

/* حلقة صورة Robaty: موجة نابضة بلون أزرق + حد أبيض */
@keyframes skyProfileHint {
    0%   { transform: scale(1.02); opacity: 0; }
    10%  { opacity: 1; }
    45%  { transform: scale(1.12); opacity: 0; }
    100% { transform: scale(1.12); opacity: 0; }
}

body[data-color-mode="sky"] .avatar-container.hint-pulse::after {
    border: 3px solid #1780e8;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.85),
        0 0 22px 6px rgba(23, 128, 232, 0.55);
    animation: skyProfileHint 5s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    body[data-color-mode="sky"] .gold-pill-btn.pulse,
    body[data-color-mode="sky"] .avatar-container.hint-pulse::after {
        animation: none;
    }
}


/* ===== كريمي فاتح: حلقة الصورة + توهجا "منشور جديد" بلون يلائم الخلفية ===== */

/* حلقة صورة Robaty: ذهبي ناعم بدل البني الداكن */
body[data-color-mode="cream"] .glowing-ring {
    background: linear-gradient(135deg, #f0d98a, #b8902a);
}

/* زر "شوفي تصاوري ليوم": نبضتان برملي-كراميل عميق (ينسجم مع لون الأزرار) */
@keyframes creamMomentsPulse {
    0%, 18.75%, 37.5%, 100% {
        box-shadow: 0 3px 8px rgba(203, 162, 114, 0.30);
        border-color: #b5834d;
    }
    9.375%, 28.125% {
        box-shadow:
            0 0 0 3px rgba(181, 131, 77, 0.50),
            0 0 20px 6px rgba(181, 131, 77, 0.50);
        border-color: #b5834d;
    }
}

body[data-color-mode="cream"] .gold-pill-btn.pulse {
    animation: creamMomentsPulse 9.6s ease-in-out infinite;
}

body[data-color-mode="cream"] .gold-pill-btn.pulse:hover {
    animation-play-state: paused;
}

/* حلقة نبض الصورة */
@keyframes creamProfileHint {
    0%   { transform: scale(1.02); opacity: 0; }
    10%  { opacity: 1; }
    45%  { transform: scale(1.12); opacity: 0; }
    100% { transform: scale(1.12); opacity: 0; }
}

body[data-color-mode="cream"] .avatar-container.hint-pulse::after {
    border: 3px solid #b8902a;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.7),
        0 0 20px 5px rgba(184, 144, 42, 0.50);
    animation: creamProfileHint 5s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    body[data-color-mode="cream"] .gold-pill-btn.pulse,
    body[data-color-mode="cream"] .avatar-container.hint-pulse::after {
        animation: none;
    }
}


/* ===== كريمي فاتح: لون رمال الصحراء/الشاطئ بعد تخفيف 20% (#dbb789) =====
   إطار الصورة + التموجات حولها + الأزرار الأربعة + زرا الإعدادات والسهم.
   الإرسال: رملي عادي، ويغمق قليلا عند الكتابة. النص بني داكن لوضوح القراءة. */

/* إطار الصورة + الهالة */
body[data-color-mode="cream"] .glowing-ring {
    background: linear-gradient(135deg, #e8caa1 0%, #dbb789 55%, #c79d73 100%);
    box-shadow:
        0 0 26px rgba(219, 183, 137, 0.50),
        0 0 18px var(--accent-glow);
}

/* التموجات (حلقة النبض) حول الصورة */
body[data-color-mode="cream"] .avatar-container.hint-pulse::after {
    border-color: #dbb789;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.7),
        0 0 20px 5px rgba(203, 162, 114, 0.55);
}

/* الأزرار الأربعة */
body[data-color-mode="cream"] .gold-pill-btn,
body[data-color-mode="cream"] .ornate-action-btn {
    background: #dbc4a8;
    border-color: #b5834d;
    color: #2e1b14;
    box-shadow: 0 3px 8px rgba(203, 162, 114, 0.30);
}

body[data-color-mode="cream"] .gold-pill-btn:hover,
body[data-color-mode="cream"] .ornate-action-btn:hover {
    background: #d4bd9e;
}

body[data-color-mode="cream"] .gold-pill-btn span,
body[data-color-mode="cream"] .gold-pill-btn i,
body[data-color-mode="cream"] .gold-pill-btn svg,
body[data-color-mode="cream"] .ornate-action-btn span,
body[data-color-mode="cream"] .ornate-action-btn i,
body[data-color-mode="cream"] .ornate-action-btn svg {
    color: #2e1b14;
}

/* زرا الإعدادات والسهم (زر المسح الأحمر لا يتغير) */
body[data-color-mode="cream"] .ornate-btn:not(.ornate-btn-danger) {
    background: #dbc4a8;
    border-color: #b5834d;
    color: #3e2723;
    box-shadow: 0 3px 8px rgba(203, 162, 114, 0.30);
}

body[data-color-mode="cream"] .ornate-btn:not(.ornate-btn-danger) i,
body[data-color-mode="cream"] .ornate-btn:not(.ornate-btn-danger) svg,
body[data-color-mode="cream"] .ornate-btn:not(.ornate-btn-danger) span {
    color: #3e2723;
}

/* الإرسال: رملي عادي، وأغمق قليلا عند الكتابة */
body[data-color-mode="cream"] .send-highlight,
body[data-color-mode="cream"] .send-highlight span,
body[data-color-mode="cream"] .send-highlight i {
    color: #2e1b14;
}

body[data-color-mode="cream"] .send-highlight.active,
body[data-color-mode="cream"] .send-highlight.active span,
body[data-color-mode="cream"] .send-highlight.active i {
    background: #cbaf92;
    border-color: #b5834d;
    color: #2e1b14;
}

body[data-color-mode="cream"] .send-highlight.active span,
body[data-color-mode="cream"] .send-highlight.active i {
    background: transparent;
}


/* ===== إخفاء الخطوط الذهبية الأربعة في زوايا الشاشة (corner-ornament) — كل الثيمات ===== */
.corner-ornament {
    display: none;
}


/* ===== وردي أثيري + أزرق سماوي: وضوح أكبر لنص فقاعة Robaty (بدون تغيير أي لون) ===== */
body[data-color-mode="blush"] .bubble-dark-gold,
body[data-color-mode="sky"] .bubble-dark-gold {
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.60);
    -webkit-font-smoothing: antialiased;
}


/* ===== كريمي فاتح: نفس درجة وضوح نص فقاعة Robaty ===== */
body[data-color-mode="cream"] .bubble-dark-gold {
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.60);
    -webkit-font-smoothing: antialiased;
}


/* ===== خانة كتابة الرسالة: حجم الخط = حجم خط الفقاعات (14.4px) — كل الثيمات =====
   line-height بالبكسل (18.6px = 12px × 1.55 القديمة) باش حجم الخانة وارتفاعها ما يتبدلوش */
#messageInput {
    font-size: 14.4px;
    line-height: 18.6px;
}


/* ===== وردي أثيري: إطار أبيض على الأزرار =====
   آخر الملف باش يغلب `border-color: transparent !important` القديم.
   كيخدم غير فـ blush، الثيمات الأخرى ما كتتأثرش. */

/* الأزرار الأربعة (شوفي تصاوري ليوم + 3 سفلية، الإرسال داخل فيهم) */
body[data-color-mode="blush"] .gold-pill-btn,
body[data-color-mode="blush"] .ornate-action-btn {
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
}

/* زرا الإعدادات والسهم (زر المسح الأحمر ما كيتبدلش) */
body[data-color-mode="blush"] .ornate-btn:not(.ornate-btn-danger) {
    border: 2px solid rgba(255, 255, 255, 0.9);
}


/* ===== أزرق سماوي: إطار أبيض على الأزرار (نفس وردي أثيري) ===== */

/* الأزرار الأربعة (الإرسال داخل فيهم) */
body[data-color-mode="sky"] .gold-pill-btn,
body[data-color-mode="sky"] .ornate-action-btn {
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
}

/* زرا الإعدادات والسهم (زر المسح الأحمر ما كيتبدلش) */
body[data-color-mode="sky"] .ornate-btn:not(.ornate-btn-danger) {
    border: 2px solid rgba(255, 255, 255, 0.9);
}


/* ===== اللغات اللاتينية/السيريلية (fr, en, es, ru): خط أكبر — كل الثيمات =====
   الفقاعات + خانة الكتابة. العربية تبقى 14.4px بلا تغيير.
   :lang() كيقرا lang من أي عنصر أب (html أو body...)، وdir="ltr" احتياط.
   line-height ديال الخانة 20px باش ارتفاعها يبقى نفسو (42px). */
:is(:lang(fr), :lang(en), :lang(es), :lang(ru), [dir="ltr"]) :is(.bubble-dark-gold, .bubble-gold-border) {
    font-size: 16.5px;
    line-height: 1.55;
}

:is(:lang(fr), :lang(en), :lang(es), :lang(ru), [dir="ltr"]) #messageInput {
    font-size: 16.5px;
    line-height: 20px;
}


/* ===== أخضر ملكي + أزرق/بنفسجي (vivid): خانة الكتابة + زرا الإعدادات والسهم =====
   ألوان غامقة تتناسب مع الثيم (زر المسح الأحمر ما كيتبدلش). */

/* أخضر ملكي: أخضر غامق */
body[data-color-mode="emerald"] .gold-input {
    background: rgba(5, 26, 22, 0.95);
}

body[data-color-mode="emerald"] .ornate-btn:not(.ornate-btn-danger) {
    background: rgba(5, 26, 22, 0.95);
}

/* أزرق/بنفسجي: بنفسجي غامق (نهار وليل) */
body[data-color-mode="vivid"] .gold-input {
    background: rgba(23, 13, 25, 0.95);
}

body[data-color-mode="vivid"] .ornate-btn:not(.ornate-btn-danger) {
    background: rgba(23, 13, 25, 0.95);
}


/* ===== أخضر ملكي + أزرق/بنفسجي: بلا خلفية وراء الخانة والأزرار السفلية =====
   الشريط ولا شفاف، فتصير جزء من الخلفية العامة للشاشة. */
body[data-color-mode="emerald"] .bottom-controls,
body[data-color-mode="vivid"] .bottom-controls {
    background: transparent;
}



/* ===== الثيمات الفاتحة الثلاثة: هالة "التنفس" خلف صورة Robaty بلون الثيم =====
   الذهبي ما كيبانش على الخلفية الفاتحة، فكنستعملو لون غامق من الثيم وشفافية أقوى.
   نفس إيقاع الأنيميشن الأصلي (8.8s). اللون كيجي من --halo-rgb. */
@keyframes robaty-portrait-breath-light {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 34px 4px rgba(var(--halo-rgb), 0.60),
            inset 0 0 34px 4px rgba(var(--halo-rgb), 0.60);
    }
    25%, 75% {
        transform: scale(1.004);
        box-shadow:
            0 0 38px 5px rgba(var(--halo-rgb), 0.70),
            inset 0 0 38px 5px rgba(var(--halo-rgb), 0.70);
    }
    50% {
        transform: scale(1.009);
        box-shadow:
            0 0 46px 7px rgba(var(--halo-rgb), 0.85),
            inset 0 0 46px 7px rgba(var(--halo-rgb), 0.85);
    }
}

body[data-color-mode="blush"] .glowing-ring {
    --halo-rgb: 241, 105, 150;
    animation-name: robaty-portrait-breath-light;
}

body[data-color-mode="sky"] .glowing-ring {
    --halo-rgb: 23, 128, 232;
    animation-name: robaty-portrait-breath-light;
}

body[data-color-mode="cream"] .glowing-ring {
    --halo-rgb: 176, 112, 40;
    animation-name: robaty-portrait-breath-light;
}

@media (prefers-reduced-motion: reduce) {
    body[data-color-mode="blush"] .glowing-ring,
    body[data-color-mode="sky"] .glowing-ring,
    body[data-color-mode="cream"] .glowing-ring {
        animation: none;
    }
}


/* ===== وردي أثيري + أزرق سماوي: إطار خانة الكتابة (1px) بلون زر "إرسال" قبل الكتابة =====
   زر الإرسال المطفأ = لون الزر بشفافية 0.7 (#e8175d وردي / #1780e8 أزرق). */
body[data-color-mode="blush"] .gold-input {
    border-color: rgba(232, 23, 93, 0.7);
}

body[data-color-mode="sky"] .gold-input {
    border-color: rgba(23, 128, 232, 0.7);
}


/* ===== وردي أثيري + أزرق سماوي: إطار خانة الكتابة 2px =====
   الحشو العمودي نقص بـ1px باش ارتفاع الخانة يبقى هو هو. */
body[data-color-mode="blush"] .gold-input,
body[data-color-mode="sky"] .gold-input {
    border-width: 2px;
    padding-top: 9px;
    padding-bottom: 9px;
}


/* ===== تأثير الضغط على الأزرار: أبيض + بنفس شكل الزر (دائري) =====
   المستطيل الأزرق الفاتح هو تظليل اللمس الافتراضي ديال أندرويد
   (tap highlight)، كنحيدوه ونعوضوه بطبقة بيضاء شفافة كتتبع border-radius
   ديال الزر (كبسولة/دائرة). الأزرار: الأربعة + الإعدادات + السهم + المسح. */
.ornate-btn,
.ornate-action-btn,
.gold-pill-btn {
    -webkit-tap-highlight-color: transparent;
}

/* الثيمات الغامقة (ذهبي، أخضر ملكي، أزرق/بنفسجي): 10% */
.ornate-btn:active,
.ornate-action-btn:active,
.gold-pill-btn:active {
    background-image: linear-gradient(rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.10)) !important;
}

/* الثيمات الفاتحة (وردي أثيري، أزرق سماوي، كريمي): 20% */
:is(body[data-color-mode="blush"], body[data-color-mode="sky"], body[data-color-mode="cream"]) .ornate-btn:active,
:is(body[data-color-mode="blush"], body[data-color-mode="sky"], body[data-color-mode="cream"]) .ornate-action-btn:active,
:is(body[data-color-mode="blush"], body[data-color-mode="sky"], body[data-color-mode="cream"]) .gold-pill-btn:active {
    background-image: linear-gradient(rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20)) !important;
}


/* ==========================================================================
   PORTRAIT — صورة Robaty بدون خلفية (شفافة) فوق لون الشاشة نفسه
   - الدائرة: كتبقى حلقة ذهبية/ملونة رقيقة، وداخلها شفاف (كيبان لون الشاشة
     الحقيقي بالضبط، فلا تباين بين الصورة والشاشة، فكل الثيمات الستة).
   - الحلقة كتترسم بـ::before (قناع)، بنفس تدرجات الثيمات القديمة.
   - الصورة مكبّرة شوية (≈4.4%) باش الدائرة تلمس الخميسة من تحت، ويكبر
     الوجه وينقص ظهور الأكتاف.
   ========================================================================== */

.glowing-ring,
body[data-color-mode] .glowing-ring {
    background: none;
    position: relative;
}

.glowing-ring {
    --ring-gradient: linear-gradient(135deg, #ffc875, #805018);
}

body[data-color-mode="blush"] .glowing-ring {
    --ring-gradient: linear-gradient(135deg, #ffffff, #ffc2d6);
}

body[data-color-mode="sky"] .glowing-ring {
    --ring-gradient: linear-gradient(135deg, #ffffff, #c2e0ff);
}

body[data-color-mode="cream"] .glowing-ring {
    --ring-gradient: linear-gradient(135deg, #e8caa1 0%, #dbb789 55%, #c79d73 100%);
}

.glowing-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 4px;
    background: var(--ring-gradient);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 3;
}

.avatar-inner {
    background: none;
}

.avatar-img {
    /* قيس الخميسة: أسفلها عند ≈96% من ارتفاع الصورة، وقمة الشعر عند ≈2.9%.
       scale(1.058) + translateY(-2.1%) → الدائرة تمر محاذية للخميسة من تحت
       (≈99.5% من القطر) وقمة الشعر تبقى داخل الدائرة بدون قص. */
    transform: translateY(-0.8%) scale(1.037);   /* كان translateY(-2.1%) scale(1.058): تصغير 2% + فراغ متساوي فوق وتحت (~1.26% من الارتفاع لكل جهة) */
    transform-origin: 50% 0;
}

/* الصورة المصغّرة جنب اسم Robaty: الوجه كامل (من الشعر حتى حلقات الرقبة)،
   بدون خلفية */
.mini-avatar {
    width: 26px;
    height: 26px;
    background: none;
}


/* ==========================================================================
   VOICE CHIP — شارة الرسالة الصوتية القديمة (بدل النص "[رسالة صوتية]")
   ========================================================================== */

.bubble-gold-border.voice-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
}

.voice-chip-mic {
    color: var(--gold-bright);
    flex-shrink: 0;
}

.voice-chip-wave {
    color: var(--gold-bright);
    opacity: 0.7;
    flex-shrink: 0;
}

.voice-chip-label {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}