/* youtube.css - 📱 スマホアプリ動画視聴画面風レイアウト (修正版) */

/* 1. 全体コンテナ: ページ全体を占める設定 */
.stream-container {
    display: flex;
    flex-direction: column; 
    height: 100%; 
    width: 100%; 
    background-color: #fff; 
    box-sizing: border-box; 
}

/* 2. ビデオ表示部分: 幅100%で16:9固定 */
.video-wrapper {
    width: 100%; 
    aspect-ratio: 16/9; 
    background: #000; 
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0; 
}

/* iframe設定 */
#youtube-player, #youtube-player iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* オフライン表示 */
#offline-placeholder {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    flex-direction: column; 
    background-color: #333; 
    color: white; text-align: center;
    font-size: 16px; 
    line-height: 1.5;
    z-index: 1;
}
#offline-placeholder p { margin: 0; padding: 5px 15px; }
#offline-placeholder small { font-size: 0.8em; opacity: 0.8; }

/* ===================================== */
/* 6. YouTubeチャットボタンエリア (調整版) */
/* ===================================== */
.youtube-chat-btn-container {
    /* 上下の高さを縮めたい場合はここの数値を小さく */
    padding: 4px 4px; 
    
    background: #fff5f7;
    border-bottom: 1px solid #ffd6de;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    
    /* ▼【重要】ボタンと文字の間隔を縮める */
    gap: 6px;  /* さっきの15pxから大幅に縮めました */
}

/* ボタンをさらにコンパクトにする */
.youtube-chat-open-btn.compact {
    width: auto;
    
    /* ▼ ボタンの内側の余白を縮める */
    padding: 4px 12px; /* 上下4px, 左右12px に縮小 */
    
    border: none;
    border-radius: 20px;
    background: linear-gradient(135deg, #ff6b81 0%, #ff4757 100%);
    color: white;
    font-size: 11px; /* 文字サイズも少し小さく */
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px; /* アイコンと「更新」の間の隙間も詰める */
    box-shadow: 0 2px 5px rgba(255, 107, 129, 0.4);
    transition: all 0.3s ease;
}

/* ヒントテキスト */
.chat-btn-hint.compact {
    margin: 0;
    font-size: 10px; /* 文字を少し小さく */
    color: #b13d3d;
    font-weight: 600;
    white-space: nowrap;
    flex: initial;
    text-align: left;
    width: auto;
}

/* LIVEインジケーター（変更なし） */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 2px 5px rgba(255, 65, 65, 0.4); }
    50% { box-shadow: 0 2px 10px rgba(255, 65, 65, 0.7); }
}
/* ===================================== */
/* 7. ゲーム埋め込みエリア（自動拡張） */
/* ===================================== */
/* flex: 1 なので、上の要素が小さくなれば自動的に広がる */

.game-embed-container {
    flex: 1;
    width: 100%;
    background-color: #d4f0dd;
    position: relative;
    overflow: hidden;
}
.game-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* youtube.css の一番下に追加 */

/* 1. 🔴 配信中の時の文字色（例：赤） */
.chat-btn-hint.compact.live-mode {
    color: #ff4141; 
    font-weight: 800; /* 目立つように太く */
}

/* 2. ⏰ 待機所（予定）の時の文字色（例：緑や青） */
.chat-btn-hint.compact.upcoming-mode {
    color: #2e8b57; /* シーグリーン */
    font-weight: 700;
}

/* 3. 📼 アーカイブの時の文字色（例：紫） */
.chat-btn-hint.compact.archive-mode {
    color: #9b59b6; /* 紫 */
    font-weight: 600;
}

/* 4. 何もない時の「最新情報をチェック」の色（デフォルト） */
.chat-btn-hint.compact {
    color: #666; /* グレー */
}