/*
 * SF*コンポーネント共通スタイル
 * hover, active 等の動的状態は CSS の :pseudo class で管理し、
 * Dart 側は class とコンテンツのみに集中させる。
 */

/* ─── 共通: 押下時の scale アニメ (Flutter の AnimatedScale 相当) ─── */
.sf-pressable {
  transition: transform 120ms ease-out;
  transform-origin: center;
}
.sf-pressable:active {
  transform: scale(1.15);
}

/* ─── SfIconButton: 円形 + 影 ─── */
.sf-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sf-button-bg-primary);
  border: 1px solid var(--sf-button-border-primary);
  box-shadow: 0 0 8px var(--sf-shadow-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.sf-icon-button img,
.sf-icon-button svg {
  width: 18px;
  height: 18px;
}
.sf-icon-button[data-icon-mask] {
  background-color: var(--sf-text-primary);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 18px 18px;
          mask-size: 18px 18px;
}

/* ─── SfAvatarButton: 円形アバター画像 (SfIconButton と同サイズ) ─── */
.sf-avatar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--sf-button-bg-primary);
  border: 1px solid var(--sf-button-border-primary);
  box-shadow: 0 0 8px var(--sf-shadow-primary);
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
}

/* ─── SfTextButton: Stadium ─── */
.sf-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--sf-margin-l);
  border-radius: 9999px;
  border: 1px solid var(--sf-button-border-primary);
  background: var(--sf-surface-primary);
  cursor: pointer;
  white-space: nowrap;
}
.sf-text-button.has-shadow {
  box-shadow: 0 0 8px var(--sf-shadow-primary);
}

/* ─── SfIconTextButton ─── */
.sf-icon-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sf-margin-s);
  min-height: 48px;
  padding: 0 var(--sf-margin-xl);
  border-radius: 9999px;
  background: var(--sf-button-bg-primary);
  border: 1px solid var(--sf-button-border-primary);
  box-shadow: 0 0 8px var(--sf-shadow-primary);
  cursor: pointer;
}

/* ─── SfCard (Flutter EdgeInsets.symmetric(horizontal: SfMargin.l) 互換) ─── */
.sf-card {
  background: var(--sf-surface-primary);
  border-radius: 16px;
  padding: 0 var(--sf-margin-l);
}
.sf-card.has-shadow {
  box-shadow: 0 2px 16px var(--sf-shadow-primary);
}

/* ─── SfIconButtonList ─── */
.sf-icon-button-list {
  display: inline-flex;
  align-items: center;
  background: var(--sf-button-bg-primary);
  border-radius: 24px;
  border: 1px solid var(--sf-button-border-primary);
}
.sf-icon-button-list > button {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
}

/* ─── SfSelectableChip (Material 3 Chip 互換) ─── */
.sf-selectable-chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--sf-button-border-primary);
  background: var(--sf-surface-primary);
  color: var(--sf-text-primary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}
.sf-selectable-chip.selected {
  background: var(--sf-text-primary);
  color: var(--sf-text-tertiary);
  border-color: transparent;
}

/* ─── SfDeletableChip (Material 3 Chip 互換) ─── */
.sf-deletable-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--sf-button-border-primary);
  background: var(--sf-surface-primary);
  color: var(--sf-text-primary);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}
.sf-deletable-chip:has(.sf-deletable-chip__delete) {
  padding: 0 4px 0 12px;
}
.sf-deletable-chip .sf-deletable-chip__delete {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: var(--sf-text-secondary);
}
.sf-deletable-chip .sf-deletable-chip__delete::before {
  content: '×';
  font-size: 14px;
  line-height: 1;
}

/* ─── SfSegmentedButton (Flutter M3 風 + selected pill) ─── */
.sf-segmented {
  display: flex;
  width: 100%;
  height: 40px;
  padding: 3px;
  border-radius: 9999px;
  border: 1px solid var(--sf-border-secondary);
  background: transparent;
  gap: 2px;
  box-sizing: border-box;
}
.sf-segmented__seg {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sf-margin-s);
  gap: var(--sf-margin-xs);
  background: transparent;
  color: var(--sf-text-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 0;
  border-radius: 9999px;
  transition: background-color 200ms ease-out;
}
.sf-segmented__seg.selected {
  background: var(--sf-surface-secondary);
}

