:root {
    --primary: #007AFF;
    --primary-dark: #0056CC;
    --voice-action: #34C759;
    --voice-action-dark: #28A745;
    --video-action: #0A84FF;
    --video-action-dark: #0069D9;
    --message-action: #30D5C8;
    --message-action-dark: #1FA99E;
    --message-action-soft: rgba(48, 213, 200, 0.16);
    --add-contact-action: #FF7A59;
    --add-contact-action-dark: #E36443;
    --unknown-action: #8E8E93;
    --unknown-action-dark: #6D6D72;
    --video-action-soft: rgba(10, 132, 255, 0.12);
    --voice-action-soft: rgba(52, 199, 89, 0.14);
    --surface: #F2F2F7;
    --surface-dark: #E5E5EA;
    --background: #FFFFFF;
    --text-primary: #000000;
    --text-secondary: #8E8E93;
    --border: #C6C6C8;
    --success: #34C759;
    --danger: #FF3B30;
    --warning: #FF9500;
    --app-max-width: 680px;
    --app-shell-height: 100dvh;
    --app-visible-height: 100dvh;
    --app-header-height: 70px;
    --app-header-occupied-height: var(--app-header-height);
    --keyboard-offset: 0px;
    --message-keyboard-scroll-pad: 0px;
    --viewport-offset-top: 0px;
    --bottom-nav-height: 58px;
    --bottom-nav-occupied-height: var(--bottom-nav-height);
    --message-compose-height: 58px;
    --message-attachment-height: 0px;
    --side-menu-width: min(248px, calc(100vw - 88px));
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --shell-safe-area-top: min(var(--safe-area-top), 10px);
    --shell-safe-area-bottom: min(var(--safe-area-bottom), 10px);
    --tab-bar-reserved-space: calc(var(--bottom-nav-height) + max(var(--shell-safe-area-bottom), 8px));
    --message-compose-reserved-space: 116px;
    --meeting-controls-reserved-height: 74px;
    --meeting-viewport-height: 100dvh;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

button,
[type="button"],
[type="submit"],
[type="reset"],
.btn,
.nav-item,
.menu-item,
.thread-action-btn,
.attach-trigger,
.contact-message-btn,
.contact-call-btn,
.peer-call-btn,
.peer-message-btn,
.add-contact-btn {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

button:focus,
button:focus-visible,
[type="button"]:focus,
[type="button"]:focus-visible,
[type="submit"]:focus,
[type="submit"]:focus-visible,
[type="reset"]:focus,
[type="reset"]:focus-visible,
.btn:focus,
.btn:focus-visible,
.nav-item:focus,
.nav-item:focus-visible,
.menu-item:focus,
.menu-item:focus-visible,
.thread-action-btn:focus,
.thread-action-btn:focus-visible,
.attach-trigger:focus,
.attach-trigger:focus-visible,
.contact-message-btn:focus,
.contact-message-btn:focus-visible,
.contact-call-btn:focus,
.contact-call-btn:focus-visible,
.peer-call-btn:focus,
.peer-call-btn:focus-visible,
.peer-message-btn:focus,
.peer-message-btn:focus-visible,
.add-contact-btn:focus,
.add-contact-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
}

body {
    position: fixed;
    inset: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--background);
    color: var(--text-primary);
    overflow-x: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.app-container {
    width: 100%;
    max-width: var(--app-max-width);
    margin: 0 auto;
    min-height: var(--app-shell-height);
    height: var(--app-shell-height);
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    background-color: var(--background);
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    .app-container {
        width: 100%;
        max-width: 100%;
    }
}

.app-container.disabled {
    pointer-events: none;
    filter: grayscale(100%);
    opacity: 0.3;
}

.header {
    background-color: var(--background);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header h1 {
    font-size: 18px;
    font-weight: 600;
}

.menu-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--primary);
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.menu-btn:hover {
    background-color: var(--surface);
}

.share-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.share-btn:active {
    background-color: rgba(255, 255, 255, 0.2);
}

.side-menu {
    position: fixed;
    top: 0;
    left: calc(-1 * var(--side-menu-width));
    width: var(--side-menu-width);
    height: 100vh;
    background-color: var(--background);
    z-index: 1000;
    transition: left 0.3s ease;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    overflow-y: auto;
}

.side-menu.open {
    left: 0;
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
    opacity: 0.82;
    visibility: hidden;
    transition: all 0.3s ease;
}

.menu-overlay.open {
    opacity: 1;
    visibility: visible;
}

.menu-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 14px;
    border-bottom: 1px solid var(--border);
    background-color: var(--surface);
}

.menu-header-copy {
    flex: 1;
    min-width: 0;
}

.menu-header h2 {
    font-size: 20px;
    margin-bottom: 5px;
}

.menu-header .peer-id {
    font-size: 12px;
    color: var(--text-secondary);
    font-family: monospace;
}

.menu-close-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.menu-close-btn .material-icons {
    font-size: 19px;
}

.menu-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--text-primary);
}

.menu-items {
    padding: 10px 0;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.menu-item:hover {
    background-color: var(--surface);
}

.menu-item .material-icons {
    margin-right: 12px;
    font-size: 20px;
    color: var(--text-secondary);
}

@media screen and (max-width: 767px) {
    :root {
        --side-menu-width: min(232px, calc(100vw - 72px));
    }
}



.tab-content {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    position: relative;
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.tab-content.active {
    display: block;
}

#keypad-tab.active {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
}

.keypad-container {
    width: 100%;
    padding: 16px 0;
    position: static;
    bottom: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.number-display {
    text-align: center;
    font-size: 28px;
    font-weight: 500;
    min-height: 40px;
    margin-bottom: 10px;
    letter-spacing: 2px;
    color: var(--text-primary);
}

.dial-contact-match {
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 700;
    min-height: 20px;
    margin-top: -8px;
    text-align: center;
}

.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 250px;
    margin: 0 auto;
    margin-bottom: 5px;
}

.keypad-btn {
    aspect-ratio: 1;
    border: none;
    border-radius: 50%;
    background-color: var(--surface);
    color: var(--text-primary);
    font-size: clamp(16px, 5vw, 24px);
    font-weight: 400;
    cursor: pointer;
    transition: transform 0.06s ease, background-color 0.06s ease, color 0.06s ease, box-shadow 0.06s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    min-height: 50px;
    max-height: 65px;
    width: 100%;
    max-width: 65px;
    justify-self: center;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.keypad-btn:hover, .keypad-btn:focus {
    background-color: var(--surface-dark);
    transform: scale(1.05);
}

.keypad-btn:active,
.keypad-btn.is-pressed {
    transform: scale(0.95);
    background-color: var(--primary);
    color: white;
}

.keypad-btn .letters {
    position: absolute;
    bottom: 8px;
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 400;
}

.keypad-btn .letters.voicemail-key-label {
    bottom: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.keypad-btn .letters.voicemail-key-label .material-icons {
    font-size: 14px;
    line-height: 1;
}

.action-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 20px;
}

.action-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: transform 0.08s ease, background-color 0.08s ease, color 0.08s ease, box-shadow 0.08s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.delete-btn {
    background-color: var(--surface);
    color: var(--text-secondary);
}

.delete-btn:hover {
    background-color: var(--surface-dark);
}

.delete-btn:active,
.delete-btn.is-pressed {
    background-color: var(--danger);
    color: white;
    transform: scale(0.94);
    box-shadow: 0 6px 14px rgba(255, 59, 48, 0.28);
}

.call-btn {
    background-color: var(--voice-action);
    color: white;
}

.call-btn:hover {
    background-color: var(--voice-action-dark);
    transform: scale(1.05);
}

.video-call-btn {
    background-color: var(--video-action);
    color: white;
}

.video-call-btn:hover {
    background-color: var(--video-action-dark);
    transform: scale(1.05);
}

.navigation {
    position: relative;
    width: 100%;
    max-width: var(--app-max-width);
    margin: 0 auto;
    background-color: var(--background);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-around;
    padding: 6px 0 max(var(--shell-safe-area-bottom), 8px);
    z-index: 100;
    box-sizing: border-box;
    height: auto;
    min-height: var(--bottom-nav-height);
    flex-shrink: 0;
    overflow: hidden;
    transition: transform 0.18s ease, opacity 0.18s ease, min-height 0.18s ease, padding 0.18s ease, border-color 0.18s ease;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 12px;
    min-width: 54px;
}

.nav-item.active {
    color: var(--primary);
}

.nav-item .material-icons {
    font-size: 22px;
    margin-bottom: 2px;
}

.nav-item span {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.05;
    white-space: nowrap;
}

.nav-bug-icon {
    font-size: 22px;
    line-height: 1;
    margin-bottom: 2px;
    transform: translateX(-2px);
}

.nav-item-bugme {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-width: 54px;
    padding-left: 0;
    padding-right: 0;
    transform: none;
}

.nav-bugme-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 0;
    width: 100%;
    transform: translate(-3px, 10%);
}

.nav-item-bugme .nav-bug-icon {
    margin-bottom: 0;
    font-size: 21px;
    transform: none;
}

.nav-item-bugme .nav-bugme-text {
    display: inline-block;
    font-size: 31px !important;
    font-weight: 400 !important;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0;
    transform: none;
    width: auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.navigation.settings-enabled {
    justify-content: space-between;
    gap: 0;
    min-height: 50px;
    padding: 3px 2px max(var(--shell-safe-area-bottom), 8px);
}

.navigation.settings-enabled .nav-item {
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 2px;
    border-radius: 10px;
    overflow: hidden;
}

.navigation.settings-enabled .nav-item .material-icons,
.navigation.settings-enabled .nav-bug-icon {
    font-size: 16px;
    margin-bottom: 0;
}

.navigation.settings-enabled .nav-item span {
    font-size: 7px;
    line-height: 1;
}

.navigation.settings-enabled .nav-item > span:last-child {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navigation.settings-enabled .nav-badge {
    top: 2px;
    right: 2px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: 8px;
}

.navigation.settings-enabled .nav-item-bugme {
    transform: none;
}

.navigation.settings-enabled .nav-item-bugme {
    min-width: 40px;
}

.navigation.settings-enabled .nav-bugme-inline {
    gap: 0;
    transform: translate(-2px, 10%);
}

.navigation.settings-enabled .nav-item-bugme .nav-bug-icon {
    font-size: 16px;
}

.navigation.settings-enabled .nav-item-bugme .nav-bugme-text {
    font-size: 25px !important;
    transform: none;
}

.contacts-section, .settings-section, .history-section, .phonebook-section {
    min-height: 0;
}

.section-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}

.phonebook-brand-title {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.phonebook-brand-word {
    letter-spacing: 0.01em;
}

.contact-item, .history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: var(--surface-color, var(--surface));
    border-radius: 8px;
    border: 1px solid var(--border-color, var(--border));
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
    position: relative;
}

.contact-item:hover, .history-item:hover {
    background: var(--hover-color, var(--surface-dark));
}

.contact-item:last-child, .history-item:last-child {
    margin-bottom: 0;
}

.contact-item.auto-discovered {
    border-left: 4px solid var(--primary);
}

.contact-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 15px;
}

.contact-info {
    flex: 1;
    min-width: 0;
}

.contact-name {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 4px;
}

.contact-number {
    font-size: 14px;
    color: var(--text-secondary);
    font-family: monospace;
}

.contact-status {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.contact-actions {
    display: flex;
    gap: 5px;
    margin-left: auto;
}

.contact-edit-corner-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
}

.contact-message-btn,
.peer-message-btn {
    background: var(--message-action);
    color: #111;
    border: none;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.edit-contact-btn {
    background: var(--warning-color, var(--warning));
    color: #212529;
    border: none;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.delete-contact-btn {
    background: var(--danger-color, var(--danger));
    color: #111;
    border: none;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.contact-actions .contact-message-btn,
.contact-actions .peer-call-btn,
.contact-actions .delete-contact-btn,
.contact-actions .edit-contact-btn {
    color: #111;
}

.contact-actions .contact-message-btn .material-icons,
.contact-actions .peer-call-btn .material-icons,
.contact-actions .delete-contact-btn .material-icons,
.contact-actions .edit-contact-btn .material-icons {
    color: inherit;
}

.add-contact-btn {
    background: var(--add-contact-action);
    color: white;
    border: none;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.add-contact-btn:hover {
    background: var(--add-contact-action-dark);
}

.btn-danger {
    background: var(--danger);
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

.add-contact-form {
    background-color: var(--surface);
    padding: 10px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
    color: var(--text-primary);
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 16px;
    background-color: var(--background);
    color: var(--text-primary);
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary);
}

.btn {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn:hover {
    background-color: var(--primary-dark);
}

.btn:disabled {
    background-color: var(--text-secondary);
    cursor: not-allowed;
}

.btn-secondary {
    background-color: var(--surface);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background-color: var(--surface-dark);
}

.settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background-color: var(--surface);
    border-radius: 12px;
    margin-bottom: 10px;
}

.settings-item label {
    font-size: 16px;
    font-weight: 500;
}

.settings-item select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--background);
    color: var(--text-primary);
}

.status-section {
    background-color: var(--surface);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.status-row:last-child {
    margin-bottom: 0;
}

.status-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.status-value {
    font-size: 14px;
    font-weight: 500;
    font-family: monospace;
}

.network-status {
    font-size: 14px;
    font-weight: 500;
}

.network-status.ready {
    color: var(--success);
}

.network-status.error {
    color: var(--danger);
}

#settings-tab {
    display: none;
    min-height: 0;
    height: auto;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: clamp(12px, 2.4vw, 20px);
    padding-bottom: calc(clamp(12px, 2.4vw, 20px) + var(--tab-bar-reserved-space));
    scroll-padding-bottom: calc(var(--tab-bar-reserved-space) + 16px);
}

#settings-tab.active {
    display: block !important;
}

#settings-tab > .settings-section {
    margin-bottom: 0;
    overflow: visible;
    padding: clamp(12px, 2.4vw, 20px);
}

#settings-tab .settings-section,
#settings-tab .status-section,
#settings-tab .permissions-section,
#settings-tab .settings-item,
#settings-tab .id-info {
    min-width: 0;
}

#settings-tab .settings-item {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

#settings-tab .settings-item label {
    flex: 1 1 100%;
}

#settings-tab .settings-item select,
#settings-tab .settings-item input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

#settings-tab .status-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

#settings-tab .status-label,
#settings-tab .status-value,
#settings-tab .network-status,
#settings-tab .permission-item span,
#settings-tab .id-info .status-value {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#settings-tab .status-value,
#settings-tab .network-status {
    text-align: right;
}

#settings-tab .id-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#settings-tab .id-controls .btn {
    width: 100%;
    min-width: 0;
}

.settings-note {
    display: block;
    margin-top: 6px;
    color: var(--text-secondary);
    line-height: 1.35;
}

.settings-note.settings-warning {
    color: var(--warning);
}

@media (max-width: 767px) {
    #settings-tab {
        padding: 10px;
        padding-bottom: calc(10px + var(--tab-bar-reserved-space));
    }

    #settings-tab > .settings-section {
        padding: 12px;
    }

    #settings-tab .status-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    #settings-tab .status-value,
    #settings-tab .network-status {
        text-align: left;
    }

    #settings-tab .id-controls {
        grid-template-columns: minmax(0, 1fr);
    }
}

.status-indicator {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.status-online {
    background-color: var(--success);
    color: white;
}

.status-offline {
    background-color: var(--danger);
    color: white;
}

.status-ready {
    background-color: var(--unknown-action);
    color: white;
}

.peers-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    margin-right: -4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--surface);
}

.peer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: var(--surface-color, var(--surface));
    border-radius: 8px;
    border: 1px solid var(--border-color, var(--border));
    cursor: pointer;
    transition: background-color 0.2s;
    color: black;
}

.peer-item:hover {
    background: var(--hover-color, var(--surface-dark));
}

