/**
 * Magic Transcript Layer (loaded after msw-style)
 *
 * Structure:
 *   1. Nav arrows (Megaswiper player only)
 *   2. Transcript trigger + preview strip
 *   3. Overlay typography + close (full transcript column → msw-shortcode-critical.css)
 *   4. Visibility / duplicate-content guards (!important only where the stack requires it)
 *   5. Teleported overlay (document.body) — in-slide shell: msw-shortcode-critical.css
 *
 * Intentional !important: duplicate WYSIWYG guards, [hidden] overlay, and teleported modal layout
 * (position/size/stacking/overflow) where Elementor beats long chains. Decoration (radius/shadow/padding)
 * stays without !important; teleported selector uses html body for extra specificity.
 */
html body .msw-unique-gato .msw-nav-next,
html body .msw-unique-gato .msw-nav-prev,
html body .msw-unique-gato .swiper-button-next,
html body .msw-unique-gato .swiper-button-prev,
html body .msw-unique-gato .gato-next,
html body .msw-unique-gato .gato-prev,
html body .msw-unique-gato .msw-nav-next:focus,
html body .msw-unique-gato .msw-nav-prev:focus,
html body .msw-unique-gato .swiper-button-next:focus,
html body .msw-unique-gato .swiper-button-prev:focus,
html body .msw-unique-gato .msw-nav-next:active,
html body .msw-unique-gato .msw-nav-prev:active,
html body .msw-unique-gato .swiper-button-next:active,
html body .msw-unique-gato .swiper-button-prev:active {
    outline: 0;
    border: 0;
    box-shadow: none;
    background-image: none;
}
html body .msw-unique-gato .swiper-button-next::after,
html body .msw-unique-gato .swiper-button-prev::after,
html body .msw-unique-gato .swiper-button-next::before,
html body .msw-unique-gato .swiper-button-prev::before {
    outline: none;
    border: none;
    box-shadow: none;
}

/* Nav chevrons: same as fraction pagination — msw_lang_hud_c1_final via --msw-hud-c1 on .swiper (script.js slideChange).
 * !important: some theme/transcript CSS sets a link pink (#c36) on these selectors. */
