body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; margin:0; background:#f6f7fb; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:#fff; border-bottom:1px solid #e7e7ef; position:sticky; top:0; z-index:10; }
.topbar-left { display:flex; gap:12px; align-items:center; }
.topbar-right { display:flex; gap:10px; align-items:center; }
.device { display:flex; gap:6px; align-items:center; }
.device label { font-size:12px; color:#666; }

.layout { display:grid; grid-template-columns: 2fr 1fr; gap:12px; padding:12px; }
.left { display:grid; grid-template-rows: 3fr 1fr; gap:12px; min-height: calc(100vh - 70px); }
.panel { background:#fff; border:1px solid #e7e7ef; border-radius:12px; padding:12px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.wave { height: 220px; border:1px dashed #d9d9e6; border-radius:10px; margin:10px 0; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.between { justify-content:space-between; }
.muted { color:#666; font-size:13px; }
.error { background:#ffecec; color:#a40000; padding:8px 10px; border-radius:8px; margin-bottom:10px; }

button { padding:10px 14px; border-radius:10px; border:1px solid #d9d9e6; background:#111827; color:#fff; cursor:pointer; }
button.secondary { background:#fff; color:#111827; }
button:disabled { opacity:0.5; cursor:not-allowed; }

.job { margin-top:8px; }
.progress { width: 260px; height: 10px; border-radius:999px; background:#eee; overflow:hidden; }
.bar { height:100%; background:#111827; transition: width 0.2s ease; }
.btnlink { display:inline-block; padding:8px 10px; border:1px solid #d9d9e6; border-radius:10px; background:#fff; color:#111827; text-decoration:none; }

.center { display:flex; align-items:center; justify-content:center; height:100vh; }
.card { width:360px; background:#fff; padding:16px; border-radius:12px; border:1px solid #e7e7ef; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.card input { width:100%; padding:10px; border-radius:10px; border:1px solid #d9d9e6; margin-bottom:10px; }

/* =========================================================
   v4: 画面全体はスクロール禁止（固定表示）
       既存のGridレイアウト(.layout 2:1, .left 上下)は維持したまま
       履歴(#history)など「内部だけ」スクロールさせる
   ========================================================= */

/* ページ全体はスクロールしない */
html, body {
  height: 100%;
  overflow: hidden;
}
body { margin: 0; }

/* 画面本体（topbar の下）を固定高さにして、はみ出しは内部へ */
.layout {
  height: calc(100vh - 70px); /* 既存CSSの想定(topbar分)に合わせる */
  overflow: hidden;           /* 画面全体スクロールを発生させない */
}

/* 左側（録音/合成）を「必ず画面内」に収める */
.left {
  height: 100%;
  min-height: 0;              /* 子の縮みを許可（超重要） */
  grid-template-rows: 1fr 1fr;/* 録音領域 : 合成領域 = 1:1 */
}

/* 左側パネル（上下）も縮められるように */
.left > .panel {
  min-height: 0;
}

/* 右側（履歴）も画面内に収めて、内部だけスクロール */
.right {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 右側パネルを伸ばす（履歴コンテナ） */
.right > .panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 履歴は「残り高さ」を使い切ってここだけスクロール */
#history {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-height: none; /* v2 の max-height を解除 */
}

/* =========================================================
   親（口真似）/ 子（合成音）の色分け（復活）
   ========================================================= */
.hist-recording {
  background: rgba(59, 130, 246, 0.06);       /* 青系 */
  border-left: 4px solid rgba(59, 130, 246, 0.55);
}

.hist-synth {
  background: rgba(34, 197, 94, 0.08);        /* 緑系 */
  border-left: 4px solid rgba(34, 197, 94, 0.55);
  padding-left: 10px;
  margin-left: 12px;
  border-radius: 8px;
}



/* Additions for inline rename */
.editable-name {
  cursor: pointer;
  border-bottom: 1px dotted rgba(0,0,0,0.25);
}
.editable-name:hover {
  border-bottom-color: rgba(0,0,0,0.55);
}
.inline-edit {
  font: inherit;
  padding: 2px 6px;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 8px;
  min-width: 220px;
}
.inline-edit:focus {
  outline: none;
  border-color: rgba(0,0,0,0.45);
}
.small { font-size: 0.85em; }



/* History pagination controls */
.select {
  padding: 6px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: #fff;
}
.select.small { padding: 4px 8px; font-size: 0.95em; }

.sep { width: 10px; display: inline-block; }

.pager {
  margin: 6px 0 10px 0;
}
.pager .small {
  font-size: 0.95em;
}