.peer-item.own-number {
    background: var(--primary-light, #e3f2fd);
    border-color: var(--primary-color, var(--primary));
    cursor: default;
}

.peer-item.offline {
    opacity: 0.6;
    background: #f0f0f0;
}

.peer-info {
    display: flex;
    flex-direction: column;
}

.peer-id {
    font-weight: bold;
    font-size: 16px;
    color: black;
}

.peer-status {
    font-size: 12px;
    color: var(--text-secondary);
}

.peer-last-seen {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.peer-status.offline {
    color: #999;
}

.peer-actions {
    display: flex;
    gap: 5px;
    align-items: center;
}

.peer-call-btn {
    background: var(--voice-action);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 70px;
    justify-content: center;
}

.peer-call-btn.video-call-btn {
    background: var(--video-action);
}

.peer-call-btn:disabled {
    background: var(--disabled-color, #ccc);
    cursor: not-allowed;
}

.peer-message-btn {
    min-width: 42px;
}

.peer-actions .peer-call-btn,
.peer-actions .peer-message-btn,
.peer-actions .add-contact-btn {
    color: #111;
}

.peer-actions .peer-call-btn .material-icons,
.peer-actions .peer-message-btn .material-icons,
.peer-actions .add-contact-btn .material-icons {
    color: inherit;
}

.peer-actions .add-contact-btn {
    background: var(--warning);
}

.peer-actions .add-contact-btn:hover {
    background: #e68600;
}

.contact-message-btn:hover,
.peer-message-btn:hover,
#send-message-btn:hover {
    background: var(--video-action-dark);
}

#send-message-btn {
    background: var(--video-action);
    color: white;
}

#send-message-btn:disabled,
#send-message-btn.is-sending {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.42);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 1;
}

.peer-call-btn:hover,
.contact-call-btn:hover {
    background: var(--voice-action-dark);
}

.peer-call-btn.video-call-btn:hover,
.contact-call-btn.video-call-btn:hover {
    background: var(--video-action-dark);
}

.phonebook-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.peer-count {
    font-size: 14px;
    color: var(--text-secondary);
}

.phonebook-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 12px;
    background: var(--background);
}

.phonebook-search-wrap .material-icons {
    color: var(--text-secondary);
    font-size: 20px;
}

#phonebook-search {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
}

.pirates-phonebook-bulk {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 12px;
    background: #f8fafc;
}

.pirates-phonebook-bulk.hidden {
    display: none;
}

.pirates-phonebook-bulk-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

.pirates-phonebook-bulk textarea {
    width: 100%;
    resize: vertical;
    min-height: 68px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    color: var(--text-primary);
    background: var(--background);
}

.pirates-phonebook-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

#pirates-phonebook-bulk-status {
    font-size: 12px;
    color: var(--text-secondary);
}

.pirates-phonebook-select {
    display: flex;
    align-items: center;
}

.cache-info {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 10px;
}

.permissions-section {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
}

.permissions-section h4 {
    margin: 0 0 10px 0;
    color: #333;
}

.permission-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0;
    padding: 8px;
    background: white;
    border-radius: 4px;
}

.permission-status {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 12px;
    color: white;
}

.permission-status.granted {
    background: #4CAF50;
}

.permission-status.denied {
    background: #f44336;
}

.permission-status.default {
    background: #999;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 30000;
    display: none;
    justify-content: center;
    align-items: center;
}

.modal {
    background: white;
    border-radius: 8px;
    padding: 20px;
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal h3 {
    margin: 0 0 15px 0;
    color: #333;
}

.modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.modal-buttons button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.modal-cancel {
    background: #6c757d;
    color: white;
}

.modal-save {
    background: #007bff;
    color: white;
}

.share-choice-modal-card {
    max-width: 420px;
    border-radius: 20px;
    padding: 22px;
}

.share-choice-copy {
    color: var(--text-secondary);
    line-height: 1.45;
}

.share-choice-actions {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.share-choice-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    border-radius: 14px;
    font-size: 15px;
}

.share-choice-btn .material-icons {
    font-size: 22px;
}

.qr-choice-btn {
    background: var(--video-action);
}

.online-choice-btn {
    background: #0f766e;
}

.share-online-modal-card {
    max-width: 520px;
    border-radius: 20px;
    padding: 22px;
}

.share-online-copy,
.share-online-status {
    color: var(--text-secondary);
    line-height: 1.45;
}

.share-online-note {
    width: 100%;
    min-height: 84px;
    resize: vertical;
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    font: inherit;
    color: var(--text-primary);
    background: var(--background);
}

.share-online-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.share-online-select-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text-primary);
}

.share-online-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    max-height: min(320px, 38vh);
    overflow-y: auto;
    padding-right: 2px;
    -webkit-overflow-scrolling: touch;
}

.share-online-user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-primary);
}

.share-online-user input {
    width: 18px;
    height: 18px;
}

.share-online-user-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.share-online-user-name {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-online-user-meta {
    color: var(--text-secondary);
    font-size: 12px;
}

.share-qr-overlay {
    position: fixed;
    inset: 0;
    z-index: 30010;
    display: none;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.16), transparent 38%),
        linear-gradient(180deg, #111827 0%, #1f2937 100%);
    padding: 14px 14px 18px;
}

.share-qr-close-btn {
    position: absolute;
    top: calc(18px + var(--shell-safe-area-top));
    right: 18px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.share-qr-shell {
    width: min(100%, 760px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

.share-qr-title {
    color: #fff;
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 800;
    letter-spacing: 0.02em;
}

.share-qr-subtitle {
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(15px, 2.6vw, 18px);
}

.share-qr-frame {
    position: relative;
    width: min(calc(100vw - 28px), calc(100dvh - 170px), 720px);
    height: min(calc(100vw - 28px), calc(100dvh - 170px), 720px);
    border-radius: 30px;
    padding: 12px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

.share-qr-image {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 20px;
    object-fit: cover;
    background: #fff;
}

.share-qr-bug {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(46px, 10vw, 62px);
    height: clamp(46px, 10vw, 62px);
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(24px, 5vw, 32px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
    border: 6px solid #fff;
}

.share-qr-link {
    max-width: min(92vw, 640px);
    color: rgba(255, 255, 255, 0.84);
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.share-qr-standard-share-btn {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    margin-top: 2px;
    min-height: 42px;
    padding: 10px 18px;
}

@media (max-width: 767px) {
    .share-qr-overlay {
        padding: calc(10px + var(--shell-safe-area-top)) 10px calc(12px + var(--shell-safe-area-bottom));
    }

    .share-qr-shell {
        gap: 8px;
    }

    .share-qr-frame {
        width: min(calc(100vw - 18px), calc(100dvh - 132px));
        height: min(calc(100vw - 18px), calc(100dvh - 132px));
        border-radius: 24px;
        padding: 10px;
    }

    .share-qr-link {
        font-size: 12px;
        max-width: 94vw;
    }

    .share-qr-standard-share-btn {
        min-height: 38px;
        padding: 8px 14px;
    }
}

.notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 12000;
    display: none;
    justify-content: center;
    align-items: center;
}

.notification-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    max-width: 300px;
    margin: 20px;
}

.notification-card h3 {
    margin: 0 0 10px 0;
    color: #333;
}

.notification-card p {
    margin: 0 0 20px 0;
    color: #666;
}

.notification-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.notification-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

.answer-notification-btn {
    background: #4CAF50;
    color: white;
}

.decline-notification-btn {
    background: #f44336;
    color: white;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.empty-state .worm-icon {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
}

.empty-state h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: var(--text-primary);
}

.empty-state p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.incoming-call-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 12500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.incoming-call-overlay.active {
    opacity: 1;
    visibility: visible;
}

.incoming-caller-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    margin-bottom: 20px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.incoming-caller-name {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 8px;
}

.incoming-call-badge,
.call-media-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    color: white;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.incoming-caller-number {
    font-size: 16px;
    opacity: 0.8;
    margin-bottom: 40px;
    font-family: monospace;
}

.incoming-call-controls {
    display: flex;
    gap: 60px;
}

.call-control-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.2s ease;
}

.decline-btn {
    background-color: var(--danger);
    color: white;
}

.answer-btn {
    background-color: var(--success);
    color: white;
}

.call-control-btn:hover {
    transform: scale(1.1);
}

.in-call-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 12500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 60px 40px 40px;
}

.in-call-overlay.active {
    opacity: 1;
    visibility: visible;
}

.in-call-overlay.video-call {
    justify-content: flex-start;
    gap: 18px;
    padding-top: 28px;
}

.video-call-stage {
    position: relative;
    width: min(100%, 440px);
    aspect-ratio: 3 / 4;
    border-radius: 24px;
    overflow: hidden;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.video-call-stage.hidden {
    display: none;
}

.remote-video,
.local-video-preview {
    background: #000;
    object-fit: cover;
}

.remote-video {
    width: 100%;
    height: 100%;
}

.remote-video.hidden,
.local-video-preview.hidden {
    display: none;
}

.video-fullscreen-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 999px;
    background: rgba(0,0,0,0.45);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
    backdrop-filter: blur(10px);
}

.video-call-stage:hover .video-fullscreen-btn,
.video-call-stage:focus-within .video-fullscreen-btn,
.video-call-stage.video-fullscreen-mode .video-fullscreen-btn {
    opacity: 1;
    transform: translateY(0);
}

.video-fullscreen-btn:hover {
    background: rgba(0,0,0,0.72);
}

.video-fullscreen-btn .material-icons {
    font-size: 20px;
}

.video-fullscreen-btn.hidden {
    display: none;
}

@media (pointer: coarse) {
    .video-fullscreen-btn {
        opacity: 0.92;
        transform: none;
    }
}

.video-call-stage.video-fullscreen-mode {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    aspect-ratio: auto;
    border-radius: 0;
    border: 0;
    z-index: 13050;
    background: #000;
    touch-action: none;
}

.video-call-stage.video-fullscreen-mode .remote-video {
    width: 100vw;
    height: 100dvh;
    object-fit: contain;
    transform: translate(var(--video-pan-x, 0px), var(--video-pan-y, 0px)) scale(var(--video-zoom, 1));
    transform-origin: center center;
    transition: transform 0.08s ease-out;
    cursor: grab;
}

.video-call-stage.video-fullscreen-mode .remote-video:active {
    cursor: grabbing;
}

.video-call-stage.video-fullscreen-mode .local-video-preview {
    display: none !important;
}

.video-call-stage.video-fullscreen-mode .video-call-placeholder {
    background: #000;
}

.local-video-preview {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: clamp(96px, 28%, 132px);
    aspect-ratio: 3 / 4;
    border-radius: 18px;
    border: 2px solid rgba(255,255,255,0.7);
    box-shadow: 0 12px 28px rgba(0,0,0,0.4);
    pointer-events: none;
}

.video-call-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: rgba(255,255,255,0.72);
    font-size: 15px;
    text-align: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.12));
}

.video-call-placeholder.hidden {
    display: none;
}

.in-call-status {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.caller-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    margin-bottom: 30px;
}

.in-call-overlay.video-call .in-call-status {
    flex: 0 0 auto;
}

.in-call-overlay.video-call .caller-avatar {
    width: 80px;
    height: 80px;
    font-size: 34px;
    margin-bottom: 14px;
}

.in-call-overlay.video-call .caller-name {
    font-size: 24px;
}

.in-call-overlay.video-call .caller-number {
    margin-bottom: 10px;
}

.caller-name {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 8px;
}

.caller-number {
    font-size: 18px;
    opacity: 0.8;
    margin-bottom: 15px;
    font-family: monospace;
}

.call-timer {
    font-size: 16px;
    opacity: 0.7;
    font-family: monospace;
}

.in-call-controls {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.control-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.2s ease;
    background-color: rgba(255,255,255,0.2);
    color: white;
}

.control-btn:hover {
    background-color: rgba(255,255,255,0.3);
    transform: scale(1.05);
}

.control-btn.active {
    background-color: var(--danger);
}

.camera-btn.active {
    background-color: var(--primary);
}

.screen-share-btn.active {
    background-color: var(--video-action);
}

.screen-share-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.camera-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.end-call-btn {
    background-color: var(--danger);
    color: white;
}

/* Mobile call screen overflow guard */
@media (max-width: 768px) {
    .incoming-call-overlay,
    .in-call-overlay {
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        box-sizing: border-box;
        overflow: hidden;
    }

    .incoming-call-overlay {
        padding: calc(12px + var(--shell-safe-area-top)) 14px calc(14px + var(--shell-safe-area-bottom));
    }

    .in-call-overlay {
        justify-content: center;
        gap: 14px;
        padding: calc(12px + var(--shell-safe-area-top)) 14px calc(14px + var(--shell-safe-area-bottom));
    }

    .video-call-stage {
        width: min(100%, 360px);
        border-radius: 18px;
    }

    .local-video-preview {
        right: 10px;
        bottom: 10px;
        width: clamp(82px, 26vw, 108px);
        border-radius: 14px;
    }

    .in-call-status {
        flex: 0 1 auto;
        width: 100%;
        min-width: 0;
    }

    .caller-avatar {
        width: 96px;
        height: 96px;
        font-size: 40px;
        margin-bottom: 14px;
    }

    .incoming-caller-avatar {
        width: 88px;
        height: 88px;
        font-size: 36px;
        margin-bottom: 14px;
    }

    .caller-name,
    .incoming-caller-name {
        width: 100%;
        max-width: 100%;
        margin: 0 0 8px;
        padding: 0 8px;
        font-size: clamp(20px, 6vw, 26px);
        line-height: 1.2;
        text-align: center;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .caller-number,
    .incoming-caller-number {
        width: 100%;
        max-width: 100%;
        margin: 0 0 10px;
        padding: 0 8px;
        font-size: clamp(13px, 4vw, 16px);
        line-height: 1.25;
        text-align: center;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .call-timer {
        font-size: 14px;
    }

    .incoming-call-badge,
    .call-media-badge {
        margin-bottom: 10px;
        padding: 7px 12px;
        font-size: 11px;
    }

    .incoming-call-controls,
    .in-call-controls {
        width: 100%;
        max-width: 380px;
        margin: 0;
        padding: 0 4px;
        gap: 12px;
        justify-content: space-evenly;
        align-items: center;
        flex-wrap: nowrap;
    }

    .call-control-btn,
    .control-btn {
        width: 56px;
        height: 56px;
        flex: 0 0 56px;
        font-size: 20px;
    }

    .in-call-overlay.video-call {
        justify-content: flex-start;
    }

    .in-call-overlay.video-call .call-media-badge {
        display: none;
    }

    .in-call-overlay.video-call .caller-avatar {
        display: none;
    }

    .in-call-overlay.video-call .in-call-status {
        gap: 6px;
    }

    .in-call-overlay.video-call .caller-name,
    .in-call-overlay.video-call .caller-number,
    .in-call-overlay.video-call .call-timer {
        margin-bottom: 0;
    }
}

@media (max-width: 768px) and (max-height: 700px) {
    .caller-avatar {
        width: 84px;
        height: 84px;
        font-size: 34px;
        margin-bottom: 10px;
    }

    .incoming-caller-avatar {
        width: 78px;
        height: 78px;
        font-size: 32px;
        margin-bottom: 10px;
    }

    .caller-name,
    .incoming-caller-name {
        margin-bottom: 6px;
        font-size: clamp(18px, 5.5vw, 22px);
    }

    .caller-number,
    .incoming-caller-number {
        margin-bottom: 8px;
        font-size: clamp(12px, 3.8vw, 14px);
    }

    .in-call-overlay {
        gap: 10px;
        padding-top: calc(8px + var(--shell-safe-area-top));
        padding-bottom: calc(10px + var(--shell-safe-area-bottom));
    }

    .video-call-stage {
        width: min(100%, 300px);
    }
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 40000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
    text-align: center;
}

.loading-card {
    width: min(92vw, 380px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 22px;
    border-radius: 18px;
}

.loading-overlay.session-timeout .loading-card {
    background: linear-gradient(145deg, #020617, #111827);
    border: 1px solid #f59e0b;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.loading-overlay.session-timeout .loading-spinner {
    display: none;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

.loading-text {
    margin-bottom: 0;
    font-weight: 700;
}

.loading-subtext {
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.45;
}

.loading-overlay.session-timeout .loading-text {
    color: #fbbf24;
    font-size: 20px;
}

.loading-overlay.session-timeout .loading-subtext {
    color: #f8fafc;
}

#loading-retry-btn {
    margin-top: 8px;
}

#loading-retry-btn.loading {
    opacity: 0.78;
    transform: scale(0.97);
    cursor: wait;
}

#loading-retry-btn.loading::after {
    content: '...';
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.install-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 8px 16px;
    z-index: 9999;
    transform: translateY(-100%);
    transition: transform 0.4s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.install-banner.show {
    transform: translateY(0);
    animation: slideInAndOut 4s ease-in-out forwards;
}

@keyframes slideInAndOut {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    15% {
        transform: translateY(0);
        opacity: 1;
    }
    85% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

.toast {
    position: fixed;
    bottom: calc(14px + var(--shell-safe-area-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background-color: rgba(28, 28, 30, 0.72);
    color: white;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 500;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    max-width: min(260px, calc(100vw - 24px));
    text-align: center;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none !important;
}
.toast.show {
    opacity: 0.86;
    transform: translateX(-50%) translateY(0);
    pointer-events: none !important;
}
.toast.success {
    background-color: rgba(52, 199, 89, 0.74);
}
.toast.error {
    background-color: rgba(244, 67, 54, 0.76);
}
.toast.info {
    background-color: rgba(33, 150, 243, 0.74);
}

@media (max-width: 767px) {
    .toast {
        bottom: calc(10px + var(--shell-safe-area-bottom));
        padding: 7px 12px;
        border-radius: 10px;
        font-size: 11px;
        max-width: min(220px, calc(100vw - 20px));
    }
}

.debug-log {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background: rgba(0,0,0,0.9);
    color: #00ff00;
    font-family: monospace;
    font-size: 10px;
    padding: 10px;
    overflow-y: auto;
    z-index: 10000;
    display: none;
    border: 1px solid #333;
}

.debug-log.show {
   display: block;
}

.debug-header {
   position: sticky;
   top: 0;
   background: rgba(0,0,0,0.9);
   padding: 5px 0;
   border-bottom: 1px solid #333;
   margin-bottom: 5px;
}

.debug-export {
   background: #007AFF;
   color: white;
   border: none;
   padding: 3px 8px;
   border-radius: 3px;
   font-size: 9px;
   cursor: pointer;
   margin-right: 5px;
}

.debug-clear {
   background: #FF3B30;
   color: white;
   border: none;
   padding: 3px 8px;
   border-radius: 3px;
   font-size: 9px;
   cursor: pointer;
}

.debug-scroll {
   background: #007AFF;
   color: white;
   border: none;
   padding: 3px 8px;
   border-radius: 3px;
   font-size: 9px;
   cursor: pointer;
   margin-right: 5px;
}

.hidden {
   display: none !important;
}

#contacts-list {
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
   padding-right: 5px;
   margin-right: -5px;
   scrollbar-width: thin;
   scrollbar-color: var(--border) var(--surface);
}

#contacts-list::-webkit-scrollbar {
   width: 6px;
}

#contacts-list::-webkit-scrollbar-track {
   background: var(--surface);
   border-radius: 3px;
}

#contacts-list::-webkit-scrollbar-thumb {
   background: var(--border);
   border-radius: 3px;
}

#contacts-list::-webkit-scrollbar-thumb:hover {
   background: var(--text-secondary);
}

#history-list {
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
   padding-right: 5px;
   margin-right: -5px;
   scrollbar-width: thin;
   scrollbar-color: var(--border) var(--surface);
}

