/* ============================================================================
   Listen Buddy interactive plugin embed
   ============================================================================
   Loads the full Listen Buddy + ATLE prototype inside an iframe under the
   "Explore Listen Buddy's analysis engine" section. Exact 1:1 replica of
   the plugin UI — themes, action bar, metering panel, analysis cards, ATLE
   pearl visualizer, status bar, all interactive.

   Source: /public/listen-buddy-plugin.html (copied from the prototype).

   Sizing strategy: the prototype's .plugin-frame is 960×640 by default
   (3:2). We give the iframe full container width + matching aspect-ratio
   so the plugin sits centered with no scrollbars or scaling artifacts.
   Below 760px the prototype's compact mode kicks in.
   ============================================================================ */

.lb-embed {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    border-radius: 18px;
    overflow: hidden;
    background: #0d0a14;        /* matches prototype body bg so any iframe edge is invisible */
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow:
        0 36px 72px -28px rgba(0, 0, 0, 0.7),
        0 22px 44px -20px rgba(168, 85, 247, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    isolation: isolate;
}

.lb-embed-frame {
    display: block;
    width: 100%;
    aspect-ratio: 960 / 640;    /* matches .plugin-frame default in prototype */
    border: 0;
    background: transparent;
    color-scheme: dark;          /* keep scrollbars dark even in light-mode browsers */
}

/* Below 760px the prototype switches to its own compact 530×720 mode,
   which is portrait. Adjust the aspect ratio so the iframe height
   accommodates it without horizontal scrolling. */
@media (max-width: 760px) {
    .lb-embed {
        border-radius: 12px;
    }
    .lb-embed-frame {
        aspect-ratio: 530 / 720;
        max-height: 86vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lb-embed-frame { transition: none; }
}