/* ── Meeting / Chime video styles ─────────────────────────────────────────
   Extracted from AmazonChimeClient.razor <style> block.
   Served as: _content/DMN.VirtualED.Components/css/meeting.css
   ─────────────────────────────────────────────────────────────────────── */

/* ── Color tokens ─────────────────────────────────────────────────────── */

:root {
    /* Shared brand colors (mirror app.css / site.css) */
    --white: #ffffff;
    --primary-dark: #05325f;
    --primary-light: #0085b3;

    /* Meeting background gradient */
    --meeting-bg-start: #05325f;
    --meeting-bg-mid: #30597a;
    --meeting-bg-end: #0085b3;

    /* Dark surfaces */
    --meeting-dark: #272727;

    /* Overlays */
    --meeting-overlay-faint: rgba(0, 0, 0, 0.10);
    --meeting-overlay-light: rgba(0, 0, 0, 0.30);
    --meeting-overlay: rgba(0, 0, 0, 0.55);

    /* Control pill */
    --meeting-pill-bg: rgba(10, 15, 28, 0.92);
    --meeting-pill-bg-muted: rgba(10, 15, 28, 0.80);
    --meeting-pill-border: rgba(255, 255, 255, 0.10);
    --meeting-pill-shadow: rgba(0, 0, 0, 0.70);

    /* Control buttons */
    --meeting-btn: #243045;
    --meeting-btn-hover: #334560;
    --meeting-btn-border: rgba(255, 255, 255, 0.14);
    --meeting-btn-border-hover: rgba(255, 255, 255, 0.24);

    /* Help / SOS */
    --meeting-sos: #e02248;
    --meeting-sos-hover: #ff2d55;
    --meeting-sos-disabled: #7a1a2e;
    --meeting-sos-glow: rgba(224, 34, 72, 0.35);
    --meeting-sos-glow-strong: rgba(224, 34, 72, 0.55);
    --meeting-sos-hover-glow: rgba(255, 45, 85, 0.45);
    --meeting-sos-hover-glow-strong: rgba(255, 45, 85, 0.65);

    /* End call */
    --meeting-end: #c4314b;
    --meeting-end-hover: #e03558;
    --meeting-end-shadow: rgba(196, 49, 75, 0.55);

    /* Leave button (global .btn-meeting-leave) */
    --meeting-leave: #9d0000;
    --meeting-leave-mid: #af4848;
    --meeting-leave-shadow: rgba(0, 0, 0, 0.50);

    /* Nameplates */
    --meeting-nameplate-text: #d0d0d0;
    --meeting-nameplate-bg: #131212;

    /* Amazon Connect chat */
    --meeting-chat: #2879ff;
    --meeting-chat-hover: #1a60d4;
    --meeting-chat-shadow: rgba(170, 183, 184, 0.45);
    --meeting-chat-border: #e6e2e2;
    --meeting-chat-text: #383636;
    --meeting-chat-footer-bg: #eee;
    --meeting-chat-input-border: #9e9e9e;
    --meeting-chat-placeholder: #585858;
    --meeting-chat-delivery: #b7b3b3;
    --meeting-chat-close-text: #191818;

    /* Meeting message dialog */
    --meeting-msg-bg: #080808;
    --meeting-msg-text: #f3f3f3;
    --meeting-msg-subhead: #8e8c8c;

    /* Amazon Connect action button */
    --meeting-connect-btn: rgb(208, 2, 27);
    --meeting-connect-btn-light: rgb(233, 2, 30);
    
    
    --success: #339D37;
    --success-dark: #008635;
    --success-light: #6BBE27;
    --success-pastel: #A3E6A2;
    --success-faded: #6bae78;
    --secondary: #efc102;
    --secondary-dark: #ba950a;
    --secondary-light: #FFF47A;
    --secondary-pastel: #FFF4B2;
    --secondary-faded: #FFCC2C4F;
    --tertiary: #ff6b07;
}

/* ── Utility classes ──────────────────────────────────────────────────── */

.bg-color-meeting {
    background: linear-gradient(160deg, var(--meeting-bg-start) 0%, var(--meeting-bg-mid) 40%, var(--meeting-bg-end) 100%) !important;
}

.bg-color-meeting-dark {
    background-color: var(--meeting-dark) !important;
}

.bg-color-meeting-pill {
    background: var(--meeting-pill-bg) !important;
}

.bg-color-meeting-btn {
    background-color: var(--meeting-btn) !important;
}

.bg-color-meeting-sos {
    background-color: var(--tertiary) !important;
}

.bg-color-meeting-end {
    background-color: var(--meeting-end) !important;
}

.bg-color-meeting-leave {
    background-color: var(--meeting-leave) !important;
}

.bg-color-meeting-chat {
    background-color: var(--meeting-chat) !important;
}

.bg-color-meeting-nameplate {
    background-color: var(--meeting-nameplate-bg) !important;
}

.color-meeting-nameplate {
    color: var(--meeting-nameplate-text) !important;
}

.color-meeting-msg {
    color: var(--meeting-msg-text) !important;
}

.color-meeting-subhead {
    color: var(--meeting-msg-subhead) !important;
}

.color-meeting-chat {
    color: var(--meeting-chat) !important;
}

.color-meeting-sos {
    color: var(--meeting-sos) !important;
}

.color-meeting-end {
    color: var(--meeting-end) !important;
}

.bd-color-meeting-pill {
    border-color: var(--meeting-pill-border) !important;
}

.bd-color-meeting-btn {
    border-color: var(--meeting-btn-border) !important;
}

.bd-color-meeting-chat {
    border-color: var(--meeting-chat-border) !important;
}

/* ── End utilities ────────────────────────────────────────────────────── */

