/* ==========================================
   TX PLAYER — Mobile Specific Overrides
   Pure Black & White Design System
   ========================================== */

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {

    /* ── Nuclear overflow kill: force ALL Elementor parents to respect mobile viewport ── */
    html, body,
    .elementor-section,
    .elementor-section-wrap,
    .elementor-container,
    .elementor-column,
    .elementor-column-wrap,
    .elementor-widget-wrap,
    .elementor-widget,
    .elementor-widget-container,
    .elementor-element,
    .e-con,
    .e-con-inner {
        overflow-x: clip !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    .tx-player-wrapper {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    .tx-player-wrapper html,
    .tx-player-wrapper body {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
        position: relative;
    }

    .tx-player-wrapper html.intro-active,
    .tx-player-wrapper body.intro-active,
    .tx-player-wrapper .tx-elementor-container.intro-active {
        pointer-events: none;
    }

    /* ── App Container: Zero padding so waveform can go edge-to-edge ── */
    .tx-player-wrapper .app {
        padding: 0 !important;
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* ── Main Layout: Column, zero padding ── */
    .tx-player-wrapper .main {
        flex-direction: column;
        align-items: center;
        gap: 40px;
        padding: 0 !important;
        overflow: visible !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* ==================================================
       SECTION 1: TURNTABLE (CAROUSEL)
       Keep all existing turntable behavior intact
       ================================================== */

    .tx-player-wrapper .carousel-section {
        width: 100% !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: visible !important;
        padding-top: 60px !important; /* Room for orbiting covers above turntable */
    }

    .tx-player-wrapper .carousel-container {
        position: relative;
        z-index: 110 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        min-height: auto !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding-top: 20px;
        overflow: visible !important;
    }

    .tx-player-wrapper .carousel {
        width: 500px !important;
        height: 500px !important;
        transform-origin: center top;
        margin: 0 auto !important;
        flex-shrink: 0 !important;
        transform: translateX(var(--intro-x, 0));
    }

    /* Phase 1: Pure fade-in centered */
    .tx-player-wrapper .carousel.intro-centered {
        transform: translate(var(--intro-x, 0), 0) scale(var(--tx-mobile-scale, 0.7)) translateZ(0) !important;
        transition: opacity 0.5s ease-out !important;
    }

    @keyframes rollCarouselInMobile {
        0% {
            transform: translate(var(--intro-x, 0), 0) scale(var(--tx-mobile-scale, 0.7)) translateZ(0);
        }
        100% {
            transform: translate(var(--intro-x, 0), 0) scale(var(--tx-mobile-scale, 0.7)) translateZ(0);
        }
    }

    /* Phase 2: Rise to final resting place */
    .tx-player-wrapper .carousel.intro-rolling {
        animation: rollCarouselInMobile 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
    }

    /* ── Playlist Mask ── */
    .tx-player-wrapper .playlist-mask {
        position: relative;
        top: auto;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
        height: auto;
        clip-path: none;
        overflow: visible !important;
        margin-top: -425px;
        display: flex;
        justify-content: center;
        z-index: 1 !important;
    }

    /* ── Playlist Panel: Antracite Chassis (Hardware Case) ── */
    .tx-player-wrapper .playlist-panel {
        position: relative;
        top: auto;
        left: 0;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: auto;
        border-top-left-radius: 50% 200px;
        border-top-right-radius: 50% 200px;
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
        padding: 420px 16px 20px 16px !important; /* Horizontal + bottom padding for chassis */
        background: #111617 !important; /* Antracite chassis — matching desktop */
        box-shadow: 0 -20px 40px rgba(0,0,0,0.15) !important;
        -webkit-mask-image: none;
        mask-image: none;
        overflow: visible !important;
        /* Mobile Intro Base */
        opacity: 0 !important;
        transform: translateY(120px) !important;
        transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    .tx-player-wrapper .playlist-panel.intro-revealed {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* ==================================================
       MOBILE HIDING: Everything except Turntable + Waveform
       ================================================== */

    .tx-player-wrapper .eq-mixer-toggle,
    .tx-player-wrapper .tx-eq-panel,
    .tx-player-wrapper .popular-header-row,
    .tx-player-wrapper .catalog-row,
    .tx-player-wrapper .remaining-tracks-wrapper,
    .tx-player-wrapper .playlist-list,
    .tx-player-wrapper .bottom-tracks-section,
    .tx-player-wrapper .header-actions,
    .tx-player-wrapper .tx-visualizer-container,
    .tx-player-wrapper .playlist-section-title,
    .tx-player-wrapper .playlist-section-desc,
    .tx-player-wrapper .description-overlay {
        display: none !important;
    }

    /* ── Hide tonearm on mobile (causes horizontal overflow) ── */
    .tx-player-wrapper .tonearm {
        display: none !important;
    }

    /* ==================================================
       SECTION 2: MAIN WAVEFORM — Edge-to-Edge
       ================================================== */

    .tx-player-wrapper .now-playing-bar {
        display: block !important;
        /* Black screen embedded in antracite chassis */
        position: relative !important;
        left: auto !important;
        right: auto !important;
        /* width: auto lets the block element naturally fill parent content area */
        width: auto !important;
        max-width: 100% !important;
        /* Explicit longhand margins — prevents desktop shorthand/longhand conflict */
        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        /* Explicit longhand padding — symmetric left/right */
        padding-top: 8px !important;
        padding-right: 12px !important;
        padding-bottom: 6px !important;
        padding-left: 12px !important;
        box-sizing: border-box !important;
        background: #000000 !important;
        border-radius: 6px !important;
        border: none !important;
        overflow: hidden !important;
        min-height: 80px !important;
        z-index: 10 !important;
    }

    .tx-player-wrapper .waveform-container {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        overflow: visible !important;
    }

    .tx-player-wrapper .waveform-wrapper {
        height: 60px !important;
        margin-bottom: 0px;
        position: relative !important;
        overflow: visible !important;
    }

    /* ==================================================
       MOBILE COMMENT SYSTEM
       ================================================== */

    .tx-player-wrapper .waveform-comments {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 100% !important;
        pointer-events: none !important;
        z-index: 100 !important;
        overflow: visible !important;
    }

    .tx-player-wrapper .comment-avatar {
        position: absolute !important;
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        border-radius: 50% !important;
        top: 65% !important;
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
        pointer-events: auto !important;
        z-index: 110 !important;
    }

    .tx-player-wrapper .comment-avatar img {
        width: 100% !important;
        height: 100% !important;
        border-radius: 50% !important;
        display: block !important;
        object-fit: cover !important;
    }

    /* ── Comment Tooltip: Opens to the side ── */
    .tx-player-wrapper .comment-tooltip {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) scale(0.8) !important;
        background: rgba(10, 10, 10, 0.98) !important;
        color: #fff !important;
        padding: 6px 14px !important;
        border-radius: 6px !important;
        font-size: 11px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 200 !important;
        border: 1px solid rgba(255,255,255,0.25) !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        width: max-content !important;
        max-width: 200px !important;
        height: auto !important;
        display: block !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
    }

    .tx-player-wrapper .comment-tooltip[data-side="right"] {
        left: calc(100% + 12px) !important;
        transform-origin: left center !important;
    }

    .tx-player-wrapper .comment-tooltip[data-side="left"] {
        right: calc(100% + 12px) !important;
        transform-origin: right center !important;
    }

    .tx-player-wrapper .comment-avatar.active {
        z-index: 9999 !important;
    }

    .tx-player-wrapper .comment-avatar.active .comment-tooltip {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(-50%) scale(1) !important;
    }

    .tx-player-wrapper .comment-tooltip-inner {
        display: block !important;
        text-align: left !important;
    }

    .tx-player-wrapper .comment-user {
        display: block !important;
        font-weight: 800 !important;
        color: #fff !important;
        font-size: 10px !important;
        text-transform: uppercase !important;
        margin-bottom: 4px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        padding-bottom: 2px !important;
    }

    .tx-player-wrapper .comment-body {
        display: block !important;
        font-weight: 400 !important;
        color: #eee !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        line-height: 1.4 !important;
        font-size: 11px !important;
    }

    /* ── Block huge emoji bug ── */
    .tx-player-wrapper .comment-body img,
    .tx-player-wrapper .comment-body .emoji,
    .tx-player-wrapper .comment-body span[style*="background-image"] {
        width: 20px !important;
        height: 20px !important;
        display: inline-block !important;
        vertical-align: middle !important;
        margin: 2px !important;
    }

    /* ==================================================
       OTHER MOBILE OVERRIDES
       ================================================== */

    .tx-player-wrapper .time-row {
        position: relative;
        z-index: 10;
        margin-top: -20px;
        margin-bottom: 12px;
    }

    .tx-player-wrapper .arrow-controls {
        position: absolute;
        bottom: 0px;
        left: 50%;
        margin-top: 0;
        margin-bottom: 0;
        z-index: 999 !important;
        pointer-events: auto !important;
    }

    .tx-player-wrapper #prevBtn,
    .tx-player-wrapper #nextBtn {
        color: var(--tx-black);
    }

    /* ── Vinyl Record Mobile Intro ── */
    .tx-player-wrapper .platter-base.intro-centered,
    .tx-player-wrapper .vinyl-record.intro-centered {
        transform: translateZ(0) !important;
    }

    .tx-player-wrapper .platter-base.intro-rolling,
    .tx-player-wrapper .vinyl-record.intro-rolling {
        animation: none !important;
    }

    @keyframes vinylFlyInMobile {
        0% {
            opacity: 0;
            transform: translate3d(0, 1200px, 0) rotate(0deg) scale(0.4);
        }
        100% {
            opacity: 1;
            transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
        }
    }

    .tx-player-wrapper .vinyl-record {
        transition: opacity 0.4s ease-out !important;
        right: 10px !important;
        left: 10px !important;
    }

    .tx-player-wrapper .vinyl-record.fly-in {
        animation: vinylFlyInMobile 1.6s cubic-bezier(0.33, 1, 0.68, 1) forwards !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
        will-change: transform, opacity !important;
        z-index: 12 !important;
    }

    /* ── Bottom tracks section ── */
    .tx-player-wrapper .bottom-tracks-section {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        background: transparent;
        padding: 0 12px 40px 12px;
        z-index: 1;
    }
}

/* ---------- 768px Breakpoint ---------- */
@media (max-width: 768px) {
    .tx-player-wrapper .remaining-tracks-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------- 480px Breakpoint ---------- */
@media (max-width: 480px) {
    .tx-player-wrapper .app {
        padding: 0 !important;
    }

    .tx-player-wrapper .main {
        gap: 20px;
        padding-bottom: 40px;
    }

    .tx-player-wrapper .floating-volume {
        position: relative;
    }

    .tx-player-wrapper .artwork-container {
        width: 180px;
        height: 180px;
    }

    .tx-player-wrapper .track-title {
        font-size: 17px;
    }

    /* Mobile Centered Play/Pause Button */
    .tx-player-wrapper .cover-play-btn {
        width: 38px !important;
        height: 38px !important;
        background: rgba(0, 0, 0, 0.7) !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }

    .tx-player-wrapper .cover-play-icon {
        width: 18px !important;
        height: 18px !important;
    }

    .tx-player-wrapper .arrow-controls {
        transform: translate(-50%, calc(50% + 60px)) scale(1.3);
    }

    .tx-player-wrapper .arrow-controls.intro-revealed {
        transform: translate(-50%, 50%) scale(1.3);
    }

    .tx-player-wrapper .controls-center {
        gap: 12px;
    }

    .tx-player-wrapper .ctrl-play {
        width: 48px;
        height: 48px;
    }

    .tx-player-wrapper .remaining-tracks-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 24px 16px;
    }
}