body, html { margin: 0; padding: 0; height: 100%; background: #000; color: #fff; font-family: sans-serif; overflow: hidden; }

#obs-container { display: flex; flex-direction: column; height: 100vh; }

/* 映像：奥に配置 */
.video-layer { flex: 1; display: flex; justify-content: center; align-items: center; background: #0a0a0a; min-height: 0; }
#mainCanvas { max-width: 95%; max-height: 95%; aspect-ratio: 16/9; background: #000; border: 2px solid #333; }

/* UI：手前に配置してボタンを見えるようにする！ */
.ui-layer { height: 200px; background: #1c1c1c; border-top: 3px solid #333; display: flex; padding: 10px; gap: 10px; position: relative; z-index: 100; }

.panel { flex: 1; background: #252525; border: 1px solid #444; display: flex; flex-direction: column; }
.header { background: #333; font-size: 11px; text-align: center; padding: 4px; color: #aaa; }
.list-container { flex: 1; background: #000; margin: 5px; overflow-y: auto; }
.controls { padding: 5px; position: relative; }

.main-btn { width: 30px; height: 30px; background: #444; color: #fff; border: none; cursor: pointer; }
.popup-menu { position: absolute; bottom: 40px; left: 5px; background: #333; border: 1px solid #555; display: flex; flex-direction: column; z-index: 200; }
.popup-menu button { padding: 10px; background: #444; border: none; color: #fff; text-align: left; border-bottom: 1px solid #555; }

.hidden { display: none !important; }
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 300; display: flex; align-items: center; justify-content: center; }
.modal-box { background: #252525; border: 1px solid #4a90e2; width: 280px; }
.modal-top { background: #333; padding: 5px 10px; display: flex; justify-content: space-between; }
/* ソースリストのアイテム用 */
.source-item {
    padding: 8px;
    margin: 2px;
    background: #333;
    cursor: pointer;
    font-size: 13px;
    border-radius: 3px;
}
.source-item:hover { background: #444; }
.source-item.active { background: #4a90e2; border-left: 4px solid #fff; }