/* ── Shared tile rules (both breakpoints) ─────────────────────── */

.video-tile {
    display: inline-block;
    animation: slide-fade 330ms ease;
    animation-delay: 400ms;
    animation-fill-mode: forwards;
    border-radius: 8px;
    overflow: hidden;
    opacity: 0;
    width: 100%;
    position: relative;
}

.video-tile video {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Teams-style nameplate: full-width dark bar below the video */
.video-tile--nameplate,
.video-tile--nameplate-single {
    padding: 5px 10px 6px;
    margin: 0;
    font-size: 13px;
    text-align: left;
    color: var(--meeting-nameplate-text);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.4em;
    width: 100%;
    border-radius: 0 0 8px 8px;
}

/* Patient self-view nameplate */
.video-tile--nameplatecustomer {
    padding: 5px 10px 6px;
    background: var(--meeting-overlay);
    color: var(--meeting-nameplate-text);
    font-size: 13px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    border-radius: 0 0 16px 16px;
}

@media only screen and (min-width: 1001px) {

    .camgrid {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        max-width: var(--my-maxWidth);
        align-items: flex-start;
        justify-content: center;
        gap: 4px;
    }

    .agent-video {
        margin: 0;
        width: calc((100% - (var(--my-cols) - 1) * 4px) / var(--my-cols));
        min-width: 0;
        border-radius: 8px;
        overflow: hidden;
    }
}

@media only screen and (max-width: 1000px) {

    .camgrid {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        align-items: flex-start;
        justify-content: center;
        gap: 3px;
    }

    .agent-video {
        margin: 0;
        /* Each tile takes an equal share of the row; wraps naturally on small screens */
        width: calc((100% - (var(--my-cols) - 1) * 3px) / var(--my-cols));
        min-width: min(200px, 100%);
        flex: 1 1 auto;
        border-radius: 6px;
        overflow: hidden;
    }

    .video-tile {
        border-radius: 6px;
    }
}


.hidedi {
    display: none;
    visibility: hidden;
    z-index: 10010;
}

.showdi {
    display: block;
    visibility: visible;
    z-index: 10010;
}

.wrap {
    width: 100%;
    height: 100vh;
    background: linear-gradient(var(--meeting-overlay-faint), var(--meeting-overlay-light));
    background-size: cover;
    background-position-x: center;
}

.meeting-info {
    display: none;
    margin-top: 5%;
    font-size: 1.1em;
}

.meeting-view {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    z-index: 99999;
    opacity: 0;
    background: linear-gradient(160deg, var(--meeting-bg-start) 0%, var(--meeting-bg-mid) 40%, var(--meeting-bg-end) 100%);
    animation: fade-in 700ms ease;
    animation-fill-mode: forwards;
}


.agent-view {
    position: fixed;
    overflow: hidden;
    display: none;
    right: 1rem;
    top: 0;
    height: 100dvh;
    border-radius: 0.2rem;
    z-index: 10000;
    width: 36rem;
    flex-direction: column;
    background-color: var(--meeting-dark);
}

.agent-view .meeting-view {
    animation: none;
    background-color: var(--meeting-dark);
    opacity: 1;
}

.agent-view .meeting-info {
    display: none;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.customer-local-video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transform: rotateY(0deg) !important;
}

.agent-video .video-wrapper {
    width: 100%;
    height: auto;
}

.agent-remote-video {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}


.customer-video .video-tile {
    animation-delay: 850ms;
}

.additional-video .video-tile {
    animation-delay: 850ms;
}


.video-wrapper {
    position: relative;
}

.remote-video-loader {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-65%, -50%);
}


.remote-video-loader::before {
    content: "";
    display: block;
    height: 40px;
    width: 4;
    border-width: 5px;
    border-style: solid;
    border-color: var(--meeting-chat) transparent transparent;
    border-radius: 100%;
    animation: rotation .8s infinite linear;
}



.video-loader-text {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -30%);
}

.remote-video-loader-text::before {
    content: "";
    color: var(--white);
    display: block;
    height: 50px;
    width: 100%;
    text-align: center;
    font-weight: 200;
    font-size: small;
}

/* Patient-side "camera off" placeholder for the clinician tile — QLD Health background with
   a video-off icon shown in place of the <video> element (the name badge below the tile
   already identifies who it is). JSInteropAmazonChimeClient.js showNoVideoPlaceholder/
   hideNoVideoPlaceholder toggle display on these. */
.no-video-placeholder {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: url('../qldbackground1.jpg') center / cover no-repeat;
}

.no-video-placeholder-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--meeting-bg-end);
    color: var(--white);
}




.customer-video .video-tile--nameplate {
    font-size: 16px;
    padding: 6px 12px 7px
}

.additional-video .video-tile--nameplate {
    font-size: 16px;
    padding: 6px 12px 7px
}

.customer-audio {
    display: none;
}

.end-btn {
    display: none;
}

#ccpContainer {
    width: 200px;
    height: 525px;
    overflow: hidden;
    float: left;
    margin-left: 22px;
    padding: 10px;
}

nav {
    width: 690px;
}

.section-main {
    display: table-cell;
}

.section-chat {
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 45px;
    right: 50px;
    height: auto;
    width: auto;
    border-radius: 5px;
    z-index: 100;
}

.connect-customer-interface {
    font-size: 14px;
    box-shadow: 0 0 10px 0 var(--meeting-chat-shadow) !important;
}

#contactDetails input {
    display: none;
}

#startChat {
    display: block !important;
    color: var(--white);
    padding: 6px 12px 4px;
    font-size: 1.1em;
    position: fixed;
    bottom: 0;
    right: 175px;
    border: none;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.chat-btn {
    color: var(--white);
    background-color: var(--meeting-chat);
    transition: background-color 180ms ease;
}

