/* ============================================================
 * 🔥 豆包风格视频通话导览页面
 * 设计参考：豆包（Doubao）视频通话界面
 * 配色：深色背景（用户视角）+ 白色语音输入胶囊 + 大圆形控制按钮
 * 布局：全屏沉浸式
 *   - 顶部：状态栏 + 工具栏（左：菜单 / 右：闪光灯、翻转、翻译）
 *   - 中部：远端画面背景 + 本地摄像头小窗（右下）
 *   - 中下：白色语音输入条（请说话 / AI回复 / 打字三点）
 *   - 底部：提示文字 + 4个圆形控制按钮（麦克风/上箭头/视频/抹断X）
 *   - 最底：「内容由 AI 生成」免责说明
 * ============================================================ */

.video-call-page {
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    overflow: hidden;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
                 "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
}

/* ===== 状态栏（深色模式适配） ===== */
.video-call-page .status-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    width: 100%;
    background: transparent;
    color: #ffffff;
    padding: 0 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
}
.video-call-page .status-bar .time {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.video-call-page .status-bar .icons {
    display: flex;
    gap: 6px;
    align-items: center;
    color: #fff;
    font-size: 12px;
}

/* ===== 顶部工具栏：左 ellipsis / 右 闪光灯 + 翻转 + 翻译 ===== */
.video-call-page .vc-top-bar {
    position: absolute;
    top: 36px;
    left: 0;
    right: 0;
    z-index: 150;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 100%);
}
.video-call-page .vc-top-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ===== Qwen 连接状态徽章（实时显示 AI 连接状态） ===== */
.video-call-page .vc-qwen-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    margin-right: 4px;
    border-radius: 11px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2);
    white-space: nowrap;
    transition: all 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
/* 状态点（圆点指示） */
.video-call-page .vc-qwen-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #888;
    box-shadow: 0 0 0 0 rgba(255,255,255,0.5);
    flex-shrink: 0;
}
/* 各状态颜色 */
.video-call-page .vc-qwen-badge.is-connecting {
    background: rgba(234, 179, 8, 0.25);
    border-color: rgba(234, 179, 8, 0.55);
}
.video-call-page .vc-qwen-badge.is-connecting::before {
    background: #eab308;
    animation: vc-badge-pulse 1.2s ease-in-out infinite;
}
.video-call-page .vc-qwen-badge.is-connected {
    background: rgba(34, 197, 94, 0.22);
    border-color: rgba(34, 197, 94, 0.55);
}
.video-call-page .vc-qwen-badge.is-connected::before {
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
}
.video-call-page .vc-qwen-badge.is-speaking {
    background: rgba(59, 130, 246, 0.28);
    border-color: rgba(59, 130, 246, 0.6);
}
.video-call-page .vc-qwen-badge.is-speaking::before {
    background: #3b82f6;
    animation: vc-badge-pulse 0.8s ease-in-out infinite;
}
.video-call-page .vc-qwen-badge.is-disconnected {
    background: rgba(120, 120, 120, 0.25);
    border-color: rgba(255,255,255,0.18);
}
.video-call-page .vc-qwen-badge.is-error {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.6);
}
.video-call-page .vc-qwen-badge.is-error::before {
    background: #ef4444;
}
@keyframes vc-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); opacity: 1; }
    50% { box-shadow: 0 0 0 4px rgba(255,255,255,0); opacity: 0.5; }
}
.video-call-page .vc-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.video-call-page .vc-icon-btn:active {
    background: rgba(255,255,255,0.12);
    transform: scale(0.92);
}
.video-call-page .vc-icon-btn i {
    font-size: 16px;
    color: #fff;
}
/* 🔥 闪光灯按钮：关闭状态显示斜杠，开启状态黄色高亮 */
.video-call-page .vc-flash-btn {
    position: relative;
}
.video-call-page .vc-flash-btn .vc-flash-slash {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background: rgba(239, 68, 68, 0.9);
    border-radius: 1px;
    transform: translate(-50%, -50%) rotate(-45deg);
    pointer-events: none;
    transition: opacity 0.2s ease;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
}
.video-call-page .vc-flash-btn.is-on .vc-flash-slash {
    opacity: 0;  /* 开启时隐藏斜杠 */
}
.video-call-page .vc-flash-btn.is-on i {
    color: #fbbf24 !important;  /* 开启时黄色 */
}
.video-call-page .vc-flash-btn.is-on {
    background: rgba(251, 191, 36, 0.2);
}
.video-call-page .vc-top-right {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* 🔥 豆包特色：翻译按钮 = 「字」字符（带边框的方框） */
.video-call-page .vc-trans-btn {
    background: rgba(255,255,255,0.14);
    border: 1.5px solid rgba(255,255,255,0.28);
    border-radius: 6px;
    width: 32px;
    height: 32px;
}
.video-call-page .vc-trans-btn .vc-trans-char {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
}
.video-call-page .vc-trans-btn:active {
    background: rgba(255,255,255,0.28);
}
.video-call-page .vc-trans-btn.active {
    background: rgba(196, 30, 58, 0.6);
    border-color: rgba(196, 30, 58, 0.8);
}

/* ===== 远端视频主画面（背景） ===== */
.video-call-page .vc-remote-video-wrap {
    position: absolute;
    inset: 0;
    background: #1a1a1a;
    z-index: 1;
    overflow: hidden;
}
.video-call-page .vc-remote-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #111;
}
/* 占位画面（未接通时） */
.video-call-page .vc-remote-placeholder {
    position: absolute;
    /* 🔥 修复：只占顶部区域，不再覆盖整个屏幕 */
    top: 90px;
    left: 0;
    right: 0;
    bottom: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: transparent;
    gap: 8px;
    z-index: 1;
    pointer-events: none;
}
/* 🔥 修复：去掉中间的红色"杨"讲解员头像样式（用户要求） */
.video-call-page .vc-avatar-remote {
    display: none !important;
}
@keyframes vc-avatar-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.video-call-page .vc-remote-name {
    display: none !important;  /* 🔥 修复：去掉讲解员姓名（用户要求） */
}
.video-call-page .vc-remote-role {
    display: none !important;  /* 🔥 修复：去掉讲解员角色文字（用户要求） */
}
.video-call-page .vc-connecting-text {
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.video-call-page .vc-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.15);
    border-top-color: #C41E3A;
    border-radius: 50%;
    animation: vc-spin 0.9s linear infinite;
}
@keyframes vc-spin {
    to { transform: rotate(360deg); }
}

