/* =====================================================
   LUMINAE VOICE MODE
===================================================== */

/* Voice Trigger Button */

.luminae-voice-trigger{

    background:transparent !important;
    color:#E7D3A4 !important;

    border:none !important;

    width:42px;
    height:42px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    margin-right:8px;

    transition:all .25s ease;


}

.luminae-voice-trigger svg{
    width:22px;
    height:22px;
    stroke:currentColor;
}

.luminae-voice-trigger:hover{

    background:transparent !important;

    transform:translateY(-2px);

    box-shadow:
        0 12px 30px rgba(103,68,0,.45);

}

.luminae-voice-trigger:active{

    transform:scale(.95);

}


/* =====================================================
   FULLSCREEN OVERLAY
===================================================== */

.luminae-voice-overlay{

    position:fixed;

    inset:0;

    z-index:999999;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    background:
    radial-gradient(circle at top,#22342C 0%,#16261F 40%,#0F1C17 100%);

    transition:opacity .3s ease;

}

.luminae-voice-overlay.hidden{

    opacity:0;

    pointer-events:none;

    display:none;

}


/* =====================================================
   CONTENT
===================================================== */

.luminae-voice-content{

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    align-items:center;

    padding:60px 20px;

}


/* =====================================================
   ORB
===================================================== */

.luminae-orb-container{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

}

.luminae-orb{

    width:220px;

    height:220px;

    border-radius:50%;

    background:
    radial-gradient(circle at 30% 30%,
    #F4E6C1,
    #D8B46A 35%,
    #8C6120 75%,
    #674400);

    box-shadow:
        0 0 70px rgba(201,164,92,.35),
        inset 0 0 35px rgba(255,255,255,.12);

    transition:.35s;

}


/* LISTENING */

.luminae-orb.listening{

    animation:luminaePulse 2s infinite ease-in-out;

}


/* THINKING */

.luminae-orb.thinking{

    animation:luminaeThinking 2s linear infinite;

}


/* SPEAKING */

.luminae-orb.speaking{

    animation:luminaeSpeaking .8s ease-in-out infinite alternate;

}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes luminaePulse{

0%{

transform:scale(.95);

box-shadow:
0 0 40px rgba(201,164,92,.25);

}

50%{

transform:scale(1.05);

box-shadow:
0 0 100px rgba(201,164,92,.55);

}

100%{

transform:scale(.95);

box-shadow:
0 0 40px rgba(201,164,92,.25);

}

}


@keyframes luminaeThinking{

0%{

transform:rotate(0deg) scale(1);

}

50%{

transform:rotate(180deg) scale(1.08);

}

100%{

transform:rotate(360deg) scale(1);

}

}


@keyframes luminaeSpeaking{

0%{

transform:scale(1);

filter:brightness(100%);

}

100%{

transform:scale(1.12);

filter:brightness(115%);

}

}


/* =====================================================
   STATUS TEXT
===================================================== */

.luminae-status{

    color:#E7D3A4;

    font-size:18px;

    font-weight:500;

    letter-spacing:.5px;

    margin-top:40px;

    opacity:.95;

}

/* ============================
   Premium Close Button
============================ */

.luminae-close-btn{

    appearance:none !important;
    -webkit-appearance:none !important;

    width:64px;
    height:64px;

    border-radius:50%;

    border:1px solid rgba(201,164,92,.18) !important;

    background:#16261F !important;

    color:#E7D3A4 !important;

    outline:none !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.25);

    transition:.25s ease;

    cursor:pointer;

    -webkit-tap-highlight-color: transparent;

}

.luminae-close-btn:hover{

    background:#674400 !important;

    border-color:#C9A45C !important;

    color:#fff !important;

    box-shadow:
        0 0 20px rgba(201,164,92,.35);

    transform:scale(1.08);

}

.luminae-close-btn:focus,
.luminae-close-btn:focus-visible,
.luminae-close-btn:active{

    background:#674400 !important;

    border-color:#C9A45C !important;

    color:#fff !important;

    outline:none !important;

    box-shadow:
        0 0 20px rgba(201,164,92,.35) !important;

}




/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px){

.luminae-orb{

width:170px;

height:170px;

}

.luminae-status{

font-size:16px;

}

.luminae-close-btn{

width:58px;

height:58px;

}

}