.chat-btn:hover {
    color: var(--white);
    text-decoration: none;
    background-color: var(--meeting-chat-hover) !important;
}

@keyframes slide-fade {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#meeting-local-video-tile {
    width: 320px;
    height: 180px;
    display: none;
}

.centered {
    text-align: center;
}

.spinner.loading {
    display: none;
    text-align: center;
}

.loading-text {
    width: 90px;
    position: absolute;
    top: 245px;
    left: 137px;
    text-align: center;
}

.meeting-info {
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

.meeting-msg {
    padding: 40px 45px 55px;
    border-radius: 5px;
    background: var(--meeting-msg-bg);
    color: var(--meeting-msg-text);
    animation: pop-in 225ms ease;
    animation-fill-mode: forwards;
    min-width: 600px;
}

.meeting-msg__head {
    margin-bottom: 12px;
}

.meeting-msg__subhead {
    color: var(--meeting-msg-subhead);
    margin-bottom: 40px;
}

.meeting-msg__link {
    color: var(--meeting-msg-text);
    display: inline-block;
    background: var(--meeting-chat);
    text-decoration: none;
    padding: 12px 14px;
    border-radius: 3px;
    text-decoration: none;
}

@keyframes pop-in {
    from {
        opacity: .1;
        transform: translateY(10px) scale(.65);
    }

    to {
        opacity: 1;
        transform: translateY(-50px) scale(1);
    }
}

@keyframes animScale {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0) scale3d(0.1, 0.6, 1);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }
}


.meeting-message a {
    text-decoration: underline;
}

#join-button {
    position: fixed;
    bottom: 519px;
    right: 244px;
    width: 140px;
    text-align: center;
    z-index: 100;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: var(--meeting-chat);
    border: none;
    animation: slide-up 250ms ease;
    animation-fill-mode: forwards;
    transform: translateY(40px);
}

@keyframes slide-up {
    from {
        transform: translateY(40px)
    }

    to {
        transform: translateY(0)
    }
}

.spinner.loading:before {
    content: "";
    height: 110px;
    width: 110px;
    margin: -15px auto auto -15px;
    position: absolute;
    top: 218px;
    left: 143px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--meeting-chat) transparent transparent;
    border-radius: 100%;
    animation: rotation .8s infinite linear;
}

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

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

ol.normal {
    list-style-type: disc;
    padding-left: 50px;
}

.wrap {
    white-space: nowrap;
}

.header-wrapper {
    padding: 10px 10px 14px;
    border-bottom: 2px solid var(--meeting-chat-border);
    background: var(--white);
    color: var(--meeting-chat-text);
}

.welcome-text {
    font-size: 18px;
    margin: 0;
}

#chatDescription {
    font-size: 13px;
    margin: 4px 0 0 0;
}

.footer-actions {
    background: var(--meeting-chat-footer-bg);
    height: 85px;
}

.button-wrapper {
    display: flex;
    justify-content: center;
    flex-direction: row;
    height: 100%;
    align-items: center;
    border-radius: 5px;
}

.button-wrapper > button {
    min-width: 85px;
    margin: 6px;
    font-weight: bold;
}

.action-button {
    width: 43%;
    line-height: 1.465;
    font-weight: normal;
    white-space: nowrap;
    color: var(--white);
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    padding-right: 10px;
    padding-left: 10px;
    font-family: AmazonEmber_Md, Helvetica, sans-serif;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    max-width: 260px;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    font-size: 0.875rem;
    box-shadow: var(--meeting-overlay-faint) 1px 2px 3px 0px;
    border-width: 0px;
    border-style: solid;
    background: linear-gradient(var(--meeting-connect-btn), var(--meeting-connect-btn) 80%, var(--meeting-connect-btn-light));
    border-color: var(--meeting-connect-btn);
}

.meeting-controls {
    margin-top: 0.5rem;
    display: flex;
    margin-bottom: 10vh;
}

.btn-meeting-leave {
    background: linear-gradient(160deg, var(--meeting-leave) 0%, var(--meeting-leave-mid) 40%, var(--meeting-leave) 100%);
    rotate: 140deg;
    box-shadow: 0 0 32px var(--meeting-leave-shadow) !important;
}

/* ── MeetingControls width ──────────────────────────────────── */

.control-container-width {
    width: 100%;
}

@media (min-width: 768px) {
    .control-container-width {
        width: 75% !important;
    }
}

/* ── Compact controls on narrow phones (≤480 px) ────────────── */

@media (max-width: 480px) {
    .meeting-view #meeting-controls-id {
        gap: 8px !important;
        padding: 0 !important;
    }

    .meeting-view #meeting-controls-id .controlBtn {
        height: 42px !important;
        width: 42px !important;
    }

    .meeting-view #meeting-controls-id .handUpBtn {
        height: 42px !important;
        width: 42px !important;
    }

    .meeting-view #meeting-controls-id .handUpBtn img {
        width: 22px !important;
        margin-top: 0 !important;
    }

    /* Compact the "Click help if you need urgent assistance" banner */
    .meeting-view #meeting-controls-handstate {
        font-size: 0.65rem !important;
        padding: 3px 10px !important;
    }

    /* Reduce icon size inside control buttons */
    .meeting-view #meeting-controls-id .fs-5 {
        font-size: 1rem !important;
    }

    .meeting-view #meeting-controls-id .fs-6 {
        font-size: 0.85rem !important;
    }

    /* Reduce button label text */
    .meeting-view #meeting-controls-id > div > .fs-small {
        font-size: 0.6rem !important;
    }
}