#history-list::-webkit-scrollbar {
   width: 6px;
}

#history-list::-webkit-scrollbar-track {
   background: var(--surface);
   border-radius: 3px;
}

#history-list::-webkit-scrollbar-thumb {
   background: var(--border);
   border-radius: 3px;
}

#history-list::-webkit-scrollbar-thumb:hover {
   background: var(--text-secondary);
}

@media (max-width: 400px) {
    .navigation {
        max-width: 100%;
        left: 0;
        right: 0;
        margin: 0;
    }

   .header {
       padding: 10px 15px;
   }

   .keypad {
       max-width: 220px;
       gap: 12px;
   }

   .keypad-btn {
       min-height: 45px;
       max-height: 60px;
       max-width: 60px;
       font-size: clamp(14px, 4vw, 20px);
   }

   .number-display {
       font-size: 24px;
   }

   .action-btn {
       width: 55px;
       height: 55px;
       font-size: 16px;
   }

   .caller-avatar {
       width: 120px;
       height: 120px;
       font-size: 48px;
   }

   .caller-name {
       font-size: 28px;
   }

   .incoming-caller-avatar {
       width: 100px;
       height: 100px;
       font-size: 40px;
   }

   .incoming-caller-name {
       font-size: 24px;
   }

   .debug-log {
       width: 250px;
       height: 250px;
   }

   #contacts-list,
   #history-list {
       max-height: 350px;
   }
}
#keypad-tab {
    padding: 8px 12px 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
}

#keypad-tab.active {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 12px 10px !important;
    overflow-y: auto !important;
}

#keypad-tab::-webkit-scrollbar {
    display: none;
}

#keypad-tab > *:last-child {
    margin-bottom: 0;
}

#keypad-tab .keypad-container {
    width: min(100%, 360px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    overflow: visible;
    padding: 8px 0 12px;
    position: static;
    bottom: auto;
    margin: 0 auto;
}

#keypad-tab .number-display {
    width: 100%;
    min-height: 48px;
    margin-bottom: 12px;
    font-size: 32px;
}

#keypad-tab .dial-contact-match {
    margin-bottom: 4px;
}

#keypad-tab .keypad {
    max-width: 280px;
    margin-bottom: 0;
}

#keypad-tab .action-buttons {
    width: 100%;
    justify-content: center;
    gap: 22px;
    margin-top: 8px;
    padding-top: 0;
    padding-bottom: 8px;
}

/* Mobile scrolling */
@media (max-width: 767px) {
    #keypad-tab {
        overflow-y: auto !important;
        padding: 12px 18px calc(var(--shell-safe-area-bottom) + 12px) !important;
    }

    #keypad-tab .keypad-container {
        width: 100%;
        padding: 10px 0 16px;
        position: static;
        bottom: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    #keypad-tab .number-display {
        min-height: clamp(46px, 11vw, 56px);
        font-size: clamp(28px, 8vw, 36px);
        margin-bottom: 12px;
    }

    #keypad-tab .keypad {
        width: min(100%, 300px);
        max-width: min(300px, calc(100vw - 40px));
        gap: clamp(10px, 2.8vw, 12px);
        margin-bottom: 10px;
    }

    #keypad-tab .keypad-btn {
        min-height: clamp(58px, 18vw, 68px);
        max-height: clamp(58px, 18vw, 68px);
        max-width: clamp(58px, 18vw, 68px);
        font-size: clamp(21px, 6vw, 24px);
    }

    #keypad-tab .keypad-btn .letters {
        bottom: clamp(7px, 2vw, 8px);
        font-size: clamp(9px, 2.3vw, 10px);
    }

    #keypad-tab .action-buttons {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 18px;
        margin-top: 10px;
        padding-top: 0;
    }

    #keypad-tab .action-btn {
        width: clamp(52px, 16vw, 62px);
        height: clamp(52px, 16vw, 62px);
        font-size: clamp(18px, 5vw, 20px);
    }
}

@media (min-width: 600px) and (max-width: 767px) {
    #keypad-tab {
        padding: 12px 16px calc(var(--shell-safe-area-bottom) + 10px) !important;
    }

    #keypad-tab .keypad-container {
        width: min(100%, 332px);
        gap: 12px;
        padding: 8px 0 12px;
    }

    #keypad-tab .number-display {
        min-height: 52px;
        font-size: 34px;
        margin-bottom: 10px;
    }

    #keypad-tab .keypad {
        width: min(100%, 300px);
        max-width: min(300px, calc(100vw - 32px));
        gap: 12px;
        margin-bottom: 10px;
    }

    #keypad-tab .keypad-btn {
        min-height: 68px;
        max-height: 68px;
        max-width: 68px;
        font-size: 24px;
    }

    #keypad-tab .keypad-btn .letters {
        bottom: 8px;
        font-size: 10px;
    }

    #keypad-tab .action-buttons {
        gap: 18px;
        margin-top: 10px;
    }

    #keypad-tab .action-btn {
        width: 62px;
        height: 62px;
        font-size: 20px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (pointer: coarse) {
    #keypad-tab .number-display {
        min-height: 38px;
        font-size: 24px;
        margin-bottom: 6px;
        letter-spacing: 1px;
    }

    #keypad-tab .dial-contact-match {
        font-size: 0.86rem;
        min-height: 18px;
        margin-bottom: 2px;
    }
}

/* ===== PHONEBOOK & HISTORY STYLES ===== */

/* Grayed out style for current user */
.phonebook-entry.grayed-out {
    opacity: 0.5;
    background: rgba(128, 128, 128, 0.2) !important;
}

.phonebook-entry.grayed-out .btn-call {
    background: #666 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.phonebook-entry.grayed-out .peer-name {
    font-style: italic;
    color: #999 !important;
}

/* History entry styles */
.history-entry {
    display: flex;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 4px solid transparent;
}

.history-entry.outgoing {
    border-left-color: #4CAF50; /* Green for outgoing */
}

.history-entry.incoming {
    border-left-color: #2196F3; /* Blue for incoming */
}

.call-avatar {
    margin-right: 15px;
}

.avatar-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #2196F3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    color: white;
}

.call-info {
    flex: 1;
}

.call-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.call-details {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.call-id {
    margin-bottom: 2px;
}

.call-status {
    font-size: 20px;
}

.no-history, .no-peers {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

/* Phonebook entry improvements */
.phonebook-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.peer-info {
    flex: 1;
}

.peer-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 3px;
}

.peer-id {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 3px;
}

.peer-status {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    text-transform: uppercase;
}

.peer-status.online {
    background: #4CAF50;
    color: white;
}

.peer-status.offline {
    background: #666;
    color: white;
}

.peer-actions {
    margin-left: 15px;
}

.btn-call {
    background: #2196F3;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.btn-call:hover:not(:disabled) {
    background: #1976D2;
}

.btn-call:disabled {
    background: #666;
    cursor: not-allowed;
}

.add-contact-panel {
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    overflow: hidden;
}

.add-contact-toggle {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    user-select: none;
}

.add-contact-toggle::-webkit-details-marker {
    display: none;
}

.add-contact-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.add-contact-chevron {
    transition: transform 0.2s ease;
}

.add-contact-panel[open] .add-contact-chevron {
    transform: rotate(180deg);
}

.add-contact-panel .add-contact-form {
    margin-bottom: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
}

.contact-source {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    color: var(--text-secondary);
    font-size: 12px;
}

@media (max-width: 768px) {
    #contacts-list,
    #history-list,
    .peers-list {
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 0;
        margin-right: 0;
    }

    .add-contact-panel {
        margin-bottom: 12px;
        border-radius: 12px;
    }

    .add-contact-toggle {
        padding: 10px 12px;
    }

    .add-contact-panel .add-contact-form {
        padding: 10px;
    }

    .contact-item,
    .peer-item {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 10px;
        min-width: 0;
        padding: 10px 12px;
        border-radius: 12px;
    }

    .history-item,
    .phonebook-entry {
        padding: 10px 12px;
        border-radius: 12px;
        margin-bottom: 8px;
    }

    .contact-info,
    .peer-info {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
    }

    .contact-name,
    .contact-number,
    .contact-status,
    .peer-id,
    .peer-status,
    .peer-last-seen {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .contact-actions,
    .peer-actions {
        width: 100%;
        margin-left: 0;
        display: grid;
        gap: 6px;
    }

    .contact-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .peer-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
    }

    .contact-actions .contact-message-btn,
    .contact-actions .peer-call-btn,
    .contact-actions .delete-contact-btn,
    .contact-actions .btn-danger,
    .peer-actions .peer-message-btn,
    .peer-actions .peer-call-btn,
    .peer-actions .add-contact-btn {
        width: 100%;
        min-width: 0;
        height: 36px;
        min-height: 36px;
        padding: 0;
        justify-content: center;
        font-size: 0;
        border-radius: 10px;
    }

    .contact-actions .contact-message-btn .material-icons,
    .contact-actions .peer-call-btn .material-icons,
    .contact-actions .delete-contact-btn .material-icons,
    .contact-actions .btn-danger .material-icons,
    .peer-actions .peer-message-btn .material-icons,
    .peer-actions .peer-call-btn .material-icons,
    .peer-actions .add-contact-btn .material-icons {
        font-size: 18px;
        margin: 0;
    }

    .btn,
    .peer-call-btn,
    .contact-message-btn,
    .peer-message-btn,
    .delete-contact-btn,
    .add-contact-btn,
    .btn-call {
        min-height: 36px;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 13px;
    }

    .contact-edit-corner-btn {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0;
        border-radius: 10px;
        top: 8px;
        right: 8px;
    }

    .section-title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .contact-name,
    .peer-id,
    .call-name {
        font-size: 14px;
    }

    .contact-number,
    .contact-status,
    .peer-status,
    .peer-last-seen,
    .call-details,
    .peer-count,
    .cache-info {
        font-size: 11px;
    }

    .peer-info {
        width: 100%;
        flex: 1 1 100%;
    }

    .peer-last-seen {
        width: 100%;
        margin-top: 3px;
        font-size: 10px;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .peer-actions .peer-message-btn,
    .peer-actions .peer-call-btn,
    .peer-actions .add-contact-btn {
        height: 34px;
        min-height: 34px;
        border-radius: 9px;
    }

    .contact-avatar,
    .avatar-circle {
        width: 40px;
        height: 40px;
        margin-right: 10px;
        font-size: 15px;
    }

    .phonebook-header {
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }

    #refresh-peers-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .contact-source {
        display: block;
        margin: 6px 0 0;
    }
}

#contacts-tab,
#phonebook-tab {
    overflow: hidden !important;
}

#history-tab {
    overflow: auto !important;
}

#phonebook-tab {
    display: none;
    flex-direction: column;
    min-height: 0;
}

#phonebook-tab.active {
    display: flex !important;
}

.contacts-section,
.history-section,
.phonebook-section {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

#contacts-list,
#history-list,
#peers-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#history-list {
    padding-bottom: 0;
    scroll-padding-bottom: 0;
}

@media (max-width: 767px) {
    .app-container > .main-content > #history-tab.tab-content.active {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        top: var(--app-header-occupied-height, var(--app-header-height, 70px)) !important;
        right: 0 !important;
        bottom: var(--bottom-nav-occupied-height, var(--bottom-nav-height, 72px)) !important;
        left: 0 !important;
        width: min(100%, var(--app-max-width, 680px)) !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 12px 14px 0 !important;
        overflow: hidden !important;
        scroll-padding-bottom: 0 !important;
        z-index: 1;
    }

    .app-container > .main-content > #history-tab.tab-content.active .history-section {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        height: 100%;
    }

    .app-container > .main-content > #history-tab.tab-content.active #history-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
        padding-bottom: 0 !important;
        scroll-padding-bottom: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}

#phonebook-tab .phonebook-section {
    flex: 1 1 auto;
    min-height: 0;
}

#messages-tab {
    padding: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    display: none;
    flex-direction: column;
    min-height: 0;
}

#messages-tab.active {
    display: flex !important;
}

#messages-tab > *:last-child {
    margin-bottom: 0 !important;
}

.main-content > .tab-content {
    scroll-padding-bottom: 16px;
}

.messages-layout {
    display: flex;
    gap: 0;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    width: 100%;
    margin-bottom: 0 !important;
    padding: 0;
    background: var(--background);
}

.messages-sidebar,
.messages-thread-panel {
    min-height: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.messages-sidebar {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px 12px 16px 14px;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.messages-thread-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 16px 14px 0;
    overflow: hidden;
}

.messages-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.messages-section-copy {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.compact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 13px;
}

.message-peer-launcher {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-bottom: 12px;
}

.message-peer-launcher input {
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--background);
    color: var(--text-primary);
    font-size: 14px;
}

.messages-loading-state,
.messages-empty-state,
.message-thread-empty,
.thread-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: var(--text-secondary);
    border: 1px dashed rgba(0, 0, 0, 0.12);
    border-radius: 16px;
    padding: 18px;
}

.messages-empty-state .material-icons,
.message-thread-empty .material-icons,
.thread-empty-state .material-icons {
    font-size: 34px;
}

.messages-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    padding-right: 2px;
    padding-bottom: 10px;
}

.conversation-item {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    background: rgba(242, 242, 247, 0.88);
    padding: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
}

.conversation-item:hover,
.conversation-item.active {
    border-color: rgba(0, 122, 255, 0.28);
    background: rgba(0, 122, 255, 0.08);
}

.conversation-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(0, 122, 255, 0.12);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.conversation-main {
    flex: 1 1 auto;
    min-width: 0;
}

.conversation-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.conversation-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.conversation-time,
.conversation-subtitle,
.conversation-preview {
    display: block;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.conversation-time,
.conversation-subtitle {
    font-size: 11px;
}

.conversation-preview {
    margin-top: 6px;
    font-size: 12px;
}

.conversation-unread {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--primary);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.message-thread-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.message-thread-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.thread-back-btn,
.thread-action-btn {
    border: none;
    background: rgba(0, 122, 255, 0.08);
    color: var(--primary);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}

#messages-thread-call-btn {
    background: var(--voice-action-soft);
    color: var(--voice-action-dark);
}

#messages-thread-video-btn {
    background: var(--video-action-soft);
    color: var(--video-action);
}

#messages-thread-stats-btn {
    background: rgba(255, 149, 0, 0.14);
    color: #b45309;
}

.attach-trigger {
    background: #ffffff;
    color: #111111;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.thread-back-btn {
    display: none;
}

