.MediaClass {
    display: flex;
    height: fit-content;
    align-items: stretch;
    padding-bottom: 20px;
    transition: max-height 0.2s ease-out;
    container-type: inline-size;
}

    .MediaClass > .vidHolder > .videoPlayer {
        height: 100%;
    }

    .MediaClass > .vidHolder > .videoPlayer > video {
        flex-grow: 2;
        max-height: 480px;
        width: 100%;
        /*overflow: hidden;*/
        max-width: 640px;
        display: block;
        margin: auto;
        /*padding-top: 6em;*/
    }

    .MediaClass > .vidHolder {
        max-height: 480px;
        text-align: center;
    }

    /* bugid#38759: images (visuals) get a taller box - most of the viewport, like portrait image viewing -
       so the content is readable in place; other media keep the 480px box.
       bugid#38952: 75vh was a FIXED height, so the box always claimed three quarters of the screen
       however short the image was - and, sitting in the sticky media strip, pushed the report itself
       out of view. It is a ceiling now: the image is capped at 75vh and the box takes its height. */
    .MediaClass > .vidHolder.tallVisual {
        max-height: 75vh;
    }

    .MediaClass > .vidHolder.tallVisual > .videoPlayer {
        height: auto;
        max-height: 75vh;
    }

    .MediaClass > .vidHolder.tallVisual > .videoPlayer > img {
        max-height: 75vh;
    }


@container (max-width: 820px) {
    .vidHolder {
        width: 100%;
    }

    .listHolder {
        width: 100%;
    }
}


.MediaClass > .listHolder > .listBox {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    max-height: 480px;
    overflow: auto;
    /* bugid#38405 round 3 (Lloyd): the spec shows the chapter list in a rounded bordered box */
    border: 1px solid #c9c9c9;
    border-radius: 10px;
    padding: 6px;
    width: 100%;
}

    .MediaClass > .listHolder > .listBox > .mediaCell {
        border-style: solid;
        border-color: #f2f2f2;
        border-width: thin;
        background-size: 2em;
        background-repeat: no-repeat;
        padding-left: 3em;
        padding-top: 1em;
        background-position-y: center;
        background-position-x: 5px;
        text-align: left;
    }

    .MediaClass > .listHolder > .listBox > .Audio {
        background-image: url('/img/phone-call.png');
        cursor: pointer;
    }

    .MediaClass > .listHolder > .listBox > .Image {
        background-image: url('/img/image.png');
        cursor: pointer;
    }

    .MediaClass > .listHolder > .listBox > .Video {
        background-image: url('/img/video.png');
        cursor: pointer;
    }

    .MediaClass > .listHolder > .listBox > .Pdf {
        background-image: url('/img/document.png');
        cursor: pointer;
    }

    .MediaClass > .listHolder > .listBox > .Document {
        background-image: url('/img/document.png');
        cursor: pointer;
    }

    .MediaClass > .listHolder > .listBox > .Email {
        background-image: url('/img/e-mail.png');
        cursor: pointer;
    }

    .MediaClass > .listHolder > .listBox > .SMS {
        background-image: url('/img/sms.png');
        cursor: pointer;
    }

    .MediaClass > .listHolder > .listBox > .chapter {
        background-image: url('/img/chapter.png');
        cursor: pointer;
        background-position-x: 2em;
        /*padding-left: 5em;*/
        background-size: 1em !important;
    }

.MediaClass .mediaCell.mediaSelected {
    background-color: rgb(165 165 165);
    color: white;
}

.MediaClass .mediaCell:not(.mediaSelected):hover {
    background-color: rgb(245, 245, 245);
    color: black
}

/* bugid#38709: in-page Word (.docx) rendering - evaluation media pane and the Support document viewer. */
.MediaClass > .vidHolder > .videoPlayer > .docxViewer {
    height: 480px;
    text-align: left;
}

.supportMediaViewer .docxViewer {
    height: 100%;
}

.docxViewer .docxViewerPages .docx-wrapper {
    background: transparent;
    padding: 0;
}

.docxViewer .docxViewerPages .docx-wrapper > section.docx {
    margin-bottom: 10px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    /* bugid#38709 (round 2): docx-preview sizes the rendered "page" from the document's page setup
       (A4 = 595.3pt = ~794px) - wider than the media pane, so transcript text ran out of the box.
       Flow to the pane instead: the width/min-height !important beat the library's inline styles,
       and page margins compact to viewer padding. */
    width: auto !important;
    min-height: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 16px !important;
    overflow-wrap: break-word;
}

/* bugid#38709 (round 2): transcript tables carry fixed authored widths wider than the pane - clamp
   the table to the pane and let the columns share it naturally; long unbroken strings (URLs pasted
   into the chat) wrap instead of forcing a horizontal scrollbar; images scale down. Verified against
   a transcript-shaped document at pane width: content width == pane width, no overflow. */
.docxViewer .docxViewerPages section.docx table {
    width: 100% !important;
    max-width: 100%;
}

.docxViewer .docxViewerPages section.docx td {
    width: auto !important;
    overflow-wrap: anywhere;
}

.docxViewer .docxViewerPages section.docx img {
    max-width: 100%;
    height: auto;
}

.docxViewer .docxViewerDownload {
    font-weight: bold;
}

/* Full-screen control for embedded documents (PDFs). The browser's PDF plugin owns everything inside
   the <embed>, so the button is a sibling overlay on the wrapper that goes full screen.
   The plugin draws its toolbar as a full-width band across the TOP of the embed (and drops it when
   the box is too small for it), so the button is pushed below that band - it then sits in the top
   corner of the document itself in both states, and never on the toolbar. Nothing on the page can
   measure the band - it is inside the plugin's own view - so the height is a constant; it clears
   Chrome's ~48-56px toolbar with a margin, and lands just inside the document when there is none. */
.mediaFullscreenWrap {
    --pdf-toolbar-height: 56px;
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
}

    .mediaFullscreenWrap.isFullscreen {
        background: #525659; /* the PDF plugin's own page backdrop, so the letterboxing matches */
    }

    .mediaFullscreenWrap > embed {
        display: block;
    }

.mediaFullscreenButton {
    position: absolute;
    top: calc(var(--pdf-toolbar-height) + 8px);
    left: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: rgba(50, 54, 57, 0.75);
    color: white;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease-in-out;
}

    .mediaFullscreenButton:hover,
    .mediaFullscreenButton:focus {
        opacity: 1;
    }