/* ── Patient meeting view: main + strip layout ──────────────────────────
   The camgrid contains all tiles (remote 1–8 + patient tile 9).
   Row 1: first remote tile (agent1) fills full width and most of the height.
   Row 2: remaining remote tiles + patient self-view in a horizontal strip.
   Waiting state (no clinician yet): camgrid switches to column — indicator
   above, patient video fills remaining space.
   ────────────────────────────────────────────────────────────────────── */

body.meeting-active {
    --meeting-footer-h: 110px;
    --strip-h: 110px;
    --strip-tile-w: 196px;  /* strip-h × 16⁄9 */
}

@media (max-width: 480px) {
    body.meeting-active {
        --meeting-footer-h: 95px;
        --strip-h: 90px;
        --strip-tile-w: 160px;
    }
}

/* meeting-view: pad bottom for fixed controls footer */
body.meeting-active .meeting-view {
    justify-content: flex-start;
    align-items: stretch;
    padding-bottom: calc(var(--meeting-footer-h) + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
}

/* ── Camgrid: flex row-wrap — row 1 = main video, row 2 = strip ── */
body.meeting-active .camgrid {
    flex: 1 1 0;
    min-height: 0;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-content: flex-start;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100% !important;
}

/* ── Tile 1 (agent1): main video ── */
body.meeting-active .camgrid > .agent-video:nth-child(1):not([style*="display:none"]),
body.meeting-active .camgrid > .agent-video:nth-child(1):not([style*="display: none"]) {
    flex: 0 0 100% !important;
    width: 100% !important;
    height: calc(100% - var(--strip-h)) !important;
    min-height: 0;
    display: flex !important;
    flex-direction: column;
}

body.meeting-active .camgrid > .agent-video:nth-child(1) .video-tile {
    flex: 1 1 0;
    min-height: 0;
    display: flex !important;
    flex-direction: column;
    border-radius: 0;
    animation: none;
    opacity: 1;
    width: 100%;
}

body.meeting-active .camgrid > .agent-video:nth-child(1) .video-tile .video-wrapper {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.meeting-active .camgrid > .agent-video:nth-child(1) .video-tile video {
    flex: 1;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    object-fit: contain;
}

/* ── Tiles 2–8 (secondary remote): strip thumbnails ── */
body.meeting-active .camgrid > .agent-video:not(:nth-child(1)):not([style*="display:none"]),
body.meeting-active .camgrid > .agent-video:not(:nth-child(1)):not([style*="display: none"]) {
    flex: 0 0 var(--strip-tile-w) !important;
    width: var(--strip-tile-w) !important;
    height: var(--strip-h) !important;
    max-width: var(--strip-tile-w) !important;
    min-height: 0;
    display: flex !important;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    margin: 4px;
}

body.meeting-active .camgrid > .agent-video:not(:nth-child(1)) .video-tile {
    flex: 1 1 0;
    min-height: 0;
    display: flex !important;
    flex-direction: column;
    border-radius: 0;
    animation: none;
    opacity: 1;
    width: 100%;
}

body.meeting-active .camgrid > .agent-video:not(:nth-child(1)) .video-tile .video-wrapper {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.meeting-active .camgrid > .agent-video:not(:nth-child(1)) .video-tile video {
    flex: 1;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    object-fit: cover;
}

/* Nameplates too cramped in strip tiles */
body.meeting-active .camgrid > .agent-video:not(:nth-child(1)) .tile-nameplate,
body.meeting-active .camgrid > .agent-video:not(:nth-child(1)) .tile-nameplate-text {
    display: none !important;
}

/* ── Patient self-view: in-flow strip tile ── */
body.meeting-active #patient-id {
    position: static !important;
    flex: 0 0 var(--strip-tile-w);
    width: var(--strip-tile-w) !important;
    height: var(--strip-h) !important;
    max-width: var(--strip-tile-w) !important;
    min-width: unset !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    margin: 4px !important;
    align-self: auto !important;
}

body.meeting-active #patient-id .customer-local-video {
    max-height: unset;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
    object-fit: cover !important;
}

body.meeting-active #patient-id .tile-signal-overlay {
    top: 4px;
    right: 4px;
    padding: 2px 3px 1px;
}

/* ── Waiting state: .camgrid--waiting is added by Blazor when no clinician is
   yet in the room. Driven by MeetingContext.ShowWaitingClinicianLoader so it
   tracks C# state directly — no CSS :has() dependency. */

body.meeting-active .camgrid--waiting {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-content: stretch;
    overflow: hidden !important;
}

body.meeting-active .camgrid--waiting #patient-waiting-indicator {
    flex-shrink: 0;
    width: 100%;
    background: var(--meeting-bg-start) !important;
    padding: 24px 16px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.meeting-active .camgrid--waiting #patient-id {
    position: static !important;
    flex: 1 1 0 !important;
    min-height: 0;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    min-width: unset !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    overflow: hidden;
}

/* Stretch inner containers so the camera feed fills the waiting tile.
   The chain: #patient-id (flex column) → .customer-video → .video-tile → .video-wrapper → video */
body.meeting-active .camgrid--waiting #patient-id .customer-video {
    flex: 1 1 0 !important;
    min-height: 0;
    display: flex !important;
    flex-direction: column !important;
}

body.meeting-active .camgrid--waiting #patient-id .video-tile {
    flex: 1 1 0 !important;
    min-height: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    animation: none !important;
    opacity: 1 !important;
}

body.meeting-active .camgrid--waiting #patient-id .video-wrapper {
    flex: 1 1 0 !important;
    min-height: 0;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

body.meeting-active .camgrid--waiting #patient-id .customer-local-video {
    flex: 1 1 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
    object-fit: cover !important;
}

/* ── Controls footer: fixed at viewport bottom, above the meeting overlay ── */

