/* base.css - 基本スタイルとレイアウト */

/* 変数定義 */
:root {
    --primary-color: #5665e9;
    --secondary-color: #34495e;
    --accent-color: #f39c12;
    --text-color: #333;
    --light-bg: #f9f9f9;
    --dark-bg: #2c3e50;
    --border-color: #ddd;
    --timeline-height: 200px; /* JSで動的に変更される */
    --header-height: 60px;
    --sidebar-width: 280px;
    --sidebar-width-mobile: 280px; /* モバイルでのデフォルト幅 */
    --track-height: 60px;
    --main-content-height: calc(100vh - var(--header-height) - var(--timeline-height)); /* JSで動的に変更される */
    --transition-speed: 0.3s;
    --panel-toggle-size: 40px; /* アイコンボタンのサイズ */
    --panel-toggle-margin: 10px; /* アイコンボタンのマージン */
}

/* リセットとベース */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-color);
    background-color: #f0f2f5;
    height: 100vh; /* 高さを確保 */
    overflow: hidden; /* body自体のスクロールを防止 */
}

/* Google Material Symbols の基本スタイル調整 (任意) */
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24; /* サイズは適宜調整 */
  font-size: 24px; /* アイコンの表示サイズ */
  display: inline-block; /* vertical-align のため */
  vertical-align: middle;
}


h1, h2, h3, h4 {
    font-weight: 600;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

/* 基本レイアウト */
.editor-container {
    display: flex;
    flex-direction: column;
    height: 100%; /* bodyに合わせる */
    overflow: hidden;
}

/* ヘッダー */
.editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 10px;
    background-color: var(--dark-bg);
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-shrink: 0; /* 縮まないように */
    position: relative; /* z-index の基準になるように念のため */
    z-index: 1050; /* サイドバーや固定アイコンより手前に来るように */
}

.logo h1 {
    font-size: 1.2rem;
    font-weight: 500;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ボタンスタイル (既存) */
.btn {
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: #4554dd;
}

.btn-secondary {
    background-color: #576574;
    color: white;
}

.btn-secondary:hover {
    background-color: #485563;
}

.btn-help {
    background-color: transparent;
    color: white;
    font-size: 1.2rem;
}

.btn-help:hover {
    color: var(--accent-color);
}

.btn-full {
    width: 100%;
    background-color: var(--primary-color);
    color: white;
    margin-bottom: 15px;
}

/* フォーム要素 */
select#user-level {
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: white;
}