.attach-trigger {
    cursor: pointer;
}

.message-thread-header-main {
    flex: 1 1 auto;
    min-width: 0;
}

.message-thread-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.message-thread-subtitle {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.message-thread-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.thread-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    padding-right: 2px;
    padding-bottom: 10px;
    scroll-padding-bottom: 20px;
}

.thread-message {
    max-width: min(76%, 520px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: fit-content;
}

.thread-message.outgoing {
    align-self: flex-end;
    align-items: flex-end;
    margin-left: 14px;
}

.thread-message.incoming {
    align-self: flex-start;
    align-items: flex-start;
    margin-right: 14px;
}

.thread-message-body {
    border-radius: 18px;
    padding: 12px 14px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
    position: relative;
}

.thread-message.outgoing .thread-message-body {
    background: linear-gradient(135deg, #007aff, #2b89ff);
    color: white;
    border-bottom-right-radius: 6px;
    text-align: left;
}

.thread-message.incoming .thread-message-body {
    background: #f3f5f8;
    color: var(--text-primary);
    border-bottom-left-radius: 6px;
    text-align: left;
}

.thread-message-text {
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.thread-message-link {
    color: #0645ad;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

.thread-message-link:visited {
    color: #0b0080;
}

.thread-message-voicemail-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
}

.thread-message-voicemail-label .material-icons {
    font-size: 18px;
}

.thread-message-meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--text-secondary);
    padding: 0 6px;
}

.thread-message-add-reaction-btn {
    align-items: center;
    background: rgba(248, 250, 252, 0.96);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: #0f172a;
    cursor: pointer;
    display: inline-flex;
    height: 26px;
    justify-content: center;
    opacity: 1;
    padding: 0;
    position: absolute;
    left: -8px;
    right: auto;
    top: -8px;
    transition: opacity 0.15s ease;
    width: 26px;
    z-index: 2;
}

.thread-message.incoming .thread-message-add-reaction-btn {
    left: auto;
    right: -8px;
}

.thread-message:hover .thread-message-add-reaction-btn,
.thread-message-add-reaction-btn:focus {
    opacity: 1;
}

.thread-message-add-reaction-btn .material-icons {
    font-size: 16px;
}

.thread-message-reaction-summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 7px;
}

.thread-message-reactions {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
    display: none;
    gap: 6px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 7px;
    padding: 4px;
}

.thread-message-reactions.open {
    display: grid;
}

.thread-message-reaction-btn,
.thread-message-reaction-summary {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: #0f172a;
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    justify-content: center;
    min-height: 28px;
    padding: 3px 6px;
    touch-action: manipulation;
}

.thread-message-reaction-summary {
    font-size: 0.86rem;
}

.thread-message-reaction-btn:active,
.thread-message-reaction-summary:active {
    background: #e0f2fe;
    border-color: #7dd3fc;
}

.thread-message-reaction-btn.active,
.thread-message-reaction-summary.active {
    background: #dbeafe;
    border-color: #2563eb;
}

.thread-message-reaction-count {
    color: #334155;
    font-size: 0.72rem;
    font-weight: 800;
    margin-left: 2px;
}

.message-typing-indicator {
    flex: 0 0 auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px 2px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #fff5f5;
    color: #b91c1c;
    border: 1px solid rgba(185, 28, 28, 0.18);
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(185, 28, 28, 0.08);
}

.message-typing-indicator.hidden {
    display: none;
}

.voicemail-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.62);
}

.voicemail-overlay.hidden {
    display: none;
}

.voicemail-card {
    width: min(420px, 100%);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text-primary);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32);
    padding: 22px;
    text-align: center;
}

.voicemail-icon {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 122, 255, 0.1);
    color: var(--primary);
}

.voicemail-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.voicemail-card p,
.voicemail-status {
    margin: 0 0 12px;
    color: var(--text-secondary);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.voicemail-meter {
    font-size: 28px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    margin: 12px 0 16px;
}

.voicemail-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

#voicemail-record-btn.recording {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

.typing-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}

.typing-dots i {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.35;
    animation: typing-dot-pulse 1s ease-in-out infinite;
}

.typing-dots i:nth-child(2) {
    animation-delay: 0.16s;
}

.typing-dots i:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes typing-dot-pulse {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: 0.35;
    }
    40% {
        transform: translateY(-3px);
        opacity: 1;
    }
}

.thread-attachments {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.thread-attachment {
    background: transparent;
    border: 0;
    color: inherit;
    display: flex;
    flex-direction: column;
    font: inherit;
    gap: 8px;
    border-radius: 14px;
    overflow: hidden;
    padding: 0;
    text-decoration: none;
    text-align: left;
}

.thread-attachment.image {
    cursor: zoom-in;
    touch-action: manipulation;
}

.thread-attachment-caption {
    display: block;
    font-size: 11px;
    font-weight: 700;
    opacity: 0.82;
    padding: 0 2px;
    overflow-wrap: anywhere;
}

.thread-attachment-fallback {
    align-items: center;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    display: none;
    gap: 8px;
    padding: 10px 12px;
    width: 100%;
}

.thread-message.incoming .thread-attachment-fallback {
    background: rgba(0, 0, 0, 0.05);
}

.thread-attachment.preview-failed {
    cursor: pointer;
}

.thread-attachment.preview-failed img,
.thread-attachment.preview-failed .thread-attachment-caption {
    display: none;
}

.thread-attachment.preview-failed .thread-attachment-fallback {
    display: flex;
}

.thread-attachment img,
.thread-attachment video {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.08);
}

.thread-attachment.file,
.thread-attachment.audio {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.16);
}

.thread-message.incoming .thread-attachment.file,
.thread-message.incoming .thread-attachment.audio {
    background: rgba(0, 0, 0, 0.05);
}

.thread-attachment.file {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.thread-attachment.file span:last-child {
    font-size: 11px;
    opacity: 0.8;
}

.thread-attachment a,
.thread-attachment.file {
    color: inherit;
}

.phone-image-viewer {
    align-items: center;
    background: rgba(0, 0, 0, 0.94);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    touch-action: none;
    z-index: 25000;
}

.phone-image-viewer.hidden {
    display: none;
}

.phone-image-viewer-open {
    overflow: hidden;
}

.phone-image-viewer-toolbar {
    display: flex;
    gap: 10px;
    position: fixed;
    right: calc(14px + var(--safe-area-top, 0px));
    top: calc(14px + var(--safe-area-top, 0px));
    z-index: 2;
}

.phone-image-viewer-action {
    align-items: center;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    padding: 0;
    width: 42px;
}

.phone-image-viewer-action .material-icons {
    font-size: 22px;
}

.phone-image-viewer-stage {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    overflow: hidden;
    padding: calc(58px + var(--safe-area-top, 0px)) 12px calc(24px + var(--safe-area-bottom, 0px));
    touch-action: none;
    width: 100%;
}

.phone-image-viewer-img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transform-origin: center center;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

.message-attachment-list {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 auto;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 4px;
}

.attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 8px 10px;
    background: rgba(0, 122, 255, 0.08);
    border: 1px solid rgba(0, 122, 255, 0.14);
    min-width: 0;
}

.attachment-chip-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.attachment-chip-meta span:last-of-type {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.attachment-chip-meta small {
    color: var(--text-secondary);
    font-size: 11px;
}

.attachment-chip-remove {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.attachment-chip-remove .material-icons {
    font-size: 16px;
}

.message-compose-form {
    flex: 0 0 auto;
    flex-shrink: 0;
    margin-top: 0;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: flex-end;
    position: relative;
    bottom: auto;
    z-index: 2;
    padding-top: 6px;
    padding-bottom: 0;
    background: var(--background);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.app-container.message-soft-keyboard-enabled .message-compose-form {
    grid-template-columns: auto auto auto minmax(0, 1fr) auto;
}

.message-compose-form textarea {
    width: 100%;
    min-height: 46px;
    max-height: 140px;
    resize: none;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    background: var(--background);
    color: var(--text-primary);
    overflow-y: auto;
}

.message-soft-keyboard-toggle {
    display: none !important;
}

.app-container.message-soft-keyboard-enabled .message-soft-keyboard-toggle {
    display: inline-flex !important;
}

.app-container.message-soft-keyboard-open .message-compose-form {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--message-soft-keyboard-height, 252px) - 1px);
    transform: none;
    width: 100vw;
    max-width: none;
    margin: 0;
    padding: 8px 10px;
    z-index: 13001;
    background: var(--background);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.12);
}

.message-soft-keyboard {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: none;
    transform: none;
    z-index: 13000;
    padding: clamp(8px, 1.1vw, 14px);
    background: #101828;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -16px 36px rgba(15, 23, 42, 0.28);
}

.message-soft-keyboard.hidden {
    display: none !important;
}

.message-soft-keyboard-row {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: clamp(5px, 0.7vw, 10px);
    margin-bottom: clamp(5px, 0.7vw, 10px);
}

.message-soft-keyboard-row:last-child {
    margin-bottom: 0;
}

.message-soft-keyboard-key {
    min-height: clamp(40px, 6.5vh, 64px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #f8fafc;
    color: #111827;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.message-soft-keyboard-key.emoji-toggle {
    background: #fef3c7;
    color: #78350f;
}

.message-soft-keyboard-key.wide {
    grid-column: span 2;
}

.message-soft-keyboard-key.extra-wide {
    grid-column: span 4;
}

.message-soft-keyboard-key.command {
    background: #dbeafe;
    color: #0f172a;
}

.message-soft-keyboard-key.send {
    background: #16a34a;
    color: #ffffff;
}

.message-soft-keyboard-key .material-icons {
    font-size: 20px;
}

.message-soft-emoji-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 6px;
    max-height: min(34vh, 260px);
    overflow-y: auto;
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    -webkit-overflow-scrolling: touch;
}

.message-soft-emoji-panel.hidden {
    display: none !important;
}

.message-soft-emoji-key {
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    font-size: 24px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.app-container.message-soft-keyboard-open .message-thread-view {
    padding-bottom: calc(var(--message-soft-keyboard-height, 252px) + var(--message-compose-reserved-space, 82px));
}

.app-container.message-soft-keyboard-open .thread-messages {
    padding-bottom: calc(var(--message-soft-keyboard-height, 252px) + var(--message-compose-reserved-space, 82px) + 10px);
    scroll-padding-bottom: calc(var(--message-soft-keyboard-height, 252px) + var(--message-compose-reserved-space, 82px) + 14px);
}

.location-trigger {
    background: rgba(255, 59, 48, 0.14);
    color: #c62828;
    border: 1px solid rgba(198, 40, 40, 0.16);
}

.thread-action-btn:disabled,
.location-trigger:disabled,
.location-trigger.is-disabled,
.location-trigger.is-sending {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.42);
    border-color: transparent;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 1;
}

.attach-trigger,
.location-trigger,
.message-compose-form .btn {
    width: 46px;
    min-width: 46px;
    height: 46px;
}

.thread-location-card {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 16px;
    text-decoration: none;
    background: rgba(10, 132, 255, 0.10);
    color: #111111;
    border: 1px solid rgba(10, 132, 255, 0.14);
}

.thread-location-icon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #c62828;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.thread-location-icon .material-icons {
    font-size: 18px;
}

.thread-location-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.thread-location-copy strong,
.thread-location-copy span {
    color: #111111;
}

.thread-location-copy span {
    font-size: 12px;
    opacity: 0.92;
    word-break: break-word;
}

.message-compose-form textarea::placeholder {
    color: transparent;
}

.main-content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}

.message-compose-form textarea:focus,
.message-peer-launcher input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

.nav-item {
    position: relative;
}

.nav-badge {
    position: absolute;
    top: 6px;
    right: 12px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.active-call-return-btn {
    position: fixed;
    left: 50%;
    bottom: calc(var(--bottom-nav-height) + max(var(--shell-safe-area-bottom), 8px) + 12px);
    transform: translateX(-50%);
    z-index: 12400;
    border: none;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.94);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px 0 12px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.active-call-return-btn .material-icons {
    font-size: 22px;
}

.dtmf-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 12600;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.42);
    padding: 18px;
}

.dtmf-menu-card {
    width: min(100%, 360px);
    border-radius: 8px;
    background: #111827;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dtmf-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 8px;
}

.dtmf-menu-title {
    font-size: 17px;
    font-weight: 700;
}

.dtmf-menu-subtitle {
    color: rgba(255, 255, 255, 0.64);
    font-size: 12px;
    margin-top: 2px;
}

.dtmf-menu-icon-btn,
.dtmf-menu-action {
    border: none;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.dtmf-menu-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dtmf-menu-action {
    min-height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 700;
}

.dtmf-menu-action.danger {
    background: var(--danger);
}

.app-container.meeting-room-active .header {
    display: none;
}

.app-container.meeting-room-active .navigation {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
    height: 0 !important;
    min-height: 0;
    overflow: hidden !important;
    padding-top: 0;
    padding-bottom: 0;
    border-top-color: transparent;
}

.app-container.meeting-room-active .main-content {
    height: var(--meeting-viewport-height, 100dvh) !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}

.app-container.meeting-room-active #meetings-tab.active,
.app-container.meeting-room-active .meetings-section {
    height: 100%;
    overflow: hidden !important;
    padding-bottom: 0;
}

.app-container.meeting-room-active #meeting-room-card:not(.hidden) {
    flex: 1 1 auto;
    height: calc(100% - var(--meeting-controls-reserved-height, 74px) - max(var(--shell-safe-area-bottom, 0px), 8px) - 8px);
    max-height: calc(100% - var(--meeting-controls-reserved-height, 74px) - max(var(--shell-safe-area-bottom, 0px), 8px) - 8px);
    overflow: hidden;
    padding-bottom: 8px;
}

.app-container.meeting-room-active #meeting-room-card.meeting-fullscreen-mode:not(.hidden) {
    height: 100%;
    max-height: none;
    padding-bottom: calc(var(--meeting-controls-reserved-height, 74px) + max(var(--shell-safe-area-bottom, 0px), 8px) + 8px);
}

.app-container.meeting-room-active .meeting-controls {
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid var(--border);
    bottom: 0;
    box-shadow: 0 -10px 26px rgba(15, 23, 42, 0.12);
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
    left: 50%;
    margin-top: 0;
    max-width: var(--app-max-width);
    padding: 6px 8px calc(6px + max(var(--shell-safe-area-bottom, 0px), 0px));
    position: fixed;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
    z-index: 10020;
}

.app-container.meeting-room-active .meeting-control-btn {
    min-height: 38px;
}

.app-container.meeting-room-active .meeting-chat-panel {
    bottom: calc(var(--meeting-controls-reserved-height, 74px) + max(var(--shell-safe-area-bottom, 0px), 8px));
}

@media (max-width: 1024px) {
    .message-peer-launcher input,
    .message-compose-form textarea {
        font-size: 16px !important;
    }

    .app-container.messages-composer-active {
        padding-top: var(--viewport-offset-top);
    }

    .app-container.messages-composer-active,
    .app-container.messages-composer-active .main-content,
    .app-container.messages-composer-active #messages-tab,
    .app-container.messages-composer-active .messages-layout,
    .app-container.messages-composer-active .messages-thread-panel {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    .app-container.messages-composer-active .navigation {
        opacity: 0;
        pointer-events: none;
        transform: translateY(100%);
        height: 0 !important;
        min-height: 0;
        overflow: hidden !important;
        padding-top: 0;
        padding-bottom: 0;
        border-top-color: transparent;
    }

    .app-container.messages-thread-active .navigation {
        opacity: 0;
        pointer-events: none;
        transform: translateY(100%);
        height: 0 !important;
        min-height: 0;
        overflow: hidden !important;
        padding-top: 0;
        padding-bottom: 0;
        border-top-color: transparent;
    }

    .app-container.messages-composer-active .main-content {
        height: calc(var(--app-visible-height) - var(--app-header-height) - var(--viewport-offset-top)) !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
    }

    .app-container.messages-thread-active .main-content {
        height: calc(var(--app-shell-height) - var(--app-header-height) - var(--viewport-offset-top)) !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
    }

    .app-container.messages-composer-active .message-compose-form {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: max(var(--keyboard-offset), 0px);
        transform: translateX(-50%);
        width: min(100%, var(--app-max-width));
        max-width: var(--app-max-width);
        margin: 0;
        padding: 8px 10px calc(8px + var(--shell-safe-area-bottom));
        z-index: 12000;
        background: var(--background);
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.16);
    }

    .app-container.messages-composer-active .message-attachment-list:not(.hidden) {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: calc(max(var(--keyboard-offset), 0px) + var(--message-compose-height));
        transform: translateX(-50%);
        width: min(100%, var(--app-max-width));
        max-width: var(--app-max-width);
        margin: 0;
        padding: 8px 10px;
        z-index: 11999;
        background: var(--background);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.1);
    }

    .app-container.messages-composer-active .message-thread-view {
        padding-bottom: var(--message-compose-reserved-space);
    }

    .app-container.messages-composer-active .thread-messages {
        padding-bottom: calc(var(--message-compose-reserved-space) + 10px);
        scroll-padding-bottom: calc(var(--message-compose-reserved-space) + 14px);
    }

    .app-container:has(#message-input:focus) .navigation {
        opacity: 0;
        pointer-events: none;
        transform: translateY(100%);
        height: 0 !important;
        min-height: 0;
        overflow: hidden !important;
        padding-top: 0;
        padding-bottom: 0;
        border-top-color: transparent;
    }

    .bottom-nav.navigation.keyboard-hidden {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(100%) !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border-top-color: transparent !important;
    }

    .messages-layout {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    .messages-sidebar,
    .messages-thread-panel {
        flex-basis: auto;
        min-height: 0;
        padding: 14px 12px 0;
        border-radius: 0;
    }

    .messages-sidebar {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .messages-tab.thread-open .messages-sidebar,
    #messages-tab.thread-open .messages-sidebar {
        display: none;
    }

    .thread-back-btn {
        display: inline-flex;
    }

    #messages-tab:not(.thread-open) .messages-thread-panel {
        display: none;
    }

    #messages-tab.thread-open .messages-thread-panel {
        display: flex;
    }

    .message-thread-view {
        height: 100%;
    }

    .thread-messages {
        padding-bottom: 8px;
        scroll-padding-bottom: 12px;
    }
}

