/* ═══════════════════════════════════════════════════
   キャラクター設定ファイルの編集画面（presets.php）
   ═══════════════════════════════════════════════════ */

.presets-body { overflow: hidden; }

.presets-layout { display:flex; flex-direction:column; height:100vh; }

.presets-header {
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.7rem 1.2rem; background:var(--bg-secondary);
    border-bottom:1px solid var(--border); flex:0 0 auto;
}
.presets-header .header-left { display:flex; align-items:center; gap:.6rem; }
.presets-header h1 { margin:0; font-size:1.05rem; font-weight:600; color:var(--text-primary); }
.presets-header .header-right { display:flex; align-items:center; gap:.4rem; }

.presets-main { display:flex; flex:1; min-height:0; }

/* ── 左：一覧 ───────────────────────────────── */
.presets-sidebar {
    width:270px; flex:0 0 auto; overflow-y:auto;
    background:var(--bg-secondary); border-right:1px solid var(--border);
}
.preset-list-item {
    display:flex; flex-direction:column; gap:.15rem; width:100%;
    padding:.6rem .8rem; background:transparent; border:none;
    border-bottom:1px solid rgba(51,65,85,0.35);
    text-align:left; font-family:inherit; cursor:pointer;
}
.preset-list-item:hover { background:rgba(51,65,85,0.2); }
.preset-list-item.active { background:rgba(20,184,166,0.12); box-shadow:inset 3px 0 0 var(--accent-teal); }
.preset-list-name { display:flex; align-items:center; gap:.35rem; font-size:.85rem; font-weight:600; color:var(--text-primary); }
.preset-list-meta { font-size:.68rem; color:var(--text-muted); }

/* ── 右：編集 ───────────────────────────────── */
.presets-editor { flex:1; min-width:0; overflow-y:auto; padding:1rem 1.2rem; }
.presets-empty { display:flex; align-items:center; justify-content:center; }

.presets-editor-head { display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem; }
.preset-name-input {
    flex:1; min-width:0; padding:.45rem .6rem; font-size:1rem; font-weight:600;
}
.presets-editor-actions { display:flex; gap:.35rem; flex-wrap:wrap; }

/* ── 検証結果 ───────────────────────────────── */
.preset-validation { margin-bottom:.9rem; }
.preset-valid-ok {
    padding:.45rem .7rem; background:rgba(20,184,166,0.1);
    border-radius:var(--radius); font-size:.8rem; color:var(--accent-teal);
}
.preset-valid-warn {
    padding:.5rem .7rem; background:rgba(245,158,11,0.1);
    border-radius:var(--radius); font-size:.8rem; color:var(--accent-amber); line-height:1.7;
}
.preset-valid-warn ul { margin:.3rem 0 .3rem 1.1rem; padding:0; }
.preset-valid-warn p { margin:.3rem 0 0; }

.preset-placeholders { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.4rem; }
.preset-ph {
    padding:.1rem .4rem; background:rgba(20,184,166,0.1); border-radius:4px;
    font-size:.68rem; color:var(--accent-teal);
}
.preset-ph.is-missing { background:rgba(51,65,85,0.35); color:var(--text-muted); }

/* ── 既定 switch ────────────────────────────── */
.preset-switch-row { display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:.8rem; }
.preset-switch-row label { display:flex; flex-direction:column; gap:.2rem; font-size:.7rem; color:var(--text-muted); }
.preset-switch-row select { min-width:9rem; }

/* ── 生成パラメータ ─────────────────────────── */
.preset-params { margin-bottom:.9rem; border:1px solid var(--border); border-radius:var(--radius); }
.preset-params > summary { padding:.5rem .7rem; font-size:.8rem; color:var(--text-secondary); cursor:pointer; }
.preset-params[open] > summary { border-bottom:1px solid var(--border); }
.preset-params-grid {
    display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
    gap:.5rem; padding:.7rem;
}
.preset-params-grid label { display:flex; flex-direction:column; gap:.2rem; font-size:.68rem; color:var(--text-muted); }
.preset-adetailer { display:flex; align-items:center; gap:.6rem; padding:0 .7rem .7rem; font-size:.75rem; color:var(--text-secondary); }
.preset-adetailer label { display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; cursor:pointer; }
.preset-adetailer input[type=text] { flex:1; min-width:0; }

/* ── source_text 本体 ───────────────────────── */
.preset-source { margin-bottom:.9rem; }
.preset-source-head { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin-bottom:.3rem; }
.preset-source-body {
    display:flex; border:1px solid var(--border); border-radius:var(--radius);
    background:var(--bg-tertiary); overflow:hidden;
}
.preset-gutter {
    flex:0 0 auto; margin:0; padding:.6rem .5rem; overflow:hidden;
    background:var(--bg-secondary); border-right:1px solid var(--border);
    font-family: ui-monospace, Consolas, monospace; font-size:.74rem; line-height:1.6;
    color:var(--text-muted); text-align:right; user-select:none; min-width:2.8rem;
}
.preset-textarea {
    flex:1; min-width:0; min-height:26rem; padding:.6rem .7rem;
    background:transparent; border:none; resize:vertical;
    font-family: ui-monospace, Consolas, monospace; font-size:.74rem; line-height:1.6;
    color:var(--text-primary); white-space:pre; overflow:auto;
}
.preset-textarea:focus { outline:none; }

/* ── プレビュー ─────────────────────────────── */
.preset-preview { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:2rem; }
.preset-preview > summary { padding:.5rem .7rem; font-size:.8rem; color:var(--text-secondary); cursor:pointer; }
.preset-preview[open] > summary { border-bottom:1px solid var(--border); }
.preset-preview > p { margin:.6rem .7rem 0; }
.preset-preview-row { display:flex; align-items:flex-end; gap:.5rem; padding:.6rem .7rem; }
.preset-preview-row label { display:flex; flex-direction:column; gap:.2rem; font-size:.68rem; color:var(--text-muted); }
.preset-preview-row input { width:8rem; }
.preset-preview-result { padding:0 .7rem .7rem; }
.preset-preview-switches { margin-bottom:.5rem; font-size:.75rem; color:var(--accent-teal); }
.preset-preview-block { margin-bottom:.6rem; }
.preset-preview-label {
    display:flex; align-items:center; gap:.4rem; margin-bottom:.2rem;
    font-size:.65rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px;
}
.preset-preview-block code {
    display:block; padding:.5rem .6rem; background:var(--bg-tertiary);
    border:1px solid var(--border); border-radius:var(--radius);
    font-size:.7rem; line-height:1.7; color:var(--text-secondary); word-break:break-word;
}

@media (max-width: 900px) {
    .presets-main { flex-direction:column; }
    .presets-sidebar { width:100%; max-height:11rem; border-right:none; border-bottom:1px solid var(--border); }
    .preset-params-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
}