/* z-index 8: above camgrid (auto) and PiP (6), below DeviceSettings modal (10010) */
body.meeting-active #meeting-controls-wrapper {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    z-index: 8 !important;
    width: 100% !important;
    background: var(--meeting-bg-start);
    border-top: 1px solid var(--meeting-btn-border) !important;
    padding: 6px 16px env(safe-area-inset-bottom, 0px) !important;
    gap: 4px !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.meeting-active #meeting-controls-handstate {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* ── Controls row: flat within the solid footer ─────────────── */

.meeting-view #meeting-controls-id {
    flex-shrink: 0;
    align-self: center;
    width: 100% !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 0 0 !important;
    gap: 12px !important;
    justify-content: space-evenly !important;
}

/* ── Hand-up status text: below the pill ───────────────────── */

.meeting-view #meeting-controls-handstate {
    flex-shrink: 0;
    align-self: center;
    background: var(--meeting-pill-bg-muted);
    border-radius: 20px;
    padding: 4px 16px;
    max-width: 90vw;
    text-align: center;
    white-space: normal;
    word-break: break-word;
}

/* ── Button label: always visible, wraps on narrow screens ─── */

.meeting-view #meeting-controls-id > div > .fs-small {
    text-align: center;
    white-space: nowrap;
    min-width: max-content;
}

/* ── Control buttons: always visible dark circles ───────────── */

.meeting-view #meeting-controls-id .controlBtn {
    background: var(--meeting-btn) !important;
    border: 1px solid var(--meeting-btn-border) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: background 140ms ease;
    transform: none !important;
}

.meeting-view #meeting-controls-id .controlBtn:hover {
    background: var(--meeting-btn-hover) !important;
    border-color: var(--meeting-btn-border-hover) !important;
    transform: none !important;
}

/* ── Help / SOS: larger, bright red, glow ring ──────────────── */

.meeting-view #meeting-controls-id .handUpBtn {
    background: var(--tertiary) !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: background 140ms ease, box-shadow 140ms ease;
    transform: none !important;
}

.meeting-view #meeting-controls-id .handUpBtn:hover:not(:disabled) {
    background: var(--tertiary) !important;
    transform: none !important;
}

/* Already raised: dimmed so patient knows request is submitted */
.meeting-view #meeting-controls-id .handUpBtn:disabled {
    background: var(--tertiary) !important;
    box-shadow: none !important;
}

/* ── End call ────────────────────────────────────────────────── */

.meeting-view #meeting-controls-id .btn-meeting-leave {
    background: var(--meeting-end) !important;
    border: none !important;
    transition: background 140ms ease;
}

.meeting-view #meeting-controls-id .btn-meeting-leave:hover {
    background: var(--meeting-end-hover) !important;
}

/* ── Amazon Connect chat bubble styles ────────────────────────── */

.sc-cSHVUG.eourdf .Linkify a {
    color: var(--white);
    text-decoration: underline;
    display: inline-block;
}

.sc-cSHVUG.eourdf .Linkify a:hover {
    opacity: .7;
}

/* Bubble container */

.sc-VigVT.fgGyCn {
    display: flex;
    flex-wrap: wrap;
}

.sc-jTzLTM.djefvl {
    width: 100%;
}

/* Outgoing chat bubble */

.sc-cSHVUG.eourdf {
    background-color: var(--meeting-chat);
    color: var(--white);
}

/* End chat box */

.sc-hSdWYo.cxjoTn {
    background-color: var(--white);
}

/* Delivery date */

.sc-jzJRlG.XJdGr {
    font-size: 12px;
    color: var(--meeting-chat-delivery);
}

/* Delivery text */

.sc-chPdSV.iiumMg {
    color: var(--meeting-chat-delivery);
}

/* Message container */

.sc-jKJlTe.doyFyC.sc-kGXeez.hSemjU {
    padding-bottom: 10px;
    overflow-y: auto;
}

/* Bubble */

.sc-cSHVUG.joKHqV {
    display: inline-block;
    padding: 7px 12px;
}

.sc-cSHVUG.eourdf {
    display: inline-block;
    margin-left: auto;
    padding: 7px 12px;
}

/* Outgoing bubble arrow */

.sc-cSHVUG.eourdf::after {
    border-bottom-color: var(--meeting-chat);
}

/* End chat button container */

.sc-iAyFgw.iJXXEz {
    position: absolute;
    top: 0;
}

/* End chat button */

.sc-eHgmQL.kBXJGC.sc-gzVnrw.bsduuv {
    position: absolute;
    left: 234px;
    top: -37px;
    box-shadow: none !important;
    color: transparent !important;
    background: none;
}

.sc-eHgmQL.kBXJGC.sc-gzVnrw.bsduuv:hover {
    background: none;
}

