/**
 * css/ft-live-desktop.css — Live.php Desktop-Layout (>= 992px)
 * @since 2026-05-09 (Wave 57)
 *
 * Stellt sicher dass alle Live-Stream-Features (Coin-HUD, Earnings-HUD,
 * Streamer-Sidebar, Reactions-Bar, Gift-Shop-Modal, Animationen) auch
 * auf Desktop-Bildschirmen sichtbar und funktional sind.
 */

@media (min-width: 992px) {
    /* === Wallet-aehnliche Layout-Reset auf Desktop === */
    body.ft-page-live .container-fluid > .main-wrapper {
        max-width: 100%;
        margin: 0 auto;
    }

    /* Video bleibt zentral, full-width */
    body.ft-page-live .video-section {
        position: relative;
        max-width: 100%;
    }

    /* === COIN-HUD oben rechts (Viewer) === */
    body.ft-page-live .ft-coin-hud {
        position: fixed !important;
        top: calc(var(--navbar-height, 60px) + 20px) !important;
        right: 24px !important;
        z-index: 40 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px;
        padding: 0.55rem 1rem 0.55rem 0.85rem;
        background: linear-gradient(135deg, rgba(255, 170, 0, 0.95) 0%, rgba(255, 119, 0, 0.95) 100%);
        border: 1px solid rgba(255, 255, 255, 0.30);
        border-radius: 999px;
        color: #fff;
        font-weight: 800;
        font-size: 0.95rem;
        cursor: pointer;
        box-shadow:
            0 6px 20px rgba(255, 119, 0, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.30);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    body.ft-page-live .ft-coin-hud:hover {
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 8px 26px rgba(255, 119, 0, 0.85);
    }
    body.ft-page-live .ft-coin-hud i.fa-coins {
        font-size: 1rem;
    }
    body.ft-page-live .ft-coin-hud-pct {
        margin-left: 4px;
        background: rgba(255, 255, 255, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.40);
        border-radius: 999px;
        padding: 0.20rem 0.55rem;
        font-size: 0.72rem;
        font-weight: 800;
        color: #fff;
    }

    /* === EARNINGS-HUD oben rechts (Streamer) === */
    body.ft-page-live .ft-earnings-hud {
        position: fixed !important;
        top: calc(var(--navbar-height, 60px) + 20px) !important;
        right: 24px !important;
        z-index: 40 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px;
        padding: 0.55rem 0.85rem 0.55rem 1rem;
        background: linear-gradient(135deg, rgba(0, 200, 100, 0.95) 0%, rgba(0, 160, 198, 0.95) 100%);
        border: 1px solid rgba(255, 255, 255, 0.30);
        border-radius: 999px;
        color: #fff;
        font-weight: 800;
        font-size: 0.95rem;
        cursor: pointer;
        box-shadow:
            0 6px 20px rgba(0, 160, 198, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.30);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    body.ft-page-live .ft-earnings-hud:hover {
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 8px 26px rgba(0, 160, 198, 0.85);
    }
    body.ft-page-live .ft-earnings-pct {
        background: rgba(255, 255, 255, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.40);
        border-radius: 999px;
        padding: 0.20rem 0.55rem;
        font-size: 0.72rem;
        font-weight: 800;
    }

    /* === REACTIONS-BAR rechts vertikal (Viewer) === */
    body.ft-page-live .reactions-bar {
        position: fixed !important;
        right: 24px !important;
        bottom: 100px !important;
        z-index: 35 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px;
        align-items: center;
        background: transparent !important;
        padding: 0;
    }
    body.ft-page-live .reactions-bar > button {
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        background: rgba(0, 0, 0, 0.55) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
        font-size: 1.6rem !important;
        cursor: pointer;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow:
            0 4px 14px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
        transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    body.ft-page-live .reactions-bar > button:hover {
        transform: scale(1.10);
        background: rgba(255, 255, 255, 0.10) !important;
        border-color: rgba(255, 255, 255, 0.30) !important;
    }
    body.ft-page-live .reactions-bar > button:active {
        transform: scale(0.95);
    }
    body.ft-page-live .reactions-bar .like-btn {
        background: linear-gradient(135deg, rgba(255, 59, 92, 0.95) 0%, rgba(255, 23, 68, 0.95) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.30) !important;
        box-shadow: 0 4px 16px rgba(255, 59, 92, 0.55) !important;
    }
    body.ft-page-live .reactions-bar .count {
        color: #fff;
        background: rgba(0, 0, 0, 0.55);
        border-radius: 999px;
        padding: 0.18rem 0.6rem;
        font-size: 0.78rem;
        font-weight: 700;
        border: 1px solid rgba(255, 255, 255, 0.10);
        margin-top: -10px;
    }

    /* === GIFT-QUICK-BTN unten links (Viewer) === */
    body.ft-page-live .ft-gift-quick-btn {
        position: fixed !important;
        bottom: 28px !important;
        left: 24px !important;
        z-index: 60;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, #ffaa00 0%, #ff7700 100%);
        border: 2px solid rgba(255, 255, 255, 0.30);
        color: #fff;
        font-size: 1.5rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
            0 6px 22px rgba(255, 119, 0, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.30);
        transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        animation: ftGiftQuickPulseDesktop 2.6s ease-in-out infinite;
    }
    @keyframes ftGiftQuickPulseDesktop {
        0%, 100% { transform: scale(1); box-shadow: 0 6px 22px rgba(255, 119, 0, 0.55); }
        50% { transform: scale(1.10); box-shadow: 0 10px 30px rgba(255, 119, 0, 0.85); }
    }
    body.ft-page-live .ft-gift-quick-btn:hover {
        transform: scale(1.12) rotate(8deg);
        animation-play-state: paused;
    }
    body.ft-page-live .ft-gift-quick-btn:active {
        transform: scale(0.95);
    }

    /* === CHAT-SECTION unten zentriert (Viewer + Streamer) === */
    body.ft-page-live .chat-section {
        position: fixed !important;
        bottom: 92px !important;
        left: 100px !important;  /* Platz fuer Gift-Quick-Btn */
        right: 110px !important; /* Platz fuer Reactions-Bar */
        max-width: none !important;
        max-height: 280px !important;
        z-index: 30;
        background: transparent !important;
        border: none !important;
        pointer-events: none !important;
    }
    body.ft-page-live .chat-section #chatBox,
    body.ft-page-live .chat-section [id*="message"] {
        pointer-events: auto !important;
    }
    body.ft-page-live #chatInput,
    body.ft-page-live .chat-section input[type="text"] {
        position: fixed !important;
        bottom: 28px !important;
        left: 100px !important;
        right: 110px !important;
        background: rgba(0, 0, 0, 0.65) !important;
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
        color: #fff !important;
        border-radius: 999px !important;
        padding: 0.85rem 1.4rem !important;
        font-size: 0.95rem !important;
        height: 48px !important;
        z-index: 60 !important;
    }
    body.ft-page-live #chatSendBtn {
        position: fixed !important;
        bottom: 28px !important;
        right: 100px !important;
        width: 48px !important;
        height: 48px !important;
        z-index: 60 !important;
    }

    /* === STREAMER-SIDEBAR rechts ausklappbar === */
    body.ft-page-live #streamerControls {
        width: 100px !important;
        padding: 22px 14px !important;
        gap: 16px !important;
    }
    body.ft-page-live #streamerControls > button {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.25rem !important;
    }
    body.ft-page-live #streamerControls > button i {
        font-size: 1.3rem !important;
    }
    body.ft-page-live.ftLiveSideOpen .ft-stream-handle {
        right: 110px !important;  /* Sidebar 100px + 10px Margin */
    }
    body.ft-page-live #streamerControls::before {
        font-size: 0.62rem !important;
        top: 8px !important;
    }

    /* === GIFT-SHOP MODAL — center auf Desktop === */
    body.ft-page-live .ft-gift-shop {
        align-items: center !important;
    }
    body.ft-page-live .ft-gift-shop-card {
        max-width: 540px !important;
        max-height: 80vh !important;
        border-radius: 28px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    }
    body.ft-page-live .ft-gift-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
        gap: 12px !important;
    }
    body.ft-page-live .ft-gift-emoji {
        font-size: 2.4rem !important;
    }
    body.ft-page-live .ft-gift-item {
        padding: 0.85rem 0.5rem !important;
    }

    /* === EARNINGS-MODAL Desktop === */
    body.ft-page-live #earningsModal .ft-gift-shop-card {
        max-width: 580px !important;
    }
    body.ft-page-live .ft-earnings-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
    body.ft-page-live .ft-earnings-stat.ft-earnings-main {
        grid-column: 1 / -1 !important;
    }

    /* === Sidebar-Handle Desktop subtiler === */
    body.ft-page-live .ft-stream-handle {
        width: 28px !important;
        height: 80px !important;
        font-size: 0.95rem !important;
    }

    /* === Stream-Timer + Top-Pills Desktop === */
    body.ft-page-live .stream-timer,
    body.ft-page-live #streamTimer {
        top: calc(var(--navbar-height, 60px) + 70px) !important;
        left: 24px !important;
        font-size: 0.92rem !important;
        padding: 0.45rem 1rem !important;
    }
    body.ft-page-live > .container-fluid > .main-wrapper > .video-section > div[style*="top:12px"] {
        top: calc(var(--navbar-height, 60px) + 20px) !important;
        left: 24px !important;
        right: 220px !important; /* Platz fuer HUD */
    }

    /* === BUY-COINS PACKS Desktop: 3 Spalten === */
    body.ft-page-live .ft-coins-packages {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }
    body.ft-page-live .ft-coin-pack {
        padding: 1.2rem 0.8rem !important;
    }
    body.ft-page-live .ft-coin-pack-amount {
        font-size: 1.5rem !important;
    }

    /* === Invite-Modal Desktop === */
    body.ft-page-live #inviteModal {
        align-items: center !important;
    }
    body.ft-page-live #inviteModal > div {
        max-width: 540px !important;
        max-height: 80vh !important;
        border-radius: 28px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    }

    /* === Fullscreen-Animation Desktop: noch grosser === */
    body.ft-page-live .ft-gift-fx .fx-emoji {
        font-size: 12rem !important;
    }
    body.ft-page-live .ft-gift-fx.fx-dragon .fx-emoji {
        font-size: 20rem !important;
    }
    body.ft-page-live .ft-gift-fx.fx-galaxy .fx-emoji {
        font-size: 18rem !important;
    }
    body.ft-page-live .ft-gift-fx .fx-text {
        font-size: 1.25rem !important;
        padding: 0.65rem 1.4rem !important;
    }

    /* === Toast Desktop oben rechts === */
    body.ft-page-live .ft-toast {
        bottom: auto !important;
        top: calc(var(--navbar-height, 60px) + 80px) !important;
        right: 24px !important;
        left: auto !important;
        transform: translateY(-12px) !important;
    }
    body.ft-page-live .ft-toast.show {
        transform: translateY(0) !important;
    }

    /* === Reconnect-Toast Desktop === */
    body.ft-page-live .ft-reconnect-toast {
        top: calc(var(--navbar-height, 60px) + 130px) !important;
        font-size: 0.9rem !important;
    }
}

/* === XL Screens (>= 1400px): noch komfortabler === */
@media (min-width: 1400px) {
    body.ft-page-live .ft-coin-hud,
    body.ft-page-live .ft-earnings-hud {
        font-size: 1.05rem !important;
        padding: 0.65rem 1.1rem !important;
    }
    body.ft-page-live .reactions-bar > button {
        width: 64px !important;
        height: 64px !important;
        font-size: 1.8rem !important;
    }
    body.ft-page-live .ft-gift-quick-btn {
        width: 68px;
        height: 68px;
        font-size: 1.7rem;
    }
}