:root { 
    --primary: #007bff; 
    --danger: #eb445a; 
    --success: #2dd36f; 
    --drawer-bg: rgba(20, 20, 20, 0.95); 
    --max-width: 720px; /* 定义 PC 端的最大宽度，类似手机比例 */
}

body { 
    margin: 0; 
    background: #1a1a1a; /* 外部背景色 */
    color: white; 
    font-family: -apple-system, sans-serif; 
    overflow: hidden; 
    height: 100vh;
    display: flex;
    justify-content: center; /* PC 端居中 */
}

.video-stage {
position: relative;
/* 1. 基础布局：手机端默认占满 */
width: 100%;
height: 100vh; 

/* 2. PC 端限制：最大宽度参考主流手机比例 (如 450px - 540px) */
/* 使用 max-width 配合 margin:auto 实现 PC 居中 */
max-width: 540px; 
margin: 0 auto;

/* 3. 核心：确保在矮屏幕 PC 上，容器高度不会溢出 */
max-height: 100vh;

background: #000;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

#remoteVideo {
/* 4. 关键：不要设死宽高，用 contain 保证视野完整 */
width: 100%;
height: 100%;
object-fit: contain; 

/* 针对有些浏览器 video 标签自带边距的清理 */
display: block;
}

#localVideo {
/* 本地小图也应该自适应比例 */
position: absolute;
bottom: env(safe-area-inset-bottom, 20px); /* 适配手机底部横条 */
right: 10px;
width: 25vw;   /* 相对屏幕宽度的比例 */
max-width: 25%;
aspect-ratio: auto; /* 让它随采集到的 localStream 比例自动变 */
object-fit: cover; 
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.5);
z-index: 10;
transform: scaleX(-1);
}

/* 菜单触发按钮：相对于容器定位 */
#menuBtn { 
    position: absolute; left: 15px; top: 20px; z-index: 101; 
    font-size: 20px; cursor: pointer; background: rgba(0,0,0,0.4); 
    width: 36px; height: 36px; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
}

/* 左侧抽屉：限制在容器内部 */
#userDrawer { 
    position: absolute; top: 0; left: -280px; width: 280px; height: 100%; 
    background: var(--drawer-bg); backdrop-filter: blur(15px);
    z-index: 100; padding: 60px 15px 20px; box-sizing: border-box;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* 这种曲线让收回更有“弹性” */
}
#userDrawer.open { transform: translateX(280px); }

/* 状态提示 Pop */
#statePop {
    position: absolute; top: 85px; left: 50%; transform: translateX(-50%);
    background: #333; color: #fff; padding: 8px 18px; border-radius: 20px;
    font-size: 12px; z-index: 300; pointer-events: none;
    transition: opacity 0.4s, transform 0.4s;
    white-space: nowrap;
}
.pop-hidden { opacity: 0; transform: translate(-50%, -15px) !important; }

/* 顶部悬浮控制条 */
.top-float-bar { 
    position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
    background: rgba(40, 40, 40, 0.85); padding: 5px 12px; border-radius: 30px;
    display: flex; align-items: center; gap: 10px; z-index: 50;
    border: 0.5px solid rgba(255,255,255,0.2);
}

.btn-circle { width: 32px; height: 32px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; }
.btn-call { background: var(--primary); padding: 4px 12px; border-radius: 15px; border: none; color: white; font-size: 12px; }
.hangup { background: var(--danger); }
.toggle-btn { background: rgba(255,255,255,0.1); font-size: 14px; }
.toggle-btn.off { background: var(--danger); }

/* 呼叫邀请蒙层 */
.incoming-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.9);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 200; gap: 30px;
}

.user-item { padding: 12px; background: rgba(255,255,255,0.05); margin-bottom: 8px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; }
.hidden { display: none !important; }