/* === 数字亲人 UI v9 — 全部重写 === */

/* --- 全局重置 --- */
* { box-sizing: border-box; }
html, body {
    margin: 0 !important; padding: 0 !important;
    background: #F5EDE3 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}
#app, .wrap, .page-container { background: #F5EDE3 !important; }
.page-container { padding-top: 0 !important; padding-bottom: 0 !important; }

/* --- 强制所有自定义UI水平排列文字 --- */
#custom-header, #custom-chat-view, #custom-input-bar, #avatar-zoom, #custom-splash,
#custom-header *, #custom-chat-view *, #custom-input-bar *, #avatar-zoom *, #custom-splash *,
.msg-row, .msg-bubble, .msg-content, .msg-avatar, .msg-time, #custom-chat-list,
.actions, .actions * {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    direction: ltr !important;
}

/* --- Vue元素隐藏（保留3D头像容器和通话按钮） --- */
.access-wrap { visibility: hidden !important; position: absolute !important; top: -9999px !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.local-video-container { display: none !important; }
.chat-records-container { display: none !important; }

/* --- 3D数字人区域 --- */
.remote-video-container {
    background: linear-gradient(180deg, #2a2a2e 0%, #1a1a1e 100%) !important;
}
.remote-video-container video,
.remote-video-container canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* --- .actions是Vue设备选择器，全部隐藏 --- */
.actions { display: none !important; }

/* ========================================
   视频通话模式：左侧头像(42%) + 右侧聊天(58%)
   ======================================== */
body.mode-video .remote-video-container {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    width: 42% !important;
    bottom: 64px !important;
    z-index: 50 !important;
    overflow: hidden !important;
    border-right: 1px solid rgba(0,0,0,0.12);
}
body.mode-video #custom-chat-view {
    display: flex !important;
    position: fixed !important;
    top: 56px !important;
    left: 42% !important;
    bottom: 64px !important;
    right: 0 !important;
}

/* ========================================
   语音聊天模式：全屏聊天，无3D头像
   ======================================== */
body.mode-voice .remote-video-container { display: none !important; }
body.mode-voice #custom-chat-view {
    display: flex !important;
    position: fixed !important;
    top: 56px !important;
    bottom: 64px !important;
    left: 0 !important;
    right: 0 !important;
}

/* --- 聊天区域 --- */
#custom-chat-view {
    display: none;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 12px;
    background: #F5EDE3;
    z-index: 100;
}
#custom-chat-list { display: flex; flex-direction: column; gap: 16px; }
#custom-chat-list::-webkit-scrollbar { width: 4px; }
#custom-chat-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 2px; }