/* ===== 本地视频小窗（右上） — 豆包风格 ===== */
.video-call-page .vc-local-video-wrap {
    position: absolute;
    top: 92px;
    right: 16px;
    width: 96px;
    height: 132px;
    border-radius: 10px;
    overflow: hidden;
    z-index: 50;
    background: #000;
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
    border: 1.5px solid rgba(255,255,255,0.12);
    transition: transform 0.18s;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}
/* 🔥 全屏模式：本地摄像头视频填充主区域，避免主区域黑屏 */
.video-call-page .vc-local-video-wrap.vc-local-fullscreen {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    z-index: 2 !important;
    border: none !important;
    box-shadow: none !important;
    cursor: default !important;
    /* 🔥 2026-08-04 修复：本地视频全屏模式下不阻挡 click 事件
       视频元素本身保留 pointer-events:auto 显示，但 wrap 不阻挡
       这样用户的点击会"穿透"到下层的 .vc-remote-video-wrap */
    pointer-events: none;
}
/* 🔥 修复：视频画面本身仍可正常显示 */
.video-call-page .vc-local-video-wrap.vc-local-fullscreen .vc-local-video {
    pointer-events: none;
}
.video-call-page .vc-local-video-wrap:active {
    transform: scale(0.95);
}
.video-call-page .vc-local-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #1a1a1a;
    transform: scaleX(-1); /* 镜像前置摄像头 */
}
.video-call-page .vc-local-muted {
    position: absolute;
    inset: 0;
    background: #1f1f1f;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    flex-direction: column;
    gap: 4px;
    z-index: 3;        /* 视频之上 */
}
.video-call-page .vc-local-muted i {
    font-size: 24px;
    color: #aaa;
}

/* 🔥 摄像头不可用时的占位 — 默认隐藏（用户要求去掉中间红色"杨"圆） */
.video-call-page .vc-local-placeholder {
    display: none !important;
}
.video-call-page .vc-local-placeholder.is-hidden {
    display: none !important;
}
.video-call-page .vc-local-placeholder-hint {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 20px;
    color: rgba(255,255,255,0.6);
    font-size: 11px;
    letter-spacing: 0.3px;
}
.video-call-page .vc-local-placeholder-hint i {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}

/* ===== 豆包风格核心：AI 语音输入胶囊 ===== */
.video-call-page .vc-voice-input {
    position: absolute;
    top: 100px;
    left: 16px;
    right: 16px;     /* 🔥 全屏模式：本地小窗口已隐藏，语音框可占满宽度 */
    z-index: 100;
    min-height: 48px;
    max-height: 110px;     /* 🔥 关键：AI 回复时可撑高到 3 行 */
    padding: 12px 18px;
    /* 🔥 浅白色 + 70% 透明度：背景能明显透出，更有磨砂玻璃质感 */
    background: rgba(255, 255, 255, 0.70);
    border-radius: 24px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    display: flex;
    align-items: flex-start;     /* 🔥 关键：AI 回复时文本顶部对齐 */
    gap: 10px;
    color: #1a1a1a;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s, box-shadow 0.18s, max-height 0.25s ease;
    animation: vc-voice-float 4s ease-in-out infinite;
    overflow: hidden;
    /* 🔥 强背景模糊 + 饱和度提升，让穿透效果更明显 */
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    /* 🔥 细边框让浅色区域边界更清晰 */
    border: 1px solid rgba(255, 255, 255, 0.35);
}
/* 🔥 2026-08-03 新增：vcVoiceResponse 展开时，父级 vcVoiceInput 同步解除高度限制（关键！之前父级 max-height:110px 会截断完整文字） */
.video-call-page .vc-voice-input.is-response-expanded {
    max-height: 80vh;           /* 允许展开到屏幕的 80% 高度 */
    overflow: auto;             /* 如果超过屏幕高度，允许胶囊本身滚动看完整 */
    animation: none;            /* 展开时停止浮动动画，避免文字抖动 */
}
@keyframes vc-voice-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
.video-call-page .vc-voice-input:active {
    transform: scale(0.98);
    box-shadow: 0 4px 12px rgba(0,0,0,0.22);
}
.video-call-page .vc-voice-icon {
    font-size: 18px;
    color: #C41E3A;
    flex-shrink: 0;
    margin-top: 1px;
    transition: color 0.2s;
}
.video-call-page .vc-voice-input.is-listening .vc-voice-icon {
    color: #22c55e;
    animation: vc-voice-pulse 1.2s ease-in-out infinite;
}
@keyframes vc-voice-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}
.video-call-page .vc-voice-input.is-speaking .vc-voice-icon {
    color: #C41E3A;
}
.video-call-page .vc-voice-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.video-call-page .vc-voice-text {
    font-size: 14px;
    line-height: 1.55;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}
.video-call-page .vc-voice-placeholder {
    color: #999;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;       /* 与图标对齐 */
}
/* 🔥 关键：AI 回复文本样式 — 默认最多 3 行，AI说话期间自动展开完整 */
.video-call-page .vc-voice-response {
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;       /* 最多 3 行（idle状态下） */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 70px;            /* 约 3 行高度 */
    transition: max-height 0.3s ease, -webkit-line-clamp 0.3s ease;
    cursor: pointer;             /* 可点击：展开/收起完整文字 */
    -webkit-user-select: text;
    user-select: text;
    padding: 4px 0;
}
/* 🔥 v4.76 关键修复：AI说话期间自动展开完整文字，避免用户看到被截断的内容 */
.video-call-page .vc-voice-input.is-speaking .vc-voice-response,
.video-call-page .vc-voice-input.is-thinking .vc-voice-response {
    -webkit-line-clamp: unset;  /* 取消行数限制 */
    max-height: 80vh;           /* 最多屏幕80%高度 */
    overflow-y: auto;           /* 超长时允许内部滚动 */
}
/* 手动点击展开时的状态 */
.video-call-page .vc-voice-response.is-expanded {
    -webkit-line-clamp: unset !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
}
/* 🔥 新增：当文字可展开时（超过3行），末尾加提示，但不强制显示，由 JS 控制加 class 后改为完整 */
.video-call-page .vc-voice-input {
    transition: background 0.2s ease;
}
/* 打字中三点动画 */
.video-call-page .vc-voice-typing {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 0;
    line-height: 22px;
}
.video-call-page .vc-voice-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #C41E3A;
    animation: vc-voice-typing 1.2s ease-in-out infinite;
}
.video-call-page .vc-voice-typing span:nth-child(2) { animation-delay: 0.2s; }
.video-call-page .vc-voice-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes vc-voice-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* ===== 豆包风格：底部提示文字 + AI 生成小圆点 ===== */
.video-call-page .vc-hint {
    position: absolute;
    bottom: 168px;       /* 控制栏上方 */
    left: 0;
    right: 0;
    z-index: 100;
    text-align: center;
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* 🔥 2026-08-03 修复：之前 pointer-events:none 导致点击"说话与中断"5个字没反应 */
    pointer-events: auto;
    cursor: pointer;      /* 提示文字可点击 */
    user-select: none;
    -webkit-user-select: none;
    letter-spacing: 0.2px;
    padding: 10px 20px;   /* 扩大点击热区，避免用户点不准 */
}
.video-call-page .vc-hint.is-ai-speaking {
    color: rgba(255,255,255,0.95);
    /* 🔥 AI说话中（"说话与中断"）加粗+改色，明显地提示可以点击中断 */
    font-weight: 600;
}
/* 🔥 v4.57 新增：AI 深度思考过程实时显示区 */
.video-call-page .vc-thinking-panel {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(99, 102, 241, 0.12));
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 10px;
    padding: 8px 12px;
    margin: 4px 8px 6px 8px;
    max-height: 180px;
    overflow-y: auto;
    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
    animation: vcThinkingFadeIn 0.3s ease-out;
}
@keyframes vcThinkingFadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
.video-call-page .vc-thinking-header {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #a78bfa;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    padding-bottom: 4px;
}
.video-call-page .vc-thinking-header i {
    color: #8b5cf6;
    animation: vcBrainPulse 1.5s ease-in-out infinite;
}
@keyframes vcBrainPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 1; }
}
.video-call-page .vc-thinking-timer {
    margin-left: auto;
    color: rgba(167, 139, 250, 0.7);
    font-weight: 400;
    font-family: monospace;
}
.video-call-page .vc-thinking-content {
    color: rgba(255,255,255,0.8);
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 130px;
    overflow-y: auto;
}
/* 滚动条样式 */
.video-call-page .vc-thinking-content::-webkit-scrollbar,
.video-call-page .vc-thinking-panel::-webkit-scrollbar {
    width: 4px;
}
.video-call-page .vc-thinking-content::-webkit-scrollbar-thumb,
.video-call-page .vc-thinking-panel::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.4);
    border-radius: 2px;
}

/* 🔥 2026-08-03 新增：is-expanded 优化 - 兼容老webkit不强制切display模式 */
.video-call-page .vc-voice-response.is-expanded {
    -webkit-line-clamp: 999;      /* 兼容老版webkit：行数设超大，等价于不限制 */
    max-height: none;             /* 解除高度限制，确保能完整显示 */
    overflow: visible;
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 6px 0;
}
.video-call-page .vc-ai-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}
.video-call-page .vc-ai-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    animation: vc-ai-dot 1.2s ease-in-out infinite;
}
.video-call-page .vc-ai-dots span:nth-child(2) { animation-delay: 0.15s; }
.video-call-page .vc-ai-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes vc-ai-dot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%           { transform: translateY(-3px); opacity: 1; }
}

/* ===== 豆包风格：底部控制栏（4个按钮：麦克风 / 上箭头 / 视频 / 抹断X） ===== */
.video-call-page .vc-controls-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 70px;        /* 留出底部 AI 免责说明 */
    z-index: 120;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
/* 通用圆形按钮（麦克风/视频） */
.video-call-page .vc-ctrl-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(255,255,255,0.14);
    /* 🔥 修复：去掉背景模糊滤镜，避免按钮背景呈现模糊感 */
    /* backdrop-filter: blur(10px); */
    /* -webkit-backdrop-filter: blur(10px); */
    color: #fff;
    -webkit-tap-highlight-color: transparent;
}
.video-call-page .vc-ctrl-btn:active {
    transform: scale(0.92);
    background: rgba(255,255,255,0.22);
}
.video-call-page .vc-ctrl-btn i {
    font-size: 22px;
    color: #fff;
}
.video-call-page .vc-ctrl-btn.off {
    background: #2a2a2a;
    color: #888;
}
.video-call-page .vc-ctrl-btn.off i {
    color: #888;
}
.video-call-page .vc-ctrl-btn.active {
    background: rgba(196, 30, 58, 0.6);
    color: #fff;
}

/* 🔥 豆包特色：上箭头 = 方形带边框（不是圆形） */
.video-call-page .vc-square-btn {
    width: 56px;
    height: 56px;
    border-radius: 12px;        /* 圆角方形 */
    background: rgba(255,255,255,0.14);
    border: 1.5px solid rgba(255,255,255,0.18);
}
.video-call-page .vc-square-btn i {
    font-size: 20px;
    color: #fff;
}
.video-call-page .vc-square-btn:active {
    background: rgba(255,255,255,0.22);
    transform: scale(0.92);
}

/* 中央视频按钮（白色大圆） — 豆包风格：比两侧大一些 */
.video-call-page .vc-video-main-btn {
    width: 72px;
    height: 72px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    color: #1a1a1a;
}
.video-call-page .vc-video-main-btn i {
    color: #1a1a1a;
    font-size: 28px;
}
.video-call-page .vc-video-main-btn:active {
    background: #f0f0f0;
}
.video-call-page .vc-video-main-btn.off {
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.6);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.video-call-page .vc-video-main-btn.off i {
    color: rgba(255,255,255,0.8);
}

/* 🔥 豆包特色：抹断 X = 纯红色 X 字符，**无圆环**，加大尺寸更醒目 */
.video-call-page .vc-hangup-x {
    width: 64px;
    height: 64px;
    border: none;
    background: transparent;        /* 透明背景 */
    color: #ef4444;                 /* 纯红色 X */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.12s, opacity 0.18s;
    -webkit-tap-highlight-color: transparent;
}
.video-call-page .vc-hangup-x i {
    font-size: 44px;                /* 🔥 加大 X 图标尺寸 */
    color: #ef4444;
    font-weight: 900;               /* 极粗 X */
    line-height: 1;
}
.video-call-page .vc-hangup-x:active {
    transform: scale(0.85);
    opacity: 0.7;
}

