/* ============================================================
   style-markers.css
   マーカー機能のUI：波形上のピン(.vbar-line/.vbar-label)は共通土台側にあるが、
   マーカー一覧(#pinList/.pinItem)・編集ボタン・カラーピッカー
   (.marker-color-popup等)・削除確認アニメーションはこちら。
   ============================================================ */

#pinList {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: visible;
  max-height: none;
  padding-right: 0;
  flex: none;
}

.pinItem {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  min-height: 50px;
  box-sizing: border-box;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  font-size: 13px;
  transition: background 0.2s;
}

.pinItem:last-child {
  border-bottom: none;
}

.pinItem:hover {
  background: rgba(255, 255, 255, 0.03);
}

.pinItem.disabled {
  opacity: 0.4;
}
.pinItem.disabled .pin-info {
  text-decoration: line-through;
}

.pinItem .pin-info {
  font-family: var(--font-display, 'Instrument Sans'), sans-serif;
  font-size: 15px;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-weight: 500;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ラベル行：pin-info(テキスト)とpin-edit-btn(鉛筆)をまとめる。行に
   マウスを乗せた時だけ鉛筆を出す（Libraryパネルの.playlist-title-row
   等と同じパターン）。min-widthを0にしてgridの1frセル内でちゃんと
   縮められるようにし、pin-infoのellipsisも機能させる。 */
.pin-label-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  /* 鉛筆ボタン(30px)の出現/消失で行の高さが変わらないよう固定
     （Libraryパネルの.playlist-title-row等と同じ対策）。 */
  min-height: 30px;
}

.pin-label-row .pin-info {
  flex: 1;
  min-width: 0;
}

.pin-edit-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  color: var(--icon-muted);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-snap), color var(--dur-hover) var(--ease-snap);
}

.pin-label-row:hover .pin-edit-btn {
  display: flex;
}

.pin-edit-btn:hover {
  background: var(--bg-hover-subtle);
  color: var(--text-bright);
}

.pin-edit-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* マーカーリスト左端の色の目印。クリックするとカラーパレットが開く（選択色または未設定時はグレー）。
   ボタン要素だが枠線・パディングをリセットして丸いドットだけの見た目にする。 */
.pin-color-mark {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  padding: 0;
  border: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: transform var(--dur-hover) var(--ease-snap), box-shadow var(--dur-hover) var(--ease-snap);
}

.pin-color-mark:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* マーカー色選択のポップアップ。カラースウォッチをグリッドで並べる。 */
.marker-color-popup {
  z-index: 500;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 12px;
  background: #16161b;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.marker-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform var(--dur-hover) var(--ease-snap), border-color var(--dur-hover) var(--ease-snap);
}

.marker-color-swatch:hover {
  transform: scale(1.12);
}

.marker-color-swatch.active {
  border-color: var(--text-pure-white);
}

.marker-color-swatch.marker-color-none {
  background: #2a2a35;
  position: relative;
}

.marker-color-swatch.marker-color-none::before,
.marker-color-swatch.marker-color-none::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: var(--icon-muted);
  transform-origin: center;
}

.marker-color-swatch.marker-color-none::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.marker-color-swatch.marker-color-none::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.pin-memo-input {
  font-family: var(--font-display, 'Instrument Sans'), sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-bright);
  background: #14141a;
  border: 1px solid var(--accent-primary);
  border-radius: 6px;
  padding: 5px 8px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}

/* メモ編集中に出すクイック選択プリセット。.pinItemはgrid構造のため、
   grid-column: 1 / -1で全列にまたがる形にし、既存のgrid配置(色マーク・
   本文・編集・トグル・削除の5列)を崩さない新しい行として追加する。 */
.pin-memo-presets {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.pin-memo-preset-chip {
  font-family: var(--font-body, 'Instrument Sans'), sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--icon-muted);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 4px 9px;
  cursor: pointer;
}

.pin-memo-preset-chip:hover {
  color: var(--text-bright);
  border-color: var(--accent-primary);
}

.pinItem button {
  font-family: var(--font-display, 'Instrument Sans'), sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;
  padding: 7px;
  cursor: pointer;
  background: none;
  color: var(--text-pure-white);
  border: none;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.2s;
  text-align: center;
}

.pinItem .toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  padding: 0;
}

.pinItem .toggle-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* 表示/非表示の状態はテーマカラーで目立たせず、ほんのりグレーで
   統一する。ON/OFFの区別はアイコン形状(目が開いている/閉じている)自体で
   伝わるため、色分けは不要。ホバー時は下部コントロール(LOOP/REPEAT等)と
   同じ挙動(var(--icon-muted)→var(--text-bright)の白)に揃える。 */
.pinItem:not(.disabled) .toggle-btn {
  color: var(--icon-muted);
  transition: color var(--dur-hover) var(--ease-snap);
}

.pinItem:not(.disabled) .toggle-btn:hover {
  color: var(--text-bright);
}

.pinItem.disabled .toggle-btn {
  color: #55555f;
}

.pinItem button:hover {
  background: var(--bg-hover-subtle);
}

/* .pinItem button { padding: 5px 10px; border-radius: 6px; }（汎用ボタン
   スタイル、CSS記述順で.pin-color-markより後にあるため上書きしてしまう）
   が、色ドット(.pin-color-mark)を角丸長方形に潰していたのを正円に戻す。 */
.pinItem .pin-color-mark {
  padding: 0;
  border-radius: 50%;
}

/* プレイリストのON/OFFボタン（マーカーのtoggle-btnと同じデザイン） */
.playlistItem .toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.playlistItem .toggle-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.playlistItem .toggle-btn:hover {
  background: var(--bg-hover-subtle);
}

.playlistItem:not(.disabled) .toggle-btn {
  color: var(--icon-muted);
}

.playlistItem.disabled .toggle-btn {
  color: #55555f;
}

.del-btn {
  transition: background var(--dur-press) var(--ease-snap), color var(--dur-press) var(--ease-snap), transform var(--dur-press) var(--ease-snap);
}

.del-btn.confirm {
  background: var(--danger) !important;
  color: var(--text-pure-white) !important;
  border-color: var(--danger) !important;
  animation: delConfirmPulse 0.9s var(--ease-snap) infinite;
}

@keyframes delConfirmPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}