/* Video container using Pure CSS responsive patterns */
.video-container {
    position: relative;
    width: 100%;
    max-width: 50em; /* Pure CSS em-based sizing (800px equivalent) */
    margin: 1.25em auto 0; /* Pure's spacing patterns */
}

/* Use Pure's responsive image approach for video */
video {
    width: 100%;
    height: auto; /* Pure's responsive media pattern */
    border-radius: 0.625em; /* Convert to em units */
    display: block;
}

/* Card area positioning */
.card-area {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    pointer-events: none;
    z-index: 100; /* Ensure cards appear above video */
}

/* Enhanced prompt cards following Pure CSS button patterns */
.prompt-card {
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    padding: 1em;
    border-radius: 0.75em; /* Pure CSS rounded corners */
    max-width: 80vw;
    width: fit-content;
    min-width: 12em; /* Ensure minimum readable width */
    text-align: center;
    box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.1); /* Pure CSS shadow pattern */
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    animation: floatDown 2s ease forwards;
    z-index: 10;
    font-size: 0.9em; /* Relative to parent font size */
    line-height: 1.5; /* Pure CSS line height */
}

/* Enhanced links following Pure CSS link patterns */
.prompt-card a {
    text-decoration: none;
    color: #0078e7; /* Pure CSS link blue */
    font-weight: 500;
    padding: 0.25em 0.5em;
    border-radius: 0.25em;
    transition: all 0.3s ease;
    display: inline-block;
}

.prompt-card a:hover,
.prompt-card a:focus {
    background-color: #0078e7;
    color: #fff;
    outline: none;
}

/* Enhanced floating animation with Pure CSS easing */
@keyframes floatDown {
    0% {
        opacity: 0;
        transform: translateY(-1.875em) scale(0.9); /* Convert to em */
    }
    100% {
        opacity: 1;
        transform: translateY(6.25em) scale(1); /* Convert to em */
    }
}

/* Card dock using Pure CSS flexbox patterns */
.card-dock {
    margin-top: 1.875em; /* Pure CSS spacing */
    display: flex;
    flex-wrap: wrap;
    gap: 0.625em;
    justify-content: center;
    padding: 0.625em;
    min-height: 3em; /* Ensure space even when empty */
    /* Visual styling so it doesn't look like empty space */
    border: 1px solid #CAD3E6;
    border-radius: 8px;
    background-color: #fefefe;
    position: relative;
}

/* Optional: Add placeholder text when dock is empty */
.card-dock:empty::before {
    content: "Video cards will appear here during playback. You may click on them";
    color: #999;
    font-size: 0.85em;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3em;
    text-align: center;
    padding: 0.5em;
}

/* Enhanced docked widgets following Pure CSS button styles */
.docked-widget {
    background-color: #fafafa; /* Pure CSS button background */
    border: 1px solid #ccc;
    border-radius: 2em; /* Pill-shaped like Pure buttons */
    padding: 0.5em 1em;
    font-size: 0.875em; /* Pure CSS small text sizing */
    font-family: inherit; /* Inherit from Pure CSS base */
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #333;
    text-decoration: none;
    display: inline-block;
    line-height: 1.5;
    min-height: 2.25em; /* Ensure consistent height */
    box-sizing: border-box;
}

.docked-widget:hover,
.docked-widget:focus {
    background-color: #0078e7; /* Pure CSS active blue */
    color: #fff;
    border-color: #0078e7;
    transform: translateY(-0.0625em); /* Subtle lift effect */
    outline: none;
}

.docked-widget:active {
    transform: translateY(0);
    box-shadow: inset 0 0.125em 0.25em rgba(0, 0, 0, 0.15);
}

/* Pure CSS responsive breakpoints */
/* Mobile: Pure's sm breakpoint (35.5em / 568px) */
@media screen and (max-width: 35.5em) {
    .video-container {
        width: 95%;
        margin-top: 1em;
    }

    .prompt-card {
        font-size: 0.8em;
        padding: 0.75em;
        max-width: 90vw;
        min-width: 10em;
    }

    .prompt-card a {
        padding: 0.5em 0.75em;
        font-size: 1em; /* Relative to card font size */
    }

    @keyframes floatDown {
        0% {
            opacity: 0;
            transform: translateY(-1.25em) scale(0.9);
        }
        100% {
            opacity: 1;
            transform: translateY(3.75em) scale(1); /* Shorter distance on mobile */
        }
    }

    .card-dock {
        margin-top: 1.25em;
        gap: 0.5em;
        padding: 0.5em;
        border: 1px solid #e0e0e0;
    }
    
    .card-dock:empty::before {
        font-size: 0.75em;
        min-height: 2.5em;
    }

    .docked-widget {
        font-size: 0.75em;
        padding: 0.5em 0.75em;
        min-height: 2em;
    }
}

/* Tablet: Pure's md breakpoint (48em / 768px) */
@media screen and (min-width: 35.5em) and (max-width: 48em) {
    .prompt-card {
        font-size: 0.85em;
        padding: 0.875em;
    }

    .docked-widget {
        font-size: 0.8em;
        padding: 0.5em 0.875em;
    }

    @keyframes floatDown {
        0% {
            opacity: 0;
            transform: translateY(-1.5em) scale(0.9);
        }
        100% {
            opacity: 1;
            transform: translateY(5em) scale(1);
        }
    }
}

/* Desktop: Pure's lg breakpoint (64em / 1024px) */
@media screen and (min-width: 48em) and (max-width: 64em) {
    .prompt-card {
        font-size: 0.95em;
    }

    .docked-widget {
        font-size: 0.875em;
    }
}

/* Large screens: Pure's xl breakpoint (80em / 1280px and above) */
@media screen and (min-width: 64em) {
    .video-container {
        max-width: 56em; /* Slightly larger on big screens */
    }

    .prompt-card {
        font-size: 1em;
        padding: 1.25em;
    }

    .docked-widget {
        font-size: 0.9em;
        padding: 0.625em 1.25em;
    }

    .card-dock {
        gap: 0.75em;
    }
}

/* Enhanced accessibility following Pure CSS patterns */
.prompt-card a:focus,
.docked-widget:focus {
    outline: 2px solid #0078e7;
    outline-offset: 2px;
    border-radius: 0.25em;
}

/* Reduced motion support - Pure CSS accessibility pattern */
@media (prefers-reduced-motion: reduce) {
    .prompt-card {
        animation: fadeIn 1.0s ease forwards;
        transition: opacity 0.5s ease;
    }

    @keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }

    .docked-widget {
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .docked-widget:hover {
        transform: none;
    }
}

/* High contrast support */
@media (prefers-contrast: high) {
    .prompt-card {
        border: 2px solid #000;
        box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.5);
    }

    .prompt-card a {
        color: #0000ff;
        font-weight: 600;
    }

    .docked-widget {
        border: 2px solid #000;
    }
}

/* Print styles following Pure CSS approach */
@media print {
    .video-container,
    .card-area,
    .card-dock {
        display: none;
    }
}

/* === Fix: don't let overlay block video seeking (Oct 23, 2025) === */
.video-container {
  position: relative;
}

/* Make the overlay ignore clicks so timeline remains usable */
.card-area {
  position: absolute;
  inset: 0;
  pointer-events: none;  /* clicks pass through to the <video> */
}

/* Allow interaction only on actual interactive elements inside the card */
.prompt-card {
  pointer-events: auto;  /* re-enable for the card itself */
  max-height: calc(100% - 96px); /* avoid covering native controls area */
  overflow: auto;
}
.prompt-card a,
.prompt-card button {
  pointer-events: auto;
}