/* ===== 豆包风格：底部「内容由 AI 生成」免责说明 ===== */
.video-call-page .vc-disclaimer {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    z-index: 100;
    text-align: center;
    color: rgba(255,255,255,0.45);
    font-size: 11px;
    font-weight: 400;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* 🔥 v4.56 新增：历史内容温馨提示（紧贴"内容由AI生成"下方） */
.video-call-page .vc-history-tip {
    position: absolute;
    bottom: 4px;          /* 紧贴"内容由AI生成"下方 */
    left: 0;
    right: 0;
    z-index: 100;
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 10px;
    font-weight: 400;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ===== 通话结束遮罩（兜底） ===== */
.video-call-page .vc-overlay {
    position: absolute;
    inset: 0;
    z-index: 300;
    background: rgba(0,0,0,0.86);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    gap: 18px;
    animation: vc-fade 0.3s ease;
}
.video-call-page .vc-overlay.active {
    display: flex;
}
@keyframes vc-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.video-call-page .vc-overlay i {
    font-size: 56px;
    color: #ef4444;
}
.video-call-page .vc-overlay-title {
    font-size: 20px;
    font-weight: 700;
}
.video-call-page .vc-overlay-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    max-width: 260px;
    text-align: center;
    line-height: 1.6;
}

/* ============================================================
 * 🔥 全局悬浮小窗（微信视频通话悬浮窗 行业标准设计）
 *  参考：
 *  - 尺寸：约 100 × 140px（9:16 竖屏小窗，适配手机竖屏视频）
 *  - 位置：默认右上角，可拖动（限制在手机容器内）
 *  - 贴边：松手自动吸附到屏幕左右最近边缘（类似微信）
 *  - 样式：深灰圆角 + 通话时长 + 绿色呼吸灯 + 右上角"放大"图标
 *  - 交互：点击恢复全屏；拖动可移动；长按不触发点击
 *  - 容器：使用 position:fixed 挂到 document.body，但通过 JS 实时计算
 *         .app-container 的位置和尺寸，让小窗视觉上"卡"在手机壳内部
 *         （避免被 main.js#renderApp 的 innerHTML 销毁）
 * ============================================================ */
#vcPipWindow {
    /* ✅ 关键修复：fixed 挂到 body，躲过 renderApp() 的 innerHTML 销毁
       视觉边界通过 JS _syncPipToPhone() 实时同步到 .app-container */
    position: fixed;
    top: 90px;
    right: 12px;
    width: 100px;
    height: 140px;
    z-index: 99999;
    border-radius: 16px;
    overflow: hidden;
    background: #0c0c14;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65),
                0 0 0 1px rgba(255,255,255,0.08);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    display: none;
    /* ✅ 关键修复：去掉所有入场动画和过渡 - 用户要求"直接显示" */
    transition: none;
    will-change: top, left, right;
}
#vcPipWindow.vc-pip-active {
    display: block;
    /* ✅ 关键修复：去掉任何动画，直接显示 */
    animation: none !important;
}
/* ✅ 关键修复：删除原有的弹跳入场动画 */
#vcPipWindow:active {
    cursor: grabbing;
}
#vcPipWindow.vc-pip-dragging {
    transition: none;
    /* ✅ 关键修复：拖动时也不要缩放，避免视觉跳动 */
    transform: none;
}

/* 小窗画面：远端视频（讲解员画面） */
#vcPipWindow .vc-pip-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

/* 小窗无画面占位 */
#vcPipWindow .vc-pip-placeholder {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, #1f2937 0%, #0c0c14 80%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    color: rgba(255,255,255,0.75);
}
#vcPipWindow .vc-pip-placeholder .vc-pip-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #C41E3A 0%, #E8384F 100%);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(196,30,58,0.4);
}
#vcPipWindow .vc-pip-placeholder .vc-pip-name {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.3px;
}

/* 小窗顶部状态条（黑渐变 + 通话时长） */
#vcPipWindow .vc-pip-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 6px 8px 10px;
    background: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}
#vcPipWindow .vc-pip-status {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
#vcPipWindow .vc-pip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.75);
    animation: vc-pip-dot-blink 1.4s infinite;
}
#vcPipWindow.vc-pip-connecting .vc-pip-dot {
    background: #fbbf24;
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.75);
    animation: vc-pip-dot-blink-amber 1s infinite;
}
@keyframes vc-pip-dot-blink {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.75); }
    70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@keyframes vc-pip-dot-blink-amber {
    0%   { box-shadow: 0 0 0 0 rgba(251,191,36,0.75); }
    70%  { box-shadow: 0 0 0 6px rgba(251,191,36,0); }
    100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); }
}

/* 右上角恢复全屏的图标 */
#vcPipWindow .vc-pip-expand {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    pointer-events: none;
}
#vcPipWindow .vc-pip-expand i { transform: scale(0.95); }

/* 小窗底部静音状态提示 */
#vcPipWindow .vc-pip-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 18px 8px 7px;
    background: linear-gradient(0deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    color: rgba(255,255,255,0.85);
    font-size: 9.5px;
    letter-spacing: 0.2px;
}
#vcPipWindow .vc-pip-mic {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
#vcPipWindow.vc-pip-muted .vc-pip-mic {
    color: #ef4444;
}
#vcPipWindow .vc-pip-cam-off {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #facc15;
}

