/* Flat mobile/PWA surfaces and the unified lobby sidebar. */
.pwa-update { top:auto !important; bottom:calc(92px + env(safe-area-inset-bottom)); }
.workspace-app.workspace-unified-lobby {
    padding-inline-start: 0;
}
.workspace-unified-lobby .lobby-layout { direction:rtl; }
.workspace-unified-lobby .hub-sidebar { border-right:0; border-left:1px solid #303030; overflow-y:auto; }
@media(max-width:900px) { .workspace-unified-lobby .hub-sidebar .workspace-lobby-shortcuts { display:none; } }

.workspace-lobby-shortcuts.workspace-rail {
    position: static;
    width: 100%;
    height: auto;
    padding: 12px 0;
    border: 0;
    border-top: 1px solid #303030;
    align-items: stretch;
}

.workspace-lobby-shortcuts .workspace-server-list {
    display: grid;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
}

.workspace-lobby-shortcuts .workspace-server {
    width: 100%;
    display: flex;
    padding: 7px;
    gap: 10px;
    height: auto;
    min-height: 44px;
    border-radius: 10px;
}

.workspace-lobby-shortcuts .workspace-server img {
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

.workspace-server-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.workspace-lobby-shortcuts .workspace-server b {
    position: static;
    margin-inline-start: auto;
    order: 2;
}

.workspace-lobby-shortcuts .workspace-rail-bottom,
.workspace-lobby-shortcuts>a {
    display: none !important;
}

.workspace-lobby-shortcuts .workspace-server>span:not(.workspace-server-name) {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: #0060ff;
    border-radius: 10px;
}

.pwa-install-dialog {
    width: min(460px, calc(100vw - 24px));
    padding: 24px;
    max-height: calc(100dvh - 24px);
    overflow: auto;
    background: #111;
    color: #fff;
    border: 1px solid #303030;
    border-radius: 20px;
}

.pwa-install-dialog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pwa-install-dialog p {
    line-height: 1.9;
    color: #c7c7c7;
}

.pwa-install-dialog button {
    min-height: 44px;
}

.pwa-connectivity,
.pwa-update {
    position: fixed;
    z-index: 1000;
    inset-inline: 12px;
    top: calc(12px + env(safe-area-inset-top));
    margin: auto;
    width: min(560px, calc(100% - 24px));
    padding: 12px 16px;
    border: 1px solid #0060ff;
    background: #111;
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 8px 30px #0008;
}

.pwa-connectivity[hidden] {
    display: none;
}

.pwa-update {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pwa-update span {
    flex: 1 1 220px;
}

.pwa-update button {
    background: #0060ff;
    border: 0;
    padding: 8px 12px;
    border-radius: 8px;
    color: white;
    min-height: 44px;
}

.voice-enable-audio {
    position: fixed;
    bottom: calc(96px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 180;
    padding: 12px 20px;
    border: 1px solid #fff;
    border-radius: 12px;
    background: #0060ff;
    color: #fff;
}

.voice-touch-ptt {
    display: none;
    touch-action: none;
    user-select: none;
    background: #0060ff;
    color: white;
    border: 1px solid #fff;
    border-radius: 12px;
    padding: 10px 14px;
}

.workspace-key-capture {
    min-height: 44px;
    border: 1px solid #0060ff !important;
    border-radius: 12px;
}

.workspace-key-capture[data-capturing] {
    background: #0060ff !important;
    color: #fff;
}

.room-page .video-stage[hidden] {
    display: none !important;
}

.download-checksum {
    overflow-wrap: anywhere;
    direction: ltr;
    text-align: left;
    font: 11px/1.8 monospace;
    color: #b5b5b5;
}

.support-card {
    max-width: 680px;
    margin: auto;
    padding: clamp(24px, 6vw, 48px);
    background: #111;
    border: 1px solid #303030;
    border-radius: 24px;
    text-align: center;
}

.support-card>i {
    font-size: 48px;
    color: #0060ff;
}

.support-card p {
    line-height: 1.9;
    color: #bfbfbf;
}

.support-card button {
    min-height: 44px;
}

@media(max-width:800px) {
    .workspace-unified-lobby .hub-sidebar .workspace-lobby-shortcuts {
        display: none;
    }

    .workspace-unified-lobby .hub-sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .room-page .room-shell {
        height: var(--app-viewport-height, 100dvh);
        padding-top: env(safe-area-inset-top);
    }

    .room-page .chat-header {
        flex-wrap: wrap;
        height: auto;
        min-height: 60px;
        align-content: center;
    }

    .room-page .chat-header .header-actions {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
    }

    .room-page .header-actions .icon-button {
        width: 36px;
        min-width: 36px;
    }

    .room-page .chat-header .header-actions { flex-wrap:wrap; }

    .room-page .video-stage.active {
        flex-shrink: 0;
        min-height: 100px;
        height: clamp(110px, 28dvh, 260px);
    }

    .room-page .video-grid {
        gap: 6px;
    }

    .room-page .video-caption {
        font-size: 10px;
        padding: 4px 6px;
    }

    .room-page .composer textarea,
    .direct-composer textarea,
    input[type=text],
    input[type=email],
    input[type=password] {
        font-size: 16px;
    }

    .mobile-keyboard-open .workspace-mobile-nav {
        display: none;
    }

    .mobile-keyboard-open.room-page {
        padding-bottom: 0;
    }

    .mobile-keyboard-open .room-shell {
        height: var(--app-viewport-height, 100dvh);
    }

    .mobile-keyboard-open .video-stage.active {
        height: 96px;
        min-height: 80px;
    }

    .mobile-keyboard-open .control-panel:not(.mobile-open) {
        display: none;
    }

    .pwa-standalone .site-header {
        padding-top: env(safe-area-inset-top);
    }

    .direct-chat-panel {
        min-height: 0;
    }

    .direct-messages {
        overscroll-behavior: contain;
    }

    .workspace-audio-devices .field-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media(pointer:coarse) {
    .voice-connected .voice-touch-ptt:not([hidden]) {
        display: block;
        position: fixed;
        z-index: 120;
        left: 12px;
        bottom: calc(86px + env(safe-area-inset-bottom));
    }
}

@media(max-width:380px) {

    .room-page .chat-room-meta {
        flex: 1;
    }

    .room-page .chat-room-meta h1 {
        max-width: 45vw;
    }
}

@media(max-height:500px) and (max-width:900px) {
    .room-page .video-stage.active {
        height: 100px;
    }

    .room-page .chat-header {
        min-height: 44px;
    }

    .workspace-mobile-nav {
        height: 48px;
    }
}