/* Lexy companion screen (live-call sync overlay) styles.
   Extracted from includes/companion-screen.cfm — renderer-agnostic
   (gm-* default, lw-* via widget). No per-request values. */
/* =============================================
   Dark state for calling & intro
   Background prefers --lc-color, then --gm-color, then fallback.
   JS may also set background inline as a final override.
   Negative margins differ per surface — gm-modal-body has 28px 24px
   padding; widget lw-state-body has 48px 24px padding.
   ============================================= */
.lc-dark-state {
    background: var(--lc-color, var(--gm-color, #8D75E6));
    border-radius: 16px;
    padding: 24px;
    min-height: 380px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* Game modal: state lives inside gm-modal-body (padding 28px 24px 24px) */
.gm-modal-box .lc-dark-state { margin: -28px -24px; }
/* Widget: state lives directly inside lw-modal-box; lw-state-body has padding 48px 24px */
.lw-modal-box .lc-dark-state { margin: -48px -24px; }
.lc-dark-state .gm-state-title,
.lc-dark-state .lw-state-title { color: #fff; }
.lc-dark-state .gm-state-sub,
.lc-dark-state .lw-state-sub { color: rgba(255,255,255,0.6); }
.lc-dark-state .gm-spinner,
.lc-dark-state .lw-spinner {
    border-color: rgba(255,255,255,0.2);
    border-top-color: #fff;
}
/* When dark state is active, make close X white */
.lc-dark-active .gm-modal-x,
.lc-dark-active .lw-modal-x { color: rgba(255,255,255,0.7); }
.lc-dark-active .gm-modal-x:hover,
.lc-dark-active .lw-modal-x:hover { color: #fff; }

/* Intro wave bars */
.lc-intro-waves { display: flex; gap: 4px; align-items: flex-end; height: 32px; justify-content: center; margin-bottom: 16px; }
.lc-wave-bar {
    width: 4px; background: rgba(255,255,255,0.8); border-radius: 2px;
    animation: lcWave 1s ease-in-out infinite;
}
.lc-wave-bar:nth-child(1) { height: 12px; animation-delay: 0s; }
.lc-wave-bar:nth-child(2) { height: 20px; animation-delay: 0.15s; }
.lc-wave-bar:nth-child(3) { height: 16px; animation-delay: 0.3s; }
@keyframes lcWave {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.8); }
}

/* =============================================
   Click protection — disable answers in call mode
   Targets both gm- and lw- answer buttons
   ============================================= */
.lc-call-active .gm-answer-btn,
.lc-call-active .lw-answer-btn {
    pointer-events: none !important;
    cursor: default !important;
}
.lc-call-active.lc-listening .gm-answer-btn,
.lc-call-active.lc-listening .lw-answer-btn {
    animation: lcBreathe 2s ease-in-out infinite;
}
@keyframes lcBreathe {
    0%, 100% { border-color: rgba(255,255,255,0.2); }
    50% { border-color: rgba(255,255,255,0.5); }
}
.lc-call-active.lc-processing .gm-answer-btn,
.lc-call-active.lc-processing .lw-answer-btn { animation: none; }

/* =============================================
   Status bar — tighter padding
   ============================================= */
.lc-status-bar {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 0 0; font-size: 13px; color: rgba(255,255,255,0.6);
}
.lc-status-bar svg { flex-shrink: 0; }

/* Audio spectrum animation for listening */
.lc-spectrum { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.lc-spectrum-bar {
    width: 3px; border-radius: 1px; background: rgba(255,255,255,0.6);
    animation: lcSpec 0.8s ease-in-out infinite alternate;
}
.lc-spectrum-bar:nth-child(1) { height: 6px; animation-delay: 0s; }
.lc-spectrum-bar:nth-child(2) { height: 12px; animation-delay: 0.1s; }
.lc-spectrum-bar:nth-child(3) { height: 8px; animation-delay: 0.2s; }
.lc-spectrum-bar:nth-child(4) { height: 14px; animation-delay: 0.3s; }
.lc-spectrum-bar:nth-child(5) { height: 6px; animation-delay: 0.15s; }
@keyframes lcSpec {
    0% { transform: scaleY(0.4); }
    100% { transform: scaleY(1.4); }
}

/* Processing spinner */
@keyframes lcSpin { to { transform: rotate(360deg); } }
.lc-spin-path { animation: lcSpin 1s linear infinite; transform-origin: 12px 12px; }
.lc-dots-anim span { display: inline-block; animation: lcDotBounce 1.2s ease-in-out infinite; }
.lc-dots-anim span:nth-child(2) { animation-delay: 0.2s; }
.lc-dots-anim span:nth-child(3) { animation-delay: 0.4s; }
@keyframes lcDotBounce {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-3px); }
}

/* Tighter layout when status bar present (both surfaces) */
.lc-call-active .gm-question-container,
.lc-call-active .lw-question-container { gap: 16px; }
.lc-call-active .gm-question-badge,
.lc-call-active .lw-question-badge { font-size: 13px; padding: 6px 16px; }
.lc-call-active .gm-question-text,
.lc-call-active .lw-question-text { font-size: clamp(20px, 3.5vw, 26px); }
.lc-call-active .gm-answers-container,
.lc-call-active .lw-answers-container { margin-top: 8px; gap: 10px; }

/* Live call pill */
#lcLiveCallPill {
    display: none; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: #1a1a2e; color: #fff; padding: 10px 20px; border-radius: 24px;
    cursor: pointer; z-index: 10002; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 500;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1);
}
.lc-pill-dot {
    width: 8px; height: 8px; background: #4ade80; border-radius: 50%;
    animation: lcPulse 1.5s ease-in-out infinite;
}
#lcPillClose {
    margin-left: 4px; font-size: 18px; line-height: 1; opacity: 0.5;
    cursor: pointer; padding: 0 2px;
}
#lcPillClose:hover { opacity: 1; }
@keyframes lcPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}