/* ─── SfCell (テキスト/フォーム/ドロップダウン) ─── */
.sf-cell {
  display: flex;
  align-items: center;
  gap: var(--sf-margin-m);
  height: 50px;
}
.sf-cell__label {
  font-size: 14px;
  color: var(--sf-text-secondary);
  line-height: 1;
}
.sf-cell__value {
  font-size: 18px;
  color: var(--sf-text-primary);
  text-align: right;
  flex: 1;
}
.sf-cell__input {
  flex: 1;
  text-align: right;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 18px;
  color: var(--sf-text-primary);
}
/* number 入力のスピナー矢印を消す (Flutter の TextFormField 挙動に合わせる) */
.sf-cell__input::-webkit-outer-spin-button,
.sf-cell__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sf-cell__input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.sf-cell__select {
  flex: 1;
  text-align: right;
  /* <select> は text-align だけでは効かないので text-align-last も指定 */
  text-align-last: right;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 18px;
  color: var(--sf-text-primary);
  appearance: none;
  -webkit-appearance: none;
}

/* ─── SfDialog ─── */
.sf-dialog::backdrop {
  background: var(--sf-barrier-primary);
}
.sf-dialog {
  border: 1px solid var(--sf-border-secondary);
  padding: 0;
  max-width: 90vw;
  background: var(--sf-surface-primary);
  border-radius: 16px;
  color: var(--sf-text-primary);
  box-shadow: 0 8px 24px var(--sf-shadow-primary);
}
.sf-dialog__body {
  padding: var(--sf-margin-xl);
}
.sf-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sf-margin-s);
  padding: 0 var(--sf-margin-l) var(--sf-margin-l);
}

/* ─── ThinScrollbar (scroll 中のみ細い thumb を表示) ─── */
.sf-thin-scrollbar {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 200ms ease-out;
}
.sf-thin-scrollbar.is-scrolling,
.sf-thin-scrollbar:hover {
  scrollbar-color: var(--sf-button-border-primary) transparent;
}
/* WebKit */
.sf-thin-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.sf-thin-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.sf-thin-scrollbar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: background-color 200ms ease-out;
}
.sf-thin-scrollbar.is-scrolling::-webkit-scrollbar-thumb,
.sf-thin-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: var(--sf-button-border-primary);
}

/* ─── モバイル UI ルート ─── */
/* MobileMainLayout の最外側。viewport にぴったり収め、body 側にスクロールを
   発生させない。iOS Safari の URL バー伸縮には 100dvh で追従する。 */
.sf-mobile-root {
  position: relative;
  height: 100vh;
  height: 100dvh;
  /* drawer / scrim をネガティブ inset で SafeArea 領域まで拡張するため
     overflow: visible。 main 側の overflow 制御は `.sf-mobile-inner` 側に
     委ねる。 */
  overflow: visible;
}

/* MobileMainLayout の内側 flex column。下端は safe-area-inset-bottom 分の
   余白を確保し、ホームインジケータ / Safari 下部ツールバーを避ける。 */
.sf-mobile-inner {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--sf-bg-primary);
  /* sf-mobile-root の overflow: visible 化に伴い、 main 内部の overflow を
     ここで抑える。 */
  overflow: hidden;
}

/* ─── MobileTopPlayer (YT.Player は元の div を iframe に置換するため、
   id 経由でサイズ指定を CSS にも持たせる) ─── */
#mobile-top-yt-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ─── MobilePortraitOnlyNotice (横向き検出時の案内画面) ─── */
.sf-portrait-only-notice {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sf-margin-xl);
  box-sizing: border-box;
  text-align: center;
  color: var(--sf-text-primary);
  background: var(--sf-bg-primary);
  white-space: pre-line;
}

/* ─── SfDrawer ─── */
/* `.sf-mobile-root` (position: relative; height: 100dvh) を Containing Block
   とする `position: absolute` で配置し、 main 画面と同じ親に属させる。
   こうすることで body bounce 時に drawer / scrim / main 画面が一緒に動き、
   ドロワー開閉が main の表示位置に副作用を出さない。
   ネガティブ inset (top/bottom) で SafeArea 領域 (ノッチ / ホームインジケータ
   裏) まで box を拡張し、 drawer の薄い黒で SafeArea ごと覆う。 */