html body .msw-unique-gato .msw-nav-next,
html body .msw-unique-gato .msw-nav-prev,
html body .msw-unique-gato .swiper-button-next,
html body .msw-unique-gato .swiper-button-prev,
html body .msw-unique-gato .gato-next,
html body .msw-unique-gato .gato-prev {
    color: var(--msw-hud-c1, #000000) !important;
}

/* --- Transcript rules (scoped to player + container) --- */
html body .msw-unique-gato .msw-transcript-container {
    position: relative;
    margin-top: 0.25rem;
    overflow: visible;
    border: none;
    outline: none;
    z-index: 999999;
}

html body .msw-unique-gato .msw-transcript-container .msw-transcript-trigger {
    display: block;
    cursor: pointer;
    position: relative;
    z-index: 999999;
    font-size: 1.125rem;
    line-height: 1.4;
    /* msw_lang_text_s_c1 — full strength (no opacity dimming; preview must match main short text) */
    color: var(--msw-text-s-c1, #333);
    padding: 0.4rem 0.6rem;
    -webkit-tap-highlight-color: transparent;
    border: none;
    outline: none;
}

html body .msw-unique-gato .msw-transcript-container .msw-transcript-preview {
    font-style: italic;
    font-size: 1.125rem;
    color: var(--msw-text-s-c1, #333);
}

@media (min-width: 768px) {
    html body .msw-unique-gato .swiper-slide > .msw-transcript-container {
        align-self: stretch;
        width: 100%;
        max-width: min(100%, 48rem);
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    html body .msw-unique-gato .msw-transcript-container .msw-transcript-trigger {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        min-height: 2.8em;
    }
}

/* --- Overlay text color (in-slide + teleported) --- */
html body .msw-unique-gato .msw-transcript-container .msw-transcript-overlay,
html body .msw-transcript-overlay .msw-transcript-full,
html body .msw-transcript-overlay .msw-transcript-full p {
    color: var(--msw-text-s-c1, #333);
    font-family: "Noto Sans", sans-serif;
    font-size: 1.125rem;
    line-height: 1.4;
}

/*
 * Close control: only when modal is shown. Inset from top-right so the hit target stays inside
 * the overlay padding box — negative margin previously pulled past overflow:hidden and clipped the icon.
 */
html body .msw-transcript-overlay.msw-transcript-visible .msw-transcript-close,
html body .msw-unique-gato .msw-transcript-container.is-open .msw-transcript-overlay .msw-transcript-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    left: auto;
    z-index: 2;
    margin: 0;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #787878;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
html body .msw-transcript-overlay.msw-transcript-visible .msw-transcript-close i,
html body .msw-unique-gato .msw-transcript-container.is-open .msw-transcript-overlay .msw-transcript-close i {
    font-size: 1.75rem;
}
html body .msw-transcript-overlay.msw-transcript-visible .msw-transcript-close:hover,
html body .msw-transcript-overlay.msw-transcript-visible .msw-transcript-close:focus-visible,
html body .msw-unique-gato .msw-transcript-container.is-open .msw-transcript-overlay .msw-transcript-close:hover,
html body .msw-unique-gato .msw-transcript-container.is-open .msw-transcript-overlay .msw-transcript-close:focus-visible {
    opacity: 0.8;
}

html body .msw-unique-gato .msw-transcript-container.is-open .msw-transcript-trigger {
    opacity: 0;
    pointer-events: none;
}

/* Full transcript column (wrap, pre-wrap): merged selectors live in msw-shortcode-critical.css */

/*
 * Some caches / theme injections place preview + full inside the overlay. Megaswiper keeps preview
 * only in .msw-transcript-trigger. Never show duplicate preview or full WYSIWYG until the user opens.
 */
html body .msw-transcript-overlay .msw-transcript-preview {
    display: none !important;
}

html body .msw-unique-gato .msw-transcript-container:not(.is-open) .msw-transcript-overlay .msw-transcript-full,
html body .msw-unique-gato .msw-transcript-container:not(.is-open) .msw-transcript-overlay .msw-transcript-inner,
html body .msw-unique-gato .msw-transcript-container:not(.is-open) .msw-transcript-overlay .msw-transcript-inner .msw-transcript-full {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
}

html body > .msw-transcript-overlay:not(.msw-transcript-visible) .msw-transcript-full,
html body > .msw-transcript-overlay:not(.msw-transcript-visible) .msw-transcript-inner .msw-transcript-full {
    display: none !important;
}

/* Closed overlay: HTML hidden + author rule (Used CSS may drop .msw-unique-gato chain for body-teleported nodes) */
html body .msw-transcript-overlay[hidden] {
    display: none !important;
}

/* In-slide transcript overlay shell (no !important) — superseded by .swiper-slide … rules in msw-shortcode-critical.css */

/*
 * TELEPORTED OVERLAY (appendChild to document.body) — must NOT depend on .msw-unique-gato.
 * html body … raises specificity so layout can win Elementor without !important on decoration.
 * Keep !important on box model / stacking / overflow where themes commonly override.
 */
html body .msw-transcript-overlay.msw-transcript-visible {
    position: fixed !important;
    top: 15% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 92vw !important;
    max-width: min(92vw, 800px) !important;
    height: auto !important;
    max-height: 55vh !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 999999999 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: #ffffff !important;
    border-radius: 20px;
    padding: 0.75rem 0.75rem 1rem 1rem;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
    overflow: hidden auto !important;
}

@media (max-width: 767px) {
    html body .msw-transcript-overlay.msw-transcript-visible {
        top: 18%;
    }
}