/* =====================================================================
   微信视频通话 · ins 清冷感 Frutiger Aero 风格
   低饱和蓝灰为主，少量低饱和青/绿做点缀；毛玻璃面板 + 大圆角 + 顶部高光。
   兼容性：backdrop-filter 全部带 -webkit- 前缀并配不透明底色兜底；
   动效只用 opacity/transform，避免低端安卓机重排闪屏。
   ===================================================================== */

#video-call-global-root.video-call-global-root {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 100150;
    overflow: hidden;
}

/* 同 voice-call.css：视频通话根挂入「API 快捷设置」时放开裁切，并为弹窗打开命中。
   视频根同样是 pointer-events:none，若不设 auto，取消/保存会穿透到通话层。 */
#video-call-global-root.video-call-global-root.main-float-modal-mounted {
    overflow: visible !important;
}

#video-call-global-root.video-call-global-root.main-float-modal-mounted > .main-float-api-modal.modal.show {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    pointer-events: auto !important;
    z-index: 100400 !important;
}

/* 显隐用 visibility + opacity（display 切换会让魅族/Vivo/OPPO 等机型的
   GPU 合成层销毁重建，露出一帧黑屏） */
.video-call-layer {
    position: absolute;
    inset: 0;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.22s ease;
    /* 清冷低饱和蓝灰渐变兜底（自定义背景图未加载/未设置时） */
    background: linear-gradient(176deg, #e3eaf1 0%, #ccd9e4 36%, #b3c5d3 72%, #a3b6c5 100%);
}

.video-call-layer:not(.show) {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.video-call-background-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    pointer-events: none;
}

.video-call-layer.has-custom-bg .video-call-background-img {
    display: block;
}

/* 自定义背景上盖一层冷调薄纱，统一进清冷色调 */
.video-call-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(228, 236, 243, 0.42) 0%, rgba(196, 210, 222, 0.30) 46%, rgba(158, 176, 192, 0.46) 100%);
}

.video-call-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 10px) 12px calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 10px);
    gap: 10px;
}

/* ---- 顶栏三段式：左（心跳/实时）/ 中（标题+计时，真居中）/ 右（设置/缩小） ----
   左右两侧 flex:1 1 0 等分剩余空间，中间 flex:0 0 auto，保证标题始终视觉居中 */

.video-call-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 auto;
    overflow: visible;
    flex-wrap: nowrap;
}

.video-call-topbar-side {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: nowrap;
}

.video-call-topbar-side--left {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.video-call-topbar-side--left::-webkit-scrollbar {
    display: none;
}

.video-call-topbar-side--right {
    justify-content: flex-end;
}

.video-call-topbar-side .video-call-icon-btn {
    flex-shrink: 0;
}

.video-call-topbar > .video-call-topbar-center {
    flex: 0 0 auto;
}

/* 窄屏：中间只保留计时（标题让位给两侧按钮），避免 320-360px 机型顶栏溢出 */
@media (max-width: 360px) {
    .video-call-topbar .video-call-title {
        display: none;
    }
    .video-call-topbar-side {
        gap: 5px;
    }
}

.video-call-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38));
    color: #5b7186;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(91, 113, 134, 0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.16s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.video-call-icon-btn svg {
    width: 20px;
    height: 20px;
}

.video-call-icon-btn:active {
    transform: scale(0.95);
}

.video-call-topbar-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 0;
}

.video-call-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #51677c;
}

.video-call-timer {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.12em;
    color: rgba(91, 113, 134, 0.78);
}

/* ---- 双视频框架 ---- */

.video-call-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    flex: 0 0 auto;
}

.video-call-frame {
    position: relative;
    aspect-ratio: 3 / 4;
    min-height: 150px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: linear-gradient(180deg, rgba(214, 224, 233, 0.92), rgba(176, 192, 206, 0.92));
    box-shadow: 0 10px 26px rgba(74, 96, 117, 0.20);
    -webkit-tap-highlight-color: transparent;
}

.video-call-frame--char {
    cursor: pointer;
}

.video-call-char-img,
.video-call-char-video,
.video-call-user-media-img,
.video-call-user-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
}

.video-call-user-media-img {
    object-fit: cover;
}

.video-call-frame--user.has-custom-user-media .video-call-flip-btn {
    display: none;
}

.video-call-user-video.is-mirrored {
    transform: scaleX(-1);
}

.video-call-char-placeholder,
.video-call-user-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    line-height: 1.7;
    color: #5d7388;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(214, 231, 234, 0.55), rgba(0, 0, 0, 0) 60%),
        linear-gradient(180deg, rgba(222, 231, 238, 0.96), rgba(187, 202, 214, 0.96));
}

.video-call-char-placeholder {
    font-size: 44px;
    font-weight: 600;
    color: rgba(93, 115, 136, 0.82);
}

.video-call-user-placeholder {
    cursor: pointer;
}

/* Aero 顶部高光：上半区白色渐变玻璃光泽 */
.video-call-frame-gloss {
    position: absolute;
    inset: 0 0 auto 0;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.04));
}

.video-call-frame-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: calc(100% - 16px);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(244, 248, 250, 0.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 11px;
    color: #506679;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 低饱和青绿点缀：在线呼吸点 */
.video-call-live-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8fbcab;
    box-shadow: 0 0 0 3px rgba(143, 188, 171, 0.22);
    animation: video-call-live-breath 2.4s ease-in-out infinite;
}

@keyframes video-call-live-breath {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.video-call-frame-tip {
    position: absolute;
    right: 8px;
    top: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(244, 248, 250, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 10px;
    color: rgba(80, 102, 121, 0.85);
    pointer-events: none;
}

/* 反转镜头：线性 UI 按钮 */
.video-call-flip-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(244, 248, 250, 0.55);
    color: #5b7186;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.16s ease;
    -webkit-tap-highlight-color: transparent;
}

.video-call-flip-btn svg {
    width: 17px;
    height: 17px;
}

.video-call-flip-btn:active {
    transform: scale(0.95);
}

.video-call-status {
    flex: 0 0 auto;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: rgba(81, 103, 124, 0.85);
}

/* ---- 通话内聊天区 ---- */

.video-call-chat {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(238, 243, 247, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 26px rgba(74, 96, 117, 0.14);
    overflow: hidden;
}

.video-call-chat-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 隐形滚动条：保留滚动能力但不显示滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 12px 12px 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Chrome / Safari / 各安卓 WebView：彻底隐藏聊天区滚动条 */
.video-call-chat-list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.vc-chat-row {
    position: relative;
    display: flex;
    align-items: center;
}

.vc-chat-row--user {
    justify-content: flex-end;
}

.vc-chat-row--friend {
    justify-content: flex-start;
}

.vc-chat-row--system {
    justify-content: center;
}

.vc-chat-bubble {
    max-width: 82%;
    padding: 8px 12px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.55;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    color: #41566a;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.66);
    box-shadow: 0 3px 10px rgba(91, 113, 134, 0.08);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.vc-chat-row--interactive .vc-chat-bubble {
    cursor: pointer;
}

.vc-chat-row.is-selected .vc-chat-bubble {
    box-shadow: 0 0 0 3px rgba(84, 133, 173, 0.28), 0 6px 16px rgba(74, 96, 117, 0.16);
}

.vc-chat-selector {
    position: relative;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 0 5px;
    border: 2px solid rgba(91, 113, 134, 0.58);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 2px 8px rgba(74, 96, 117, 0.16);
    pointer-events: none;
}

.vc-chat-row.is-selected .vc-chat-selector {
    border-color: #668fae;
    background: #769fbe;
}

.vc-chat-row.is-selected .vc-chat-selector::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 通话内消息菜单仅提供回溯 / 编辑 / 多选，不混入普通聊天的引用、转发或收藏。 */
.video-call-message-menu {
    position: absolute;
    z-index: 32;
    display: none;
    align-items: stretch;
    width: 240px;
    max-width: calc(100% - 16px);
    min-height: 58px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 15px;
    background: rgba(229, 237, 243, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 12px 30px rgba(54, 77, 98, 0.25);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.video-call-message-menu.show {
    display: flex;
}

.video-call-message-menu-item {
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #41566a;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    -webkit-tap-highlight-color: transparent;
}

.video-call-message-menu-item:active {
    background: rgba(143, 173, 198, 0.2);
}

.video-call-message-menu-icon {
    font-size: 18px;
    line-height: 1;
}

.video-call-multiselect-bar {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 56px;
    padding: 8px 10px calc(8px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    border-top: 1px solid rgba(255, 255, 255, 0.52);
    background: rgba(235, 242, 246, 0.94);
}

.video-call-chat.is-multiselect .video-call-inputbar {
    display: none;
}

.video-call-chat.is-multiselect .video-call-multiselect-bar {
    display: flex;
}

.video-call-multiselect-count {
    min-width: 0;
    color: #41566a;
    font-size: 12px;
    font-weight: 600;
}

.video-call-multiselect-actions {
    display: flex;
    gap: 8px;
}

.video-call-multiselect-cancel,
.video-call-multiselect-delete,
.video-call-dialog-cancel,
.video-call-dialog-confirm {
    min-height: 36px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.video-call-multiselect-cancel,
.video-call-dialog-cancel {
    background: rgba(255, 255, 255, 0.82);
    color: #52697d;
}

.video-call-multiselect-delete {
    background: linear-gradient(180deg, rgba(216, 167, 167, 0.96), rgba(196, 134, 134, 0.96));
    color: #fff;
}

.video-call-multiselect-delete:disabled,
.video-call-dialog-confirm:disabled,
.video-call-dialog-cancel:disabled {
    opacity: 0.55;
    cursor: default;
}

.video-call-message-dialog {
    position: absolute;
    z-index: 40;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: rgba(64, 83, 101, 0.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.video-call-message-dialog.show {
    display: flex;
}

.video-call-message-dialog-card {
    width: min(100%, 330px);
    max-height: calc(100% - 16px);
    overflow-y: auto;
    padding: 17px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 20px;
    background: rgba(241, 246, 249, 0.97);
    box-shadow: 0 18px 42px rgba(54, 77, 98, 0.28);
}

.video-call-message-dialog-card h3 {
    margin: 0 0 8px;
    color: #3f566b;
    font-size: 16px;
}

.video-call-message-dialog-card p {
    margin: 0;
    color: #687e91;
    font-size: 12px;
    line-height: 1.6;
}

.video-call-message-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 15px;
}

.video-call-dialog-confirm {
    background: linear-gradient(180deg, rgba(153, 187, 211, 0.98), rgba(120, 158, 188, 0.98));
    color: #fff;
}

.video-call-edit-formats {
    display: flex;
    gap: 8px;
    margin: 4px 0 8px;
}

.video-call-edit-formats .edit-format-chip,
.video-call-edit-format-fallback {
    flex: 1 1 0;
    min-height: 34px;
    border: 1px solid rgba(122, 154, 179, 0.3);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.76);
    color: #597086;
    font-size: 12px;
    font-weight: 600;
}

.video-call-edit-formats .edit-format-chip.is-active,
.video-call-edit-format-fallback.is-active {
    border-color: rgba(102, 143, 174, 0.72);
    background: rgba(154, 190, 215, 0.35);
    color: #3e617d;
}

.video-call-edit-hint {
    min-height: 19px;
}

.video-call-message-edit-input {
    display: block;
    width: 100%;
    min-height: 112px;
    max-height: 210px;
    margin-top: 10px;
    padding: 11px 12px;
    resize: vertical;
    border: 1px solid rgba(122, 154, 179, 0.34);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    color: #41566a;
    font: inherit;
    font-size: 13px;
    line-height: 1.55;
    outline: none;
    box-sizing: border-box;
}

.video-call-message-edit-input:focus {
    border-color: rgba(102, 143, 174, 0.78);
    box-shadow: 0 0 0 3px rgba(102, 143, 174, 0.14);
}

/* User 气泡：低饱和蓝 */
.vc-chat-row--user .vc-chat-bubble {
    background: linear-gradient(180deg, rgba(168, 195, 216, 0.92), rgba(143, 173, 198, 0.92));
    border-color: rgba(255, 255, 255, 0.4);
    color: #f4f8fb;
    border-bottom-right-radius: 6px;
}

/* Char 气泡：雾白玻璃 */
.vc-chat-row--friend .vc-chat-bubble {
    border-bottom-left-radius: 6px;
}

.vc-chat-row--system .vc-chat-bubble {
    max-width: 92%;
    padding: 3px 12px;
    font-size: 11px;
    color: rgba(91, 113, 134, 0.75);
    background: rgba(238, 243, 247, 0.6);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
    text-align: center;
}

.vc-chat-typing .vc-chat-bubble {
    color: rgba(91, 113, 134, 0.65);
    font-style: normal;
    animation: video-call-live-breath 1.6s ease-in-out infinite;
}

.vc-chat-bubble img {
    max-width: 150px;
    max-height: 150px;
    border-radius: 10px;
    display: block;
}


/* ---- 三段式消息：旁白「」/ 台词“”/ 翻译（） ---- */

.vc-chat-row--hint {
    justify-content: center;
    font-size: 11px;
    color: rgba(91, 113, 134, 0.6);
    padding: 6px 0;
}

.vc-chat-bubble .vc-seg {
    display: block;
}

.vc-seg--narration {
    font-size: 11.5px;
    line-height: 1.55;
    color: rgba(91, 113, 134, 0.78);
    font-style: italic;
    margin-bottom: 2px;
}

.vc-seg--dialogue {
    font-size: 13px;
    line-height: 1.55;
    color: #3c5165;
}

.vc-chat-row--user .vc-chat-bubble .vc-seg--dialogue {
    color: #f4f8fb;
}

.vc-seg--translation {
    font-size: 11px;
    line-height: 1.5;
    color: rgba(91, 113, 134, 0.62);
    margin-top: 1px;
}

.vc-seg--plain {
    font-size: 13px;
    line-height: 1.55;
}

/* Char 语音条：Minimax 配音回放按钮 */
.vc-chat-audio-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid rgba(143, 188, 171, 0.5);
    background: rgba(189, 216, 205, 0.5);
    color: #3f6052;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.16s ease;
}

.vc-chat-audio-btn:active {
    transform: scale(0.95);
}

/* ---- 心跳监控（通话内面板） ---- */

.video-call-icon-btn.has-new {
    color: #c96a6a;
    animation: video-call-live-breath 1.4s ease-in-out infinite;
}

.video-call-heartbeat-panel {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 56px;
    /* 高度随内容收缩：勿用 bottom 撑满，也勿让子项 flex-grow 把面板顶到 max-height
       （Safari / 国产 WebView 在「max-height + flex 子项 grow」组合下会错误地按上限撑开，
       短内容时底部就出现大块空白）。 */
    bottom: auto;
    height: auto;
    height: -webkit-fit-content;
    height: fit-content;
    max-height: calc(100% - 56px - 86px - var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    z-index: 6;
    display: none;
    flex-direction: column;
    align-items: stretch;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(246, 250, 252, 0.92);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 44px rgba(74, 98, 122, 0.22);
    overflow: hidden;
}

.video-call-heartbeat-panel.show {
    display: flex;
}

.video-call-heartbeat-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.45);
}

.video-call-heartbeat-title {
    font-size: 12px;
    font-weight: 600;
    color: #41566a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-call-heartbeat-close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(143, 173, 198, 0.4);
    background: rgba(255, 255, 255, 0.7);
    color: #5b7186;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.video-call-heartbeat-body {
    /* flex-grow 必须为 0：短内容时贴合报告高度；触顶 max-height 后靠 flex-shrink 收缩并滚动 */
    flex: 0 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 12px 14px 14px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #41566a;
}

/* 报告本身也不要被拉高；最后一节卡片下方不再留多余空白 */
.video-call-heartbeat-body > .hb-report {
    flex: 0 0 auto;
    height: auto;
}

.video-call-heartbeat-body > .hb-report > .hb-section:last-child {
    margin-bottom: 0;
}

.video-call-heartbeat-body img {
    max-width: 100%;
}

.video-call-heartbeat-empty {
    padding: 26px 8px;
    text-align: center;
    font-size: 12px;
    color: rgba(91, 113, 134, 0.6);
}

/* ---- 主动消息设置面板：冷场超过 N 分钟时 Char 主动挑起话题 ----
   与心跳监控面板同一套 Frutiger Aero 清冷玻璃质感，风格与视频通话页一致 */

.video-call-icon-btn.is-on {
    color: #2f8bb8;
    border-color: rgba(125, 196, 232, 0.75);
    background: linear-gradient(180deg, rgba(224, 244, 255, 0.92), rgba(191, 228, 249, 0.6));
    box-shadow: 0 4px 14px rgba(47, 139, 184, 0.28);
}

.video-call-proactive-panel {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 56px;
    z-index: 6;
    display: none;
    flex-direction: column;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(246, 250, 252, 0.92);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 44px rgba(74, 98, 122, 0.22);
    overflow: hidden;
}

.video-call-proactive-panel.show {
    display: flex;
}

.video-call-proactive-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.45);
}

.video-call-proactive-title {
    font-size: 12px;
    font-weight: 600;
    color: #41566a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-call-proactive-close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(143, 173, 198, 0.4);
    background: rgba(255, 255, 255, 0.7);
    color: #5b7186;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.video-call-proactive-close:active {
    background: rgba(255, 255, 255, 0.92);
    transform: scale(0.94);
}

.video-call-proactive-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px 14px;
}

.video-call-proactive-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.video-call-proactive-row-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 150px;
}

.video-call-proactive-row-label {
    font-size: 13px;
    font-weight: 600;
    color: #41566a;
}

.video-call-proactive-row-desc {
    font-size: 11px;
    line-height: 1.5;
    color: rgba(91, 113, 134, 0.75);
}

/* 自绘开关（不用原生 checkbox：各安卓浏览器原生样式差异过大） */
.video-call-proactive-switch {
    flex: 0 0 auto;
    position: relative;
    width: 48px;
    height: 27px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(143, 173, 198, 0.5);
    background: rgba(210, 226, 238, 0.85);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.video-call-proactive-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(74, 98, 122, 0.3);
    transition: transform 0.2s ease;
}

.video-call-proactive-switch.is-on {
    background: linear-gradient(180deg, #8fd0f0 0%, #57a9d8 100%);
    border-color: rgba(87, 169, 216, 0.85);
}

.video-call-proactive-switch.is-on .video-call-proactive-switch-knob {
    transform: translateX(21px);
}

.video-call-proactive-stepper {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.video-call-proactive-step-btn {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    border: 1px solid rgba(143, 173, 198, 0.45);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.6));
    color: #41566a;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.video-call-proactive-step-btn:active {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(0.94);
}

/* 16px 起步：避免 iOS Safari 聚焦数字输入框时整页自动放大 */
.video-call-proactive-minutes {
    width: 56px;
    height: 32px;
    border-radius: 12px;
    border: 1px solid rgba(143, 173, 198, 0.45);
    background: rgba(255, 255, 255, 0.85);
    color: #33475a;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: textfield;
}

.video-call-proactive-minutes::-webkit-outer-spin-button,
.video-call-proactive-minutes::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.video-call-proactive-minutes:focus {
    border-color: rgba(87, 169, 216, 0.85);
    background: #fff;
}

.video-call-proactive-unit {
    font-size: 12px;
    color: rgba(91, 113, 134, 0.85);
}

.video-call-proactive-hint {
    font-size: 11px;
    line-height: 1.6;
    color: rgba(91, 113, 134, 0.7);
    border-top: 1px dashed rgba(143, 173, 198, 0.4);
    padding-top: 10px;
}

/* ---- 呼叫中过渡屏：邀请阶段只显示此屏，模型 accept 后才进通话面板 ---- */

.video-call-invite-screen {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 24px) 24px calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 40px);
    text-align: center;
}

