/* --- ベース設定 --- */
* { box-sizing: border-box; }
body { font-family: sans-serif; margin: 0; padding: 20px; background: #f4f4f4; color: #333; }

/* --- ラッパー --- */
.app-container { max-width: 1200px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 20px; }

/* --- パネル共通 --- */
.content-panel { width: 100%; background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); display: flex; flex-direction: column; position: relative; }
.is-hidden { display: none !important; }

/* --- ボタン --- */
.btn-base { cursor: pointer; padding: 3px 3px; border: 1px solid #ccc; background: #eee; border-radius: 4px; font-size: 14px; transition: background 0.2s; display: inline-block; text-align: center; white-space: nowrap; }
.btn-base:hover { background: #ddd; }
.btn-base:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary { background: #007bff; color: white; border-color: #007bff; }
.btn-primary:hover { background: #0056b3; }
.btn-success { background: #28a745; color: white; border-color: #28a745; }
.btn-success:hover { background: #218838; }

/* --- ツールバー --- */
.toolbar-area { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 15px; }
.toolbar-title { margin: 0; font-size: 1.2rem; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#toggleListBtn { margin-left: auto; }

/* --- ファイル管理 --- */
.file-controls { margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.control-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px;}
.input-file { border: 1px solid #ccc; padding: 6px; border-radius: 4px; width: 100%; }
.file-list-scroll-container { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 15px; width: 100%; padding-bottom: 15px; -webkit-overflow-scrolling: touch; }
.file-list-empty { color: #666; padding: 20px; text-align: center; width: 100%; }

/* --- ファイルカード --- */
.file-card { flex: 0 0 220px; border: 1px solid #eee; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; display: flex; flex-direction: column; }
.file-card-thumb-wrapper { width: 100%; aspect-ratio: 16/9; background: #000; position: relative; }
.file-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-card-info { padding: 10px; flex-grow: 1; }
.file-card-name { font-weight: bold; font-size: 12px; margin-bottom: 4px; word-break: break-all; }
.file-card-date { color: #666; font-size: 10px; }
.file-card-actions { display: flex; border-top: 1px solid #eee; }
.file-card-btn { flex: 1; border: none; background: #f9f9f9; padding: 10px; font-size: 12px; cursor: pointer; transition: background 0.2s; }
.file-card-btn:hover { background: #e9e9e9; }
.file-card-btn-edit { color: #007bff; border-right: 1px solid #eee; }
.file-card-btn-delete { color: #dc3545; }

/* --- エディタエリア --- */
.editor-header { margin-bottom: 10px; font-weight: bold; color: #333; }
.editor-canvas { width: 100%; max-width: 100%; background: #000; display: block; margin-bottom: 10px; border: 1px solid #333; }

.editor-control-bar { display: flex; flex-direction: column; gap: 15px; background: #f9f9f9; padding: 15px; border-radius: 4px; border: 1px solid #eee; }


/* 範囲設定エリア */
.range-settings-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    align-items: center;
}
.range-group { display: flex; align-items: center; gap: 5px; }
.range-display {
    font-family: monospace;
    padding: 5px;
    border: 1px solid #ccc;
    background: #fdfdfd;
    width: 120px;
    text-align: center;
    font-size: 14px;
}

.control-buttons-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap; }
.volume-container { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #555; }
.volume-slider { width: 80px; cursor: pointer; }

.hidden-video-source { display: none; }
.file-controls {
    display: flex;          /* 横並びにする */
    align-items: center;    /* 垂直方向（上下）の中央揃え */
    gap: 10px;              /* ボタンと入力欄の間の隙間 */
}

/* 補足: 間の空のdivが邪魔ならCSSで消すか、HTMLから削除推奨 */
.control-row:empty {
    display: none;
}
/* 画面全体を覆う背景 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
    z-index: 9999; /* 最前面 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 白いボックス */
.loading-box {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 300px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* メッセージテキスト */
#loadingText {
    margin-bottom: 15px;
    font-weight: bold;
    color: #333;
}

/* 既存のCSSに追加・確認してください */
.loading-bar-bg {
    width: 100%;
    height: 10px;
    background-color: #eee;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 10px; /* テキストとの間隔 */
}

.loading-bar-fill {
    width: 0%; /* JSで動的に変更されます */
    height: 100%;
    background-color: #4caf50; /* 緑色など */
    transition: width 0.1s linear; /* スムーズに動かす */
}
/* 左右に往復するアニメーション */
@keyframes loadingMove {
    0% { left: -50%; }
    100% { left: 100%; }
}

/* シークバーコンテナのレイアウト */
/* ついでにコンテナも幅最大を保証 */
.seek-bar-container {
    width: 100%;
    box-sizing: border-box; /* パディングを含めて計算 */
}

/* シークバー本体 */
.seek-bar { width: 100%; cursor: pointer; }

#seekBar {
    flex: 1;          /* 余白を埋める */
    width: 100%;      /* これがないと伸びない場合がある */
    min-width: 0;     /* Flexbox内での幅計算バグ防止 */
    margin: 0 10px;   /* ボタンとの間に少し隙間を空ける */
    cursor: pointer;
}

/* 0.1秒送りボタン */
#btnSeekBack, #btnSeekFwd {
    white-space: nowrap; /* 文字が折り返されないようにする */
    height: 24px;        /* バーの高さに合わせる調整 */
    line-height: 1;
    font-size: 11px;
}

/* 時間表示を右上に絶対配置 */
.floating-time-display {
    position: absolute;
    right: 0;           /* 右端に合わせる */
    bottom: 100%;       /* シークバーの真上に配置 */
    margin-bottom: 2px; /* シークバーとの隙間 */
    
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    color: #333;        /* 背景色に合わせて調整してください */
    background-color: white; /* 文字が見やすいように背景を薄く入れる */
    padding: 2px 5px;
    border-radius: 4px;
    pointer-events: none; /* マウス操作を邪魔しないようにする */
    z-index: 10;
}
.floating-time-display2 {
    position: absolute;
    left: 16;           /* 右端に合わせる */
    bottom: 100%;       /* シークバーの真上に配置 */
    margin-bottom: 2px; /* シークバーとの隙間 */
    margin-bottom: -8px;
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    color: #333;        /* 背景色に合わせて調整してください */
    background-color: white; /* 文字が見やすいように背景を薄く入れる */
    padding: 2px 5px;
    border-radius: 4px;
    pointer-events: none; /* マウス操作を邪魔しないようにする */
    z-index: 10;
}
/* ------------------------------------------------------------- */
/* =======================================================
   #magPanel 修正版 (追従機能復活)
   ======================================================= */

/* =========================================
   magPanel.css - 設定パネル用スタイル
   ========================================= */

/* =========================================
   magPanel.css - 左右対応・伸縮パネル
   ========================================= */

/* 1. パネル本体 (コンテナ) */
#magPanel {
    position: fixed !important;
    top: 50%;
    transform: translateY(-20%); /* 縦位置の微調整 */
    z-index: 10000 !important;
    
    display: flex !important;
    align-items: flex-start !important; /* 上揃え */
    
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    
    /* 上下のドラッグ移動を滑らかにする */
    transition: top 0.1s ease-out;
}

/* ---------------------------------------------------
   2. 右側に配置する場合 (デフォルト / チェックなし)
   配置: [ヘッダー] [コンテンツ] | (画面端)
   --------------------------------------------------- */
#magPanel:not(.pos-left) {
    right: 0 !important;
    left: auto !important;
    
    /* ★重要: ヘッダーを左、コンテンツを右に並べる */
    flex-direction: row !important; 
}

/* 右配置時のヘッダー形状: 左側を丸くする */
#magPanel:not(.pos-left) .panel-header {
    border-radius: 8px 0 0 8px !important;
    border-right: none !important; /* コンテンツとの境界線を消す */
}


/* ---------------------------------------------------
   3. 左側に配置する場合 (チェックあり)
   配置: (画面端) | [コンテンツ] [ヘッダー]
   --------------------------------------------------- */
#magPanel.pos-left {
    left: 0 !important;
    right: auto !important;
    
    /* ★重要: コンテンツを左、ヘッダーを右に並べる (HTML順序の逆) */
    flex-direction: row-reverse !important;
}

/* 左配置時のヘッダー形状: 右側を丸くする */
#magPanel.pos-left .panel-header {
    border-radius: 0 8px 8px 0 !important;
    border-left: none !important; /* コンテンツとの境界線を消す */
}


/* ---------------------------------------------------
   4. ヘッダー (つまみ部分) 共通設定
   --------------------------------------------------- */
#magPanel .panel-header {
    writing-mode: vertical-rl; /* 縦書き */
    text-orientation: upright; /* 文字を正立 */
    
    width: 25px !important;
    min-height: 200px;
    padding: 15px 0;
    
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    
    background-color: #333;
    border: 1px solid #555;
    color: #fff !important;
    font-size: 13px;
    cursor: pointer;
    
    /* コンテンツが開閉してもヘッダー幅は固定 */
    flex-shrink: 0; 
}

#magPanel .panel-header span {
    display: inline-block;
    line-height: 1.2;
    margin-bottom: 5px;
}


/* ---------------------------------------------------
   5. コンテンツ (中身) の開閉アニメーション
   --------------------------------------------------- */
#magPanel .panel-content {
    /* 共通スタイル */
    display: block !important;
    height: auto !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    background-color: rgba(0, 0, 0, 0.9);
    border: 1px solid #555;
    
    /* アニメーション設定 (幅と不透明度でヌルっと出す) */
    transition: 
        width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        min-width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        padding 0.3s ease,
        opacity 0.3s ease;
}

/* 開いている時 (Expanded) */
#magPanel:not(.is-collapsed) .panel-content {
    width: 280px !important;
    min-width: 280px !important;
    padding: 10px !important;
    opacity: 1 !important;
}

/* 閉じている時 (Collapsed) - 画面端に隠れる */
#magPanel.is-collapsed .panel-content {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    border: none !important;
    overflow: hidden !important;
}


/* ---------------------------------------------------
   6. 矢印アイコン (▼) の向き制御
   --------------------------------------------------- */
#magPanel .toggle-btn {
    transition: transform 0.3s ease;
    background: none;
    border: none;
    color: inherit;
    font-size: 12px;
}

/* 右配置: 開いている時 (▶ が左を向くイメージで90deg) */
#magPanel:not(.pos-left) .toggle-btn { transform: rotate(90deg); }
/* 右配置: 閉じている時 (◀ が外を向く) */
#magPanel:not(.pos-left).is-collapsed .toggle-btn { transform: rotate(-90deg); }

/* 左配置: 開いている時 */
#magPanel.pos-left .toggle-btn { transform: rotate(-90deg); }
/* 左配置: 閉じている時 */
#magPanel.pos-left.is-collapsed .toggle-btn { transform: rotate(90deg); }

/* ------------------------------------------------------------- */
/* ===============================================
   フローティング コントロールバー (画面下固定)
   =============================================== */
/* コントロールバーの配置とアニメーション設定 */
/* 1. 【重要】親要素の設定 */
/* ここに overflow: hidden がないと、バーが下がった時に画面が伸びます */
#editorPanel {
    position: relative; /* 子要素(bar)の基準点にするため */
    overflow: hidden;   /* ★これが「隠す」ための最重要プロパティ */
    width: 100%;
    height: 100%;       /* 必要に応じて調整（画面いっぱいなら100%や100vh） */
}

/* 2. コントロールバーの設定 */
.editor-control-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #222;
    border-top: 1px solid #444;
    z-index: 10;
    padding-bottom: 10px;

    /* アニメーション設定 */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateY(0);

    /* バーの背景部分にカーソルを合わせたら「指」にする */
    cursor: pointer;
}

/* ▼ 隠れた状態 */
.editor-control-bar.minimized {
    /* 100%下げて、50px(シークバー分)だけ戻す */
    transform: translateY(calc(100% - 65px));
}

/* 3. カーソルと操作の挙動修正 */
/* バーの中身（ボタンや入力欄）は、親の「クリックで開閉」を邪魔しないように通常の挙動に戻す */
.editor-control-bar button,
.editor-control-bar input,
.editor-control-bar label {
    cursor: auto; /* または pointer（ボタンらしさを残すならpointer推奨） */
    pointer-events: auto; /* クリックを確実に受け付ける */
}

/* スマホ対応 */
@media (max-width: 800px) {
    .editor-control-bar {
        padding: 5px;
    }
}
/* ----- 既存のCSSに追加・修正 ----- */

/* 1. 左上のマークを作成（通常時：開いているので閉じるマーク ▼） */
.editor-control-bar::before {
    content: "▼";         /* 表示する記号 (▽ でも可) */
    position: absolute;   /* 絶対配置で左上に置く */
    top: 12px;            /* 上からの位置調整 */
    left: 8px;            /* 左からの位置調整 */
    color: #aaa;          /* マークの色（少し薄くして目立ちすぎないように） */
    font-size: 10px;      /* マークのサイズ */
    z-index: 20;          /* 他の要素より前面に */
    pointer-events: none; /* マーク自体がクリックを邪魔しないようにする */
    transition: color 0.3s, transform 0.3s; /* 色変化や回転のアニメーション用 */
}

/* ホバー時に少し強調する（任意） */
.editor-control-bar:hover::before {
    color: #fff;
}

/* 2. 閉じている状態（minimizedクラス付与時：開くマーク ▲） */
.editor-control-bar.minimized::before {
    content: "▲";         /* 表示する記号 (△ でも可) */
    /* もしくは回転で表現する場合（お好みで） */
    /* transform: rotate(180deg); */
}


/* 3. レイアウト調整（重要） */
/* マークが追加された分、中身が左端に寄りすぎないように余白を空ける */
.editor-control-bar .seek-bar-container {
    /* 既存の padding: 0 10px; を上書きして左だけ少し広げる */
    padding: 16px 10px 0 25px !important; /* 左余白を25pxに確保 */
}


/* スマホ画面などで狭い場合の調整（必要に応じて） */
@media (max-width: 600px) {
    .editor-control-bar::before {
        left: 5px; /* 左端を少し詰める */
    }
    .editor-control-bar .seek-bar-container {
        padding-left: 20px !important; /* 余白も少し詰める */
    }
}

/* ------------------------------------------------------------- */
/* 親パネルの設定 */
.panel-content {
    display: grid;
    grid-template-columns: 1fr/* 左右50%:50% の2列 */
    gap: 4px 10px;                  /* 縦4px 横10px の隙間 */
    width: 280px;                   /* 幅はお好みで調整してください */
    padding: 8px;
    background: #222;               /* 背景色 */
    color: #fff;
    box-sizing: border-box;
    font-size: 12px;
    border-radius: 4px;
}

/* 各行（label）の共通スタイル */
.panel-content .panel-row {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    /* インラインスタイルのwidthを無効化するために important を使用（必要であれば） */
    width: 100% !important; 
    max-width: none !important;
}

/* --- グリッド配置の制御 --- */

/* 1番目の要素（チェックボックス）は2列ぶち抜き */
.panel-content .panel-row:nth-child(1) {
    grid-column: 1 / -1; /* 左端から右端まで */
    margin-bottom: 2px;
}

/* 最後の要素（ボタンエリア）も2列ぶち抜き */
.panel-content .panel-buttons {
    grid-column: 1 / -1;
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

/* --- 行の中身のレイアウト --- */

/* 左側の文字（倍率、半径など） */
.panel-content .panel-row span:first-child {
    width: 32px;
    text-align: right;
    margin-right: 6px;
    white-space: nowrap;
    font-weight: bold;
    color: #ccc;
}

/* チェックボックス行のラベル調整 */
.panel-content .panel-row:nth-child(1) span {
    width: auto;
    text-align: left;
    margin-left: 5px;
}

/* スライダー */
.panel-content .panel-row input[type="range"] {
    flex: 1;       /* 幅を自動伸縮 */
    width: 0;      /* グリッド内での幅計算バグ防止 */
    cursor: pointer;
    margin: 0;
}

/* 右側の数値 */
.panel-content .panel-row span:last-child {
    width: 75px;   /* 数値が入る幅 */
    text-align: right;
    margin-left: 6px;
    font-family: monospace;
}

/* ボタンのスタイル */
.panel-content .btn-base {
    flex: 1;
    padding: 5px;
    cursor: pointer;
    font-size: 11px;
}
/* 1. スライダー（行）同士の間隔 */
.panel-content .checkbox-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* !important をつけて強制適用 */
    margin-bottom: 15px !important; 
    width: 100%; /* 横幅がいっぱいになるように念のため指定 */
}
.panel-content .panel-row {
    display: flex;         /* 行内の要素を横並びにする */
    justify-content: space-between; /* ラベルとスライダーを左右に配置（お好みで） */
    align-items: center;   /* 上下中央揃え */
    margin-bottom: 15px;   /* ★ここで「スライダーの間隔」を調整 */
}

/* 2. スライダー群とボタンの間隔 */
/* ボタンのうち、最初の1個目だけ上に隙間を作る */
.panel-content > button:first-of-type {
    margin-top: 5px;      /* ★ここで「ボタンとの間隔（縦）」を調整 */
}

/* 3. ボタン同士の間隔 */
.panel-content > button {
    margin-top: 5px;    /* ★ここで「ボタン同士の間隔（横）」を調整 */
}
/* ------------------------------------------------------------- */
#magnifierCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* マウス操作を邪魔しないようにする */
    z-index: 9999;        /* 最前面に表示 */
}
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */