head { z-index: 100; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f4f9; color: #333; margin: 0; padding: 0; padding-top: 80px; transition: 0.3s; }

/* ヘッダー */
.header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 60px; 
    background-color: #121212; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); 
    z-index: 1000; 
    display: flex; 
    align-items: center; 
    padding: 0 20px; 
    box-sizing: border-box; 
}

.header h1 { font-size: 1.5em; margin: 0; color: #ffffff; margin-right: auto; }

/* コントロールバー */
#controls {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
#controls form {
	display: flex;
	justify-content: center;
	gap: 10px;
}
#controls input[type="text"] {
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	width: 300px;
}
#controls button {
	padding: 8px 14px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-weight: bold;
	color: #fff;
    white-space: nowrap;
}
#startBtn { background: #03dac6; color: #121212; }
#stopBtn { background: #cf6679; color: #121212; }
#theaterToggle { background: #bb86fc; color: #121212; }

/* ハンバーガー */
.hamburger { position: fixed; top: 10px; right: 10px; width: 48px; height: 48px; z-index: 5000; border: none; background: transparent; cursor: pointer; }
.hamburger__line { z-index: 5001; display: block; position: absolute; right: 11px; width: 26px; height: 2px; background-color: #e0e0e0; transition: 0.4s; }
.hamburger__line:nth-of-type(1) { top: 14px; }
.hamburger__line:nth-of-type(2) { top: 23px; }
.hamburger__line:nth-of-type(3) { top: 32px; }
.hamburger.active .hamburger__line:nth-of-type(1) { transform: translateY(9px) rotate(-45deg); }
.hamburger.active .hamburger__line:nth-of-type(2) { opacity: 0; }
.hamburger.active .hamburger__line:nth-of-type(3) { transform: translateY(-9px) rotate(45deg); }

/* メニュー */
.nav { 
    position: fixed; top: 0; right: -340px; width: 320px; 
    height: 100vh; background-color: #fff; box-shadow: -2px 0 5px rgba(0,0,0,0.5); 
    transition: 0.4s; z-index: 999; 
    padding-top: 60px; overflow-y: auto; 
}
.nav.active { transform: translateX(-340px); }
.nav__list { margin: 0; padding: 20px 0 60px 0; list-style: none; }
.nav__item { padding: 15px 20px; border-bottom: 1px solid #eee; }
.nav__item label { display: block; margin-bottom: 8px; font-weight: bold; color: #000; }
.nav__item select, .nav__item input[type="text"], .nav__item input[type="number"], .nav__item input[type="range"] { 
    width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; 
}
.hidden {
    display: none;
}
/* 話者設定UI */
.speaker-setting-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.speaker-name-input { flex-grow: 1; padding: 6px; border: 1px solid #ccc; border-radius: 4px; min-width: 0; }
.color-preview-box { width: 40px; height: 30px; flex-shrink: 0; border: 1px solid #999; border-radius: 4px; background-color: #fff; cursor: pointer; position: relative; overflow: hidden; }
.color-picker-hidden { opacity: 0; width: 100%; height: 100%; cursor: pointer; position: absolute; top: 0; left: 0; padding: 0; border: none; }
.reset-btn { width: 100%; padding: 8px; background-color: #efefef; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; font-size: 0.9em; margin-top: 5px; }
.reset-btn:hover { background-color: #ddd; }

/* コンテンツエリア */
#container {
    width: 95vw;
    margin: 0 auto;
    display: flex;
    gap: 20px;
    padding: 20px;
    height: calc(100vh - 80px);
    box-sizing: border-box;
}
#video-container { 
    flex: 3;
    position: relative; 
    background: #000; 
    border-radius: 8px; 
    overflow: hidden; 
    height: 100%;
}
#history-container { 
    flex: 1;
    background: #fff; 
    padding: 15px; 
    border-radius: 8px; 
    overflow-y: auto; 
    border: 1px solid #ddd;
    margin-top: 0;
    height: 100%;
    box-sizing: border-box;
}

/* シアターモードスタイル (全体制御) */
body.theater-active {
    overflow: hidden;
    padding: 0 !important;
}

/* シアター中はヘッダーと履歴を非表示 */
body.theater-active .header { display: none !important; }
body.theater-active #history-container { display: none !important; }

/* シアター中はコンテナの余白解除 */
body.theater-active #container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
}

/* 動画エリア全画面化 */
body.theater-active #video-container.theater-mode {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: #000;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 0;
}
body.theater-active #video-container.theater-mode iframe { width: 100%; height: 100%; object-fit: contain; }

/* 閉じるボタン */
.close-theater-btn { display: none; position: absolute; top: 20px; right: 20px; background-color: rgba(0, 0, 0, 0.5); color: #fff; border: 1px solid rgba(255,255,255,0.5); padding: 10px 20px; border-radius: 30px; cursor: pointer; font-weight: bold; z-index: 2500; font-size: 1rem; }
.close-theater-btn:hover { background-color: rgba(255, 255, 255, 0.2); }
.theater-mode .close-theater-btn { display: block; }

/* 字幕コンテナ */
#subtitle-container { 
    position: absolute; 
    bottom: 5%; 
    left: 0; 
    width: 100%; 
    text-align: center; 
    pointer-events: none; 
    z-index: 1500; 
    display: flex; 
    flex-direction: column; 
    align-items: center;    
    justify-content: flex-end; 
    gap: 5px; 
}
/* プレビュー四角 */
.color-preview {
    width: 30px;
    height: 30px;
    border: 2px solid #666;   /* ← 背景と同化しない */
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    background: #ffffff;
}

/* color input を完全に覆う */
.color-preview input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;      /* 見えない */
    cursor: pointer;
}

#textFgPreview {
    position: relative;
    width: 30px;
    height: 30px;
}

.subtitle-line { display: inline-block; margin: 2px; padding: 2px 6px; border-radius: 4px; text-shadow: 1px 1px 3px #000; transition: 0.3s; }
#video-frame { width: 100%; height: 100%; border: none; }

#history-list { list-style: none; padding: 0; margin: 0; }
#history-list li { padding: 8px; border-bottom: 1px solid #eee; color: #333; }

/* ダークモード */
body.dark-mode { background-color: #121212; color: #e0e0e0; }
body.dark-mode .nav { background-color: #2c2c2c; }
body.dark-mode .nav__item { border-bottom: 1px solid #444; }
body.dark-mode .nav__item label { color: #ccc; }
body.dark-mode input[type="text"], body.dark-mode select, body.dark-mode input[type="number"] { background-color: #333; color: #fff; border: 1px solid #555; }
body.dark-mode .reset-btn { background-color: #444; color: #fff; border-color: #555; }
body.dark-mode .reset-btn:hover { background-color: #555; }
body.dark-mode #history-container { background-color: #1e1e1e; border-color: #333; }
body.dark-mode #history-list li { border-bottom: 1px solid #333; color: #e0e0e0; }