.sf-drawer {
  position: absolute;
  top: calc(-1 * env(safe-area-inset-top));
  bottom: calc(-1 * env(safe-area-inset-bottom));
  left: 0;
  width: min(320px, 80vw);
  background: var(--sf-surface-primary);
  transform: translateX(-100%);
  transition: transform 220ms ease-out;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sf-drawer.open {
  transform: translateX(0);
}
.sf-drawer__scrim {
  position: absolute;
  top: calc(-1 * env(safe-area-inset-top));
  bottom: calc(-1 * env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  background: var(--sf-barrier-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease-out;
  z-index: 99;
}
.sf-drawer__scrim.open {
  opacity: 1;
  pointer-events: auto;
}

/* ─── SfRangeSlider ─── */
.sf-range-slider {
  position: relative;
  width: 188px;
  height: 32px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.sf-range-slider input[type="range"] {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 4px;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
  margin: 0;
}
.sf-range-slider input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sf-slider-thumb);
  border: 0;
  cursor: pointer;
}
.sf-range-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sf-slider-thumb);
  border: 0;
  cursor: pointer;
}
.sf-range-slider__track {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--sf-slider-inactive);
  border-radius: 3px;
}
.sf-range-slider__track-active {
  position: absolute;
  height: 6px;
  background: var(--sf-slider-active);
  border-radius: 3px;
}
.sf-range-slider__tick {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.sf-range-slider__balloon {
  position: absolute;
  bottom: 100%;
  transform: translate(-50%, -6px);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sf-slider-thumb);
  color: var(--sf-text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease-out;
  z-index: 2;
}
.sf-range-slider.is-dragging .sf-range-slider__balloon {
  opacity: 1;
}

/* ─── ComboPostPage: 動画選択カードの ×ボタン ─── */
.sf-combo-post__remove-video {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--sf-text-secondary);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.sf-combo-post__remove-video:hover {
  background: var(--sf-surface-secondary);
}

/* ─── ComboPostPage: 選択 Move チップのスライドイン ─── */
@keyframes sf-chip-enter {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 削除時の縮小フェードアウト。隣の chip が gap 分詰まるよう、
   max-width / margin もアニメーションする。 */
@keyframes sf-chip-leave {
  from {
    opacity: 1;
    transform: scale(1);
    max-width: 200px;
    margin-right: 0;
  }
  to {
    opacity: 0;
    transform: scale(0.7);
    max-width: 0;
    margin-right: calc(var(--sf-margin-s) * -1);
  }
}

/* ─── ComboPreviewDialog: アップロード中スピナー ─── */
@keyframes sf-spin {
  to { transform: rotate(360deg); }
}

/* ─── ComboPreviewDialog / ProvideVideoDialog: <dialog> 共通 ─── */
/* `<dialog>` を `showModal()` でモーダル表示する際の見た目。
   ブラウザの top layer に乗るため z-index は不要。スクロールロック・
   フォーカストラップ・ESC 閉じはブラウザが自動で面倒を見る。 */
.sf-modal-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  /* dialog の自動センタリングを活かしつつ、子要素のシャドウがクリップ
     されないように overflow visible。max-height を超える場合のみ内側
     スクロールにする (overflow auto は backdrop 経由ではなく内側で)。 */
  overflow: visible;
  color: var(--sf-text-primary);
  /* `<dialog>` のデフォルトは `width: fit-content` でコンテンツ最小幅に縮む。
     横幅を固定するため width を明示。個別ダイアログ側で width を上書きできる。 */
  width: min(744px, calc(100vw - var(--sf-margin-l) * 2));
  max-height: calc(100vh - var(--sf-margin-l) * 2);
  box-sizing: border-box;
}
.sf-modal-dialog::backdrop {
  background: var(--sf-barrier-primary);
}
/* showModal() 後に dialog 自身へフォーカスを逃がすため (tabindex="-1")、
   dialog 自体の focus outline を消す。内部ボタンの不要な focus ring も抑制。 */
.sf-modal-dialog:focus {
  outline: none;
}
.sf-modal-dialog *:focus:not(:focus-visible) {
  outline: none;
}
/* dialog 内部の本体ラッパー (シャドウ余白確保 + 内側スクロール) */
.sf-modal-dialog__body {
  padding: var(--sf-margin-l);
  max-height: calc(100vh - var(--sf-margin-l) * 2);
  overflow-y: auto;
  box-sizing: border-box;
  position: relative;
}

/* ─── Toast: 上から slide-in + fade-in ─── */
@keyframes sf-toast-enter {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── SfAuthDialog ─── */
.sf-auth-dialog__card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
  width: min(400px, calc(100vw - var(--sf-margin-l) * 2));
  max-height: calc(100vh - var(--sf-margin-l) * 2);
  overflow-y: auto;
  background: var(--sf-bg-primary);
  border: 1px solid var(--sf-border-secondary);
  border-radius: 16px;
  box-shadow: 0 8px 24px var(--sf-shadow-primary);
  padding: var(--sf-margin-xxl) var(--sf-margin-xl) var(--sf-margin-xl);
  box-sizing: border-box;
}

.sf-auth-dialog__close {
  position: absolute;
  top: var(--sf-margin-s);
  right: var(--sf-margin-s);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.sf-auth-dialog__close::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--sf-text-secondary);
  -webkit-mask: url('/icon/close.svg') no-repeat center / 16px 16px;
          mask: url('/icon/close.svg') no-repeat center / 16px 16px;
}
.sf-auth-dialog__close:hover {
  background: var(--sf-surface-secondary);
}
.sf-auth-dialog__close:hover::before {
  background-color: var(--sf-text-primary);
}