input[type="color"] {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* メインコンテンツ */
.editor-main {
    display: flex;
    flex: 1; /* 残りの高さを占める */
    overflow: hidden;
    height: var(--main-content-height); /* JSで制御 */
    position: relative;
}

/* サイドバー共通 */
.asset-sidebar,
.effects-sidebar {
    background-color: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform var(--transition-speed) ease, width var(--transition-speed) ease; /* widthも追加 */
    /* デスクトップ時のスタイル */
    width: var(--sidebar-width);
    position: relative; /* ★★★ absolute な子要素の基準 ★★★ */
    z-index: 1000; /* ヘッダーより下、固定アイコンより下 */
    flex-shrink: 0;
}

/* サイドバー閉状態のスタイル */
.asset-sidebar:not(.open),
.effects-sidebar:not(.open) {
    width: 0; /* 閉じたときは幅を0にする */
    /* transform は不要になる or 別の用途に */
    border: none; /* 幅0ならボーダー不要 */
    overflow: hidden; /* コンテンツがはみ出ないように */
}


/* 開いた状態 */
.asset-sidebar.open {
    border-right: 1px solid var(--border-color);
}
.effects-sidebar.open {
    border-left: 1px solid var(--border-color);
}

/* ★★★ パネル開閉アイコンボタン (共通スタイル) ★★★ */
.panel-toggle-btn {
    width: var(--panel-toggle-size);
    height: var(--panel-toggle-size);
    background-color: rgba(0, 0, 0, 0.1); /* 半透明背景 */
    color: var(--secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    padding: 0; /* padding リセット */
    border: none;
}

.panel-toggle-btn:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.panel-toggle-btn .material-symbols-outlined {
    font-size: 24px; /* アイコンサイズ */
}

/* ★★★ サイドバー内のトグルボタンの位置 ★★★ */
.asset-sidebar .panel-toggle-btn,
.effects-sidebar .panel-toggle-btn {
    position: absolute;
    top: var(--panel-toggle-margin);
    z-index: 1010; /* サイドバーコンテンツより手前 */
}

.asset-sidebar .panel-toggle-btn {
    left: var(--panel-toggle-margin);
}

.effects-sidebar .panel-toggle-btn {
    right: var(--panel-toggle-margin);
}

/* ★★★ 画面固定トグルボタンの位置と初期状態 ★★★ */
.fixed-toggle {
    position: fixed;
    top: calc(var(--header-height) + var(--panel-toggle-margin));
    z-index: 1005; /* サイドバーより手前、ヘッダーより下 */
    display: none; /* ★★★ 初期状態は非表示 ★★★ */
    background-color: var(--primary-color); /* 目立つように色を変える例 */
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.fixed-toggle:hover {
    background-color: #4554dd;
}

#fixed-asset-toggle {
    left: var(--panel-toggle-margin);
}

#fixed-effects-toggle {
    right: var(--panel-toggle-margin);
}


.sidebar-header {
    padding: var(--panel-toggle-margin); /* ボタンのマージンと合わせる */
    /* ★★★ ボタン配置のため、ヘッダーの高さを確保 ★★★ */
    /* header自体のpaddingは維持しつつ、ボタンが重ならないように調整が必要かも */
    padding-top: calc(var(--panel-toggle-size) + var(--panel-toggle-margin) * 1.5); /* ボタンの下から開始 */
    padding-left: var(--panel-toggle-margin); /* 左ボタンがある場合 */
    padding-right: var(--panel-toggle-margin); /* 右ボタンがある場合 */
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
/* 右サイドバーは右ボタンなので左パディングは通常で良い */
.effects-sidebar .sidebar-header {
    padding-left: 15px; /* 元の値に戻す例 */
}
/* 左サイドバーは左ボタンなので右パディングは通常で良い */
.asset-sidebar .sidebar-header {
     padding-right: 15px; /* 元の値に戻す例 */
}


.sidebar-header h3, /* ← 削除されたので不要 */
.sidebar-header h2 {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

/* ワークスペース */
.editor-workspace {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 15px;
    background-color: #e8eaed;
}

/* リサイズハンドル */
.resize-handle {
    width: 100%;
    height: 8px;
    background-color: var(--border-color);
    cursor: ns-resize;
    position: relative;
    z-index: 10;
    touch-action: none;
    flex-shrink: 0; /* 縮まないように */
}

.resize-handle:hover,
.resize-handle.active {
    background-color: var(--primary-color);
}

.resize-handle::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 2px;
}

/* タブ */
.asset-tabs,
.effects-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}

.tab-btn {
    padding: 6px 12px;
    border-radius: 4px;
    background-color: var(--light-bg);
    font-size: 0.9rem;
}

.tab-btn.active {
    background-color: var(--primary-color);
    color: white;
}

/* 非表示クラス */
.hidden {
    display: none !important;
}

/* タイムライン */
.editor-timeline {
    height: var(--timeline-height); /* JSで制御 */
    background-color: white;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0; /* 縮まないように */
}

/* --- レスポンシブスタイル ------------------------------------- */

/* デスクトップ幅調整 (1200px未満) */
@media screen and (max-width: 1199px) {
    :root {
        --sidebar-width: 250px;
    }
}

/* --- タブレット・モバイル (991px以下) --- */
@media screen and (max-width: 991px) {
    /* ... (他のモバイルスタイル) ... */

    .asset-sidebar,
    .effects-sidebar {
        position: fixed;
        top: var(--header-height);
        height: calc(100vh - var(--header-height));
        width: var(--sidebar-width-mobile);
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        border: none;
        transition: transform var(--transition-speed) ease;
    }

    .asset-sidebar { /* 左サイドバー */
        left: 0; /* 画面左端に配置 */
        right: auto; /* right 指定を解除 */
    }
    .asset-sidebar:not(.open) {
        transform: translateX(-100%);
        width: var(--sidebar-width-mobile); /* 幅は維持 */
    }

    .effects-sidebar { /* ★★★ 右サイドバー ★★★ */
        right: 0; /* ★★★ 画面右端に配置することを明示 ★★★ */
        left: auto; /* ★★★ left 指定を確実に解除 ★★★ */
    }
    .effects-sidebar:not(.open) {
        transform: translateX(100%);
        width: var(--sidebar-width-mobile); /* 幅は維持 */
    }

    /* 開状態の transform は共通 */
    .asset-sidebar.open,
    .effects-sidebar.open {
        transform: translateX(0);
    }

}

/* デスクトップ幅調整 (1200px未満) */
@media screen and (max-width: 1199px) {
    :root {
        --sidebar-width: 250px;
    }
}

/* タブレット向け調整 (767px以下) */
@media screen and (max-width: 767px) {
    .btn-text {
        display: none; /* ヘッダーボタンのテキスト非表示 */
    }
    .logo h1 {
        font-size: 1rem;
    }
    .header-actions {
        gap: 5px;
    }
    /* ヘッダーボタンを丸くする */
    .header-actions .btn {
        padding: 8px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 0.8rem; /* アイコンサイズに影響 */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    select#user-level {
        max-width: 120px;
        font-size: 0.8rem;
    }
}

/* モバイル向け調整 (575px以下) */
@media screen and (max-width: 575px) {
     :root {
        --sidebar-width-mobile: 85%; /* モバイルでのサイドバー幅を調整 */
     }
     .header-actions {
         gap: 5px;
     }
     select#user-level {
         max-width: 90px;
         font-size: 0.7rem;
     }
}