:root{--erms:#0b57d0;--ink:#1f1f1f;--muted:#667085;--bg:#f7f9fc}.brand-mark{background:linear-gradient(135deg,#0b57d0,#4f8df7);color:#fff;padding:.35rem .55rem;border-radius:.65rem}.hero-shell{min-height:calc(100vh - 65px);background:radial-gradient(circle at 10% 10%,#e9f1ff 0,transparent 32%),radial-gradient(circle at 90% 20%,#eef7ff 0,transparent 28%),#fff}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;color:var(--erms);font-weight:800}.btn-primary{background:var(--erms);border-color:var(--erms)}.stat-card,.panel{background:#fff;border:1px solid #e9edf3;border-radius:1rem;padding:1.25rem;box-shadow:0 10px 30px rgba(17,24,39,.05)}.stat-num{font-size:2rem;font-weight:800}.meeting-shell{height:calc(100vh - 57px);background:#202124;color:#fff;display:flex;flex-direction:column}.meeting-top{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#202124;border-bottom:1px solid #303134}.meeting-body{flex:1;min-height:0;display:flex}.stage{flex:1;padding:12px;min-width:0;overflow:auto}.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;height:100%;align-content:center}.video-tile{position:relative;background:#3c4043;border-radius:16px;overflow:hidden;min-height:220px;display:flex;align-items:center;justify-content:center}.video-tile video{width:100%;height:100%;object-fit:cover}.tile-label{position:absolute;left:12px;bottom:10px;background:rgba(0,0,0,.52);padding:.3rem .55rem;border-radius:.45rem;font-size:.83rem}.side-panel{width:360px;background:#fff;color:#202124;border-radius:16px 0 0 16px;overflow:hidden}.chat-messages{height:calc(100% - 120px);overflow:auto;padding:14px}.chat-compose{padding:12px;border-top:1px solid #eee}.chat-msg{background:#f1f3f4;border-radius:12px;padding:8px 10px;margin-bottom:8px}.chat-msg.private{background:#e8f0fe}.meeting-controls{min-height:76px;padding:10px 18px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.controls-center{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.round-btn{width:46px;height:46px;border-radius:50%;border:0;background:#3c4043;color:#fff;font-size:1.05rem}.round-btn.active,.round-btn.off{background:#ea4335}.round-btn.danger{background:#ea4335}.meeting-clock{text-align:right}.participant-row{display:flex;align-items:center;justify-content:space-between;padding:.6rem .2rem;border-bottom:1px solid #eee}.recording-dot{color:#ea4335}.file-item{padding:.55rem 0;border-bottom:1px solid #eee}.waiting-banner{position:fixed;inset:0;background:rgba(32,33,36,.96);z-index:2000;display:flex;align-items:center;justify-content:center;color:#fff}.waiting-card{max-width:520px;text-align:center}.toast-zone{position:fixed;top:80px;right:20px;z-index:3000}.shared-stage{grid-column:1/-1;min-height:70vh}
@media(max-width:900px){.side-panel{position:absolute;right:0;top:58px;bottom:76px;z-index:20;transform:translateX(100%);transition:.2s;width:min(90vw,360px);border-radius:16px 0 0 16px}.side-panel.open{transform:none}.meeting-controls{grid-template-columns:1fr}.meeting-id,.meeting-clock{display:none!important}.video-grid{grid-template-columns:1fr}.video-tile{min-height:200px}}
/* =========================================================
   ERMS MOBILE MEETING RESPONSIVE FIX
   ========================================================= */

.meeting-shell {
    width: 100%;
    height: calc(100dvh - 70px);
    min-height: 500px;
    overflow: hidden;
    background: #202124;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.meeting-body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.stage {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 12px;
    background: #202124;
}

.video-grid {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-auto-rows: minmax(220px, 1fr);
    gap: 12px;
    align-content: center;
}

.video-tile {
    position: relative;
    width: 100%;
    min-height: 220px;
    background: #3c4043;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-tile video {
    width: 100%;
    height: 100%;
    min-height: 220px;
    display: block;
    object-fit: cover;
    background: #202124;
}

.tile-label {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 4;
    color: #fff;
    background: rgba(0,0,0,.60);
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 13px;
}

/* Right side panel */

.side-panel {
    flex: 0 0 360px;
    width: 360px;
    min-width: 320px;
    height: 100%;
    background: #fff;
    color: #202124;
    overflow: hidden;
    border-left: 1px solid #dadce0;
    border-radius: 16px 0 0 16px;
}

.side-panel .tab-content {
    height: calc(100% - 48px);
    overflow: hidden;
}

/* Meeting bottom toolbar */

.meeting-controls {
    flex: 0 0 auto;
    min-height: 74px;
    padding: 10px 16px;
    background: #202124;
    border-top: 1px solid #303134;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    z-index: 100;
}

.controls-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.round-btn {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: #3c4043;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: none;
}

.round-btn:hover,
.round-btn:focus {
    background: #4b4f52;
    color: #fff;
}

.round-btn.active {
    background: #0b57d0;
}

.round-btn.off,
.round-btn.danger {
    background: #d93025;
}

.meeting-clock {
    text-align: right;
}

/* =========================================================
   TABLET AND MOBILE
   ========================================================= */

@media (max-width: 991.98px) {

    body {
        overflow: hidden;
    }

    .navbar {
        position: relative !important;
        height: 64px;
        min-height: 64px;
        z-index: 1100;
    }

    .navbar .container-fluid {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .navbar-brand {
        max-width: calc(100vw - 80px);
        font-size: 19px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .brand-mark {
        display: none;
    }

    .meeting-shell {
        height: calc(100dvh - 64px);
        min-height: 0;
    }

    .meeting-top {
        flex: 0 0 56px;
        height: 56px;
        min-height: 56px;
        padding: 6px 14px;
        overflow: hidden;
    }

    .meeting-top > div:first-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
    }

    .meeting-top > div:last-child {
        font-size: 12px;
        margin-left: 10px;
    }

    .meeting-body {
        position: relative;
        flex: 1;
        min-height: 0;
        width: 100%;
        overflow: hidden;
    }

    .stage {
        width: 100%;
        height: 100%;
        padding: 8px;
        overflow: auto;
    }

    .video-grid {
        height: 100%;
        min-height: 0;
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(180px, 1fr);
        gap: 8px;
        align-content: stretch;
    }

    .video-tile {
        width: 100%;
        min-height: 180px;
        border-radius: 14px;
    }

    .video-tile video {
        min-height: 180px;
    }

    /* Side panel becomes an overlay drawer */

    .side-panel {
        position: absolute;
        z-index: 500;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(92vw, 380px);
        min-width: 0;
        height: 100%;
        border-radius: 18px 0 0 18px;
        box-shadow: -10px 0 30px rgba(0,0,0,.25);
        transform: translateX(105%);
        transition: transform .25s ease;
    }

    .side-panel.open {
        transform: translateX(0);
    }

    .meeting-controls {
        flex: 0 0 68px;
        min-height: 68px;
        width: 100%;
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
        display: flex;
        align-items: center;
        justify-content: center;
        background: #202124;
    }

    .meeting-id,
    .meeting-clock {
        display: none !important;
    }

    .controls-center {
        width: 100%;
        max-width: 520px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        gap: 5px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .controls-center::-webkit-scrollbar {
        display: none;
    }

    .round-btn {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    .shared-stage {
        min-height: 100%;
        grid-column: 1;
    }
}

/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 575.98px) {

    .navbar {
        height: 60px;
        min-height: 60px;
    }

    .navbar-brand {
        font-size: 17px;
    }

    .navbar-toggler {
        padding: 6px 9px;
    }

    .meeting-shell {
        height: calc(100dvh - 60px);
    }

    .meeting-top {
        height: 52px;
        min-height: 52px;
        padding: 5px 10px;
    }

    .meeting-top > div:first-child {
        font-size: 13px;
    }

    .stage {
        padding: 6px;
    }

    .video-grid {
        grid-auto-rows: minmax(160px, 1fr);
        gap: 6px;
    }

    .video-tile {
        min-height: 160px;
        border-radius: 12px;
    }

    .video-tile video {
        min-height: 160px;
    }

    .meeting-controls {
        min-height: 66px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .controls-center {
        justify-content: space-between;
        gap: 3px;
    }

    .round-btn {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .side-panel {
        width: 94vw;
    }

    .side-panel .nav-tabs {
        flex-wrap: nowrap;
    }

    .side-panel .nav-link {
        flex: 1;
        padding: 10px 5px;
        text-align: center;
        font-size: 14px;
    }

    .chat-messages {
        height: calc(100% - 135px);
        overflow-y: auto;
    }

    .chat-compose {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
    }
}

/* Landscape phones */

@media (max-height: 500px) and (orientation: landscape) {

    .navbar {
        display: none !important;
    }

    .meeting-shell {
        height: 100dvh;
    }

    .meeting-top {
        height: 42px;
        min-height: 42px;
    }

    .meeting-controls {
        min-height: 56px;
        flex-basis: 56px;
    }

    .round-btn {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .video-tile {
        min-height: 120px;
    }
}