.video-call-layer.is-inviting .video-call-invite-screen {
    display: flex;
}

.video-call-layer.is-inviting .video-call-panel {
    display: none;
}

.video-call-invite-avatar-wrap {
    position: relative;
    width: 104px;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-call-invite-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(143, 173, 198, 0.55);
    animation: video-call-invite-ring 2.2s ease-out infinite;
    pointer-events: none;
}

.video-call-invite-ring--delay {
    animation-delay: 1.1s;
}

@keyframes video-call-invite-ring {
    0% { transform: scale(1); opacity: 0.85; }
    100% { transform: scale(1.65); opacity: 0; }
}

.video-call-invite-avatar,
.video-call-invite-avatar-placeholder {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 12px 30px rgba(74, 98, 122, 0.28);
    object-fit: cover;
    background: rgba(255, 255, 255, 0.6);
}

.video-call-invite-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 600;
    color: #5b7186;
}

.video-call-invite-name {
    margin-top: 4px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #3c5165;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.video-call-invite-status {
    font-size: 13px;
    color: rgba(91, 113, 134, 0.85);
    animation: video-call-live-breath 1.8s ease-in-out infinite;
}

.video-call-invite-cancel {
    margin-top: 34px;
}

/* ---- 输入栏：输入框 + 接收 + 发送 ---- */

.video-call-inputbar {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 10px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(244, 248, 250, 0.5);
}

.video-call-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 38px;
    max-height: 96px;
    padding: 9px 13px;
    resize: none;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.5;
    color: #41566a;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.video-call-input::placeholder {
    color: rgba(91, 113, 134, 0.5);
}

.video-call-input:focus {
    border-color: rgba(143, 173, 198, 0.85);
    box-shadow: 0 0 0 4px rgba(143, 173, 198, 0.16);
}

.video-call-receive-btn,
.video-call-send-btn {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

/* 接收：低饱和青绿点缀 */
.video-call-receive-btn {
    background: linear-gradient(180deg, rgba(189, 216, 205, 0.94), rgba(157, 192, 178, 0.94));
    color: #3f6052;
    box-shadow: 0 4px 12px rgba(143, 188, 171, 0.28);
}

.video-call-receive-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* 发送：低饱和蓝 */
.video-call-send-btn {
    background: linear-gradient(180deg, rgba(168, 195, 216, 0.96), rgba(134, 166, 192, 0.96));
    color: #f4f8fb;
    box-shadow: 0 4px 12px rgba(110, 142, 168, 0.32);
}

.video-call-receive-btn:active,
.video-call-send-btn:active {
    transform: scale(0.95);
}

/* ---- 底栏：挂断 ---- */

.video-call-bottombar {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}

.video-call-hangup-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 44px;
    padding: 0 26px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: linear-gradient(180deg, rgba(216, 167, 167, 0.95), rgba(196, 134, 134, 0.95));
    color: #fdf6f6;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(178, 120, 120, 0.34);
    transition: transform 0.16s ease;
    -webkit-tap-highlight-color: transparent;
}