@media (min-width: 768px) and (max-width: 1180px) and (pointer: coarse) {
    .app-container.messages-composer-active,
    .app-container.messages-composer-active .main-content,
    .app-container.messages-composer-active #messages-tab,
    .app-container.messages-composer-active .messages-layout,
    .app-container.messages-composer-active .messages-thread-panel,
    .app-container.messages-thread-active,
    .app-container.messages-thread-active .main-content,
    .app-container.messages-thread-active #messages-tab,
    .app-container.messages-thread-active .messages-layout,
    .app-container.messages-thread-active .messages-thread-panel {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    .app-container.messages-composer-active .navigation,
    .app-container.messages-thread-active .navigation {
        opacity: 0;
        pointer-events: none;
        transform: translateY(100%);
        height: 0 !important;
        min-height: 0;
        overflow: hidden !important;
        padding-top: 0;
        padding-bottom: 0;
        border-top-color: transparent;
    }

    .app-container.messages-composer-active .main-content {
        flex: 0 0 calc(var(--app-visible-height, 100dvh) - var(--app-header-height, 70px) - var(--viewport-offset-top, 0px)) !important;
        height: calc(var(--app-visible-height, 100dvh) - var(--app-header-height, 70px) - var(--viewport-offset-top, 0px)) !important;
        min-height: 0 !important;
        padding-bottom: 0 !important;
    }

    .app-container.messages-thread-active .main-content {
        flex: 0 0 calc(var(--app-shell-height, 100dvh) - var(--app-header-height, 70px) - var(--viewport-offset-top, 0px)) !important;
        height: calc(var(--app-shell-height, 100dvh) - var(--app-header-height, 70px) - var(--viewport-offset-top, 0px)) !important;
        min-height: 0 !important;
        padding-bottom: 0 !important;
    }

    .app-container.messages-composer-active .message-compose-form {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: max(var(--keyboard-offset, 0px), 0px);
        transform: translateX(-50%);
        width: min(100%, var(--app-max-width));
        max-width: var(--app-max-width);
        margin: 0;
        padding: 8px 10px calc(8px + var(--shell-safe-area-bottom, 0px));
        z-index: 12000;
        background: var(--background);
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.16);
    }

    .app-container.messages-composer-active .message-attachment-list:not(.hidden) {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: calc(max(var(--keyboard-offset, 0px), 0px) + var(--message-compose-height, 58px));
        transform: translateX(-50%);
        width: min(100%, var(--app-max-width));
        max-width: var(--app-max-width);
        margin: 0;
        padding: 8px 10px;
        z-index: 11999;
        background: var(--background);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.1);
    }

    .app-container.messages-composer-active .message-thread-view {
        padding-bottom: var(--message-compose-reserved-space, 64px) !important;
    }

    .app-container.messages-composer-active .thread-messages {
        padding-bottom: 4px !important;
        scroll-padding-bottom: 8px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    #keypad-tab {
        padding: 16px 20px 20px !important;
        overflow-y: auto !important;
    }

    #keypad-tab.active {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    #keypad-tab .keypad-container {
        width: min(100%, 372px);
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 12px 0 18px;
        position: static;
        bottom: auto;
        margin: 0 auto;
        overflow: visible;
    }

    #keypad-tab .number-display {
        width: 100%;
        min-height: 60px;
        margin-bottom: 14px;
        font-size: 40px;
    }

    #keypad-tab .keypad {
        width: min(100%, 336px);
        max-width: 336px;
        gap: 12px;
        margin-bottom: 0;
    }

    #keypad-tab .keypad-btn {
        min-height: 72px;
        max-height: 72px;
        max-width: 72px;
        font-size: 26px;
    }

    #keypad-tab .keypad-btn .letters {
        bottom: 10px;
        font-size: 11px;
    }

    #keypad-tab .action-buttons {
        width: 100%;
        justify-content: center;
        gap: 18px;
        margin-top: 12px;
        padding-top: 0;
        padding-bottom: 8px;
    }

    #keypad-tab .action-btn {
        width: 60px;
        height: 60px;
        font-size: 20px;
    }

    .messages-thread-panel {
        padding-top: 10px;
    }

    .message-thread-header {
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

    .message-compose-form {
        padding-bottom: 6px;
    }

    .app-container.messages-composer-active .message-compose-form {
        padding-bottom: calc(var(--shell-safe-area-bottom) + 4px);
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (pointer: coarse) {
    #history-tab.tab-content.active {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding-top: 16px !important;
    }

    #history-tab.tab-content.active .history-section {
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
        justify-content: flex-start;
    }

    #history-tab.tab-content.active #history-list {
        flex: 1 1 auto;
        max-height: none !important;
        min-height: 0;
        overflow-y: auto !important;
    }
}

@media (max-width: 767px) {
    :root {
        --message-compose-reserved-space: 82px;
        --bottom-nav-height: 72px;
        --app-header-height: 78px;
    }

    body {
        font-size: 19px;
    }

    .header {
        padding: 18px 20px;
    }

    .header h1 {
        font-size: 24px;
    }

    .menu-btn,
    .share-btn {
        font-size: 24px;
        padding: 12px;
    }

    .bottom-nav.navigation {
        position: fixed !important;
        bottom: 0 !important;
        left: 0;
        right: 0;
        width: 100%;
        max-width: var(--app-max-width);
        margin: 0 auto;
        height: var(--bottom-nav-height) !important;
        min-height: var(--bottom-nav-height) !important;
        padding-top: 8px !important;
        padding-bottom: var(--shell-safe-area-bottom) !important;
        z-index: 500;
        background: var(--background);
        border-top: 1px solid var(--border);
    }

    .nav-item {
        padding: 8px 10px;
        min-width: 66px;
    }

    .nav-item .material-icons,
    .nav-bug-icon {
        font-size: 27px;
    }

    .nav-item span {
        font-size: 12px;
        line-height: 1.1;
    }

    .nav-item-bugme .nav-bugme-text {
        font-size: 30px !important;
    }

    .main-content {
        flex: 0 0 calc(var(--app-visible-height, 100dvh) - var(--app-header-occupied-height, var(--app-header-height, 70px)) - var(--bottom-nav-occupied-height, var(--bottom-nav-height, 72px))) !important;
        height: calc(var(--app-visible-height, 100dvh) - var(--app-header-occupied-height, var(--app-header-height, 70px)) - var(--bottom-nav-occupied-height, var(--bottom-nav-height, 72px))) !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
    }

    .app-container.messages-thread-active .main-content {
        height: calc(var(--app-shell-height) - var(--app-header-height)) !important;
        margin-bottom: 0 !important;
    }

    .tab-content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        padding: 22px 18px;
    }

    .section-title {
        font-size: 27px !important;
        line-height: 1.15;
    }

    .btn,
    button.btn,
    .compact-btn,
    .contact-message-btn,
    .contact-call-btn,
    .peer-call-btn,
    .peer-message-btn,
    .add-contact-btn,
    .thread-action-btn,
    .attach-trigger {
        min-height: 52px;
        font-size: 17px;
    }

    .btn.btn-secondary.compact-btn {
        font-size: 0;
        gap: 0;
        min-height: 42px;
        min-width: 42px;
        padding: 8px;
    }

    .btn.btn-secondary.compact-btn .material-icons {
        font-size: 20px;
        margin: 0;
    }

    #meeting-create-btn,
    #meeting-join-btn {
        font-size: 0.95rem;
        min-height: 42px;
        padding: 9px 12px;
    }

    input,
    textarea,
    select {
        font-size: 18px !important;
    }

    .form-group label,
    .status-label,
    .status-value {
        font-size: 16px;
    }

    .number-display {
        font-size: 44px;
        min-height: 62px;
        margin-bottom: 16px;
    }

    .keypad {
        max-width: 348px;
        gap: 16px;
    }

    .keypad-btn {
        min-height: 84px;
        max-height: 84px;
        max-width: 84px;
        font-size: 30px;
    }

    .keypad-btn .letters {
        font-size: 13px;
        bottom: 11px;
    }

    .action-buttons {
        gap: 22px;
        margin-top: 24px;
    }

    .action-btn {
        width: 78px;
        height: 78px;
        font-size: 24px;
    }

    .contacts-section,
    .history-section,
    .messages-section-header,
    .settings-section,
    .phonebook-entry,
    .contact-item,
    .history-item,
    .conversation-item {
        font-size: 18px;
    }

    #history-tab.tab-content {
        padding-bottom: 22px !important;
        scroll-padding-bottom: 22px !important;
    }

    #history-list {
        padding-bottom: 0;
        scroll-padding-bottom: 0;
    }

    #history-tab.tab-content.active {
        padding-bottom: 0 !important;
        scroll-padding-bottom: 0 !important;
    }

    #history-tab.tab-content.active .history-item:last-child {
        margin-bottom: 0;
    }

    .incoming-call-overlay,
    .in-call-overlay {
        width: 100%;
        max-width: 100%;
        height: var(--app-visible-height, 100dvh);
        max-height: var(--app-visible-height, 100dvh);
        box-sizing: border-box;
        overflow: hidden;
    }

    .in-call-overlay {
        padding: calc(32px + var(--shell-safe-area-top, 0px)) 40px calc(30px + var(--shell-safe-area-bottom, 0px));
    }

    .in-call-status {
        min-height: 0;
    }

    .in-call-controls {
        flex-shrink: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .phonebook-entry,
    .contact-item,
    .history-item,
    .conversation-item {
        padding: 18px;
    }

    .message-compose-form textarea {
        min-height: 58px;
        padding: 16px 18px;
        font-size: 18px !important;
    }

    .messages-layout {
        gap: 0;
        padding: 0;
        padding-bottom: 0;
    }

    .messages-sidebar,
    .messages-thread-panel {
        padding: 12px 10px 0;
    }

    .message-peer-launcher {
        grid-template-columns: 1fr;
    }

    .message-thread-actions {
        gap: 6px;
    }

    .thread-message {
        max-width: calc(100% - 14px);
    }

    .message-compose-form {
        grid-template-columns: 46px 46px minmax(0, 1fr) 46px;
        gap: 8px;
        margin-top: 0;
        padding-top: 4px;
        padding-bottom: 8px;
        position: relative;
        bottom: auto;
    }

    .message-compose-form .btn {
        grid-column: auto;
        width: 46px;
        min-width: 46px;
        min-height: 46px;
        height: 46px;
        border-radius: 14px;
        padding: 0;
        justify-self: end;
    }

    #send-message-btn {
        background: var(--video-action);
        color: white;
    }

    #send-message-btn:disabled,
    #send-message-btn[aria-disabled="true"] {
        background: rgba(0, 0, 0, 0.08);
        color: rgba(0, 0, 0, 0.42);
        border-color: transparent;
        cursor: not-allowed;
        opacity: 1;
    }

    .message-compose-form .btn .material-icons,
    .message-compose-form .btn .fas,
    .message-compose-form .btn .fa-paper-plane {
        margin: 0;
        font-size: 21px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .message-compose-form .btn span:last-child {
        display: inline-flex;
    }

    .attach-trigger,
    .location-trigger,
    .message-compose-form .btn {
        width: 46px;
        height: 46px;
    }

    .attach-trigger .material-icons {
        font-size: 22px;
    }

    .message-compose-form textarea {
        min-height: 42px;
        max-height: 84px;
        padding: 10px 12px;
        border-radius: 12px;
    }

    .attachment-chip {
        width: 100%;
        justify-content: space-between;
    }

    .attachment-chip-meta span:last-of-type {
        max-width: 140px;
    }

    .nav-badge {
        right: 6px;
    }

}

@media (min-width: 768px) and (max-width: 1180px) and (pointer: coarse) {
    #history-tab.tab-content.active {
        position: absolute !important;
        inset: 0 0 -12px 0 !important;
        display: flex !important;
        flex-direction: column;
        height: auto !important;
        min-height: 0 !important;
        padding: 16px 18px 0 !important;
        overflow: hidden !important;
        scroll-padding-bottom: 0 !important;
    }

    #history-tab.tab-content.active .history-section {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        margin-bottom: 0;
        overflow: hidden;
    }

    #history-tab.tab-content.active #history-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
        padding-bottom: 0 !important;
        scroll-padding-bottom: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #history-tab.tab-content.active .history-item:last-child {
        margin-bottom: 0 !important;
    }

    .incoming-call-overlay,
    .in-call-overlay {
        height: var(--app-visible-height, 100dvh);
        max-height: var(--app-visible-height, 100dvh);
        box-sizing: border-box;
        overflow: hidden;
    }
}

@media (max-width: 480px) {
}

.meetings-section {
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 14px;
    min-height: 0;
    overflow: visible;
}

#meetings-tab.active {
    display: flex !important;
    flex-direction: column;
    height: calc(100% - var(--bottom-nav-height, 72px) - var(--shell-safe-area-bottom, 0px) - 8px);
    min-height: 0;
    overflow: hidden;
    overflow-x: hidden;
    padding: 14px 18px 12px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#meetings-tab.active .meetings-section {
    height: 100%;
    min-height: 0;
}

.meetings-header,
.meeting-room-topline {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.meetings-copy,
.meeting-help-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 4px 0 0;
}

.meeting-active-pill {
    align-items: center;
    background: #e0f2fe;
    border-radius: 999px;
    color: #075985;
    display: inline-flex;
    font-weight: 700;
    gap: 6px;
    padding: 8px 12px;
}

.meeting-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    min-height: 0;
    padding: 16px;
    position: relative;
}

#meeting-lobby-card:not(.hidden) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: calc(100% - 2px);
    max-height: calc(100% - 2px);
    min-height: 0;
    overflow: hidden;
}

@media (min-width: 768px) {
    #meetings-tab.active {
        height: 100%;
        overflow: hidden;
        padding: clamp(8px, 1.8vh, 16px);
    }

    #meetings-tab.active .meetings-section {
        height: 100%;
        min-height: 0;
    }

    #meeting-lobby-card:not(.hidden) {
        height: 100%;
        max-height: 100%;
        min-height: 0;
        overflow: hidden;
    }
}

#meeting-lobby-card .meeting-room-browser {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

#meeting-lobby-card .meeting-room-list {
    align-content: start;
    flex: 1 1 auto;
    min-height: 96px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#meeting-room-card:not(.hidden) {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
    padding: 12px;
}

.meeting-card label,
.meeting-room-label {
    color: var(--text-secondary);
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.meeting-room-row {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.meeting-room-row input {
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    min-width: 0;
    padding: 12px;
    width: 100%;
}

#meeting-join-btn {
    background: #e0f2fe;
    border: 1px solid #38bdf8;
    color: #075985;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

#meeting-join-btn:hover,
#meeting-join-btn:active {
    background: #bae6fd;
}

#meeting-create-btn,
#meeting-join-btn {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    justify-content: center;
    min-height: 42px;
    padding: 9px 12px;
    white-space: nowrap;
}

#meeting-create-btn .material-icons,
#meeting-join-btn .material-icons {
    font-size: 20px;
    margin: 0;
}

.meeting-password-row {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 10px;
}

