/* style.css */
@charset "utf-8";

/* =========================================
   基本レイアウト・UIスタイル
   ========================================= */

:root {
    --bg-color: #121212;         
    --surface-color: #1e1e1e;    
    --panel-bg: #252525;         
    --text-main: #e0e0e0;        
    --primary-orange: #ff9800;   
    --primary-orange-hover: #ffb74d; 
    --danger-red: #cf6679;       
    --border-radius: 8px;        
}

body { 
    font-family: 'Segoe UI', sans-serif; 
    background-color: var(--bg-color); 
    color: var(--text-main);
    margin: 0; 
    padding-bottom: 0px; /* スタンプパレット用にJSでマージンを計算するため0に */
    overflow-x: hidden;    
    overflow-y: hidden; /* 全体スクロールを抑制し、各エリアでスクロールさせる */
    height: 100vh;
}

/* --- ヘッダー --- */
.header-bar {
    padding: 10px 30px;
    background: var(--surface-color);
    border-bottom: 2px solid var(--primary-orange); 
    margin-bottom: 0px; /* レイアウト調整 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; 
    gap: 10px;
    height: 50px; /* 固定高さ */
    box-sizing: border-box;
}
h1 { margin: 0; font-size: 1.5rem; color: var(--primary-orange); white-space: nowrap; }

.header-select, .header-input {
    padding: 6px;
    background: #333;
    color: white;
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 0.9rem;
}
.header-select { min-width: 200px; }
.header-input { width: 180px; }

/* ★追加: ホームボタン */
.home-btn {
    background: #444;
    color: var(--primary-orange);
    border: 1px solid var(--primary-orange);
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}
.home-btn:hover {
    background: #555;
}

/* --- メインレイアウト --- */
.main-layout {
    display: flex;       
    gap: 20px;           
    width: 98%;          
    max-width: 1600px;   
    margin: 20px auto 0 auto;      
    align-items: flex-start; 
    /* 高さはJSで制御するが、初期値としてcalcを入れておく */
    height: calc(100vh - 80px - 150px); /* ヘッダー - スタンプパレット概算 */
}

.left-column {
    flex: 1;             
    min-width: 0;        
    display: flex;
    flex-direction: column;
    overflow-y: auto; 
    height: 100%;
}

.right-column {
    width: 400px;        
    flex-shrink: 0;      
    display: flex;
    flex-direction: column;
    gap: 15px;           
    height: 100%;        
    overflow-y: auto;    
    padding-right: 5px;  
}

/* --- 動画セクション --- */
.video-section { 
    background: #000; 
    padding: 5px; 
    border: 1px solid #333;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column; 
}

/* ニュースバー (2525コマンド) */
#news-bar {
    width: 100%;
    border: 2px solid var(--primary-orange);
    background-color: #000;
    color: var(--primary-orange);
    
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    white-space: nowrap;
    display: flex; 
    align-items: center;
}

.news-item {
    position: absolute;
    white-space: nowrap;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    color: var(--primary-orange); 
    animation: news-scroll linear infinite;
    top: 50%;
    transform: translateY(-50%);
}
.news-item:hover {
    text-decoration: underline;
    color: #fff; 
}

@keyframes news-scroll {
    from { left: 100%; }
    to { left: -100%; } 
}

#player-container {
    position: relative;  
    padding-bottom: 56.25%; 
    height: 0;           
    background: #000;
    width: 100%;
}

#player-container iframe, 
#video-overlay {
    position: absolute;  
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    margin: 0; 
    padding: 0;
    border: none;
}

#video-overlay { 
    z-index: 20;        
    pointer-events: auto; 
    overflow: hidden;    
    transition: background 0.5s; 
}

body.is-dragging #video-overlay { 
    border: 4px dashed var(--primary-orange); 
    background: rgba(255,152,0,0.1); 
    box-sizing: border-box; 
    pointer-events: auto; /* ドラッグ中は受け付ける */
}

/* --- 右カラムの各パネル --- */
.panel-section {
    background: var(--surface-color);
    padding: 15px;
    border-radius: var(--border-radius);
    border: 1px solid #333;
}

.full-width-select {
    width: 100%; padding: 8px; background: #333; color: white; border: 1px solid #555; border-radius: 4px;
}

.control-panel { border: 1px solid var(--primary-orange); }

.skip-row {
    display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
    background: #333; padding: 5px; border-radius: 4px;
}
#skip-seconds {
    width: 50px; text-align: center; margin-left: 10px;
    background: #222; border: 1px solid #555; color: white; padding: 4px; border-radius: 4px;
}

