/*
.site-modal-container {
    position: fixed;
    bottom: 25%;
    width: 57%; 
    left: 46.5%; 
    transform: translateX(-46.5%);
    height: 69vh; 
    background: var(--panel-bg, #1e1e1e);
    border-top: 1px solid var(--border-color, #2c2c2c);
    z-index: 5;
    display: none; 
    flex-direction: column;
    transition: width 0.3s ease, left 0.3s ease, transform 0.3s ease, height 0.3s ease;
}

.site-modal-container.expanded {
    width: 80%; 
    left: 20%; 
    transform: translateX(0);
}


.site-modal-container.hidden {
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.site-modal-content {
    width: 100%;
    height: 100%; 
    position: relative;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.close-site-modal {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    background: var(--secondary, #1e1e1e);
    color: var(--text, #f8f8f8);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1501;
}

.close-site-modal:hover {
    background: var(--accent, #ff3d71);
}

.site-modal-content iframe {
    width: 100%;
    height: 100%; 
    border-radius: 10px;
    overflow: hidden;
    border: none;
}*/

/* --- NEW AND IMPROVED CSS --- */
/* =================================================================== */
/*             SITE MODAL & RESPONSIVE BEHAVIOR (COMPLETE)             */
/* =================================================================== */

/* 
  This root variable is the bridge between JavaScript and CSS.
  Your timeline resize script will update this value.
*/
/* =================================================================== */
/*             SITE MODAL & RESPONSIVE BEHAVIOR (FINAL FIX)            */
/* =================================================================== */

/* 
  This variable links the timeline's JS resize logic to the modal's CSS.
*/
:root {
    --timeline-height: 25%; /* Set a default fallback value */
}

/* Modal Container */
.site-modal-container {
    position: fixed;
    /* KEY CHANGE: Bottom position is now dynamic */
    bottom: var(--timeline-height);
    width: 57%;
    left: 46.5%;
    top: 6vh;
    transform: translateX(-46.5%);
    /* KEY CHANGE: Height is now dynamic */
    height: calc(100vh - var(--timeline-height));
    
    background: var(--panel-bg, #1e1e1e);
    border-top: 1px solid var(--border-color, #2c2c2c);
    z-index: 5;
    
    /* 
     * CRITICAL FIX: This section fixes the "can't resize" problem.
     * By default, the modal is hidden and IGNORED by the mouse.
     */
    display: flex; /* Always flex, visibility is controlled by opacity */
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* This allows clicks to pass through to the timeline handle */
    
    /* Kept your original transitions and added opacity/visibility */
    transition: width 0.3s ease, left 0.3s ease, transform 0.3s ease, 
                height 0s, bottom 0s,
                opacity 0.3s ease, visibility 0.3s ease;
}

/* 
 * This class makes the modal visible and INTERACTIVE.
 */
.site-modal-container.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* When visible, it can be clicked again */
}


/* Expanded state when inspector is closed */
.site-modal-container.expanded {
    width: 80%;
    left: 20%;
    transform: translateX(0);
}

/* Modal Content (No changes needed, respected from your code) */
.site-modal-content {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Close Button (No changes needed, respected from your code) */
.close-site-modal {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    background: var(--secondary, #1e1e1e);
    color: var(--text, #f8f8f8);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1501;
}

.close-site-modal:hover {
    background: var(--accent, #ff3d71);
}

/* iFrame (No changes needed, respected from your code) */
.site-modal-content iframe {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    border: none;
}

/* --- Add this new style for the resize overlay --- */
.resize-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* Extremely high z-index to be on top of EVERYTHING */
    cursor: ns-resize; /* Show the vertical resize cursor everywhere */
    /* background: rgba(0,0,0,0.01); */ /* Uncomment for debugging to see the overlay */
}