.meeting-display-name-row {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 10px;
}

.meeting-room-browser {
    border-top: 1px solid var(--border);
    margin-top: 14px;
    padding-top: 14px;
}

.meeting-room-browser-header {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 10px;
}

.meeting-room-browser-header h4 {
    color: var(--text-primary);
    margin: 0;
}

.meeting-room-list {
    display: grid;
    gap: 8px;
}

.meeting-room-list-item {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: #0f172a;
    display: grid;
    gap: 8px;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    padding: 10px;
}

.meeting-room-list-code {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.meeting-room-list-count {
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.meeting-room-list-join {
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    border-radius: 10px;
    color: #075985;
    cursor: pointer;
    font-weight: 800;
    padding: 7px 10px;
}

.meeting-room-list-share {
    align-items: center;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    color: #3730a3;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-height: 34px;
    min-width: 38px;
    padding: 6px 8px;
}

.meeting-room-list-share .material-icons {
    font-size: 18px;
}

.meeting-room-security {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    margin: 10px 0;
}

.meeting-room-security input {
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.95rem;
    padding: 10px 12px;
    width: 100%;
}

#meeting-password-toggle-btn {
    min-width: 44px;
    padding: 8px 10px;
}

#meeting-password-toggle-btn.active {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #075985;
}

.meeting-room-code {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 800;
    word-break: break-word;
}

.meeting-card:not(.hidden) .meeting-room-topline {
    align-items: center;
    background: rgba(15, 23, 42, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.22);
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
    padding: 8px 10px;
    position: relative;
    width: 100%;
    z-index: 2;
}

.meeting-card:not(.hidden) .meeting-room-label {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.64rem;
    line-height: 1;
    margin-bottom: 2px;
}