.control-buttons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 8px;
}
.control-buttons-grid button {
    padding: 8px; font-size: 0.9rem; background: #444; color: white;
    border: 1px solid #666; border-radius: 4px; cursor: pointer;
}
.control-buttons-grid button:hover { background: #555; }

/* 投稿パネル */
.post-panel textarea {
    width: 100%; background: #222; color: #fff; border: 1px solid #555; border-radius: 4px; padding: 8px; box-sizing: border-box; resize: vertical;
}
#command-suffix { margin-top: 5px; background: #333; }

.small-btn { padding: 4px 8px; font-size: 0.8rem; background: #444; color: white; border: 1px solid #666; border-radius: 4px; cursor: pointer; }
.small-btn:hover { background: #555; }

.primary-btn {
    background: var(--primary-orange); color: #000; border: none; padding: 10px; font-weight: bold; border-radius: 4px; cursor: pointer;
}
.primary-btn:hover { background: var(--primary-orange-hover); }

.secondary {
    background: transparent; color: #ccc; border: 1px solid #666; padding: 10px; border-radius: 4px; cursor: pointer;
}
.secondary:hover { background: rgba(255,255,255,0.1); }

.status { font-size: 0.8rem; min-height: 1.2em; margin-top: 5px; text-align: right; color: #aaa; }

/* コメントリスト */
.list-panel { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    min-height: 300px; /* ★修正: 画面が小さくてもつぶれないように高さを確保 */
}
.comment-scroll-area { flex: 1; overflow-y: auto; background: #222; border: 1px solid #333; border-radius: 4px; padding: 5px; }
#comment-list { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; }
#comment-list li { padding: 4px 0; border-bottom: 1px solid #333; line-height: 1.4; word-break: break-all; }
#comment-list li b { color: var(--primary-orange); }

/* シークバー (フェイク) */
#fake-seekbar { width: 100%; margin: 10px 0; cursor: default; }

/* スタンプパレット (Images) */
.palette-img { width: 50px; height: 50px; object-fit: contain; cursor: grab; transition: transform 0.1s; margin: 2px; background: #333; padding: 2px; border-radius: 4px; flex-shrink: 0; }
.palette-img:hover { border: 1px solid var(--primary-orange); }
.placed-stamp { pointer-events: none; user-select: none; }
.placed-stamp.fade-out { transition: opacity 0.5s; opacity: 0; }

/* ★修正: スタンプパレットを下部に配置 */
#stamp-palette {
    position: fixed;
    bottom: 0; left: 0;
    width: 100%;
    height: auto; /* JSで動的に設定 */
    background: #1a1a1a;
    border-top: 2px solid #444; 
    border-left: none;
    z-index: 900;
    overflow-x: auto; 
    overflow-y: hidden;
    padding: 10px;
    display: flex;
    flex-direction: row; /* 横並び */
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}

/* ★修正: コマンドパレット */
.command-palette {
    position: fixed;
    background-color: var(--panel-bg);
    border: 2px solid var(--primary-orange);
    border-radius: var(--border-radius);
    padding: 10px;
    width: 320px;
    z-index: 1000;
    display: none;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.command-palette.visible { display: block; }
.palette-grid { display: flex; flex-direction: column; gap: 8px; }
.palette-row { display: flex; align-items: center; justify-content: space-between; gap: 5px; font-size: 0.85rem; }
.palette-row label { flex: 1; color: #ccc; }
.palette-full { flex-direction: column; align-items: flex-start; }

/* ★追加: ホーム画面用のスタイル */
.home-container {
    width: 90%;
    max-width: 800px;
    margin: 50px auto;
    background: var(--surface-color);
    border: 2px solid var(--primary-orange);
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: 0 0 20px rgba(255, 152, 0, 0.1);
}

.home-title {
    color: var(--primary-orange);
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

/* ★追加: おすすめタグエリア */
.recommended-area {
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(255, 152, 0, 0.05);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.recommended-label {
    font-size: 0.85rem;
    color: var(--primary-orange);
    font-weight: bold;
}
.recommended-tag-item {
    border: 1px solid #555;
}

.search-area {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

.search-input {
    flex: 1;
    max-width: 400px;
    padding: 10px;
    background: #333;
    border: 1px solid var(--primary-orange);
    border-radius: 4px;
    color: white;
    font-size: 1rem;
}

.video-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.video-item {
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 15px;
    transition: all 0.2s;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100px;
}

.video-item:hover {
    border-color: var(--primary-orange);
    background: #333;
}

.video-item-content {
    cursor: pointer;
}

.video-item-title {
    color: var(--text-main);
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

/* タグスタイル */
.tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.video-tag {
    font-size: 0.75rem;
    background: #444;
    color: #ccc;
    padding: 2px 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.video-tag:hover {
    background: var(--primary-orange);
    color: #000;
}