/* ============================================================ */
/* 🔥 红色文化场景热点系统 - 顶部场景选择器 */
/* ============================================================ */
.video-call-page .vc-scene-selector {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    z-index: 15;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    /* 不阻挡视频点击 */
    pointer-events: none;
}
.video-call-page .vc-scene-selector::-webkit-scrollbar { display: none; }
.video-call-page .vc-scene-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: rgba(20, 20, 22, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.video-call-page .vc-scene-chip.is-active {
    background: linear-gradient(135deg, #C41E3A 0%, #E8384F 100%);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    box-shadow: 0 4px 12px rgba(196, 30, 58, 0.4);
}
.video-call-page .vc-scene-chip:active { transform: scale(0.96); }
.video-call-page .vc-scene-chip-icon { font-size: 14px; line-height: 1; }
.video-call-page .vc-scene-chip-text { font-weight: 600; }
.video-call-page .vc-scene-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
}
.video-call-page .vc-scene-chip.is-active .vc-scene-chip-count {
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================================ */
/* 🔥 热点层 - 视频画面上的可点击元素 */
.vc-hotspot-layer {
    position: absolute;
    inset: 0;
    z-index: 12;
    pointer-events: none;  /* 容器不阻挡视频 */
}
.video-call-page .vc-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;  /* 热点本身可点 */
    -webkit-tap-highlight-color: transparent;
    z-index: 12;
    transition: transform 0.2s ease;
}
.video-call-page .vc-hotspot:active { transform: translate(-50%, -50%) scale(1.1); }
.video-call-page .vc-hotspot.is-active .vc-hotspot-dot {
    background: linear-gradient(135deg, #C41E3A 0%, #E8384F 100%);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4), 0 6px 16px rgba(196, 30, 58, 0.6);
}
.video-call-page .vc-hotspot-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(196, 30, 58, 0.5);
    animation: vc-hotspot-pulse 2s ease-out infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes vc-hotspot-pulse {
    0%   { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}
.video-call-page .vc-hotspot-dot {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 22, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
}
.video-call-page .vc-hotspot-large .vc-hotspot-dot { width: 44px; height: 44px; font-size: 18px; }
.video-call-page .vc-hotspot-small .vc-hotspot-dot { width: 30px; height: 30px; font-size: 14px; }
.video-call-page .vc-hotspot-label {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
    pointer-events: none;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================ */
/* 🔥 元素介绍卡片 - 弹出式信息卡 */
.vc-intro-card {
    position: absolute;
    bottom: 170px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: calc(100% - 32px);
    max-width: 360px;
    z-index: 30;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
.vc-intro-card.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.vc-intro-card .vc-intro-content {
    position: relative;
    background: rgba(28, 28, 30, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 16px;
    color: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.vc-intro-card .vc-intro-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    -webkit-tap-highlight-color: transparent;
}
.vc-intro-card .vc-intro-close:active { background: rgba(255, 255, 255, 0.2); }
.vc-intro-card .vc-intro-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.vc-intro-card .vc-intro-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #C41E3A 0%, #E8384F 100%);
    border-radius: 12px;
    font-size: 22px;
    flex-shrink: 0;
}
.vc-intro-card .vc-intro-titles { flex: 1; min-width: 0; }
.vc-intro-card .vc-intro-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 2px;
}
.vc-intro-card .vc-intro-subtitle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.3;
}
.vc-intro-card .vc-intro-desc {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    border-left: 3px solid #C41E3A;
}
.vc-intro-card .vc-intro-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    margin-bottom: 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}
.vc-intro-card .vc-intro-keywords i { margin-right: 2px; }
.vc-intro-card .vc-intro-keyword {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(196, 30, 58, 0.18);
    border: 1px solid rgba(196, 30, 58, 0.4);
    border-radius: 8px;
    color: rgba(255, 220, 220, 0.9);
    font-size: 10px;
    font-weight: 500;
}
.vc-intro-card .vc-intro-actions {
    display: flex;
    gap: 8px;
}
.vc-intro-card .vc-intro-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border: none;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s ease;
}
.vc-intro-card .vc-intro-btn-primary {
    background: linear-gradient(135deg, #C41E3A 0%, #E8384F 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(196, 30, 58, 0.35);
}
.vc-intro-card .vc-intro-btn-primary:active {
    transform: scale(0.97);
    box-shadow: 0 2px 6px rgba(196, 30, 58, 0.3);
}
.vc-intro-card .vc-intro-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
}
.vc-intro-card.video-call-page .vc-intro-btn-secondary:active { background: rgba(255, 255, 255, 0.15); }

/* ============================================================ */
/* 🔥 位置徽章 - 顶部显示"📍 当前所在：xxx · 距你 xx 米" */
.vc-location-badge {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 16;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(20, 20, 22, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 500;
    pointer-events: none;
    max-width: calc(100% - 28px);
}

/* ============================================================ */
/* 🔥 v4.0 框选分析模式样式                                       */
/* ============================================================ */

/* 框选按钮：与"字"按钮同款风格 */
.video-call-page .vc-icon-btn.vc-box-select-btn i {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.92);
}
.video-call-page .vc-icon-btn.vc-box-select-btn:hover i {
    color: #fbbf24;
}
.video-call-page .vc-icon-btn.vc-box-select-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.18);
}
.video-call-page .vc-icon-btn.vc-box-select-btn.is-active {
    background: rgba(251, 191, 36, 0.25);
    border-color: #fbbf24;
}
.video-call-page .vc-icon-btn.vc-box-select-btn.is-active i {
    color: #fbbf24;
}

/* 框选遮罩层（覆盖整个视频通话页面） */
.vc-box-select-mask {
    position: absolute;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.35);
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    overflow: hidden;
}

/* 框选遮罩背景（深色半透明） */
.vc-box-select-bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 1;
}

/* 截图显示 */
.vc-box-select-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* 框选提示文字 */
.vc-box-select-hint {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 500;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.vc-box-select-hint i {
    color: #fbbf24;
    font-size: 14px;
}

/* 框选取消按钮（右上角） */
.vc-box-select-cancel {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.vc-box-select-cancel:hover {
    background: rgba(239, 68, 68, 0.7);
    transform: scale(1.1);
}
.vc-box-select-cancel i {
    font-size: 14px;
}

/* 框选矩形（拖动时显示） */
.vc-box-select-selection {
    position: absolute;
    z-index: 5;
    border: 2px solid #fbbf24;
    background: rgba(251, 191, 36, 0.08);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    display: none;
    pointer-events: none;
    transition: none;
}

.vc-location-badge i { color: #E8384F; font-size: 13px; }
.vc-location-badge .vc-location-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
.vc-location-badge.is-active {
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.85) 0%, rgba(232, 56, 79, 0.85) 100%);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}
.vc-location-badge.is-active i { color: #fff; }
.vc-location-badge.is-warn {
    background: rgba(245, 158, 11, 0.85);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}
.vc-location-badge.is-warn i { color: #fff; }

/* 等待定位占位 */
.vc-hotspot-waiting {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    pointer-events: none;
}
.vc-hotspot-waiting i {
    font-size: 32px;
    color: rgba(196, 30, 58, 0.7);
    margin-bottom: 8px;
    display: block;
    animation: vc-location-pulse 1.5s ease-in-out infinite;
}
@keyframes vc-location-pulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.1); }
}
.vc-hotspot-waiting-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
}

