/* Capacitor ネイティブ: AdMob バナーを HTML 広告枠に重ねる */
html.is-native-capacitor .wase-admob-anchor:empty::before {
  content: "";
  display: none;
}

html.is-native-capacitor .wase-admob-anchor {
  position: relative;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  min-height: 50px;
  overflow: hidden;
  border-style: solid;
  border-color: #e6e6e6;
  background: #fff;
}

html.is-native-capacitor .flea-banner-ad-slot.wase-admob-anchor {
  width: calc(100% - 8px);
  max-width: calc(100% - 8px);
  margin: 4px 4px 16px;
}

html.is-native-capacitor .timeline-ad-slot.wase-admob-anchor {
  width: 100%;
  margin: 0;
}

html.is-native-capacitor .wase-admob-anchor.is-admob-anchor-active {
  border-color: transparent;
  background: transparent;
}

/*
 * 全ページ共通ヘッダー: Dynamic Island / ノッチ向け可変 safe-area。
 * contentInset=never 時も、固定高さではなく inset + コンテンツ行で伸縮する。
 *
 * モバイル Web は position:fixed（viewport 基準）。
 * sticky は iOS Safari のアドレスバー伸縮でガタつきやすいため使わない。
 * ネイティブ WKWebView 向けの追加安定化は下部の .is-native-capacitor ブロック。
 */
:root {
  /* sat = top inset only. header-h = sat + visible header row. Do not add sat again on content. */
  --wase-sat: 0px;
  --wase-sat-fallback: 0px;
  --wase-header-pad-y: 10px;
  --wase-header-content-min-h: 44px;
  --wase-header-content-h: var(--wase-header-content-min-h);
  --wase-header-h: calc(
    var(--wase-sat) + var(--wase-header-content-h) + (2 * var(--wase-header-pad-y))
  );
  --wase-chrome-offset: var(--wase-header-h);
}

html.chrome-conversation {
  --wase-chrome-offset: var(--wase-sat);
}

@supports (top: constant(safe-area-inset-top)) {
  :root {
    --wase-sat: max(constant(safe-area-inset-top), var(--wase-sat-fallback));
  }
}

@supports (top: env(safe-area-inset-top)) {
  :root {
    --wase-sat: max(env(safe-area-inset-top, 0px), var(--wase-sat-fallback));
  }
}

.site-header,
.legal-header {
  /* 固定 height を禁止し、safe-area + コンテンツ行で可変にする */
  height: auto !important;
  max-height: none !important;
  min-height: var(--wase-header-h) !important;
  /* env() を直接も使い、変数未設定時でもステータスバー下に食い込まない */
  padding-top: calc(
    max(
      env(safe-area-inset-top, 0px),
      var(--wase-sat),
      var(--wase-sat-fallback)
    ) + var(--wase-header-pad-y)
  ) !important;
  padding-bottom: var(--wase-header-pad-y) !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* デスクトップ既定（モバイルは下の media で fixed に上書き） */
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--accent, #891e2b);
  background-clip: padding-box;
}

.site-header .shell-header-row,
.site-header .simple-back-header__row,
.site-header .header-row {
  flex: 0 0 auto;
  min-height: var(--wase-header-content-min-h);
  align-items: center;
}

/* 戻る・プロフィール等がステータスバー下でも押しやすいよう最小タップ領域を確保 */
.site-header .back-link,
.site-header .shell-header-back,
.site-header .shell-header-profile,
.site-header .shell-header-dm,
.site-header .shell-header-notify,
.site-header .simple-back-header__back {
  position: relative;
  z-index: 2;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.site-header .back-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 4px;
}

.site-header .shell-header-title,
.site-header .simple-back-header__title,
.site-header .header-title,
.site-header h1 {
  position: relative;
  z-index: 1;
  line-height: 1.25;
}

/*
 * モバイル Web: ヘッダーを viewport 最上端に固定。
 * ページ内の sticky 指定より優先するため position に !important を使う。
 */
@media (max-width: 1023px) {
  .site-header,
  .legal-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* ラバーバンド時にヘッダー上へ白い地色が見えないよう、上方向へ同色を伸ばす */
  .site-header::before,
  .legal-header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 100%;
    height: max(100vh, 100dvh);
    background: var(--accent, #891e2b);
    pointer-events: none;
    z-index: -1;
  }

  .main-column,
  body:has(> .site-header),
  body:has(> .legal-header) {
    padding-top: var(--wase-chrome-offset, var(--wase-header-h));
  }

  .site-header-offset {
    display: block;
    height: var(--wase-header-h);
    flex-shrink: 0;
    pointer-events: none;
    visibility: hidden;
  }
}

