/* ================================================================
   CYBE AI RECEPTIONIST
   Replaces the homepage loader. Same footprint as the old loader
   dialog — small centered card, not full-screen. Flat neumorphic:
   inset surfaces only, no outer drop-shadows/glows, fully obeys
   [data-theme] tokens from style.css.
   ================================================================ */

body.loader-active { overflow: hidden; }

.cybe-recep-backdrop {
    position: fixed; inset: 0; z-index: 999996;
    background: rgba(0,0,10,0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    /* Hidden by default — JS only reveals this after the full page has
       loaded AND the 6-second invisible wait has elapsed. This prevents
       any flash-of-visible-then-hidden before boot() runs. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
.cybe-recep-backdrop.is-visible {
    visibility: visible;
    pointer-events: auto;
}

.cybe-recep-dialog {
    position: relative;
    width: clamp(270px, 90vw, 360px);
    /* Extra bottom padding scales with avatar size + offset so a large
       or lowered avatar never overlaps "Listening..." / hint text. */
    padding: 34px 24px calc(40px + var(--avatar-safe-pad, 0px));
    background: var(--surface);
    border: none;
    border-radius: 14px;
    /* Deep-intensity neumorphism — no outer drop-shadow/glow, only a
       heavier inset pair than the site-wide --neu-in token. */
    box-shadow:
        inset 8px 8px 20px var(--neu-dark),
        inset -8px -8px 20px var(--neu-light);
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    box-sizing: border-box;
    overflow: visible;
}

.cybe-recep-skip {
    position: absolute; top: 10px; right: 12px;
    background: var(--bg); border: none;
    color: var(--blue); font-size: 9px; font-weight: 700;
    font-family: var(--font-label);
    letter-spacing: 0.1em; text-transform: uppercase;
    line-height: 1; cursor: pointer;
    padding: 7px 12px; border-radius: 50px;
    z-index: 2;
    box-shadow:
        inset 3px 3px 8px var(--neu-dark),
        inset -3px -3px 8px var(--neu-light);
    transition: box-shadow .18s ease, transform .18s ease, color .18s ease;
}
.cybe-recep-skip:hover { color: var(--text); transform: translateY(-1px); }
.cybe-recep-skip:active {
    transform: scale(.96);
    box-shadow:
        inset 5px 5px 12px var(--neu-dark),
        inset -5px -5px 12px var(--neu-light);
}

.cybe-recep-label {
    position: relative; z-index: 1;
    font-family: var(--font-label);
    font-size: 9px; font-weight: 700; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--blue);
    opacity: 0.85;
}

.cybe-recep-text-wrap {
    position: relative; z-index: 1;
    width: 100%;
    min-height: 64px;
    display: flex; align-items: center; justify-content: center;
    padding: 12px 14px;
    background: var(--bg);
    border-radius: 10px;
    box-shadow:
        inset 6px 6px 14px var(--neu-dark),
        inset -6px -6px 14px var(--neu-light);
}

.cybe-recep-text {
    font-family: var(--font-body);
    font-size: 14px; line-height: 1.6;
    color: var(--text);
    text-align: center;
    margin: 0;
}

.cybe-recep-caret {
    display: inline-block;
    width: 2px; height: 14px;
    background: var(--blue);
    margin-left: 2px;
    vertical-align: -2px;
    animation: cybeRecepBlink 0.9s steps(1) infinite;
}
.cybe-recep-caret.done { display: none; }
@keyframes cybeRecepBlink { 50% { opacity: 0; } }

.cybe-recep-hints {
    position: relative; z-index: 1;
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center;
    width: 100%;
}

.cybe-recep-hint {
    font-family: var(--font-label);
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em;
    text-transform: none;
    padding: 8px 16px;
    background: var(--bg);
    color: var(--blue);
    border: none; border-radius: 50px;
    box-shadow:
        inset 4px 4px 10px var(--neu-dark),
        inset -4px -4px 10px var(--neu-light);
    cursor: pointer;
    transition: box-shadow .18s ease, transform .18s ease;
}
.cybe-recep-hint:hover { transform: translateY(-1px); }
.cybe-recep-hint:active {
    transform: scale(.97);
    box-shadow:
        inset 6px 6px 14px var(--neu-dark),
        inset -6px -6px 14px var(--neu-light);
}
.cybe-recep-hint--primary {
    color: var(--bg);
    background: var(--blue);
    box-shadow: none;
    font-weight: 700;
}
.cybe-recep-hint--primary:active { transform: scale(.97); opacity: .85; }

.cybe-recep-footer {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: 100%;
    margin-top: 2px;
}

.cybe-recep-mic {
    position: relative;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: none;
    background: var(--bg);
    box-shadow:
        inset 4px 4px 10px var(--neu-dark),
        inset -4px -4px 10px var(--neu-light);
    color: var(--blue);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease;
}
.cybe-recep-mic:active { transform: scale(.94); }
.cybe-recep-mic.is-listening {
    color: var(--blue);
    box-shadow:
        inset 6px 6px 14px var(--neu-dark),
        inset -6px -6px 14px var(--neu-light),
        0 0 0 3px rgba(0,0,255,.35);
}
.cybe-recep-mic.is-unsupported { opacity: 0.35; cursor: not-allowed; }

/* Visible "mic is listening" cue: an expanding ring pulses outward
   continuously so it's obvious at a glance the mic is live, not just a
   static color change. Two rings offset in time read as a heartbeat. */
.cybe-recep-mic.is-listening::before,
.cybe-recep-mic.is-listening::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(0,0,255,.55);
    animation: cybeRecepMicPulse 1.6s ease-out infinite;
    pointer-events: none;
}
.cybe-recep-mic.is-listening::after {
    animation-delay: .8s;
}
@keyframes cybeRecepMicPulse {
    0%   { transform: scale(1);   opacity: .85; }
    100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cybe-recep-mic.is-listening::before,
    .cybe-recep-mic.is-listening::after { animation: none; display: none; }
}

.cybe-recep-mic-hint {
    font-family: var(--font-body);
    font-size: 10px; color: var(--text-muted);
    text-align: center;
}

.cybe-recep-avatar {
    position: absolute;
    /* --avatar-offset: distance in px the avatar sits below the dialog's
       bottom edge. Negative moves it up into the card, positive pushes
       it further down. Set inline from the loader_avatar_offset setting. */
    bottom: calc(-18px - var(--avatar-offset, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 46px; height: 46px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg);
    box-shadow:
        inset 4px 4px 10px var(--neu-dark),
        inset -4px -4px 10px var(--neu-light);
    border: none;
    z-index: 2;
}

.cybe-recep-avatar.is-square {
    border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .cybe-recep-caret { animation: none; }
}