/* --- 顶部Header --- */
#custom-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: rgba(253,248,243,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(212,165,116,0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 9999;
}
.ch-info { display: flex; align-items: center; gap: 8px; }
.ch-name { font-size: 17px; font-weight: 600; color: #4A3728; }
.ch-status { font-size: 12px; color: #07C160; display: flex; align-items: center; gap: 4px; }
.ch-dot { width: 7px; height: 7px; border-radius: 50%; background: #07C160; box-shadow: 0 0 6px rgba(7,193,96,0.4); }

/* --- 模式切换 --- */
.mode-tabs { display: flex; background: #F5F0EB; border-radius: 10px; padding: 3px; }
.mode-tab {
    border: none; background: transparent; padding: 8px 20px; font-size: 14px;
    color: #9A8B7A; border-radius: 8px; cursor: pointer; white-space: nowrap;
    transition: all 0.25s ease; font-weight: 500;
}
.mode-tab.active {
    background: linear-gradient(135deg, #7873F6 0%, #6366F1 100%);
    color: white; box-shadow: 0 2px 8px rgba(120,115,246,0.3);
}
.sm-btn { margin-left: auto; font-size: 16px; padding: 8px 12px; min-width: auto; }

/* --- 消息行（头像在气泡上方） --- */
.msg-row { display: flex; flex-direction: column; gap: 4px; }
.msg-row-user { align-items: flex-end; }
.msg-row-ai { align-items: flex-start; }
.msg-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; flex-shrink: 0; color: white;
}
.av-ai { background: linear-gradient(135deg, #D4A574 0%, #B8865C 100%); }
.av-user { background: linear-gradient(135deg, #7873F6 0%, #6366F1 100%); }
.msg-content { display: flex; flex-direction: column; gap: 3px; max-width: 85%; }
.msg-row-user .msg-content { align-items: flex-end; }
.msg-bubble {
    max-width: 100%; padding: 10px 14px; font-size: 15px; line-height: 1.55;
    word-break: break-word; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.bub-ai { background: #FFF9F0; color: #3D2B1F; border-radius: 4px 12px 12px 12px; }
.bub-user { background: #95EC69; color: #1a1a1a; border-radius: 12px 4px 12px 12px; }
.msg-time { font-size: 11px; color: #B0A090; padding: 0 4px; }

/* --- 底部输入栏 --- */
#custom-input-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: #FDF8F3;
    border-top: 1px solid #E5D5C5;
    z-index: 9999;
}
#connect-btn {
    padding: 0 20px; height: 40px;
    border: none; border-radius: 8px;
    background: linear-gradient(135deg, #07C160 0%, #06AD56 100%);
    color: white; font-size: 15px; font-weight: 600;
    cursor: pointer; flex-shrink: 0;
    transition: all 0.2s; white-space: nowrap;
}
#connect-btn:active { transform: scale(0.95); }
#connect-btn:disabled { opacity: 0.6; cursor: default; }
#connect-btn.connected { display: none; }

#input-toggle {
    width: 36px; height: 40px;
    border: none; background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #4A3728; flex-shrink: 0; border-radius: 8px;
    transition: background 0.2s;
}
#input-toggle:active { background: #E5E5E5; }
#input-toggle svg { width: 22px; height: 22px; }
#custom-text-input {
    flex: 1; height: 40px; padding: 0 16px;
    border: 1px solid #E5D5C5; border-radius: 8px;
    background: #FFF9F0; color: #3D2B1F; font-size: 15px;
    outline: none; transition: border-color 0.2s; -webkit-appearance: none;
}
#custom-text-input:focus { border-color: #7873F6; }
#hold-to-talk {
    flex: 1; height: 40px;
    border: none; border-radius: 8px;
    background: #FFF9F0; border: 1px solid #E5D5C5;
    color: #4A3728; font-size: 15px; font-weight: 500;
    cursor: pointer; display: none;
    align-items: center; justify-content: center;
    transition: all 0.15s ease; user-select: none;
    -webkit-user-select: none; -webkit-touch-callout: none;
}
#hold-to-talk.active { background: #95EC69; border-color: #95EC69; color: #1a1a1a; }
#custom-send-btn {
    width: 40px; height: 40px; border-radius: 8px;
    background: linear-gradient(135deg, #7873F6 0%, #6366F1 100%);
    color: white; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.2s;
}
#custom-send-btn:active { transform: scale(0.92); }

/* --- 头像缩放滑块 --- */
#avatar-zoom {
    position: fixed;
    right: 12px;
    bottom: calc(64px + 8px);
    display: none;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 14px;
    border-radius: 20px;
    z-index: 200;
    color: white;
    font-size: 12px;
}
body.mode-video #avatar-zoom { display: flex; }
body.mode-voice #avatar-zoom { display: none; }
#avatar-zoom input[type="range"] {
    width: 100px; height: 4px;
    -webkit-appearance: none;
    background: rgba(255,255,255,0.3);
    border-radius: 2px; outline: none;
}
#avatar-zoom input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #7873F6; cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
#zoom-val { min-width: 32px; text-align: right; font-size: 11px; opacity: 0.8; }

/* --- 断线重连 --- */
#reconnect-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(245,237,227,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
}
.rc-card { text-align: center; padding: 40px 32px; }
.rc-icon { font-size: 48px; margin-bottom: 16px; }
.rc-title { font-size: 20px; font-weight: 600; color: #4A3728; margin-bottom: 8px; }
.rc-hint { font-size: 14px; color: #8B7355; margin-bottom: 28px; }
#rc-btn {
    padding: 12px 40px; font-size: 15px; font-weight: 600; color: white;
    background: linear-gradient(135deg, #7873F6 0%, #6366F1 100%);
    border: none; border-radius: 24px; cursor: pointer;
    box-shadow: 0 4px 16px rgba(120,115,246,0.3);
    transition: all 0.2s ease;
}
#rc-btn:active { transform: scale(0.96); }

/* --- 声纹管理弹窗 --- */
.speaker-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}
.sm-card {
    width: 92%; max-width: 600px; height: 88%; max-height: 720px;
    background: #F5EDE3; border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.sm-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; background: #FFF9F0;
    border-bottom: 1px solid #E5D5C5;
    font-size: 16px; font-weight: 600; color: #3D2B1F;
}
.sm-close {
    background: none; border: none; font-size: 18px; cursor: pointer;
    color: #8B7355; padding: 4px 8px; border-radius: 6px;
}
.sm-close:hover { background: #F5EDE3; }
.sm-iframe { flex: 1; border: none; width: 100%; }

/* --- 打字动画指示器 --- */
.typing-bubble {
    display: flex !important;
    align-items: center;
    gap: 4px;
    padding: 12px 16px !important;
}
.typing-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #B8865C;
    animation: typingBounce 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* --- .actions 全模式隐藏（设备选择器，非通话按钮） --- */
.actions { display: none !important; }

/* --- 接通话按钮（视频模式，未连接时显示） --- */
#connect-btn {
    background: linear-gradient(135deg, #7873F6 0%, #6366F1 100%) !important;
    color: white !important; border: none !important;
    border-radius: 20px !important; padding: 8px 16px !important;
    font-size: 13px !important; font-weight: 600 !important;
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(120,115,246,0.3);
    transition: all 0.2s ease;
}
#connect-btn:hover { box-shadow: 0 4px 14px rgba(120,115,246,0.45); }
#connect-btn.connected { display: none !important; }

/* --- 挂断按钮 --- */
#hangup-btn {
    padding: 0 20px !important; height: 40px;
    border: none !important; border-radius: 8px !important;
    background: linear-gradient(135deg, #FF4D4F 0%, #FF7875 100%) !important;
    color: white !important; font-size: 15px !important; font-weight: 600 !important;
    cursor: pointer; flex-shrink: 0; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(255,77,79,0.3);
    transition: all 0.2s ease;
}
#hangup-btn:active { transform: scale(0.95); }

/* --- v10.4: 隐藏Vue的loading遮罩和播放器控制区 --- */
.player-controls { display: none !important; }
.waiting-icon-text { display: none !important; }
.spin-icon { display: none !important; }
.ant-spin-dot, .ant-spin-dot-item { display: none !important; }
.ant-spin { display: none !important; }
.start-chat { display: none !important; }
.stop-chat { display: none !important; }
.chat-input-container { display: none !important; }
.chat-input-wrapper { display: none !important; }

/* === v10.5: 进度诊断overlay === */
#custom-progress {
    position: fixed;
    top: 56px;
    left: 0;
    width: 42%;
    bottom: 64px;
    background: rgba(26,26,30,0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 150;
    transition: opacity 0.4s ease;
}
#custom-progress.hidden {
    opacity: 0;
    pointer-events: none;
}
.cp-ring {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.08);
    border-top-color: #7873F6;
    animation: cpSpin 0.8s linear infinite;
    margin-bottom: 20px;
}
@keyframes cpSpin { to { transform: rotate(360deg); } }
.cp-percent {
    font-size: 28px; font-weight: 700;
    color: #7873F6;
    margin-bottom: 6px;
    font-family: -apple-system, "Segoe UI", sans-serif;
}
.cp-stage {
    font-size: 13px; color: rgba(255,255,255,0.5);
    text-align: center; max-width: 80%;
    word-break: break-all;
}
/* v10.5: 暴力隐藏所有loading相关元素 */
.remote-video-container [class*="loading"],
.remote-video-container [class*="Loading"],
.remote-video-container [class*="spinner"],
.remote-video-container [class*="Spinner"],
.remote-video-container [class*="wait-icon"],
.remote-video-container [class*="WaitIcon"] {
    display: none !important;
}