/**
 * vMeet 主题 - 腾讯会议风格
 * 去除 Jitsi 元素，简洁商务风格
 */

/* 腾讯会议风格：深色背景 */
body {
    background-color: #0d1117 !important;
}

/* 确保 React 根容器占满视口，会议布局才能正确显示 */
#react {
    height: 100% !important;
    min-height: 100% !important;
}

/* 会议主内容区域：React 根下第一层 div 需占满高度 */
#react > div {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* layout_wrapper 占满父容器 */
#layout_wrapper {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* videoconference_page 在 layout_wrapper(flex) 中占满剩余空间 */
#videoconference_page {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
}

/* videospace 填满 videoconference_page */
#videospace {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* 确保大视频/头像容器有最小尺寸，供 LargeVideoManager 计算布局 */
#largeVideoContainer {
    min-height: 200px !important;
    min-width: 200px !important;
}

/* 视频区域背景 */
[class*="videoconference"],
#videoconference_page {
    background-color: #0d1117 !important;
}

/* vMeet: 工具栏 Portal 容器 - 渲染到 body，不受 videoconference_page transform 影响 */
.vmeet-toolbox-portal {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    pointer-events: none !important;
    z-index: 260 !important;
}
.vmeet-toolbox-portal::after {
    display: none !important;
}
.vmeet-toolbox-portal > * {
    pointer-events: auto !important;
}

/* vMeet: 强制底部工具栏始终可见 - 固定定位到视口底部，居中显示 */
#new-toolbox.new-toolbox {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: 52px !important;
    pointer-events: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 260 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
}
#new-toolbox.new-toolbox > * {
    pointer-events: auto !important;
}
#new-toolbox.new-toolbox.no-buttons {
    display: flex !important;
}

/* 底部工具栏 - 仅图标区域有背景，宽度随内容，不遮挡会议画面 */
#new-toolbox .toolbox-content,
#new-toolbox .vmeet-toolbox-bar {
    margin-bottom: 0 !important;
    background: rgba(22, 27, 34, 0.95) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 8px 16px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: fit-content !important;
    max-width: 100% !important;
}
/* 小屏移动端保持全宽，便于触控 */
@media (max-width: 500px) {
    #new-toolbox .toolbox-content,
    #new-toolbox .vmeet-toolbox-bar {
        width: 100% !important;
    }
}
#new-toolbox .toolbox-content-wrapper::after {
    display: none !important;
}

/* 工具栏栏体：flex 布局，宽度随图标内容，不占满屏 */
#new-toolbox .vmeet-toolbox-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
#new-toolbox .toolbox-content-wrapper {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* 收起状态：只显示右侧展开按钮 */
#new-toolbox.vmeet-toolbox-collapsed .toolbox-content-wrapper {
    display: none !important;
}
#new-toolbox.vmeet-toolbox-collapsed .vmeet-toolbox-bar {
    justify-content: flex-end !important;
}

/* 展开/收起切换按钮 - 与工具栏按钮风格一致 */
.vmeet-toolbox-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    margin: 0 0 0 8px !important;
    border: none !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    cursor: pointer !important;
}
.vmeet-toolbox-toggle:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}
.vmeet-toolbox-toggle:active {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* 主色调：腾讯蓝 #006EFF */
[class*="dominant-speaker"],
button[class*="primary"]:hover {
    border-color: #006EFF !important;
}

/* 隐藏 Jitsi 相关水印、logo */
[class*="watermark"],
[class*="powered-by"],
[class*="jitsi-watermark"],
img[src*="logo-deep-linking"] {
    display: none !important;
}

/*
 * vMeet: 画面模式切换时，工具栏始终与「无小窗口」一致：
 * 固定贴底、禁用 tile-view 的 shift-up 抬升。
 */
#new-toolbox.new-toolbox.shift-up {
    bottom: 0 !important;
}
#new-toolbox.new-toolbox.shift-up .toolbox-content,
#new-toolbox.new-toolbox.shift-up .vmeet-toolbox-bar {
    margin-bottom: 0 !important;
}

/*
 * vMeet: 有小窗口时，缩略图条抬到工具栏上方，不改写工具栏位置/样式；
 * 底色透明融入主画面，不增加黑色底框。
 */
.horizontal-filmstrip .filmstrip,
.vertical-filmstrip .filmstrip,
.stage-filmstrip .filmstrip {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
.horizontal-filmstrip .filmstrip {
    /* 与常显工具栏高度对齐（约 52px + safe-area） */
    bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
}
.horizontal-filmstrip .filmstrip.reduce-height {
    bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
}
.filmstrip .resizable-filmstrip,
.filmstrip .filmstrip-hover,
.filmstrip.always-show-resize-bar {
    background: transparent !important;
    background-color: transparent !important;
}
.filmstrip .videocontainer,
.filmstrip__videos .videocontainer,
.tile-view .videocontainer {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
/* Thumbnail 背景层 / 遮罩：去掉黑色底框，保留视频与头像本身 */
.filmstrip .vmeet-thumbnail-bg,
.tile-view .vmeet-thumbnail-bg,
.filmstrip .vmeet-thumbnail-tint,
.tile-view .vmeet-thumbnail-tint {
    background-color: transparent !important;
    opacity: 0 !important;
}

/* 顶部栏 - 会议信息 */
[class*="subject"] {
    color: #c9d1d9 !important;
    font-weight: 500 !important;
}

/* 聊天面板 - 简洁风格 */
[class*="chat-panel"],
[class*="chat-container"] {
    background: #161b22 !important;
}