.sf-auth-dialog__provider-button {
  display: flex;
  align-items: center;
  /* Flutter 側 Row(mainAxisAlignment: spaceBetween) と同じ。
     [icon][label][transparent-icon] の 3 要素配置でラベルが視覚的に中央寄せされる。 */
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  /* Flutter 側はテーマ TextButton padding(16) + 内側 Padding(16) = 32px の 2 段重ね。
     Jaspr 側は素の <button> なので合算した 32px (= xxl) を直接当てる。 */
  padding: 0 var(--sf-margin-xxl);
  border-radius: 9999px;
  background: var(--sf-button-bg-primary);
  border: 1px solid var(--sf-button-border-primary);
  box-shadow: 0 0 8px var(--sf-shadow-primary);
  cursor: pointer;
}
.sf-auth-dialog__provider-button.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* X ロゴ (テーマカラー追従) */
.sf-auth-dialog__x-logo {
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--sf-text-primary);
  -webkit-mask: url('/icon/logo/x.svg') no-repeat center / 20px 20px;
          mask: url('/icon/logo/x.svg') no-repeat center / 20px 20px;
}

/* インラインスピナー (ロゴと差し替え) */
.sf-auth-dialog__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--sf-button-border-primary);
  border-top-color: var(--sf-text-primary);
  border-radius: 50%;
  animation: sf-spin 800ms linear infinite;
}

/* 右側の透明な対称 spacer (左のロゴと同サイズ) */
.sf-auth-dialog__icon-spacer {
  display: block;
  width: 20px;
  height: 20px;
  visibility: hidden;
}

.sf-auth-dialog__link {
  color: var(--sf-text-secondary);
  text-decoration: underline;
}
.sf-auth-dialog__link:hover {
  color: var(--sf-text-primary);
}

/* ─── Popup Menu (shared) ─── */
.sf-popup-menu__item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 var(--sf-margin-l);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  color: var(--sf-text-primary);
  text-align: left;
}
.sf-popup-menu__item:hover {
  background: var(--sf-surface-secondary);
}

/* ─── SfSwitch (トグルスイッチ) ─── */
.sf-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--sf-slider-inactive);
  cursor: pointer;
  transition: background var(--sf-scale-anim-ms) ease-out;
}
.sf-switch.is-on {
  background: var(--sf-slider-active);
}
.sf-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sf-switch-thumb);
  box-shadow: 0 1px 3px var(--sf-shadow-primary);
  transition: transform var(--sf-scale-anim-ms) ease-out;
}
.sf-switch.is-on .sf-switch__thumb {
  transform: translateX(18px);
}