#preview-tooltip {
    position: absolute;
    z-index: 10000;
    width: 320px;
    height: 180px;
    background: #000;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transform: translateY(10px);
    display: none;
    /* Allow interaction for unmuting */
    pointer-events: auto;
}

#preview-tooltip.active {
    opacity: 1;
    transform: translateY(0);
    display: block;
    pointer-events: auto;
}

#preview-tooltip iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Loading spinner class was removed in JS but styles can remain or be removed. 
       Keeping basics just in case, but removing the spinner animation if not used. 
       Actually, I'll keep it consistent with digest_view.html just in case. */
#preview-tooltip.loading {
    background: #1f2937;
    display: flex;
    align-items: center;
    justify-content: center;
}

#preview-tooltip.loading::after {
    content: "";
    width: 24px;
    height: 24px;
    border: 2px solid #4f46e5;
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Mobile Bottom Sheet Styles */
@media (max-width: 768px) {
    #preview-tooltip {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 250px;
        border-radius: 16px 16px 0 0 !important;
        transform: translateY(100%) !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 10000;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
        display: flex !important;
        flex-direction: column;
        /* Ensure bottom safe area on iPhone X+ */
        padding-bottom: env(safe-area-inset-bottom);
    }

    #preview-tooltip.active {
        transform: translateY(0) !important;
    }

    /* Header for controls */
    .tooltip-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: #111;
        border-bottom: 1px solid #333;
    }

    .tooltip-content-wrapper {
        flex-grow: 1;
        position: relative;
        min-height: 200px;
    }

    #preview-tooltip iframe {
        position: absolute;
        inset: 0;
    }
}

/* Desktop only tweaks */
@media (min-width: 769px) {
    .tooltip-header {
        display: none;
    }

    .tooltip-content-wrapper {
        height: 100%;
        width: 100%;
    }
}