/* =====================================================================
   RoomPlus.css — 界面放大覆盖层（用户自定义）
   在 Room.css / VideoGrid.css 之后加载，把房间内按钮与触控目标整体加大：
   - 底部主操作栏：桌面 48->58px，窄屏 40->54px / 360px 32->46px，图标同步放大
   - 视频卡片工具栏（含关摄像头头像卡、共享条）：32/36 -> 44px
   - 会话时长、用户名胶囊、未读徽标同步放大
   想微调改这里；在 Room.html 移除本文件引用即恢复上游默认尺寸。
   ===================================================================== */

/* ---------------- 底部主操作栏 ---------------- */

#bottomButtons {
    gap: 10px;
}

#bottomButtons button {
    width: 58px;
    height: 58px;
    font-size: 2rem;
    border-radius: 14px;
}

#bottomButtons .split-btn > button:not(.device-dropdown-toggle) {
    border-radius: 14px 0 0 14px;
}

#bottomButtons .split-btn .device-dropdown-toggle {
    width: 38px;
    height: 58px;
    border-radius: 0 14px 14px 0;
}

#bottomButtons .device-dropdown-toggle i {
    font-size: 1.1rem;
}

/* 徽标（聊天未读 / 参会人数） */
#bottomButtons #participantsCountBadge,
#bottomButtons #chatUnreadBadge {
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    font-size: 13px;
}

/* 注意：不要给 #bottomButtons 开 flex-wrap——它是 left:50%+translate 居中的
   绝对定位条，开启换行会把收缩宽度压到半屏导致提前折行。溢出防护用 vw 缩放。 */

/* ---------------- 窄屏（≤500px，含手机竖屏） ---------------- */

@media screen and (max-width: 500px) {
    #bottomButtons {
        max-width: calc(100vw - 12px);
        padding: 8px;
        gap: min(8px, 1.6vw);
        border-radius: 16px;
    }

    #bottomButtons button {
        width: min(50px, 11vw);
        height: min(50px, 11vw);
        font-size: min(1.45rem, 4.8vw);
        border-radius: 14px;
    }

    #bottomButtons .split-btn > button:not(.device-dropdown-toggle) {
        border-radius: 14px 0 0 14px;
    }

    #bottomButtons .split-btn .device-dropdown-toggle {
        width: min(30px, 6.5vw);
        height: min(50px, 11vw);
        border-radius: 0 14px 14px 0;
    }

    #bottomButtons .device-dropdown-toggle i {
        font-size: min(1.05rem, 3.4vw);
    }

    #bottomButtons #participantsCountBadge,
    #bottomButtons #chatUnreadBadge {
        min-width: 19px;
        height: 19px;
        font-size: 12px;
    }
}

/* ---------------- 视频卡片工具栏 ----------------
   .videoMenuBar        视频画面右上悬浮按钮条
   .videoAvatarMenuBar  关闭摄像头时的头像卡按钮条（含会话时长）
   .videoMenuBarShare   屏幕共享条 */

.videoMenuBar button,
.videoAvatarMenuBar button,
.videoMenuBarShare button {
    min-width: 44px;
    min-height: 44px;
    font-size: clamp(1.15rem, 1.4vw, 1.4rem);
    border-radius: 14px;
}

.videoMenuBar {
    gap: 6px;
    padding: 6px 8px;
}

.videoAvatarMenuBar,
.videoMenuBarShare {
    gap: 6px;
    padding: 12px;
}

.avatar-session-timer {
    font-size: 16px;
    padding: 4px 10px;
}

/* 用户名胶囊（右下角 "昵称 (me)"） */
.username {
    font-size: 13px;
    height: 30px;
    padding: 10px 14px;
    border-radius: 12px;
}

/* 视频卡片下拉菜单项同步放大 */
.videoMenuBar .navbar-dropdown-item button,
.videoMenuBar .navbar-dropdown-content .navbar-dropdown-item button {
    min-height: 42px;
    font-size: 1.05rem;
}

/* ---------------- 取消淡入/滑入出场动画 ----------------
   上游大量面板用 .fadein（1s ease-in 淡入，每次从隐藏变显示都会重放），
   弹窗用 animate.css 动画，弱机 + 多窗口时体感"点了没反应"。
   统一改为瞬时出现；保留 0.01ms 时长以触发 animationend 回调，
   避免破坏依赖该事件的关闭逻辑（如 SweetAlert2）。 */
.fadein,
.animate__animated,
#chatRoom.panel-slide-in,
#chatRoom.chat-dock-in,
#chatRoom.chat-maximize-in,
#chatRoom.chat-minimize-in {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
}

/* ---------------- 暂时隐藏的入口 ----------------
   聊天面板右上角「切换参会者列表」按钮（参会者功能暂时不用） */
#chatShowParticipantsListBtn {
    display: none !important;
}