.sc-eHgmQL.kBXJGC.sc-gzVnrw.bsduuv::after {
    content: "X";
    display: block;
    color: var(--meeting-chat-close-text);
    padding: 3px 8px;
    font-size: 16px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

/* Chat input */

.sc-kEYyzF.qkNCx {
    border: none;
    border-top: 1px solid var(--meeting-chat-input-border);
}

/* Chat message input placeholder */

.sc-hMqMXs.dSGijn {
    padding: 11px 0 0 12px;
    color: var(--meeting-chat-placeholder);
}

.alert-agent-left {
    display: none;
    margin: 0;
    position: fixed !important;
    right: 6rem;
    bottom: 32rem;
}

.round {
    border-radius: 50% !important;
}

/* ── Mute indicators on video tiles ─────────────────────────────────── */

/* Flex layout for nameplate so mute icon sits inline with the name */
.tile-nameplate {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Remote-tile mute icon: hidden by default, shown via .muted class added by JS */
.tile-mute-icon {
    display: none;
    flex-shrink: 0;
    color: white;
    align-items: center;
    line-height: 1;
}

.tile-mute-icon.muted {
    display: inline-flex;
}

/* Local-tile mute overlay: absolute badge in top-left corner of the video */
.tile-mute-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    color: var(--meeting-sos);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    z-index: 10;
}

.tile-mute-overlay.muted {
    display: flex;
}

/* ── Signal strength bars on video tile nameplates ───────────────────── */

.tile-signal-icon {
    display: inline-flex;
    align-items: flex-end;
    gap: 1.5px;
    height: 13px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.4s;
}

/* Visible once a signal level has been measured */
.tile-signal-icon.sl-0,
.tile-signal-icon.sl-1,
.tile-signal-icon.sl-2,
.tile-signal-icon.sl-3,
.tile-signal-icon.sl-4 { opacity: 1; }

.tile-signal-icon .sb {
    display: block;
    width: 2.5px;
    border-radius: 0.5px;
    background: white;
}

.tile-signal-icon .sb1 { height: 4px; }
.tile-signal-icon .sb2 { height: 7px; }
.tile-signal-icon .sb3 { height: 10px; }
.tile-signal-icon .sb4 { height: 13px; }

.tile-signal-icon.sl-1 .sb1                               { background: var(--meeting-sos); }
.tile-signal-icon.sl-2 .sb1, .tile-signal-icon.sl-2 .sb2 { background: var(--tertiary); }
.tile-signal-icon.sl-3 .sb1, .tile-signal-icon.sl-3 .sb2,
.tile-signal-icon.sl-3 .sb3                               { background: var(--success-pastel); }
.tile-signal-icon.sl-4 .sb1, .tile-signal-icon.sl-4 .sb2,
.tile-signal-icon.sl-4 .sb3, .tile-signal-icon.sl-4 .sb4  { background: var(--success-dark); }

/* Patient self-view: signal bars overlaid at top-right of the video */
.tile-signal-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 4px;
    padding: 4px 5px 3px;
}


/* ── Clinician panel (AmazonChime.razor) ─────────────────────────────────
   Styles for the floating clinician video panel (#agent-view-id).
   ─────────────────────────────────────────────────────────────────────── */

/* Make the panel show as flex column when JS sets display:block */
#agent-view-id[style*="display: block"],
#agent-view-id[show="true"] {
    display: flex !important;
    flex-direction: column;
}

.agent-view-full {
    position: fixed;
    display: none;
    inset: 0;
    height: 100dvh;
    border-radius: 0 !important;
    border: none !important;
    z-index: 10000;
    width: 100%;
    overflow: hidden;
    flex-direction: column;
    background-color: var(--meeting-dark);
}

.fullscreen-controls {
    flex-shrink: 0;
    background-color: var(--meeting-msg-text);
    padding: 8px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--meeting-msg-text);
}

/* ── Tile visibility toggles (set by JS / C# component) ─────────────── */

.makeInVisible {
    display: none !important;
}

.makeVisible {
    display: inline-block !important;
}

/* ── Clinician tile variants ─────────────────────────────────────────── */

.video-tile-full {
    display: inline-block;
    animation: slide-fade 330ms ease;
    animation-delay: 400ms;
    animation-fill-mode: forwards;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    position: relative;
    top: 0.6vh;
}

.video-tile-clinician {
    display: inline-block;
    animation: slide-fade 330ms ease;
    animation-delay: 400ms;
    animation-fill-mode: forwards;
    border-radius: 4px;
    overflow: hidden;
    width: 300px;
    position: relative;
    top: 0.6vh;
}

.video-tile-clinician-full {
    display: inline-block;
    animation: slide-fade 330ms ease;
    animation-delay: 400ms;
    animation-fill-mode: forwards;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    top: 0.6vh;
}

.video-tile-clinician video {
    object-fit: cover;
    display: block;
}

/* ── Clinician video element classes ─────────────────────────────────── */

.clincian-desk-remote-video-full {
    border-top-left-radius: 0.2rem;
    border-top-right-radius: 0.2rem;
    width: 100%;
    height: calc(100vh - 240px);
    object-fit: contain;
    object-position: top center;
    display: block;
}

.clincian-desk-local-video-full {
    border-top-left-radius: 0.2rem;
    border-top-right-radius: 0.2rem;
    width: 100%;
    height: calc(100vh - 240px);
    object-fit: contain;
    object-position: top center;
    display: block;
    transform: rotateY(0deg) !important;
}

.clincian-desk-remote-video {
    height: 10rem;
    border-top-left-radius: 0.2rem;
    border-top-right-radius: 0.2rem;
}

.clincian-desk-local-video {
    height: 10rem;
    border-top-left-radius: 0.2rem;
    border-top-right-radius: 0.2rem;
    transform: rotateY(0deg) !important;
}

/* ── Tile wrapper divs ───────────────────────────────────────────────── */

.div-clincian-desk-local-video {
    margin: 1rem 2rem;
}

.div-clincian-desk-local-video-full {
    margin: 1rem 2rem;
}

/* ── Spinner loaders (clinician context — scoped to avoid clashing
       with meeting.css patient .remote-video-loader::before approach) ── */

#agent-view-id .video-loader {
    position: absolute;
    left: 4rem;
    right: 4rem;
    margin: auto;
    border-width: 5px;
    border-color: var(--meeting-bg-end) transparent transparent;
    border-radius: 100%;
    animation: rotation .8s infinite linear;
    border-style: solid;
    height: 40px;
    width: 40px;
}

#agent-view-id .remote-video-loader {
    top: 4rem;
    display: block;
}

#agent-view-id .local-video-loader {
    top: 30%;
    display: block;
}

.no-camera-indicator {
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: url('../qldbackground1.jpg') center / cover no-repeat;
}

