/* ============================================================
   实时通话（语音 / 视频）· 微信式全屏通话界面
   ============================================================ */
.rtc-layer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(9, 10, 20, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rtc-layer.hidden { display: none; }

.rtc-panel {
    position: relative;
    width: min(420px, 94vw);
    max-height: 92vh;
    aspect-ratio: 9 / 14;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(165deg, var(--v-950) 0%, var(--v-925) 55%, var(--c-bg) 100%);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: .25s ease;
}
@media (min-width: 768px) {
    .rtc-panel { aspect-ratio: 4 / 5; }
}

/* 最小化：缩为右下角小窗 */
.rtc-panel.mini {
    position: fixed;
    right: 14px;
    bottom: 84px;
    width: 116px;
    height: 158px;
    aspect-ratio: auto;
    border-radius: 14px;
}
.rtc-panel.mini .rtc-stage .rtc-name { font-size: 12px; }
.rtc-panel.mini .rtc-stage .rtc-status { display: none; }
.rtc-panel.mini .rtc-actions { gap: 4px; padding: 6px; }
.rtc-panel.mini .rtc-btn { padding: 5px 8px; font-size: 11px; min-width: 0; }

.rtc-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}
.rtc-video.hidden { display: none; }

.rtc-stage {
    position: relative;
    z-index: 2;
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 34px 18px 0;
    color: var(--c-surface);
}
.rtc-stage.hidden { display: none; }

.rtc-avatar {
    width: 84px;
    height: 84px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--indigo-400), var(--v-600));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    box-shadow: 0 10px 30px rgba(16, 185, 129, .45);
}
.rtc-name { font-size: 20px; font-weight: 700; letter-spacing: .5px; }
.rtc-status { font-size: 13px; color: rgba(255, 255, 255, .66); }

.rtc-timer {
    position: relative;
    z-index: 3;
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
.rtc-timer.hidden { display: none; }

.rtc-local-wrap {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 92px;
    height: 124px;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, .28);
    background: #000;
    z-index: 4;
}
.rtc-local-wrap.hidden { display: none; }
.rtc-local-wrap.cam-off { opacity: .35; }
.rtc-local { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }

.rtc-min {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 5;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .16);
    color: var(--c-surface);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.rtc-actions {
    position: relative;
    z-index: 5;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
    margin-top: auto;
}
.rtc-btn {
    min-width: 96px;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .12);
    color: var(--c-surface);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: .15s;
}
.rtc-btn:active { transform: scale(.96); }
.rtc-btn.accept {
    background: linear-gradient(135deg, var(--s-green-500), var(--s-green-600));
    border: none;
    box-shadow: 0 8px 22px rgba(22, 163, 74, .4);
}
.rtc-btn.hangup {
    background: linear-gradient(135deg, var(--s-red-500), var(--s-red-600));
    border: none;
    box-shadow: 0 8px 22px rgba(220, 38, 38, .4);
}
.rtc-btn.off { background: rgba(255, 255, 255, .28); }

/* ---------------- 消息气泡中的通话记录 ---------------- */
.msg-call {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 14px;
    font-size: 13.5px;
    font-weight: 600;
    background: var(--c-surface);
    border: 1px solid #e6e8f0;
    color: #374151;
    cursor: pointer;
    transition: .15s;
    -webkit-tap-highlight-color: transparent;
}
.msg-call:hover { border-color: var(--v-300); color: var(--v-700); }
.msg-call .mc-ico { font-size: 15px; }
.msg-call.mine { background: linear-gradient(135deg, var(--indigo-400), var(--v-600)); color: var(--c-surface); border-color: transparent; }
.msg-call.mine:hover { color: var(--c-surface); filter: brightness(1.06); }
.msg-call.missed { color: var(--s-red-700); }
.msg-call.missed.mine { background: linear-gradient(135deg, var(--s-red-400), var(--s-red-600)); color: var(--c-surface); }

/* 聊天输入区的通话按钮 */
.rtc-quick {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--line, var(--n-200));
    background: var(--c-surface);
    color: #4b5563;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.rtc-quick:hover { border-color: var(--v-600); color: var(--v-600); }
.rtc-quick.video { color: var(--v-700); }
.rtc-quick .rq-ico { font-size: 14px; }