body {
    font-family: sans-serif;
    margin: 0;
    background-color: #F0F4F8; /* Light background for the page */
    color: #1C2833; /* Default text color on light background */
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.container {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
}

/* --- Left Controls Panel --- */
.controls-panel {
    width: 30%;
    flex-shrink: 0;
    background-color: #2C3E50; /* Secondary Navy for the panel */
    color: #F0F4F8; /* Light text on the navy panel */
    padding: 15px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.controls-panel h2 {
    margin-top: 0;
    font-size: 1.2em;
    color: #F0F4F8;
    border-bottom: 1px solid #3498DB;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

#searchInput {
    width: calc(100% - 12px);
    padding: 8px 10px;
    margin-bottom: 10px;
    border: 1px solid #0A2342;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #F0F4F8;
    color: #1C2833;
}
#searchInput::placeholder {
    color: #566573;
}

.media-list-info {
    font-size: 0.85em;
    color: #BDC3C7;
    margin-bottom: 8px;
    padding: 0 5px;
    min-height: 1.2em;
}

#mediaList {
    list-style-type: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

#mediaList li {
    padding: 9px 8px;
    cursor: pointer;
    border-bottom: 1px solid #0A2342;
    transition: background-color 0.2s ease;
    font-size: 0.9em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    color: #F0F4F8;
}

#mediaList li:hover {
    background-color: #0A2342;
}

#mediaList li.active {
    background-color: #3498DB;
    color: #FFFFFF;
    font-weight: bold;
}

#mediaList li .file-name {
    flex-grow: 1;
    margin-right: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#mediaList li .file-type {
    font-size: 0.75em;
    color: #1C2833;
    background-color: #BDC3C7;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    flex-shrink: 0;
    font-weight: normal;
}

#mediaList li.active .file-type {
    background-color: #2C3E50;
    color: #F0F4F8;
}


/* --- Right Canvas Area --- */
.canvas-area {
    flex-grow: 1;
    min-width: 0;
    padding: 20px; /* Padding AROUND the mediaPlayer container */
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    position: relative;
}

#mediaPlayer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;  /* Horizontally center content (video, audio, etc.) */
    align-items: flex-start; /* Vertically align content to the TOP */
    border: 1px dashed #BDC3C7;
    box-sizing: border-box;
    padding-top: 15px; /* Optional: Add some space at the top INSIDE #mediaPlayer */
                       /* Adjust this value as needed or remove if not desired */
}

#mediaPlayer.media-player-placeholder p {
    color: #566573;
    font-style: italic;
    /* With align-items: flex-start on parent, this <p> will also be at the top. */
    /* If placeholder <p> needs to be centered, different styling would be needed for it specifically. */
}

/* Styles for ALL media elements INSIDE #mediaPlayer (audio, video, iframe) */
#mediaPlayer audio,
#mediaPlayer video,
#mediaPlayer iframe {
    display: block;
    max-width: 100%;
    max-height: calc(100% - 15px); /* Adjust if using padding-top on #mediaPlayer, to prevent overflow */
                                  /* This ensures media content respects the internal padding of #mediaPlayer */
}

/* Specific iframe styles if needed to override the above for PDFs */
#mediaPlayer iframe {
    width: 100%;
    /* height: 100%; If using padding-top on parent, this might cause scroll.
       Let max-height above handle it, or use calc(100% - 15px) if explicit height is needed */
    height: calc(100% - 15px); /* Match the max-height adjustment */
    border: none;
}


/* Loading state for #mediaPlayer */
#mediaPlayer.loading::before {
    content: 'Loading...';
    position: absolute;
    /* Adjust top position if #mediaPlayer has padding-top to center overlay correctly */
    top: calc(50% + 7.5px); /* Example: (padding-top / 2) offset if needed, or simply 50% if text is small */
    /* Or, if the loading text is small, simple 50% might still look fine.
       Alternatively, make loading overlay child of .canvas-area instead of #mediaPlayer
       if #mediaPlayer's internal padding complicates absolute positioning of overlay.
       For now, keeping it simple. */
    left: 50%;
    transform: translate(-50%, -50%);
    font-style: italic;
    color: #0A2342;
    font-size: 1.2em;
    z-index: 10;
    background-color: rgba(240, 244, 248, 0.85);
    padding: 10px 15px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#mediaPlayer.loading > audio,
#mediaPlayer.loading > video,
#mediaPlayer.loading > iframe {
    opacity: 0.2;
}


/* --- Responsive Design --- */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .controls-panel {
        width: 100%;
        max-height: 45vh;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    .canvas-area {
        padding: 10px;
    }

    #mediaPlayer {
        padding-top: 10px; /* Adjust padding for mobile if needed */
    }

    #mediaPlayer audio,
    #mediaPlayer video,
    #mediaPlayer iframe {
        max-height: calc(100% - 10px); /* Match mobile padding-top */
    }
    #mediaPlayer iframe {
        height: calc(100% - 10px); /* Match mobile padding-top */
    }
}