/* ============================================================
 * Video Player Widget (slice 3b)
 *
 * Two modes:
 *   .is-mini : 360 × 203 (16:9) glass card pinned bottom-right above
 *              the chat launcher.
 *   .is-full : centered modal with dark backdrop, ~80vw / 80vh,
 *              gentle scale-in animation.
 *
 * Both share the same glass shell + brand gradient border. Direct
 * file embeds render inside a styled <video>; YouTube/Vimeo render in
 * a themed <iframe>.
 * ============================================================ */

.em-video-widget {
    --emv-magenta:  #b608c9;
    --emv-blue:     #6ec1e4;
    --emv-bg:       rgba(15, 20, 32, 0.92);
    --emv-glass:    rgba(255, 255, 255, 0.06);
    --emv-border:   rgba(255, 255, 255, 0.12);
    --emv-text:     #e8edf5;
    --emv-muted:    #8b98b0;
    --emv-radius:   14px;
    --emv-ease:     cubic-bezier(0.22, 1, 0.36, 1);
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    color: var(--emv-text);
    z-index: 100000;
    position: fixed;
}

/* ── Mini mode ───────────────────────────────────────────────────
 * Sits above the chat launcher (which is at right:20px bottom:20px;
 * 56px tall + 20px margin = 96px). */
.em-video-widget.is-mini {
    right: 20px;
    bottom: 100px;
    width: 360px;
}
.em-video-widget.is-mini .em-video-frame {
    background: var(--emv-bg);
    border: 1px solid var(--emv-border);
    border-radius: var(--emv-radius);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    animation: emv-mini-in 0.4s var(--emv-ease) both;
    position: relative;
}
@keyframes emv-mini-in {
    from { opacity: 0; transform: translateY(20px) scale(0.9); filter: blur(8px); }
    to   { opacity: 1; transform: translateY(0)   scale(1);   filter: blur(0); }
}

/* ── Full mode ───────────────────────────────────────────────────
 * Cover the viewport with a frosted backdrop; player sits centered. */
.em-video-widget.is-full {
    inset: 0;
    right: auto;
    bottom: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.em-video-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 7, 11, 0.85);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    animation: emv-fade-in 0.28s var(--emv-ease) both;
    cursor: zoom-out;
}
.em-video-widget.is-full .em-video-frame {
    position: relative;
    width: min(90vw, 1200px);
    background: var(--emv-bg);
    border: 1px solid var(--emv-border);
    border-radius: var(--emv-radius);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.75),
                0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    overflow: hidden;
    animation: emv-full-in 0.34s var(--emv-ease) both;
}
@keyframes emv-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes emv-full-in {
    from { opacity: 0; transform: scale(0.86); filter: blur(10px); }
    to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}

/* Brand-gradient halo around the player edge — mostly visible in full
 * mode where the surface is bigger. */
.em-video-widget .em-video-frame::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(182, 8, 201, 0.55), rgba(110, 193, 228, 0.45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
    opacity: 0.8;
}

/* ── Stage (the actual <video> / <iframe>) ────────────────────── */
.em-video-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}
.em-video-stage video,
.em-video-stage iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.em-video-stage video {
    background: #000;
}

/* ── Bottom title + controls bar ──────────────────────────────── */
.em-video-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(11, 14, 20, 0.65);
    border-top: 1px solid var(--emv-border);
}
.em-video-title {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--emv-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
}
.em-video-widget.is-full .em-video-bar { padding: 12px 16px; }
.em-video-widget.is-full .em-video-title { font-size: 13px; }
.em-video-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.em-video-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    color: var(--emv-text);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: background 0.18s var(--emv-ease), transform 0.18s var(--emv-ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.em-video-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}
.em-video-btn--close:hover {
    background: linear-gradient(135deg, var(--emv-magenta), var(--emv-blue));
    color: #fff;
}

/* ── Mobile mini fallback (narrow viewport) ─────────────────────── */
@media (max-width: 480px) {
    .em-video-widget.is-mini {
        width: calc(100vw - 24px);
        right: 12px;
        bottom: 90px;
    }
}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .em-video-widget *,
    .em-video-widget *::before {
        animation-duration: 0.001s !important;
        transition: none !important;
    }
}