/*
 * Capacitor iOS WebView 専用: ヘッダーのガタつき対策
 * - バウンスによる fixed 要素の描画遅延を抑える
 * - safe-area は JS が一度決めた --wase-sat のみ使い、スクロール中の env() 再計算を避ける
 * - will-change は WKWebView で逆にブレやすいので使わない
 */
@media (max-width: 1023px) {
  /*
   * Native cushion: WebView / html / body はエンジ。
   * コンテンツ面（#root AppShell / .main-column）だけアプリ背景色。
   * !important: spa / tokens の light bg が WKWebView 隙間で白く見えないようにする。
   */
  html.is-native-capacitor {
    background: var(--accent, #891e2b) !important;
    height: 100%;
    overflow-x: hidden;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
  }

  html.is-native-capacitor body,
  html.is-native-capacitor body.shell-desktop {
    background: var(--accent, #891e2b) !important;
    min-height: 100%;
    overflow-x: hidden;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
    /* スクロールチェーンでヘッダーが引っ張られないようにする */
    overscroll-behavior: none;
  }

  html.is-native-capacitor #root {
    background: var(--bg, #f7f9fc);
    min-height: 100%;
    min-height: calc(
      100dvh - var(--nav-h, 56px) - env(safe-area-inset-bottom, 0px)
    );
  }

  html.is-native-capacitor.shell-hide-bottom-nav #root,
  html.is-native-capacitor body.shell-hide-bottom-nav #root {
    min-height: 100%;
    min-height: 100dvh;
  }

  html.is-native-capacitor .app-shell,
  html.is-native-capacitor .main-column,
  html.is-native-capacitor .tab-keep-alive-stack,
  html.is-native-capacitor .tab-keep-alive-pane {
    background: var(--bg, #f7f9fc);
  }

  html.is-native-capacitor .main-column {
    min-height: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  html.is-native-capacitor .site-header,
  html.is-native-capacitor .legal-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 1000 !important;

    /* 高さ・上余白をロック（スクロール中に変わらない） */
    padding-top: calc(var(--wase-sat) + var(--wase-header-pad-y)) !important;
    padding-bottom: var(--wase-header-pad-y) !important;
    height: var(--wase-header-h) !important;
    min-height: var(--wase-header-h) !important;
    max-height: var(--wase-header-h) !important;

    /* 独自レイヤへ昇格（will-change は使わない） */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    isolation: isolate;
    will-change: auto;

    /* サブピクセル揺れを抑える */
    -webkit-font-smoothing: antialiased;
  }

  html.is-native-capacitor .bottom-nav {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: auto;
  }

  html.is-native-capacitor .browse-mode-banner {
    position: sticky;
    top: var(--wase-header-h);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
}

@media (min-width: 1024px) {
  .site-header,
  .legal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000;
  }

  .site-header-offset {
    display: none;
  }
}

/* 画面下部フォールバック時のみ余白を確保 */
html.is-native-capacitor body.shell-desktop {
  padding-bottom: calc(var(--nav-h, 56px) + env(safe-area-inset-bottom, 0px));
}

html.is-native-capacitor.has-native-bottom-banner body.shell-desktop {
  padding-bottom: calc(var(--nav-h, 56px) + 60px + env(safe-area-inset-bottom, 0px));
}

/* Conversation screens: no tab-bar gutter (composer owns safe-area). */
html.is-native-capacitor body.shell-desktop.shell-hide-bottom-nav {
  padding-bottom: 0 !important;
}

html.is-native-capacitor.has-native-bottom-banner body.shell-desktop.shell-hide-bottom-nav {
  /* Banner still needs clearance; compose sits above it when present */
  padding-bottom: 60px !important;
}

html.is-native-capacitor body.shell-hide-bottom-nav .bottom-nav,
html.is-native-capacitor.shell-hide-bottom-nav .bottom-nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.is-native-capacitor.has-native-bottom-banner .bottom-nav {
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

html.is-native-capacitor.has-native-bottom-banner .site-footer,
html.is-native-capacitor.has-native-bottom-banner footer {
  margin-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}