/* ==========================================================================
   1. 基礎與 iPad / iOS Safe Area 適應
   ========================================================================== */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* 優先使用 dynamic viewport height，不支援的瀏覽器降級 fallback */
    height: 100vh; 
    height: 100dvh; 
    overflow: hidden; /* 防止 iPad 滾動或彈簧效果 */
    background-color: #02050c;
}

/* 頂端導覽列 / Header 修正：避免被狀態列蓋住 */
header, .top-bar {
    padding-top: env(safe-area-inset-top, 0px);
}

/* 底部工具列 Safe Area */
.bottom-bar, footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==========================================================================
   2. 選單與動畫樣式
   ========================================================================== */
.submenu-item.active {
    background-color: rgba(0, 243, 255, 0.15);
    border-color: #00f3ff;
    color: #00f3ff;
}

#draw-submenu {
    display: none;
}

#draw-submenu.show {
    display: flex;
}

.glow-cyan {
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
}

.glow-pink {
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.3);
}

/* 自訂捲軸樣式 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #02050c;
}
::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #00f3ff;
}

/* 隱藏捲軸（用在頂端遠端視訊橫條 scrollbar-none） */
.scrollbar-none::-webkit-scrollbar {
    display: none;
}
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ==========================================================================
   3. 視訊小窗與動態網格樣式 (Cyberpunk Style)
   ========================================================================== */

/* 遠端視訊小窗容器 */
#remote-video-container {
    pointer-events: auto;
}

/* 視訊小窗網格容器 */
.video-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    background: rgba(10, 15, 29, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid #1e293b;
    border-radius: 12px;
}

/* 個別視訊卡片 */
.video-card {
    position: relative;
    width: 140px;
    height: 105px;
    background-color: #0a0f1d;
    border: 1px solid #1e293b;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease-in-out;
}

.video-card:hover {
    border-color: #00f3ff;
    box-shadow: 0 0 12px rgba(0, 243, 255, 0.3);
}

/* video 標籤硬體加速與裁切 */
.video-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #02050c;
}

/* 遠端對象預設不需要鏡像（除非是 local 本地視訊） */
.video-card.local-video-card video {
    transform: scaleX(-1);
}

/* 成員標籤與狀態 */
.peer-label {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: rgba(2, 5, 12, 0.8);
    color: #00f3ff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(0, 243, 255, 0.3);
    backdrop-filter: blur(4px);
    pointer-events: none;
}

/* 手手模式的游標 */
canvas.cursor-grab {
    cursor: grab !important;
}

canvas.cursor-grabbing {
    cursor: grabbing !important;
}

/* 工具按鈕被選中時的樣式 */
.tool-btn.active {
    background-color: rgba(0, 243, 255, 0.2);
    color: #00f3ff;
    border-color: rgba(0, 243, 255, 0.5);
}