/* ── Control buttons (clinician panel — scoped; patient has its own
       base in site.css and overrides via .meeting-view context) ─────── */

#agent-view-id .controlBtn {
    content: "";
    display: block;
    height: 40px;
    width: 40px;
    margin: 0 10px;
    border: none;
    border-radius: 100%;
    background: #1d1c1c;
    transition: all 180ms ease;
}

#agent-view-id .controlBtn:hover {
    background-color: var(--success-pastel) !important;
}

#agent-view-id .controlBtn.btn-end-meeting:hover {
    background-color: var(--meeting-sos-glow-strong) !important;
}
#agent-view-id .controlBtn img {
    width: 70px;
}

.controlBtnEnlarge {
    content: "";
    display: block;
    height: 40px;
    width: 40px;
    margin: 2px;
    border: none;
    border-radius: 100%;
    background: #1c1d1d99;
    transition: all 180ms ease;
    position: absolute;
    z-index: 1000;
}

.controlBtnEnlarge:hover {
    transform: translateY(-4px);
    background-color: #101010;
}

.controlBtnEnlarge img {
    width: 30px;
}

/* ── Panel header button ─────────────────────────────────────────────── */

.btn-window-action {
    flex-shrink: 0;
    border: none;
    padding: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    color: var(--white);
    transition: filter 120ms ease;
}

.btn-window-action:hover {
    filter: brightness(1.15);
}

.btn-window-action:active {
    filter: brightness(0.9);
}

/* ── Fullscreen header device strip ─────────────────────────────────── */

/* Patient name: grows to fill the gap between devices and action buttons */
.chime-patient-center {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}

/* Device group: flex row on the left, capped so it cannot crowd the patient name */
.chime-devices {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow: hidden;
    max-width: 55%;
}

/* Limit individual device selects so long device names don't eat the patient name area */
.chime-devices select {
    max-width: 9rem;
}

/* "..." overflow button: hidden on wide screens */
.chime-devices-overflow-btn {
    display: none;
    background: var(--meeting-chat-shadow);
    flex-shrink: 0;
}

.chime-devices-overflow-btn:hover {
    background: var(--meeting-chat-hover);
    filter: none;
}

/* Narrow screens: collapse devices behind the overflow button */
@media (max-width: 1099px) {
    .chime-devices {
        display: none;
    }

    /* Dropdown panel: anchored to the bottom of the sticky header */
    .chime-devices--open {
        display: flex !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 10px;
        padding: 10px 12px 12px;
        background: var(--primary-dark);
        border-radius: 0 0 8px 8px;
        z-index: 50;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    }

    /* Each device row spans full width inside the dropdown */
    .chime-devices--open > div {
        width: 100%;
    }

    /* Selects fill the row */
    .chime-devices--open select {
        flex: 1;
        width: auto !important;
    }

    .chime-devices-overflow-btn {
        display: flex !important;
    }
}

/* ── End meeting confirmation overlay (used in EncounterForm.razor) ─── */

.alert-agent-end-meeting {
    display: none;
    position: absolute !important;
    margin: 0;
    left: 40%;
    top: 13%;
}

/* ── Teams-style layout ─────────────────────────────────────────────── */

.chime-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 4px;
    padding: 4px 4px 8px;
}

/* Drag handle between thumbnail strip and main slot */
.chime-resize-handle {
    height: 6px;
    flex-shrink: 0;
    cursor: row-resize;
    background: var(--meeting-chat-input-border);
    border-radius: 3px;
    transition: background 0.15s;
}

.chime-resize-handle:hover,
.chime-resize-handle.dragging {
    background: var(--meeting-chat-shadow);
}

/* Thumbnail strip: true 16:9 tiles that wrap onto extra rows when they don't
   fit — every video always visible, no scrolling. Tile height comes from
   --thumb-h, computed by relayoutThumbnailStrip() in JSInteropAmazonClinician.js
   as the largest 16:9 size that fits all visible tiles in the strip; the CSS
   min() is only the pre-JS fallback (single tile / first paint).
   container-type:size provides the cqw/cqh units for that fallback. */
.chime-thumbnail-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: safe center !important;
    gap: 4px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--meeting-overlay-light);
    border-radius: 6px;
    padding: 4px;
    height: 150px;
    min-height: 100px;
    container-type: size;
}

/* camgrid becomes a transparent wrapper so its children are direct flex items of the strip */
.chime-thumbnail-strip .camgrid {
    display: contents !important;
}

/* Remote tiles: 16:9 box sized by --thumb-h (JS) so all visible tiles share
   the strip — the aspect ratio always holds and a 16:9 feed is never cropped */
.chime-thumbnail-strip .div-clincian-desk-remote-video {
    flex: 0 0 auto;
    height: var(--thumb-h, min(100cqh, calc(100cqw * 9 / 16)));
    aspect-ratio: 16 / 9;
    width: auto !important;
    min-width: 0;
    background: #000;
    display: none;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
}

.chime-thumbnail-strip .div-clincian-desk-remote-video[style*="display: block"] {
    display: block !important;
}

.chime-thumbnail-strip .video-tile,
.chime-thumbnail-strip .video-tile-full {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column;
    top: 0 !important;
}

.chime-thumbnail-strip .video-tile .video-wrapper,
.chime-thumbnail-strip .video-tile-full .video-wrapper {
    flex: 1;
    min-height: 0;
}

.chime-thumbnail-strip .clincian-desk-remote-video,
.chime-thumbnail-strip .clincian-desk-remote-video-full {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover;
}

/* Nameplate overlays the video (Teams-style) so the whole 16:9 tile is video
   and the bottom of the feed is not pushed out of frame */
