/*
 * ui-components.css — komapos UI担当専用 / コンポーネントスタイル
 * ⚠️ AI・バックエンド担当者: 編集禁止
 */

/* 長押しボタン — JS: ui-core.js の initHoldButton() と連携 */
.btn-hold-action {
  position: relative; overflow: hidden; cursor: pointer;
  user-select: none; -webkit-user-select: none;
  --hold-progress: 0%;
  transition: transform var(--ui-dur-fast, 150ms) ease,
              box-shadow var(--ui-dur-fast, 150ms) ease;
}
.btn-hold-action::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  height: 4px; width: var(--hold-progress);
  background: var(--ui-accent, #6C63FF);
  border-radius: 0 2px 2px 0; transition: width 50ms linear;
}
.btn-hold-action.holding {
  transform: scale(0.97);
  box-shadow: 0 0 0 3px rgba(108,99,255,0.3);
}
.btn-hold-action.danger::after  { background: var(--ui-danger, #FF4757); }
.btn-hold-action.danger.holding { box-shadow: 0 0 0 3px rgba(255,71,87,0.3); }

/* フェードイン — JS: ui-animations.js の initFadeIn() と連携 */
[data-ui-fadein] {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--ui-dur-normal, 300ms) ease,
              transform var(--ui-dur-normal, 300ms) ease;
}
[data-ui-fadein].ui-visible { opacity: 1; transform: translateY(0); }

/* ページ遷移 */
body { transition: opacity var(--ui-dur-normal, 300ms) ease; }
body.page-exit { opacity: 0; }

/* トースト通知 */
.ui-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  padding: 12px 24px; border-radius: var(--ui-radius-md, 16px);
  background: #1e1e2e; color: #fff; font-size: 14px;
  box-shadow: var(--ui-shadow-float); z-index: 9999;
  opacity: 0; pointer-events: none; white-space: nowrap;
  transition: opacity var(--ui-dur-normal, 300ms) ease,
              transform var(--ui-dur-normal, 300ms) ease;
}
.ui-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.ui-toast--success { border-left: 4px solid var(--ui-success, #2ED573); }
.ui-toast--danger  { border-left: 4px solid var(--ui-danger, #FF4757); }
.ui-toast--warning { border-left: 4px solid var(--ui-warning, #FFA502); }