.meeting-card:not(.hidden) .meeting-room-code {
    color: #fff;
    font-size: 0.95rem;
    max-width: min(42vw, 280px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meeting-room-summary {
    flex: 1 1 0;
    min-width: 0;
}

.meeting-room-live-meta {
    align-items: center;
    display: flex;
    gap: 8px;
}

.meeting-room-count-wrap {
    display: inline-flex;
    position: relative;
}

.meeting-room-count-pill,
.meeting-room-speaker-pill {
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 0;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-weight: 900;
    gap: 6px;
    min-height: 34px;
    padding: 6px 10px;
}

.meeting-room-count-pill:hover,
.meeting-room-count-pill:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    outline: none;
}

.meeting-room-count-pill .material-icons {
    font-size: 18px;
}

.meeting-room-count-popover {
    background: rgba(6, 18, 28, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
    color: #fff;
    display: none;
    min-width: 180px;
    max-width: min(72vw, 280px);
    padding: 10px;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 80;
}

.meeting-room-count-wrap:hover .meeting-room-count-popover,
.meeting-room-count-wrap.open .meeting-room-count-popover,
.meeting-room-count-wrap:focus-within .meeting-room-count-popover {
    display: block;
}

.meeting-room-count-popover::before {
    border-bottom: 7px solid rgba(6, 18, 28, 0.98);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    content: '';
    position: absolute;
    right: 18px;
    top: -7px;
}

.meeting-room-count-popover-title {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.meeting-room-count-popover-list {
    display: grid;
    gap: 6px;
    max-height: min(40vh, 220px);
    overflow-y: auto;
}

.meeting-room-count-name {
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    display: flex;
    font-size: 0.86rem;
    font-weight: 800;
    gap: 7px;
    min-width: 0;
    padding: 7px 8px;
}

.meeting-room-count-name .material-icons {
    color: rgba(125, 211, 252, 0.95);
    font-size: 16px;
    flex: 0 0 auto;
}

.meeting-room-count-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meeting-room-count-name.self .meeting-room-count-name-text::after {
    color: rgba(187, 247, 208, 0.8);
    content: ' you';
    font-size: 0.72rem;
    font-weight: 900;
}

.meeting-room-speaker-pill {
    color: rgba(187, 247, 208, 0.96);
    flex: 1 1 auto;
    justify-content: center;
    max-width: min(24vw, 220px);
    min-width: 90px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meeting-view-controls {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 3px;
    touch-action: manipulation;
}

.meeting-top-actions {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    min-width: min(100%, 220px);
}

.meeting-share-btn {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
    color: #0f172a;
    cursor: pointer;
    display: inline-flex;
    height: 26px;
    justify-content: center;
    min-height: 26px;
    min-width: 26px;
    padding: 0;
    position: absolute;
    left: 8px;
    right: auto;
    top: 8px;
    width: 26px;
    z-index: 8;
}

.meeting-share-btn .material-icons {
    font-size: 15px;
    margin: 0;
}

.meeting-view-btn {
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    flex: 1 1 0;
    font-size: 0.72rem;
    font-weight: 900;
    padding: 6px 9px;
}

.meeting-view-btn.active {
    background: #fff;
    color: #0f172a;
}

.meeting-view-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.meeting-card:not(.hidden) #meeting-fullscreen-btn {
    background: rgba(255, 255, 255, 0.94);
    border: 0;
    border-radius: 999px;
    color: #0f172a;
    min-height: 38px;
    padding: 8px 12px;
}

.meeting-video-grid {
    --meeting-grid-columns: auto-fit;
    --meeting-grid-gap: 12px;
    --meeting-grid-height: auto;
    --meeting-tile-height: 190px;
    align-content: start;
    display: grid;
    gap: var(--meeting-grid-gap, 12px);
    grid-template-columns: repeat(var(--meeting-grid-columns, auto-fit), minmax(0, 1fr));
    grid-auto-rows: var(--meeting-tile-height, 190px);
    height: var(--meeting-grid-height, auto);
    width: 100%;
    min-height: 0;
    margin-top: 10px;
    overflow: visible;
}

.meeting-main-stage {
    background: #020617;
    border: 2px solid transparent;
    height: var(--meeting-stage-height, min(58vh, 560px));
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
    color: #fff;
    margin-top: 10px;
    overflow: hidden;
    position: relative;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    width: 100%;
}

.meeting-main-stage video {
    background: #020617;
    display: block;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    width: 100%;
}

.meeting-stage-label {
    align-items: center;
    background: rgba(15, 23, 42, 0.82);
    border-radius: 999px;
    bottom: 14px;
    display: inline-flex;
    font-size: 0.92rem;
    font-weight: 800;
    left: 14px;
    max-width: calc(100% - 28px);
    padding: 8px 12px;
    position: absolute;
}

.meeting-video-tile {
    background: #0f172a;
    border: 2px solid transparent;
    border-radius: 18px;
    color: #fff;
    height: var(--meeting-tile-height, 190px);
    overflow: hidden;
    position: relative;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

@keyframes meeting-speaking-pulse {
    0% {
        box-shadow: 0 0 0 2px rgba(134, 239, 172, 0.42), 0 0 16px rgba(34, 197, 94, 0.32), 0 14px 28px rgba(15, 23, 42, 0.26);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(134, 239, 172, 0.85), 0 0 30px rgba(74, 222, 128, 0.62), 0 18px 34px rgba(15, 23, 42, 0.32);
    }
    100% {
        box-shadow: 0 0 0 2px rgba(134, 239, 172, 0.42), 0 0 16px rgba(34, 197, 94, 0.32), 0 14px 28px rgba(15, 23, 42, 0.26);
    }
}

.meeting-main-stage.speaking,
.meeting-video-tile.speaking {
    animation: meeting-speaking-pulse 1.05s ease-in-out infinite;
    border-color: #86efac;
}

.meeting-video-tile.speaking {
    z-index: 1;
}

.meeting-video-tile.camera-off {
    opacity: 0.78;
}

.meeting-video-tile.stage-hidden-tile {
    display: none;
}

.meeting-video-tile video {
    background: #020617;
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.meeting-video-label {
    align-items: center;
    background: rgba(15, 23, 42, 0.78);
    border-radius: 999px;
    bottom: 10px;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 700;
    gap: 5px;
    left: 10px;
    max-width: calc(100% - 20px);
    padding: 6px 10px;
    position: absolute;
}

.meeting-chat-panel {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    bottom: calc(var(--bottom-nav-height, 72px) + var(--shell-safe-area-bottom, 0px) + 8px);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.28);
    display: flex;
    flex-direction: column;
    left: auto;
    margin-top: 0;
    max-height: min(72vh, 560px);
    overflow: hidden;
    position: fixed;
    right: 10px;
    top: auto;
    width: min(360px, calc(100vw - 20px));
    z-index: 10035;
}

.meeting-chat-panel.dragging {
    user-select: none;
}

.meeting-chat-panel.chat-collapsed {
    border-radius: 999px;
    max-height: none;
    overflow: visible;
    width: 52px;
}

.meeting-chat-toggle {
    align-items: center;
    background: #f8fafc;
    border: 0;
    color: #0f172a;
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 800;
    gap: 8px;
    justify-content: flex-start;
    min-height: 40px;
    padding: 8px 10px;
    touch-action: none;
    width: 100%;
    cursor: grab;
    position: relative;
}

.meeting-chat-panel.dragging .meeting-chat-toggle {
    cursor: grabbing;
}

.meeting-chat-toggle.active {
    background: #e0f2fe;
    color: #075985;
}

.meeting-chat-toggle .material-icons {
    font-size: 18px;
}

.meeting-chat-drag-hint {
    align-items: center;
    background: rgba(15, 23, 42, 0.18);
    border-radius: 999px;
    color: #0f172a;
    display: inline-flex;
    font-size: 0.62rem;
    font-weight: 900;
    justify-content: center;
    line-height: 1;
    margin-left: 8px;
    opacity: 0.6;
    padding: 2px 5px;
    transition: opacity 0.18s ease;
}

.meeting-chat-drag-hint.material-icons {
    font-size: 13px;
}

.meeting-chat-toggle:hover .meeting-chat-drag-hint,
.meeting-chat-panel.dragging .meeting-chat-drag-hint {
    opacity: 1;
}

.meeting-chat-panel.chat-collapsed .meeting-chat-toggle {
    border-radius: 999px;
    min-height: 52px;
    padding: 0;
    justify-content: center;
    width: 52px;
}

.meeting-chat-panel.chat-collapsed #meeting-chat-toggle-label,
.meeting-chat-panel.chat-collapsed .meeting-chat-toggle-count {
    display: none;
}

.meeting-chat-panel.chat-collapsed .meeting-chat-drag-hint {
    margin-left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: -7px;
    top: -7px;
    transform: scale(0.8);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.meeting-chat-panel.chat-collapsed .meeting-chat-toggle:hover .meeting-chat-drag-hint,
.meeting-chat-panel.chat-collapsed.dragging .meeting-chat-drag-hint {
    opacity: 1;
    transform: scale(1);
}

.meeting-chat-toggle-count {
    align-items: center;
    background: rgba(15, 23, 42, 0.14);
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 900;
    justify-content: center;
    margin-left: auto;
    min-width: 22px;
    padding: 2px 7px;
}

.meeting-chat-body {
    background: #fff;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: min(58vh, 430px);
    padding: 8px;
}

.meeting-chat-list {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    max-height: none;
    min-height: 74px;
    overflow-y: auto;
    padding: 8px;
}

.meeting-chat-empty {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.meeting-chat-item {
    align-self: flex-start;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-right: auto;
    max-width: 88%;
    padding: 6px 34px 6px 8px;
    position: relative;
}

.meeting-chat-item.self {
    align-self: flex-end;
    background: #ecfdf5;
    border-color: #86efac;
    margin-left: auto;
    margin-right: 0;
}

.meeting-chat-meta {
    align-items: baseline;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.meeting-chat-sender {
    color: #0f172a;
    font-size: 0.74rem;
    font-weight: 800;
}

.meeting-chat-time {
    color: #475569;
    font-size: 0.7rem;
    white-space: nowrap;
}

.meeting-chat-text {
    color: #111827;
    font-size: 0.84rem;
    line-height: 1.34;
    overflow-wrap: anywhere;
}

.meeting-chat-mention {
    background: #eef2ff;
    border: 1px solid #a5b4fc;
    border-radius: 999px;
    color: #3730a3;
    display: inline;
    font-weight: 900;
    padding: 0 4px;
}

.meeting-chat-edited {
    color: #64748b;
    font-size: 0.72rem;
    font-style: italic;
    font-weight: 700;
    margin-left: 6px;
}

.meeting-chat-action-menu {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.18);
    display: flex;
    gap: 4px;
    padding: 4px;
    position: absolute;
    right: 6px;
    top: 34px;
    z-index: 5;
}

.meeting-chat-item.self .meeting-chat-action-menu {
    left: 6px;
    right: auto;
}

.meeting-chat-action-btn {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: #0f172a;
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 800;
    min-height: 30px;
    padding: 5px 8px;
    touch-action: manipulation;
    white-space: nowrap;
}

.meeting-chat-action-btn:active {
    background: #e0f2fe;
    border-color: #7dd3fc;
}

.meeting-chat-action-btn.danger {
    color: #b91c1c;
}

.meeting-chat-reactions {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
    display: none;
    gap: 6px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 5px;
    padding: 4px;
}

.meeting-chat-reactions.open {
    display: grid;
}

.meeting-chat-add-reaction-btn {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: #0f172a;
    cursor: pointer;
    display: inline-flex;
    height: 26px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 6px;
    top: 6px;
    width: 26px;
}

.meeting-chat-add-reaction-btn .material-icons {
    font-size: 16px;
}

.meeting-chat-reaction-summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.meeting-chat-reaction-btn,
.meeting-chat-reaction-summary {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    justify-content: center;
    min-height: 28px;
    padding: 3px 6px;
    touch-action: manipulation;
}

.meeting-chat-reaction-summary {
    font-size: 0.86rem;
}

.meeting-chat-reaction-btn:active,
.meeting-chat-reaction-summary:active {
    background: #e0f2fe;
    border-color: #7dd3fc;
}

.meeting-chat-reaction-btn.active,
.meeting-chat-reaction-summary.active {
    background: #dbeafe;
    border-color: #2563eb;
}

.meeting-chat-reaction-count {
    color: #334155;
    font-size: 0.72rem;
    font-weight: 800;
    margin-left: 2px;
}

.meeting-chat-compose {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    position: relative;
}

.meeting-compose-emoji-btn {
    min-height: 40px;
    min-width: 40px;
    padding: 8px 10px;
}

.meeting-compose-emoji-btn .material-icons {
    font-size: 18px;
    margin: 0;
}

.meeting-compose-emoji-picker {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    bottom: calc(100% + 6px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    left: 0;
    padding: 5px;
    position: absolute;
    right: 0;
    z-index: 10046;
}

.meeting-compose-emoji-picker.hidden {
    display: none;
}

.meeting-compose-emoji-option {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 1rem;
    min-height: 30px;
}

.meeting-mention-list {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    bottom: calc(100% + 6px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
    display: grid;
    gap: 4px;
    left: 0;
    max-height: 180px;
    overflow-y: auto;
    padding: 6px;
    position: absolute;
    right: 96px;
    z-index: 10045;
}

.meeting-mention-list.hidden {
    display: none;
}

.meeting-mention-option {
    background: #f8fafc;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #0f172a;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 7px 9px;
    text-align: left;
}

.meeting-mention-option:hover,
.meeting-mention-option:focus {
    background: #e0f2fe;
    border-color: #7dd3fc;
}

.meeting-chat-compose input {
    border: 1px solid var(--border);
    border-radius: 10px;
    color: #111827;
    font-size: 0.9rem;
    min-width: 0;
    padding: 8px 10px;
    width: 100%;
}

.meeting-chat-compose input::placeholder {
    color: #64748b;
}

.meeting-chat-compose .btn {
    min-height: 40px;
    min-width: 40px;
    padding: 8px 10px;
}

.meeting-chat-compose .btn .material-icons {
    font-size: 18px;
    margin: 0;
}

.meeting-controls {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    margin-top: 8px;
}

.meeting-fullscreen-chrome-toggle {
    align-items: center;
    background: rgba(248, 250, 252, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 999px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.28);
    color: #0f172a;
    cursor: pointer;
    display: none;
    height: 46px;
    justify-content: center;
    padding: 0;
    position: fixed;
    touch-action: manipulation;
    width: 46px;
    z-index: 10050;
}

.meeting-fullscreen-chrome-toggle .material-icons {
    font-size: 24px;
}

.meeting-control-btn {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: #111827;
    display: inline-flex;
    flex-direction: column;
    font-size: 0.64rem;
    font-weight: 800;
    gap: 2px;
    justify-content: center;
    min-height: 40px;
    padding: 4px 3px;
}

.meeting-control-btn .material-icons {
    font-size: 16px;
}

.meeting-control-btn.active {
    background: #dbeafe;
    border-color: #2563eb;
    color: #1d4ed8;
}

.meeting-control-btn.danger {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

.meeting-participants {
    margin-top: 10px;
    max-height: 112px;
    overflow-y: auto;
    padding-bottom: 2px;
}

.meeting-participants h4 {
    color: var(--text-primary);
    margin: 0 0 8px;
}

.meeting-participant-chip {
    align-items: center;
    background: #f1f5f9;
    border-radius: 999px;
    color: #0f172a;
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 700;
    gap: 6px;
    margin: 0 6px 6px 0;
    padding: 7px 10px;
}

.meeting-stage-chip {
    background: #dbeafe;
    border-radius: 999px;
    color: #1d4ed8;
    font-size: 0.72rem;
    font-weight: 900;
    padding: 3px 7px;
    text-transform: uppercase;
}

.meeting-stage-action {
    background: #111827;
    border: 0;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 5px 8px;
}

.meeting-stage-action:hover {
    background: #2563eb;
}

.meeting-self-preview {
    background: #020617;
    border: 2px solid rgba(255, 255, 255, 0.82);
    border-radius: 16px;
    bottom: 16px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.38);
    cursor: grab;
    height: 132px;
    left: 16px;
    overflow: hidden;
    position: absolute;
    touch-action: none;
    user-select: none;
    width: 176px;
    z-index: 14;
}

.meeting-self-preview:active {
    cursor: grabbing;
}

.meeting-self-preview video {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.meeting-self-preview-label {
    background: rgba(15, 23, 42, 0.76);
    border-radius: 999px;
    bottom: 7px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    left: 7px;
    padding: 4px 8px;
    position: absolute;
}

.meeting-self-preview.is-screen-preview .meeting-self-preview-label::after {
    content: " screen";
}

.meeting-self-preview.is-camera-preview .meeting-self-preview-label::after {
    content: " camera";
}

.meeting-card.meeting-fullscreen-mode {
    background: #020617;
    border-radius: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    inset: 0;
    height: 100%;
    min-height: 100dvh;
    overflow: hidden;
    padding: 14px;
    position: fixed;
    z-index: 10000;
}

.meeting-card.meeting-fullscreen-mode .meeting-fullscreen-chrome-toggle {
    display: inline-flex;
}

.meeting-card.meeting-fullscreen-mode .meeting-fullscreen-top-toggle {
    right: calc(12px + env(safe-area-inset-right, 0px));
    top: calc(12px + env(safe-area-inset-top, 0px));
}

.meeting-card.meeting-fullscreen-mode .meeting-fullscreen-bottom-toggle {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: calc(12px + env(safe-area-inset-left, 0px));
    transform: none;
}

.meeting-card.meeting-fullscreen-mode .meeting-share-btn {
    display: inline-flex;
    left: calc(12px + env(safe-area-inset-left, 0px));
    right: auto;
    top: calc(12px + env(safe-area-inset-top, 0px));
    z-index: 10052;
}

.meeting-card.meeting-fullscreen-mode.meeting-topbar-collapsed .meeting-room-topline,
.meeting-card.meeting-fullscreen-mode.meeting-topbar-collapsed .meeting-room-security {
    display: none !important;
}

.meeting-card.meeting-fullscreen-mode.meeting-bottombar-collapsed .meeting-controls {
    display: none !important;
}

.app-container.meeting-room-active #meeting-room-card.meeting-fullscreen-mode.meeting-bottombar-collapsed:not(.hidden) {
    padding-bottom: 14px;
}

.meeting-card.meeting-fullscreen-mode .meeting-self-preview {
    height: 150px;
    width: 200px;
}

.meeting-card.meeting-fullscreen-mode .meeting-room-topline {
    color: #fff;
    flex: 0 0 auto;
}

.meeting-card.meeting-fullscreen-mode .meeting-room-label {
    color: rgba(255, 255, 255, 0.7);
}

.meeting-card.meeting-fullscreen-mode .meeting-room-code {
    color: #fff;
}

.meeting-card.meeting-fullscreen-mode .meeting-chat-panel {
    bottom: calc(var(--shell-safe-area-bottom, 0px) + 10px);
    border-color: rgba(255, 255, 255, 0.25);
    right: 10px;
    width: min(340px, calc(100vw - 20px));
}

.meeting-card.meeting-fullscreen-mode .meeting-chat-panel.chat-collapsed {
    width: 52px;
}

.meeting-card.meeting-fullscreen-mode .meeting-chat-toggle {
    background: #f8fafc;
    color: #0f172a;
}

.meeting-card.meeting-fullscreen-mode .meeting-chat-toggle.active {
    background: #e0f2fe;
    color: #075985;
}

.meeting-card.meeting-fullscreen-mode .meeting-chat-toggle-count {
    background: rgba(15, 23, 42, 0.14);
    color: #0f172a;
}

.meeting-card.meeting-fullscreen-mode .meeting-chat-drag-hint {
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
}

.meeting-card.meeting-fullscreen-mode .meeting-chat-body {
    background: #fff;
    border-top-color: var(--border);
}

.meeting-card.meeting-fullscreen-mode .meeting-chat-list {
    background: #f8fafc;
    border-color: var(--border);
}

.meeting-card.meeting-fullscreen-mode .meeting-chat-item {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.08);
}

.meeting-card.meeting-fullscreen-mode .meeting-chat-item.self {
    background: #ecfdf5;
    border-color: #86efac;
}

.meeting-card.meeting-fullscreen-mode .meeting-chat-sender,
.meeting-card.meeting-fullscreen-mode .meeting-chat-text {
    color: #111827;
}

.meeting-card.meeting-fullscreen-mode .meeting-chat-mention {
    background: #eef2ff;
    border-color: #a5b4fc;
    color: #3730a3;
}

.meeting-card.meeting-fullscreen-mode .meeting-chat-edited {
    color: #64748b;
}

.meeting-card.meeting-fullscreen-mode .meeting-chat-action-menu {
    background: #fff;
    border-color: var(--border);
}

.meeting-card.meeting-fullscreen-mode .meeting-chat-time,
.meeting-card.meeting-fullscreen-mode .meeting-chat-empty {
    color: #475569;
}

.meeting-card.meeting-fullscreen-mode .meeting-chat-reaction-btn {
    background: #f8fafc;
    border-color: var(--border);
}

.meeting-card.meeting-fullscreen-mode .meeting-chat-reaction-btn.active,
.meeting-card.meeting-fullscreen-mode .meeting-chat-reaction-summary.active {
    background: #dbeafe;
    border-color: #2563eb;
}

.meeting-card.meeting-fullscreen-mode .meeting-mention-list,
.meeting-card.meeting-fullscreen-mode .meeting-compose-emoji-picker,
.meeting-card.meeting-fullscreen-mode .meeting-chat-reactions {
    background: #fff;
    border-color: var(--border);
}

.meeting-card.meeting-fullscreen-mode .meeting-chat-compose input {
    background: #fff;
    border-color: var(--border);
    color: var(--text-primary);
}

.meeting-card.meeting-fullscreen-mode .meeting-video-grid {
    align-content: start;
    display: grid;
    flex: 1 1 auto;
    gap: 12px;
    margin-top: 14px;
    height: var(--meeting-grid-height, auto);
    overflow: hidden;
}

.meeting-card.meeting-fullscreen-mode .meeting-video-tile {
    border-radius: 14px;
    height: var(--meeting-tile-height, 190px);
}

.meeting-card.meeting-fullscreen-mode .meeting-video-tile video {
    height: 100%;
    object-fit: contain;
}

.meeting-card.meeting-fullscreen-mode.meeting-view-speaker {
    overflow: hidden;
}

.meeting-card.meeting-fullscreen-mode.meeting-view-speaker .meeting-main-stage {
    display: block;
    flex: 0 0 auto;
    height: var(--meeting-stage-height, min(58vh, 420px));
    margin-top: 12px;
    min-height: 0;
}

.meeting-card.meeting-fullscreen-mode.meeting-view-speaker .meeting-main-stage video {
    height: 100%;
    min-height: 0;
    object-fit: contain;
}

.meeting-card.meeting-fullscreen-mode.meeting-view-speaker .meeting-video-grid {
    align-content: stretch;
    display: grid;
    flex: 1 1 34%;
    gap: 12px;
    margin-top: 12px;
    min-height: 0;
    height: var(--meeting-grid-height, auto);
}

.meeting-card.meeting-fullscreen-mode.meeting-view-speaker .meeting-video-tile {
    height: var(--meeting-tile-height, 190px);
}

.meeting-card.meeting-fullscreen-mode.meeting-view-speaker .meeting-video-tile video {
    object-fit: cover;
}

.meeting-card.meeting-fullscreen-mode.meeting-view-gallery .meeting-main-stage {
    display: none !important;
}

.meeting-card.meeting-fullscreen-mode.meeting-view-gallery .meeting-video-grid {
    align-content: center;
    display: grid;
    flex: 1 1 auto;
    overflow: hidden;
}

.meeting-card.meeting-fullscreen-mode .meeting-video-tile.fullscreen-hidden-camera-off,
.meeting-card.meeting-fullscreen-mode .meeting-video-tile.camera-off {
    display: none !important;
}

.meeting-card.meeting-fullscreen-mode .meeting-participants {
    display: none;
}

.meeting-card.meeting-fullscreen-mode .meeting-participants,
.meeting-card.meeting-fullscreen-mode .meeting-controls {
    flex: 0 0 auto;
}

.meeting-card.meeting-fullscreen-mode .meeting-controls {
    gap: 6px;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    margin-top: 8px;
}

.meeting-card.meeting-fullscreen-mode .meeting-control-btn {
    border-radius: 10px;
    font-size: 0.64rem;
    gap: 2px;
    min-height: 40px;
    padding: 4px 3px;
}

.meeting-card.meeting-fullscreen-mode .meeting-control-btn .material-icons {
    font-size: 16px;
}

@media (max-width: 767px) {
    .meeting-card:not(.hidden) .meeting-room-topline {
        gap: 5px;
        padding: 6px;
    }

    .meeting-card:not(.hidden) .meeting-room-label {
        font-size: 0;
        margin-bottom: 0;
    }

    .meeting-card:not(.hidden) .meeting-room-label::after {
        content: "Rm.";
        font-size: 0.62rem;
        font-weight: 900;
        letter-spacing: 0;
    }

    .meeting-card:not(.hidden) .meeting-room-code {
        font-size: 0.76rem;
        max-width: 74px;
    }

    .meeting-room-summary {
        flex: 0 1 74px;
    }

    .meeting-room-count-pill,
    .meeting-room-speaker-pill {
        gap: 4px;
        min-height: 28px;
        padding: 4px 7px;
    }

    .meeting-room-count-popover {
        left: max(8px, env(safe-area-inset-left));
        max-height: calc(100dvh - 70px);
        max-width: none;
        min-width: 0;
        overflow: hidden;
        position: fixed;
        right: max(8px, env(safe-area-inset-right));
        top: max(42px, calc(env(safe-area-inset-top) + 42px));
        width: auto;
        z-index: 3000;
    }

    .meeting-room-count-popover::before {
        display: none;
    }

    .meeting-room-count-popover-list {
        max-height: calc(100dvh - 126px);
    }

    .meeting-room-count-pill .material-icons {
        font-size: 15px;
    }

    .meeting-room-speaker-pill {
        display: none;
    }

    .meeting-top-actions {
        flex: 1 1 auto;
        gap: 4px;
        justify-content: flex-end;
        min-width: 0;
    }

    .meeting-share-btn {
        height: 26px;
        left: 6px;
        min-height: 26px;
        min-width: 26px;
        padding: 0;
        right: auto;
        top: 6px;
        width: 26px;
    }

    .meeting-view-controls {
        gap: 2px;
        padding: 2px;
    }

    .meeting-view-btn {
        padding: 5px 7px;
    }

    #meeting-password-toggle-btn {
        font-size: 0;
        min-height: 32px;
        min-width: 34px;
        padding: 5px 7px;
    }

    #meeting-fullscreen-btn {
        font-size: 0;
        min-height: 32px;
        min-width: 34px;
        padding: 5px 7px;
    }

    #meeting-fullscreen-btn .material-icons {
        font-size: 18px;
        margin: 0;
    }

    #meeting-speaker-view-btn,
    #meeting-gallery-view-btn,
    .meeting-stage-action {
        font-size: 0;
    }

    #meeting-speaker-view-btn::after {
        content: "S";
        font-size: 0.68rem;
        font-weight: 900;
    }

    #meeting-gallery-view-btn::after {
        content: "G";
        font-size: 0.68rem;
        font-weight: 900;
    }

    .meeting-stage-action::after {
        content: "Rm";
        font-size: 0.7rem;
        font-weight: 800;
    }
}

@media (max-width: 640px) {
    .meeting-room-code-row {
        align-items: stretch;
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .meeting-room-code-row #meeting-room-input {
        grid-column: 1 / -1;
        min-height: 44px;
    }

    .meeting-room-code-row #meeting-create-btn,
    .meeting-room-code-row #meeting-join-btn {
        width: 100%;
    }

    .meeting-room-security,
    .meeting-room-list-item {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
    }

    .meeting-room-list-count {
        grid-column: 2 / -1;
    }

    .meeting-controls {
        gap: 8px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #meeting-room-card:not(.hidden) {
        padding: 10px;
    }

    .meeting-card:not(.hidden) .meeting-room-topline {
        border-radius: 12px;
        gap: 6px;
        padding: 8px;
    }

    .meeting-card:not(.hidden) .meeting-room-code {
        max-width: 55vw;
    }

    .meeting-view-btn {
        font-size: 0.68rem;
        padding: 5px 8px;
    }

    .meeting-control-btn {
        min-height: 34px;
        padding: 2px;
    }

    .meeting-control-btn .material-icons {
        font-size: 14px;
    }

    .meeting-chat-toggle {
        font-size: 0.8rem;
        min-height: 38px;
        padding: 7px 9px;
    }

    .meeting-chat-panel {
        bottom: calc(var(--bottom-nav-height, 72px) + var(--shell-safe-area-bottom, 0px) + 6px);
        right: 6px;
        width: min(320px, calc(100vw - 12px));
    }

    .meeting-chat-panel.chat-collapsed {
        width: 52px;
    }

    .meeting-chat-list {
        min-height: 110px;
    }

    .meeting-chat-text {
        font-size: 0.8rem;
    }

    .meeting-chat-compose {
        gap: 6px;
        grid-template-columns: minmax(0, 1fr) 36px 36px;
    }

    .meeting-compose-emoji-btn,
    .meeting-chat-compose .btn {
        min-height: 36px;
        min-width: 36px;
        padding: 6px;
    }

    .meeting-chat-compose input {
        font-size: 0.84rem;
        padding: 7px 8px;
    }

    .meeting-card.meeting-fullscreen-mode .meeting-controls {
        grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
    }

    .meeting-card.meeting-fullscreen-mode .meeting-control-btn {
        min-height: 34px;
        padding: 2px;
    }

    .meeting-card.meeting-fullscreen-mode .meeting-control-btn .material-icons {
        font-size: 14px;
    }

    .meeting-card.meeting-fullscreen-mode .meeting-video-grid {
        grid-template-columns: repeat(var(--meeting-grid-columns, auto-fit), minmax(0, 1fr));
    }

    .meeting-self-preview,
    .meeting-card.meeting-fullscreen-mode .meeting-self-preview {
        display: none !important;
    }
}

@media (max-width: 420px) {
    #meetings-tab.active {
        padding: 10px 12px 10px;
    }

    #meeting-room-card:not(.hidden) {
        margin-bottom: 56px;
        padding: 8px;
    }

    .app-container.meeting-room-active #meetings-tab.active {
        padding-bottom: 0;
    }

    .app-container.meeting-room-active #meeting-room-card:not(.hidden) {
        margin-bottom: 0;
        padding: 6px;
    }

    .meeting-video-grid {
        margin-top: 6px;
    }

    .meeting-controls {
        gap: 5px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 6px;
        padding-bottom: 4px;
    }

    .app-container.meeting-room-active .meeting-controls {
        bottom: 0;
        gap: 4px;
        grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
        padding: 5px 6px calc(5px + max(var(--shell-safe-area-bottom, 0px), 0px));
    }

    .meeting-control-btn {
        font-size: 0.58rem;
        min-height: 30px;
        padding: 2px;
    }

    .app-container.meeting-room-active .meeting-control-btn {
        min-height: 34px;
    }

    .meeting-control-btn .material-icons {
        font-size: 13px;
    }
}

