.chat-call-actions {
    display: inline-flex;
    gap: 4px;
}

.call-overlay {
    width: min(100vw, 680px);
    height: min(100dvh, 820px);
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 28px;
    overflow: hidden;
    background: #082629;
    color: #f7ffff;
}

.call-overlay::backdrop {
    background: rgb(1 14 16 / 76%);
    backdrop-filter: blur(12px);
}

.call-card {
    box-sizing: border-box;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.call-card > header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.call-card > header div {
    display: grid;
    gap: 2px;
}

.call-card > header strong { font-size: 1.15rem; }
.call-card > header small { color: #a9cbcd; }
.call-kind { font-size: 1.7rem; }

.call-media-grid {
    flex: 1;
    min-height: 240px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    grid-auto-rows: minmax(180px, 1fr);
    gap: 10px;
}

.call-participant,
.call-avatar {
    position: relative;
    min-height: 180px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(145deg, #16494d, #0c3336);
}

.call-avatar { font-size: 4rem; }
.call-avatar .ui-icon { width: 64px; height: 64px; }

.call-participant > span {
    position: absolute;
    z-index: 2;
    left: 10px;
    bottom: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgb(0 0 0 / 55%);
    font-size: .8rem;
}

.call-video-track {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.call-audio-track {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.call-incoming-actions,
.call-active-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.call-incoming-actions button,
.call-active-actions button,
.call-enable-sound {
    min-width: 88px;
    min-height: 50px;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    background: #d6ffff;
    color: #082629;
    font: inherit;
    font-weight: 700;
}

.call-incoming-actions .call-decline,
.call-active-actions .call-hangup { background: #e84252; color: white; }
.call-incoming-actions .call-accept { background: #47cf83; color: #062515; }
.call-enable-sound { align-self: center; }

.call-note {
    margin: 0;
    color: #a9cbcd;
    font-size: .75rem;
    text-align: center;
}

@media (max-width: 700px) {
    .call-overlay {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .call-overlay::backdrop { backdrop-filter: none; }
}

/* Native hierarchy: participant stage and one compact circular control dock. */
.call-overlay { height: var(--visual-viewport-height, 100dvh); max-height: var(--visual-viewport-height, 100dvh); background: #0b2023; }
.call-card { height: 100%; min-height: 0; }
.call-card > header { justify-content: center; text-align: center; flex: 0 0 auto; }
.call-kind { display: none; }
.call-media-grid { min-height: 0; overflow: auto; grid-auto-rows: minmax(150px, 1fr); }
.call-participant-avatar { width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%; background: #245459; color: #fff; font-size: 40px; }
.call-participant-avatar[hidden] { display: none; }
.call-active-actions { align-self: center; padding: 12px; border-radius: 48px; background: #ffffff15; gap: 18px; }
.call-active-actions button, .call-incoming-actions button { display: grid; place-items: center; min-width: 0; width: 60px; height: 60px; padding: 16px; border-radius: 50%; background: #ffffff24; color: #fff; }
.call-active-actions button[aria-pressed="true"] { background: #fff; color: #0b2023; }
.call-active-actions .call-hangup, .call-incoming-actions .call-decline { background: #ed3f50; color: #fff; }
.call-incoming-actions .call-accept { background: #31be72; color: #fff; }
.call-incoming-actions { gap: 90px; padding: 18px; }
.call-note { font-size: 12px; }
.call-avatar { background: transparent; }
.call-active-actions [hidden] { display: none; }
@media (max-width: 390px) { .call-active-actions { gap: 12px; } .call-active-actions button { width: 52px; height: 52px; padding: 13px; } }

/* Minimize to a compact bar (iOS CompactAudioCallBar). */
.call-card > header { position: relative; }
.call-minimize { position: absolute; left: 0; top: 50%; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #ffffff1f; color: #fff; transform: translateY(-50%); }
.call-minimize[hidden] { display: none; }
.call-minimize .ui-icon { width: 20px; height: 20px; }
.call-compact-bar { position: fixed; z-index: 60; top: max(8px, env(safe-area-inset-top)); left: 50%; width: min(620px, calc(100% - 16px)); display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 22px; background: #0b2023f2; color: #f7ffff; box-shadow: 0 8px 22px rgb(0 0 0 / 28%); transform: translateX(-50%); }
.call-compact-bar[hidden] { display: none; }
.call-compact-return { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 4px; border: 0; background: transparent; color: inherit; text-align: left; }
.call-compact-return > span { min-width: 0; display: grid; gap: 1px; }
.call-compact-return strong, .call-compact-return small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-compact-return strong { font-size: 15px; }
.call-compact-return small { color: #a9cbcd; font-size: 12px; }
.call-compact-return > .ui-icon { flex: 0 0 auto; width: 14px; height: 14px; margin-left: auto; transform: rotate(180deg); opacity: .7; }
.call-compact-bar .call-participant-avatar { flex: 0 0 38px; width: 38px; height: 38px; font-size: 16px; }
.call-compact-mute, .call-compact-end { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; padding: 11px; border: 0; border-radius: 50%; background: #ffffff1f; color: #fff; }
.call-compact-end { background: #ed3f50; }

/* Mirror the front-camera self view; incoming calls pulse until answered. */
.call-video-track.mirrored { transform: scaleX(-1); }
.call-overlay.is-ringing .call-avatar .call-participant-avatar { animation: call-ring 1.3s ease-out infinite; }
@keyframes call-ring { 0% { box-shadow: 0 0 0 0 rgb(49 190 114 / 55%); } 100% { box-shadow: 0 0 0 28px rgb(49 190 114 / 0%); } }
@media (prefers-reduced-motion: reduce) { .call-overlay.is-ringing .call-avatar .call-participant-avatar { animation: none; box-shadow: 0 0 0 6px rgb(49 190 114 / 45%); } }
body.call-minimized #appView { padding-top: 60px; }
body.call-minimized .chat-room-screen:not(.hidden) { padding-top: calc(max(0px, env(safe-area-inset-top)) + 60px); }