.video-call-hangup-btn svg {
    width: 20px;
    height: 20px;
}

.video-call-hangup-btn:active {
    transform: scale(0.95);
}

/* ---- 缩小后的悬浮小窗：仅 User 视频框（轻点展开 / 长按拖动） ---- */

.video-call-mini {
    position: absolute;
    /* APK 场景 env() 可能测不到，safe-area-compat.css 注入的 var(--safe-area-inset-*)
       双声明兜底；不支持 CSS 变量的老内核自动落在第一行 env() 上，行为不变。 */
    top: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 76px);
    top: calc(var(--safe-area-inset-top, 0px) + 76px);
    right: calc(var(--safe-area-inset-right, env(safe-area-inset-right, 0px)) + 14px);
    right: calc(var(--safe-area-inset-right, 0px) + 14px);
    width: 112px;
    aspect-ratio: 3 / 4;
    display: none;
    pointer-events: auto;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: linear-gradient(180deg, rgba(214, 224, 233, 0.96), rgba(176, 192, 206, 0.96));
    box-shadow: 0 12px 28px rgba(57, 78, 99, 0.30);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.video-call-mini.show {
    display: block;
}

.video-call-mini.is-dragging {
    box-shadow: 0 18px 38px rgba(57, 78, 99, 0.42);
}

.video-call-mini-video,
.video-call-mini-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-call-mini-image {
    object-fit: cover;
}

.video-call-mini-video.is-mirrored {
    transform: scaleX(-1);
}

.video-call-mini-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #5d7388;
}

.video-call-mini-meta {
    position: absolute;
    left: 6px;
    bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(40, 54, 66, 0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
}

.video-call-mini-timer {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    color: rgba(244, 248, 251, 0.95);
}

/* ---- 小屏/矮屏适配 ---- */

@media (max-height: 700px) {
    .video-call-frame {
        aspect-ratio: 4 / 4.4;
        min-height: 124px;
    }

    .video-call-panel {
        gap: 8px;
    }
}

/* aspect-ratio 兜底：极老内核（部分搜狗/旧版 Via）不支持时给固定高度 */
@supports not (aspect-ratio: 3 / 4) {
    .video-call-frame {
        height: 200px;
    }

    .video-call-mini {
        height: 150px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-call-layer,
    .video-call-icon-btn,
    .video-call-flip-btn,
    .video-call-receive-btn,
    .video-call-send-btn,
    .video-call-hangup-btn {
        transition: none !important;
    }

    .video-call-live-dot,
    .vc-chat-typing .vc-chat-bubble {
        animation: none !important;
    }
}