@media (max-width: 1024px), (pointer: coarse) {
    .meeting-self-preview,
    .meeting-card.meeting-fullscreen-mode .meeting-self-preview {
        display: none !important;
    }
}

/* Unihertz Atom (432x240 / 240x432) keypad fit without affecting larger layouts */
@media screen and (orientation: landscape) and (min-width: 420px) and (max-width: 440px) and (max-height: 260px) {
    :root {
        --bottom-nav-height: 48px;
        --app-header-height: 50px;
    }

    .header {
        padding: 8px 12px;
    }

    .header h1 {
        font-size: 18px;
    }

    #keypad-tab {
        padding: 6px 10px calc(var(--shell-safe-area-bottom) + 6px) !important;
    }

    #keypad-tab .keypad-container {
        width: min(100%, 206px) !important;
        max-width: 206px !important;
        gap: 4px;
        padding: 2px 0 6px;
    }

    #keypad-tab .number-display {
        min-height: 24px;
        margin-bottom: 2px;
        font-size: 19px;
    }

    #keypad-tab .keypad {
        width: min(100%, 198px);
        max-width: 198px;
        gap: 6px;
        margin-bottom: 2px;
    }

    #keypad-tab .keypad-btn {
        min-height: 40px;
        max-height: 40px;
        max-width: 40px;
        font-size: 16px;
    }

    #keypad-tab .keypad-btn .letters {
        bottom: 3px;
        font-size: 7px;
    }

    #keypad-tab .action-buttons {
        gap: 10px;
        margin-top: 2px;
    }

    #keypad-tab .action-btn {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .nav-item .material-icons,
    .nav-bug-icon {
        font-size: 21px;
    }

    .nav-item span {
        font-size: 10px;
    }
}

@media screen and (orientation: portrait) and (min-width: 230px) and (max-width: 260px) and (min-height: 420px) and (max-height: 450px) {
    #keypad-tab {
        padding: 6px 8px calc(var(--bottom-nav-height) + var(--shell-safe-area-bottom) + 10px) !important;
        overflow-y: auto !important;
    }

    #keypad-tab .keypad-container {
        width: min(100%, 206px) !important;
        max-width: 206px !important;
        gap: 6px;
        padding: 2px 0 4px;
    }

    #keypad-tab .number-display {
        min-height: 28px;
        margin-bottom: 4px;
        font-size: 20px;
    }

    #keypad-tab .keypad {
        width: min(100%, 198px);
        max-width: 198px;
        gap: 6px;
    }

    #keypad-tab .keypad-btn {
        min-height: 40px;
        max-height: 40px;
        max-width: 40px;
        font-size: 16px;
    }

    #keypad-tab .keypad-btn .letters {
        bottom: 4px;
        font-size: 7px;
    }

    #keypad-tab .action-btn {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }
}

/* Atom-specific fallback based on UA class when viewport queries do not match as expected */
.device-unihertz-atom #keypad-tab {
    padding-bottom: calc(var(--bottom-nav-height, 72px) + var(--shell-safe-area-bottom, 0px) + 12px) !important;
    overflow-y: auto !important;
}

.device-unihertz-atom #keypad-tab .keypad-container {
    width: min(100%, 206px) !important;
    max-width: 206px !important;
    gap: 6px !important;
    padding: 2px 0 4px !important;
}

.device-unihertz-atom #keypad-tab .number-display {
    min-height: 24px !important;
    margin-bottom: 2px !important;
    font-size: 19px !important;
}

.device-unihertz-atom #keypad-tab .keypad {
    width: min(100%, 198px) !important;
    max-width: 198px !important;
    gap: 6px !important;
    margin-bottom: 2px !important;
}

.device-unihertz-atom #keypad-tab .keypad-btn {
    min-height: 40px !important;
    max-height: 40px !important;
    max-width: 40px !important;
    font-size: 16px !important;
}

.device-unihertz-atom #keypad-tab .keypad-btn .letters {
    bottom: 3px !important;
    font-size: 7px !important;
}

.device-unihertz-atom #keypad-tab .action-buttons {
    gap: 10px !important;
    margin-top: 2px !important;
}

.device-unihertz-atom #keypad-tab .action-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 13px !important;
}

.device-unihertz-atom #history-tab.tab-content {
    padding-bottom: 8px !important;
}

.device-unihertz-atom #history-list {
    padding-bottom: 0 !important;
    scroll-padding-bottom: 0 !important;
}

/* Fixed mobile nav must not cover keypad actions. Use the real header height from flex layout. */
@media (max-width: 767px) {
    .app-container > .main-content {
        flex: 0 0 calc(var(--app-visible-height, 100dvh) - var(--app-header-occupied-height, var(--app-header-height, 70px)) - var(--bottom-nav-occupied-height, var(--bottom-nav-height, 72px))) !important;
        height: calc(var(--app-visible-height, 100dvh) - var(--app-header-occupied-height, var(--app-header-height, 70px)) - var(--bottom-nav-occupied-height, var(--bottom-nav-height, 72px))) !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
    }

    .app-container.messages-thread-active > .main-content,
    .app-container.messages-composer-active > .main-content,
    .app-container.meeting-room-active > .main-content {
        margin-bottom: 0 !important;
    }

    .app-container.messages-thread-active > .main-content,
    .app-container.messages-composer-active > .main-content {
        flex: 0 0 calc(var(--app-visible-height, 100dvh) - var(--app-header-occupied-height, var(--app-header-height, 70px)) - var(--viewport-offset-top, 0px)) !important;
        height: calc(var(--app-visible-height, 100dvh) - var(--app-header-occupied-height, var(--app-header-height, 70px)) - var(--viewport-offset-top, 0px)) !important;
        min-height: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
    }

    .app-container.messages-thread-active > .main-content > #messages-tab.tab-content.active,
    .app-container.messages-composer-active > .main-content > #messages-tab.tab-content.active,
    .app-container.messages-thread-active .messages-layout,
    .app-container.messages-composer-active .messages-layout,
    .app-container.messages-thread-active .messages-thread-panel,
    .app-container.messages-composer-active .messages-thread-panel,
    .app-container.messages-thread-active .message-thread-view,
    .app-container.messages-composer-active .message-thread-view {
        height: 100% !important;
        min-height: 0 !important;
    }

    .app-container.messages-thread-active .message-compose-form {
        margin-bottom: 0 !important;
    }

    .app-container.messages-composer-active .message-thread-view {
        padding-bottom: var(--message-compose-reserved-space, 82px) !important;
    }

    .app-container.messages-composer-active .thread-messages {
        padding-bottom: 4px !important;
        scroll-padding-bottom: 8px !important;
    }

    .app-container > .main-content > #keypad-tab.tab-content {
        padding-top: 8px !important;
        padding-bottom: calc(8px + var(--shell-safe-area-bottom, 0px)) !important;
        scroll-padding-bottom: calc(12px + var(--shell-safe-area-bottom, 0px)) !important;
    }

    .app-container > .main-content > #keypad-tab.tab-content .keypad-container {
        gap: 8px !important;
        padding-top: 0 !important;
        padding-bottom: calc(8px + var(--shell-safe-area-bottom, 0px)) !important;
    }

    .app-container > .main-content > #keypad-tab.tab-content .number-display {
        height: 30px !important;
        min-height: 30px !important;
        margin: 0 0 2px !important;
        font-size: 24px !important;
        line-height: 1.15 !important;
        overflow: hidden !important;
    }

    .app-container > .main-content > #keypad-tab.tab-content .number-display:empty {
        height: 30px !important;
        min-height: 30px !important;
        margin: 0 0 2px !important;
    }

    .app-container > .main-content > #keypad-tab.tab-content .dial-contact-match.hidden {
        display: none !important;
    }

    .app-container > .main-content > #keypad-tab.tab-content .keypad {
        margin-bottom: 2px !important;
    }

    .app-container > .main-content > #keypad-tab.tab-content .action-buttons {
        margin-top: 2px !important;
        padding-bottom: 0 !important;
    }

    .app-container > .main-content > #keypad-tab.tab-content .action-btn {
        width: clamp(62px, 18vw, 74px) !important;
        height: clamp(62px, 18vw, 74px) !important;
        font-size: clamp(20px, 5.5vw, 24px) !important;
    }

    @media (min-height: 640px) {
        .app-container > .main-content > #keypad-tab.tab-content.active {
            justify-content: center !important;
            padding: 6px 16px calc(8px + var(--shell-safe-area-bottom, 0px)) !important;
            overflow: hidden !important;
        }

        .app-container > .main-content > #keypad-tab.tab-content .keypad-container {
            flex: 1 1 auto !important;
            width: min(100%, 350px) !important;
            max-height: 100% !important;
            justify-content: space-evenly !important;
            gap: clamp(10px, 2.4dvh, 18px) !important;
            padding: 0 0 calc(6px + var(--shell-safe-area-bottom, 0px)) !important;
        }

        .app-container > .main-content > #keypad-tab.tab-content .number-display {
            height: auto !important;
            min-height: clamp(42px, 7dvh, 56px) !important;
            margin: 0 !important;
            font-size: clamp(28px, 7.5vw, 36px) !important;
        }

        .app-container > .main-content > #keypad-tab.tab-content .number-display:empty {
            height: auto !important;
            min-height: clamp(42px, 7dvh, 56px) !important;
            margin: 0 !important;
        }

        .app-container > .main-content > #keypad-tab.tab-content .keypad {
            width: min(100%, 336px) !important;
            max-width: min(336px, calc(100vw - 32px)) !important;
            gap: clamp(12px, 3.6vw, 16px) !important;
            margin: 0 !important;
        }

        .app-container > .main-content > #keypad-tab.tab-content .keypad-btn {
            min-height: clamp(72px, 23vw, 88px) !important;
            max-height: clamp(72px, 23vw, 88px) !important;
            max-width: clamp(72px, 23vw, 88px) !important;
            font-size: clamp(24px, 6.8vw, 30px) !important;
        }

        .app-container > .main-content > #keypad-tab.tab-content .keypad-btn .letters {
            bottom: clamp(8px, 2.4vw, 10px) !important;
            font-size: clamp(10px, 2.6vw, 12px) !important;
        }

        .app-container > .main-content > #keypad-tab.tab-content .action-buttons {
            gap: clamp(20px, 8vw, 34px) !important;
            margin-top: 0 !important;
            padding-bottom: 0 !important;
        }
    }

    .app-container > .main-content > #meetings-tab.tab-content.active {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 8px 8px calc(12px + var(--shell-safe-area-bottom, 0px)) !important;
        scroll-padding-bottom: calc(16px + var(--shell-safe-area-bottom, 0px)) !important;
        -webkit-overflow-scrolling: touch;
    }

    .app-container > .main-content > #meetings-tab.tab-content.active .meetings-section {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        gap: 8px !important;
    }

    .app-container > .main-content > #meetings-tab.tab-content.active .meeting-card {
        border-radius: 12px !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 10px !important;
    }

    .app-container > .main-content > #meetings-tab.tab-content.active #meeting-lobby-card:not(.hidden) {
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .app-container > .main-content > #meetings-tab.tab-content.active #meeting-lobby-card .meeting-room-list {
        max-height: 34vh !important;
        overflow-y: auto !important;
    }

    .app-container.meeting-room-active > .main-content {
        height: var(--app-shell-height, 100dvh) !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
    }

    .app-container.meeting-room-active > .main-content > #meetings-tab.tab-content.active,
    .app-container.meeting-room-active > .main-content > #meetings-tab.tab-content.active .meetings-section {
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .app-container.meeting-room-active #meeting-room-card:not(.hidden) {
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding-bottom: calc(var(--meeting-controls-reserved-height, 74px) + var(--shell-safe-area-bottom, 0px) + 14px) !important;
    }

    .app-container.meeting-room-active .meeting-video-grid {
        overflow: visible !important;
    }
}

@media (max-width: 420px) {
    .app-container > .main-content > #meetings-tab.tab-content.active {
        padding: 6px 6px calc(10px + var(--shell-safe-area-bottom, 0px)) !important;
    }

    .app-container > .main-content > #meetings-tab.tab-content.active .meeting-card {
        padding: 8px !important;
    }

    .app-container > .main-content > #meetings-tab.tab-content.active .meeting-room-row,
    .app-container > .main-content > #meetings-tab.tab-content.active .meeting-room-security {
        gap: 6px !important;
    }

    .app-container > .main-content > #meetings-tab.tab-content.active .meeting-room-browser {
        margin-top: 8px !important;
        padding-top: 8px !important;
    }

    .app-container.meeting-room-active .meeting-controls {
        max-height: 46vh;
        overflow-y: auto !important;
    }
}

/* Keep message threads scrollable while the header and composer stay fixed. */
#messages-tab.active,
.app-container.messages-thread-active #messages-tab.active,
.app-container.messages-composer-active #messages-tab.active {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#messages-tab.active .messages-layout,
.app-container.messages-thread-active #messages-tab.active .messages-layout,
.app-container.messages-composer-active #messages-tab.active .messages-layout,
#messages-tab.active .messages-thread-panel,
.app-container.messages-thread-active #messages-tab.active .messages-thread-panel,
.app-container.messages-composer-active #messages-tab.active .messages-thread-panel,
#messages-tab.thread-open .message-thread-view:not(.hidden),
.app-container.messages-thread-active #messages-tab.thread-open .message-thread-view:not(.hidden),
.app-container.messages-composer-active #messages-tab.thread-open .message-thread-view:not(.hidden) {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#messages-tab.thread-open .thread-messages,
.app-container.messages-thread-active #messages-tab.thread-open .thread-messages,
.app-container.messages-composer-active #messages-tab.thread-open .thread-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/* Messages tab scroll contract: keep chrome fixed, scroll only lists. */
.app-container > .main-content > #messages-tab.tab-content.active {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.app-container > .main-content > #messages-tab.tab-content.active > .messages-layout {
    display: flex !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.app-container > .main-content > #messages-tab.tab-content.active .messages-sidebar,
.app-container > .main-content > #messages-tab.tab-content.active .messages-thread-panel {
    flex: 1 1 auto !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.app-container > .main-content > #messages-tab.tab-content.active .messages-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.app-container > .main-content > #messages-tab.tab-content.active .message-thread-view:not(.hidden) {
    display: flex !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.app-container > .main-content > #messages-tab.tab-content.active .thread-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

@media (max-width: 1024px) {
    .app-container > .main-content > #messages-tab.tab-content.active > .messages-layout {
        flex-direction: column !important;
    }

    .app-container > .main-content > #messages-tab.tab-content.active .messages-sidebar {
        border-bottom: 0 !important;
    }

    .app-container > .main-content > #messages-tab.tab-content.active:not(.thread-open) .messages-thread-panel {
        display: none !important;
    }

    .app-container > .main-content > #messages-tab.tab-content.active.thread-open .messages-sidebar {
        display: none !important;
    }
}

/* Final chat viewport contract for tablets: composer mode must win over thread mode. */
@media (min-width: 768px) and (max-width: 1180px) and (pointer: coarse) {
    .app-container.messages-composer-active.messages-thread-active > .main-content,
    .app-container.messages-composer-active > .main-content {
        flex: 0 0 calc(var(--app-visible-height, 100dvh) - var(--app-header-occupied-height, var(--app-header-height, 70px)) - var(--viewport-offset-top, 0px)) !important;
        height: calc(var(--app-visible-height, 100dvh) - var(--app-header-occupied-height, var(--app-header-height, 70px)) - var(--viewport-offset-top, 0px)) !important;
        max-height: calc(var(--app-visible-height, 100dvh) - var(--app-header-occupied-height, var(--app-header-height, 70px)) - var(--viewport-offset-top, 0px)) !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
    }

    .app-container.messages-composer-active > .main-content > #messages-tab.tab-content.active,
    .app-container.messages-composer-active #messages-tab.active .messages-layout,
    .app-container.messages-composer-active #messages-tab.active .messages-thread-panel,
    .app-container.messages-composer-active #messages-tab.thread-open .message-thread-view:not(.hidden) {
        display: flex !important;
        flex: 1 1 auto !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .app-container.messages-composer-active #messages-tab.active .messages-layout {
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    .app-container.messages-composer-active #messages-tab.thread-open .messages-sidebar {
        display: none !important;
    }

    .app-container.messages-composer-active #messages-tab.thread-open .messages-thread-panel {
        display: flex !important;
        padding: 12px 12px 0 !important;
    }

    .app-container.messages-composer-active #messages-tab.thread-open .message-thread-view:not(.hidden) {
        flex-direction: column !important;
        padding-bottom: var(--message-compose-reserved-space, 64px) !important;
    }

    .app-container.messages-composer-active #messages-tab.thread-open .thread-messages {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 4px !important;
        scroll-padding-bottom: 8px !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
}