/*
 * ===============================================
 *
 * RAMAA Engine (Real-time Animated Media Application Apparatus)
 * by Gounbeee 2021 - 2026
 *
 * License ： CC BY-NC-SA (Attribution-NonCommercial-ShareAlike)
 *
 * このプロジェクトは、Gounbeeeから作成され、個人的な利用、改変が可能です。
 * 改変時、このライセンス表記を残す義務があり、改変後の作成物が本ソフトと同じライセンスを継承します。
 *
 * ===============================================
 */

/* =====================================================================
   Animation Editor
   Layers / Attributes パネルと同じダークテーマ（After Effects風）
   ===================================================================== */

.bl_animManager_btn {

  display: inline-block;
  padding: 3px 13px;
  font-size: 1.2em;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #ed91b0;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px #cf7a3a;
  font-family: 'nsjp';


}


.bl_animManager_btn:hover {background-color: #e0b3c8}

.bl_animManager_btn:active {
  background-color: #e0b3c8;
  box-shadow: 0 5px #8a4a2e;
  transform: translateY(2px);
}

.bl_animManager_wrapper {

}




.bl_animManager {
  background: rgba(32, 28, 23, 0.97);
  border: 1px solid #6b6152;
  border-radius: 8px;
  overflow-y: auto;
  user-select: none;
  font-family: 'nsjp', sans-serif;
  color: #d8cbb8;

}


/* < ヘッダー（タイトル ＋ ツールバー） >
   3行構成：
     1行目 .bl_animEditor_headerRow          … タイトルのみ
     2行目 .bl_animEditor_headerRow__tail    … モード切替 ＋ Fold/Unfold ＋ CLOSE
     3行目 .bl_animEditor_toolRow            … キーフレーム操作ツール群 */
.bl_animEditor_header {

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 6px 10px;
  background: #57503f;
  border-bottom: 1px solid #6b6152;
  position: sticky;
  top: 0;
  z-index: 2;

}

.bl_animEditor_headerRow {

  display: flex;
  align-items: center;
  flex-wrap: wrap;                 /* 幅が足りないときは畳んで右へはみ出させない */
  gap: 8px;
  min-width: 0;

}

/* 2行目：左＝モード切替、右＝Fold/Unfold ＋ CLOSE。
   4つのボタンを1行に収めるため、モード切替のあとを auto マージンで押し出す。 */
.bl_animEditor_headerRow__tail > .bl_animEditor_foldBtn {

  margin-left: auto;

}

.bl_animEditor_toolRow {

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;

}

.bl_animEditor_toolRow__folded {

  display: none;

}

.bl_animEditor_foldBtn {

  min-width: 4.5em;

}

.bl_animEditor_title {

  flex: 1 1 auto;
  min-width: 0;                  /* flex内で省略記号が効くように縮小を許可 */
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #d8cbb8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

.bl_animEditor_easelabel {

  font-size: 11px;
  color: #a99e88;
  letter-spacing: 0.05em;

}

.bl_animEditor_ease {

  background: #201c17;
  color: #d8cbb8;
  border: 1px solid #5a5142;
  border-radius: 4px;
  font-family: 'nsjp', sans-serif;
  font-size: 12px;
  padding: 2px 4px;
  outline: none;
  cursor: pointer;

}

.bl_animEditor_btn {

  outline: none;
  border: 1px solid #5a5142;
  border-radius: 4px;
  cursor: pointer;
  background-color: #3a332b;
  color: #d8cbb8;
  font-size: 12px;
  font-weight: 700;
  font-family: 'nsjp', sans-serif;
  padding: 4px 10px;
  white-space: nowrap;

}

.bl_animEditor_btn:hover {

  border-color: #e1813a;
  color: #f0b070;

}

.bl_animEditor_close {

  color: #d9705e;

}

.bl_animEditor_close:hover {

  border-color: #d9705e;
  color: #f0a595;

}


/* 旧削除ボタンのクラス（互換のため残置。見た目はbl_animEditor_btnが優先） */
.bl_animManager_delKeys_btn {

  color: #d9705e;

}

.bl_animManager_delKeys_btn:hover {

  border-color: #d9705e;
  color: #f0a595;

}

/* モード切替（Dope Sheet / Graph Editor） */
.bl_animEditor_modeGroup {
  display: flex;
  background: #201c17;
  border: 1px solid #5a5142;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 4px;
}

.bl_animEditor_modeBtn {
  background: transparent;
  border: none;
  color: #a99e88;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  cursor: pointer;
  font-family: 'nsjp', sans-serif;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.bl_animEditor_modeBtn:hover {
  color: #d8cbb8;
  background: rgba(255, 255, 255, 0.05);
}

/* 選択中のモードは「明るい下地に黒い文字」。
   非選択（暗い下地に明るい文字）との明暗を反転させることで、
   いまどちらを見ているのかが一目で分かるようにしている。 */
.bl_animEditor_modeBtn__active {
  background: #d8cbb8;
  color: #1a1512;
  font-weight: 700;
}

.bl_animEditor_modeBtn__active:hover {
  background: #efe4d2;
  color: #1a1512;
}

/* ズーム倍率の表示 ＆ 全体表示へ戻すボタン */
.bl_animEditor_zoomBtn {
  font-variant-numeric: tabular-nums;   /* 倍率が変わっても幅が踊らない */
  min-width: 6em;
}

/* 値編集バー (Value Inspector)
   Animation Editor の外（body直下）へ出し、画面上部にフロートさせる。
   エディタ内に置くとキーフレーム表示と一緒にスクロールして隠れてしまうため。
   上部メニューバー（高さ32px / z-index:10）の直下に重ならないよう配置する。 */
.bl_animEditor_inspector {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 7px 14px;
  background: rgba(43, 37, 31, 0.97);
  border: 1px solid #6b6152;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  font-family: 'nsjp', sans-serif;
  font-size: 12px;
  color: #d8cbb8;
  user-select: none;
  /* content-box のままだと width 指定に padding＋border が上乗せされ、
     モバイルで指定幅より約21px広くなって右端が画面外へ出る */
  box-sizing: border-box;

  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 92vw;
  max-height: 40vh;
  overflow-y: auto;
  /* Attributesパネル(z:11)より前面。モバイルのシート(9500)より前面にする */
  z-index: 9600;
}

.bl_animEditor_inspTitle {
  font-weight: bold;
  color: #f0b070;
  margin-right: 4px;
}

/* 複数選択バッジ（何個のキーフレームを選んでいるか） */
.bl_animEditor_inspCount {
  display: inline-flex;
  align-items: center;
  background: #e1813a;
  color: #201c17;
  font-weight: bold;
  font-size: 11px;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

/* 「時間は一括／値は代表キーのみ」の補足 */
.bl_animEditor_inspNote {
  color: #a99e88;
  font-size: 10px;
  white-space: nowrap;
}

.bl_animEditor_inspItem {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bl_animEditor_inspLabel {
  color: #a99e88;
  font-size: 11px;
}

.bl_animEditor_inspInput {
  background: #181512;
  border: 1px solid #5a5142;
  border-radius: 3px;
  color: #ffffff;
  padding: 2px 6px;
  font-size: 12px;
  width: 60px;
  outline: none;
}

.bl_animEditor_inspInput:focus {
  border-color: #e1813a;
}

.bl_animEditor_nudgeBtn {
  background: #3a332b;
  border: 1px solid #5a5142;
  border-radius: 3px;
  color: #d8cbb8;
  font-size: 11px;
  padding: 2px 6px;
  cursor: pointer;
  user-select: none;
}

.bl_animEditor_nudgeBtn:active {
  background: #5a5142;
  color: #ffffff;
}

/* Dope Sheet 行のゼブラ背景（AE風・視認性向上） */
.bl_animEditor_rowStripe {
  fill: rgba(255, 255, 255, 0.035);
  pointer-events: none;
}

/* ドープシートの時間目盛り（ズーム時に現在位置を見失わないための縦線） */
.bl_animEditor_timeTick {
  stroke: #4a4235;
  stroke-width: 1px;
  stroke-dasharray: 2 4;
}

.bl_animEditor_timeTickLabel {
  fill: #8d8371;
  font-size: 10px;
}

/* Graph Editor スタイル */
.bl_animEditor_graphBg {
  fill: #1a1713;
}

.bl_animEditor_graphGrid {
  stroke: #2e2820;
  stroke-dasharray: 2 2;
  stroke-width: 1px;
}

.bl_animEditor_graphAxis {
  stroke: #4a4235;
  stroke-width: 1.5px;
}

.bl_animEditor_graphCurve {
  fill: none;
  stroke: #00f0ff;
  stroke-width: 2px;
}

.bl_animEditor_graphNode {
  cursor: pointer;
  transition: transform 0.1s ease;
}

.bl_animEditor_graphNode:hover {
  filter: drop-shadow(0 0 4px #00f0ff);
}


.ly_animManager_btn {
  margin-top: 1em;
  padding: 1em;

}


.ly_animManager_wrapper {
  width: 100%;
  height: 100%;
}


.ly_animManager {
  margin:  5% 5% 25% 10%;
  position: absolute;
  top: 3em;
  width: 60%;
  height: 50%;
  /* オブジェクトのBoundingBox（TransformBox: z-index 8）より上、
     メインメニュー（z:10）・Attributesパネル（z:11）より下に描画する */
  z-index: 9;
}


.ly_animManager_delKeys_btn {

}