/* 主热点（识别到的核心元素）样式 */
.video-call-page .vc-hotspot.is-primary .vc-hotspot-dot {
    background: linear-gradient(135deg, #C41E3A 0%, #E8384F 100%);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.25), 0 6px 20px rgba(196, 30, 58, 0.5);
}
.video-call-page .vc-hotspot.is-primary .vc-hotspot-pulse {
    background: rgba(196, 30, 58, 0.6);
    animation-duration: 1.5s;
}
.video-call-page .vc-hotspot.is-primary .vc-hotspot-label {
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.9) 0%, rgba(232, 56, 79, 0.9) 100%);
    color: #fff;
    font-weight: 700;
    padding: 4px 10px;
}
.vc-hotspot-conf {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    font-size: 9px;
    font-weight: 700;
    vertical-align: middle;
}

/* 位置选择器 */
.vc-intro-card .vc-picker-content {
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}
.vc-intro-card .vc-picker-list {
    flex: 1;
    overflow-y: auto;
    max-height: 400px;
    -webkit-overflow-scrolling: touch;
}
.vc-intro-card .vc-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #fff;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s ease;
}
.vc-intro-card .vc-picker-item:first-child { margin-top: 12px; }
.vc-intro-card .vc-picker-item:active {
    background: rgba(196, 30, 58, 0.2);
    transform: scale(0.98);
}
.vc-intro-card .vc-picker-item.is-nearest {
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.2) 0%, rgba(232, 56, 79, 0.15) 100%);
    border-color: rgba(196, 30, 58, 0.5);
}
.vc-intro-card .vc-picker-item.is-nearest::after {
    content: '推荐';
    margin-left: auto;
    margin-right: 8px;
    padding: 2px 8px;
    background: linear-gradient(135deg, #C41E3A 0%, #E8384F 100%);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.vc-intro-card .vc-picker-icon {
    font-size: 24px;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(196, 30, 58, 0.15);
    border-radius: 10px;
}
.vc-intro-card .vc-picker-info {
    flex: 1;
    min-width: 0;
}
.vc-intro-card .vc-picker-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 2px;
    color: #fff;
}
.vc-intro-card .vc-picker-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.vc-intro-card .vc-picker-item .fa-chevron-right {
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    flex-shrink: 0;
}

/* ============================================================ */
/* 🔥 摄像头画面点击分析系统 - 模式遮罩 */
.vc-analysis-overlay {
    position: absolute;
    inset: 0;
    z-index: 25;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: crosshair;
    animation: vc-analysis-overlay-in 0.2s ease;
}
@keyframes vc-analysis-overlay-in {
    from { background: rgba(0, 0, 0, 0); }
    to   { background: rgba(0, 0, 0, 0.25); }
}

/* 顶部提示 */
.vc-analysis-hint {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    z-index: 27;
    padding: 8px 16px;
    background: rgba(196, 30, 58, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 22px;
    box-shadow: 0 4px 16px rgba(196, 30, 58, 0.4);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    max-width: calc(100% - 32px);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vc-analysis-hint.is-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 点击位置指示器 */
.vc-analysis-pin {
    position: absolute;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
    z-index: 28;
    pointer-events: none;
}
.vc-analysis-pin::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 3px solid #C41E3A;
    border-radius: 50%;
    animation: vc-analysis-pulse 1.2s ease-out infinite;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.vc-analysis-pin::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #fff;
    border: 2px solid #C41E3A;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 6px rgba(196, 30, 58, 0.5);
}
@keyframes vc-analysis-pulse {
    0%   { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* 截图框 */
.vc-analysis-region {
    position: absolute;
    z-index: 26;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 4px;
}
.vc-analysis-region-first {
    border: 2.5px solid #C41E3A;
    background: rgba(196, 30, 58, 0.18);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4),
                0 0 24px rgba(196, 30, 58, 0.5);
}
.vc-analysis-region-expanded {
    border: 2.5px dashed #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3),
                0 0 30px rgba(251, 191, 36, 0.4);
    animation: vc-expanded-appear 0.5s ease-out;
}
@keyframes vc-expanded-appear {
    0%   { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

/* 分析结果卡片预览图 */
.vc-analysis-preview {
    margin-bottom: 12px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.vc-analysis-preview img {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    background: #000;
}
.vc-analysis-preview-label {
    margin-top: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

/* ============================================================ */
/* 🔥 v4.50 修复：进入视频通话界面默认不开启框选，鼠标不要变成框选样子 */
/* 旧代码：.vc-remote-video-wrap { cursor: crosshair !important } → 一进页面鼠标就是十字框选样式 */
/* 新代码：默认 cursor: default（普通鼠标），只有用户主动点击"框选"按钮 */
/*        激活了 .vc-box-select-mask 遮罩时，遮罩自己的 cursor:crosshair 才生效 */
/* 视频区任何位置点击 = 立即触发 AI 识别 的功能保持不变，只是鼠标样式不再是十字 */
.video-call-page .vc-remote-video-wrap {
    cursor: default !important;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.video-call-page .vc-remote-video-wrap.is-analyzing {
    cursor: progress !important;
}

/* 常驻提示（顶部细条，不阻挡点击） */
.vc-click-hint {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    z-index: 8;  /* 不阻挡视频和按钮 */
    pointer-events: none;  /* 不响应点击 */
    animation: vc-click-hint-fade 4s ease-in-out 1s forwards;
    white-space: nowrap;
    max-width: 90%;
    text-align: center;
    line-height: 1.4;
}
.vc-click-hint.is-hidden {
    display: none;
}
@keyframes vc-click-hint-fade {
    0%, 80% { opacity: 1; }
    100%    { opacity: 0.45; }
}

/* 截图框（红色实线 → 黄色虚线） */
.vc-click-region {
    position: absolute;
    pointer-events: none;
    z-index: 9;
    transition: all 0.3s ease;
    display: none;
}
.vc-click-region.is-active {
    display: block;
    border: 2px solid #ef4444;
    background: rgba(239, 68, 68, 0.1);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.5),
                inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    animation: vc-region-pulse 1.5s ease-in-out infinite;
}
.vc-click-region.is-expanded {
    border: 2px dashed #fbbf24 !important;
    background: rgba(251, 191, 36, 0.08) !important;
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.5);
    animation: none;
}
.vc-click-region-label {
    position: absolute;
    bottom: -22px;
    left: 0;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 10px;
    border-radius: 4px;
    white-space: nowrap;
}
@keyframes vc-region-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(239, 68, 68, 0.5); }
    50%      { box-shadow: 0 0 24px rgba(239, 68, 68, 0.8); }
}

/* 点击位置脉冲圆点 */
.vc-click-pin {
    position: absolute;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border-radius: 50%;
    background: rgba(196, 30, 58, 0.85);
    border: 2px solid #fff;
    box-shadow: 0 0 0 0 rgba(196, 30, 58, 0.6),
                0 2px 8px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 10;
    animation: vc-pin-pulse 1.5s ease-out infinite;
}
.vc-click-pin::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    margin: -4px 0 0 -4px;
    background: #fff;
    border-radius: 50%;
}
@keyframes vc-pin-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(196, 30, 58, 0.6),
                         0 2px 8px rgba(0, 0, 0, 0.4); }
    70%  { box-shadow: 0 0 0 18px rgba(196, 30, 58, 0),
                         0 2px 8px rgba(0, 0, 0, 0.4); }
    100% { box-shadow: 0 0 0 0 rgba(196, 30, 58, 0),
                         0 2px 8px rgba(0, 0, 0, 0.4); }
}

/* 移除 v2.x 中的遮罩分析层（不再需要） */
.vc-analysis-overlay {
    display: none !important;
}

/* 分析按钮高亮状态（保留兼容但不再显示） */
.video-call-page .vc-ctrl-btn.is-analyzing {
    display: none !important;
}

/* ============================================================ */
/* 🔥 两阶段截图对比（第一次 vs 扩大） */
.vc-analysis-compare {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}
.vc-analysis-compare-item {
    flex: 1;
    min-width: 0;
    text-align: center;
}
.vc-analysis-compare-item img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1.5px solid rgba(196, 30, 58, 0.4);
    background: #000;
    display: block;
}
.vc-analysis-compare-item:nth-child(3) img {
    border-color: rgba(251, 191, 36, 0.6);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
}
.vc-analysis-compare-label {
    margin-top: 4px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.3;
}
.vc-analysis-compare-arrow {
    color: rgba(196, 30, 58, 0.8);
    font-size: 18px;
    flex-shrink: 0;
    animation: vc-compare-arrow 1.5s ease-in-out infinite;
}
@keyframes vc-compare-arrow {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}

/* ============================================================ */
/* 🔥 top-3 候选列表（用户可切换识别类型） */
.vc-analysis-candidates {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}
.vc-analysis-candidates-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 8px;
    font-weight: 600;
}
.vc-analysis-candidates-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.vc-analysis-candidate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s ease;
}
.vc-analysis-candidate.is-active {
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.3) 0%, rgba(232, 56, 79, 0.2) 100%);
    border-color: rgba(196, 30, 58, 0.6);
    color: #fff;
}
.vc-analysis-candidate:active {
    transform: scale(0.98);
    background: rgba(196, 30, 58, 0.25);
}
.vc-analysis-candidate-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vc-analysis-candidate-conf {
    flex-shrink: 0;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
}
.vc-analysis-candidate.is-active .vc-analysis-candidate-conf {
    background: rgba(196, 30, 58, 0.6);
    color: #fff;
}

/* 置信度数字高亮 */
.vc-confidence-num {
    color: #fbbf24;
    font-weight: 700;
    font-size: 13px;
}