.chime-thumbnail-strip .video-tile--nameplate {
    font-size: 10px !important;
    padding: 2px 6px !important;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
}

/* "Me" tile: same height-driven 16:9 sizing as remote tiles */
.chime-thumbnail-strip .div-clincian-desk-local-video,
.chime-thumbnail-strip .div-clincian-desk-local-video-full {
    flex: 0 0 auto;
    height: var(--thumb-h, min(100cqh, calc(100cqw * 9 / 16)));
    aspect-ratio: 16 / 9;
    width: auto !important;
    min-width: 0;
    background: #000;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    margin: 0 !important;
}

.chime-thumbnail-strip .video-tile-clinician,
.chime-thumbnail-strip .video-tile-clinician-full {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column;
    top: 0 !important;
}

.chime-thumbnail-strip .video-tile-clinician .video-wrapper,
.chime-thumbnail-strip .video-tile-clinician-full .video-wrapper {
    flex: 1;
    min-height: 0;
}

.chime-thumbnail-strip .clincian-desk-local-video,
.chime-thumbnail-strip .clincian-desk-local-video-full {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover;
}

/* "Me" nameplate bar: overlay on the video, suppress Bootstrap spacing */
.chime-thumbnail-strip .video-tile-clinician .bg-color-primary,
.chime-thumbnail-strip .video-tile-clinician-full .bg-color-primary {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    margin: 0 !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-right: 0 !important;
    max-width: none !important;
}

.chime-thumbnail-strip .video-tile--nameplatecustomer {
    font-size: 10px !important;
    padding: 2px 6px !important;
}

/* Highlight the active thumbnail */
.chime-thumbnail-strip .tile-is-pinned {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* Main video slot: fills remaining space, always visible with a minimum height.
   container-type:size lets the pinned tile size itself with cqw/cqh units. */
.chime-main-slot {
    flex: 1;
    min-height: 120px;
    position: relative;
    background: #1a1a1a;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: size;
}

/* Pinned tile: largest 16:9 box that fits the slot, centered — Teams-style.
   Both dimensions track the resize bar, so the video scales instead of
   growing letterbox bars. */
.chime-main-slot .div-clincian-desk-remote-video,
.chime-main-slot .div-clincian-desk-local-video,
.chime-main-slot .div-clincian-desk-local-video-full {
    width: min(100cqw, calc(100cqh * 16 / 9)) !important;
    height: min(100cqh, calc(100cqw * 9 / 16)) !important;
    display: flex !important;
    flex-direction: column;
    visibility: visible !important;
    margin: 0 !important;
    cursor: pointer;
}

.chime-main-slot .video-tile,
.chime-main-slot .video-tile-full,
.chime-main-slot .video-tile-clinician,
.chime-main-slot .video-tile-clinician-full {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column;
}

.chime-main-slot .video-wrapper {
    flex: 1;
    min-height: 0;
}

/* Tile is already 16:9, so cover fills it edge-to-edge (only the nameplate's
   few pixels are cropped). Non-16:9 streams crop to fill, as Teams does. */
.chime-main-slot .clincian-desk-remote-video,
.chime-main-slot .clincian-desk-remote-video-full,
.chime-main-slot .clincian-desk-local-video,
.chime-main-slot .clincian-desk-local-video-full {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}

/* Nameplate overlays the video here too, so the 16:9 tile is all video */
.chime-main-slot .video-tile--nameplate {
    font-size: 14px !important;
    padding: 6px 12px !important;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
}

/* "Me" nameplate bar: overlay, and clear the inline max-width:300px */
.chime-main-slot .video-tile-clinician .bg-color-primary,
.chime-main-slot .video-tile-clinician-full .bg-color-primary {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    margin: 0 !important;
    max-width: none !important;
}

/* Empty main slot placeholder */
.chime-main-slot:empty::after {
    content: 'Click a participant above to feature them';
    color: var(--meeting-chat-shadow);
    font-size: 13px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

/* Fullscreen thumbnail sizing: no override needed — tiles self-size to 16:9
   from the strip height, so compact panel and fullscreen both work. */

/* ── Patient video status overlay ────────────────────────────────────── */
/* Driven by UpdatePatientInsight SignalR events in EncounterDetail.razor.cs.
   JS functions: window.setPatientVideoStatus(msg, type) / clearPatientVideoStatus(). */

.patient-status-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px;
    z-index: 20;
    pointer-events: none;
}

.patient-status-overlay--warning {
    background: rgba(0, 0, 0, 0.65);
    border: 2px solid var(--secondary);
}

.patient-status-overlay--error {
    background: rgba(0, 0, 0, 0.70);
    border: 2px solid var(--meeting-sos);
}

.patient-status-overlay__text {
    color: var(--white);
    padding:0.5rem;
    border-radius: 0.375rem;
    background-color: var(--primary-dark);
    line-height: 1.4;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Ensure the tile wrapper is a positioning context for the overlay */
.div-clincian-desk-remote-video {
    position: relative;
}

/* Portrait video: mobile attendee with phone in portrait orientation.
   JS adds .video-portrait-cell to the tile wrapper when videoHeight > videoWidth.
   Switch object-fit to contain so the full portrait frame is visible (pillarboxed)
   rather than cropped to fill the landscape tile. Specificity beats the !important
   cover rules in the main-slot and thumbnail-strip sections above. */
.chime-main-slot .video-portrait-cell .clincian-desk-remote-video,
.chime-main-slot .video-portrait-cell .clincian-desk-remote-video-full {
    object-fit: contain !important;
}
.chime-thumbnail-strip .video-portrait-cell .clincian-desk-remote-video,
.chime-thumbnail-strip .video-portrait-cell .clincian-desk-remote-video-full {
    object-fit: contain !important;
}