/* ============================================================
   POL — 局所UX改善パック (Issue #230)
   仕様正本: docs/planning/36_ui-revamp/pol-spec.md v1.0
   合意デモ: docs/planning/36_ui-revamp/footer-nav-demo.html

   パックの CSS はこの 1 本に集約する（撤去 = 本ファイルと
   index.html の <link> を削除）。既存 css への上書きは
   読み込み順（nav.css / components.css より後）で効かせる。
   例外（原本を直接編集、"POL" コメント付き）:
     - screens/societies.html 内 <style> の .soc-panel
       （フラグメント注入で本ファイルより後に適用されるため上書き不可）
     - app.js _showSimpleToast の inline style
   ============================================================ */

:root {
  /* 画面下端から浮遊ナビ上端まで = 下余白14px + カプセル58px。
     カプセル58px = padding 7px + item min-height 44px + padding 7px。
     safe-area-inset-bottom は使用箇所ごとに別途加算する。 */
  --pol-nav-clearance: 72px;
}

/* ============================================================
   POL-1b ナビ浮遊半透明（spec §B / §B-1）
   84px 密着白ベタ → 約58px 浮遊カプセル
   ============================================================ */

.app-nav {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: auto;
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(27, 43, 114, 0.10);
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(27, 43, 114, 0.16);
}
/* nav.css の padding（通常 5px 0 18px / native の env() 下余白）を
   カプセル内対称 7px 6px に統一。safe-area は bottom オフセットで吸収済み */
.app-nav,
html.capacitor-native .app-nav {
  padding: 7px 6px;
}

/* 項目: ラベル 9px → 10.5px（spec §B 10.5〜11px、デモ採用値）・44px タップ確保 */
.nav-item {
  justify-content: center;
  min-height: 44px;
  padding-top: 0;
  font-size: 10.5px;
  font-weight: 500;
  transition: transform 0.1s ease, color 0.15s;
}
.nav-item.active { font-weight: 700; }

/* 押下は item 全体の沈み込み scale(.93) に統一
   （nav.css のアイコン単体 scale(0.92) は置換。アクティブ拡大 1.1 は維持） */
.nav-item:active { transform: scale(0.93); }
.nav-item:active .nav-ico img { transform: scale(1); }
.nav-item.active .nav-ico img { transform: scale(1.1); }

/* アイコン 50px → 26px（画像は現行 icons/nav/*.webp 流用） */
.nav-ico { width: 26px; height: 26px; font-size: 16px; }
.nav-ico img { width: 26px; height: 26px; }

/* バッジ: 15px 維持・アイコン右上・2桁は pill に伸びる */
.nav-badge {
  top: 0;
  right: calc(50% - 18px);
  width: auto;
  min-width: 15px;
  height: 15px;
  border-radius: 99px;
  padding: 0 4px;
}

/* アクティブタブの赤点はカプセル高さ規律（58px）のため廃止。
   合意デモに存在せず、アクティブ表示は色 + 太字が担う */
.nav-dot { display: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-item { transition: color 0.15s; }
  .nav-item:active { transform: none; }
  .nav-item:active .nav-ico img { transform: scale(1); }
  .nav-item.active:active .nav-ico img { transform: scale(1.1); }
}

/* ------------------------------------------------------------
   コンテンツはナビ背後まで流す（spec §B-1-1）
   常設スクロール容器に下余白 90px = ナビ上端 72px + 視認マージン 18px
   ------------------------------------------------------------ */
.app-scroll {
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
}
/* ルーム系（エージェントルーム / ミッションルーム）+ ホーム/コミュニティの全画面背景は
   full-bleed 維持。背景がナビ背後まで広がる（PC 固定型で背景下にフッター分の bg 色帯が出るのを防ぐ） */
.app-scroll:has(.room-wrapper),
.app-scroll:has(.mission-room),
.app-scroll:has(#homeField),
.app-scroll:has(#socField) {
  padding-bottom: 0;
}

/* ============================================================
   POL-1a ヘッダー再設計（spec §A）約195px → 約82px
   2行構成。背景・配色は societies.html #socBanner の実CSSを移植
   （空色グラデ + 雲レイヤー。紺ベタ + 白文字は廃止）
   DOM: index.html .app-header（旧 header-top / points-box 構成は撤去済み）
   ============================================================ */

.app-header {
  background: linear-gradient(170deg, #b3ddf5 0%, #cce9f8 38%, #e4f4fd 68%, #f3faff 100%);
  border-bottom: 1.5px solid rgba(147, 197, 253, 0.65);
  box-shadow: 0 4px 20px rgba(147, 197, 253, 0.28), 0 2px 8px rgba(0, 0, 0, 0.06);
  color: #3d2b1f;
  padding: 8px 14px 8px;
  overflow: hidden; /* 雲レイヤーの clip（旧ロゴはみ出し用の overflow:visible を置換） */
}
/* ノッチ/ステータスバー: components.css の同構造ルールを上書きして基礎 8px を保つ */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 480px) {
    .app-header {
      padding-top: calc(8px + env(safe-area-inset-top, 0px));
    }
  }
}

/* 雲レイヤー（#socBanner::before と同素材、ドリフトはヘッダー比率に合わせ4楕円） */
.app-header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 88px 26px at  8% 38%, rgba(255, 255, 255, 0.92) 0%, transparent 100%),
    radial-gradient(ellipse 52px 18px at 19% 14%, rgba(255, 255, 255, 0.80) 0%, transparent 100%),
    radial-gradient(ellipse 112px 30px at 74% 30%, rgba(255, 255, 255, 0.88) 0%, transparent 100%),
    radial-gradient(ellipse 64px 20px at 84% 10%, rgba(255, 255, 255, 0.75) 0%, transparent 100%);
  animation: polCloudDrift 12s ease-in-out infinite;
}
@keyframes polCloudDrift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .app-header::before { animation: none; }
}

/* --- Row1 (38px): アイコン │ 名前 + コミュニティ・称号ランク │ 星型称号 │ コミュニティアイコン --- */
.hdr-row1 {
  position: relative; /* 雲レイヤーより前面 */
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
}
.hdr-mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(147, 197, 253, 0.65);
}
.hdr-id { flex: 1; min-width: 0; line-height: 1.3; }
.hdr-name {
  font-size: 14px;
  font-weight: 500; /* 太字不使用（spec §A-3） */
  color: #3d2b1f;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hdr-comm {
  display: flex;
  align-items: baseline;
  font-size: 10.5px;
  font-weight: 400;
  color: #9ca3af;
  white-space: nowrap;
}
/* コミュニティ名が長い場合は名前側から省略（称号ランクは常に見せる） */
.hdr-comm-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hdr-comm-sep { flex: none; margin: 0 3px; }
.hdr-rank { flex: none; }
.hdr-star {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: none;
  filter: drop-shadow(0 1px 2px rgba(61, 43, 31, 0.25));
}
.hdr-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(147, 197, 253, 0.65);
  display: grid;
  place-items: center;
  flex: none;
  font-size: 17px;
  line-height: 1;
  overflow: hidden; /* roomChar 画像を丸内に収める */
}

/* --- Row2 (28px): LVピル │ XPゲージ56px │ あと◯◯XP │ spacer │ GC │ PT --- */
.hdr-row2 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 6px;
  min-height: 28px;
}
/* LVピル: コミュニティカードの Lv ピルと同一様式（societies.html .soc-banner-level） */
.hdr-lv {
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  background: rgba(196, 181, 253, 0.15);
  border: 1px solid rgba(196, 181, 253, 0.4);
  border-radius: 6px;
  padding: 2px 7px;
  color: #7c6f9f;
  white-space: nowrap;
  flex: none;
}
/* XPゲージ 56px 短尺（トラック/フィルは .soc-xp-bar / .soc-xp-fill と同素材） */
.hdr-xpbar {
  width: 56px;
  height: 6px;
  border-radius: 3px;
  background: rgba(196, 181, 253, 0.2);
  overflow: hidden;
  flex: none;
}
.hdr-xpbar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, #c9942d, #f0b429);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hdr-xp {
  color: #3d2b1f;
  font-family: monospace;
  font-size: 12px;
  font-weight: 500; /* 太字不使用（spec §A-3） */
  letter-spacing: 0.5px;
  flex: none;
}
/* components.css の旧 #headerXpNext { 金色 / 700 } を打ち消し（ID は継承より強いため明示上書き） */
.hdr-xp #headerXpNext {
  color: inherit;
  font-weight: inherit;
}
/* 単位（GC/PT/XP）と「あと」は 9px 添え字（spec §A-3） */
.hdr-xp small,
.hdr-bal small {
  font-size: 9px;
  font-weight: 400;
  color: #9ca3af;
  margin: 0 2px;
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  letter-spacing: 0;
}
.hdr-spacer { flex: 1; }
.hdr-bal {
  color: #3d2b1f;
  font-family: monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  flex: none;
}
.hdr-bal-gc { color: #c9942d; } /* .soc-stat-val.gold と同色 */
/* GC/PT 間は固定 約28px（行内 gap 7px + 21px。桁変動でレイアウトが動かない） */
.hdr-bal + .hdr-bal { margin-left: 21px; }

/* ルーム系画面はルーム内に独自のポイント表示（.mission-pt-display）があるため
   モバイルではヘッダー側 GC/PT を隠す（旧 .points-box 非表示ルールの現行踏襲） */
@media (max-width: 480px) {
  .app-scroll:has(.mission-room) .hdr-bal,
  .app-scroll:has(.room-wrapper) .hdr-bal { display: none; }
}

/* ------------------------------------------------------------
   旧ナビ 84px 前提の追従（spec §B-1-2）
   components.css 側の 3 箇所を上書き（84px → var(--pol-nav-clearance)）
   ------------------------------------------------------------ */
/* room-panel: ナビ上端に乗るスライドアップパネル（components.css L1124/L1129） */
.room-panel {
  /* モーダル表示中はフッター(app-nav z-index:100)が backdrop(z:9099)/panel(z:9100) の下に
     完全に隠れるため、ナビ分(--pol-nav-clearance 72px)浮かせず画面下端まで降ろす。
     これによりモーダル下端〜画面下端に backdrop 越しのフッターが透ける「下部スペース」を解消。 */
  bottom: env(safe-area-inset-bottom, 0px);
  max-height: calc(100dvh - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px) - 60px);
}
/* rp-body（components.css L1152） */
.rp-body {
  max-height: calc(100dvh - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px) - 60px - 80px);
}

/* ============================================================
   POL-3 スクロールヒント（spec §D）
   残りスクロール量が多い方向を指す矢印。右下・ナビ上端 +14px。
   表示/方向の制御は app.js（スクロール不能画面では opacity 0）
   ============================================================ */
.pol-scroll-hint {
  position: absolute;
  right: 16px;
  bottom: calc(86px + env(safe-area-inset-bottom, 0px)); /* ナビ上端 72px + 14px */
  z-index: 70; /* コンテンツより上・ナビ(100)より下 */
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(27, 43, 114, 0.12);
  box-shadow: 0 2px 8px rgba(27, 43, 114, 0.18);
  display: grid;
  place-items: center;
  pointer-events: none; /* 装飾。タップは透過 */
  opacity: 0;
  transition: opacity 0.25s;
  animation: polHintFloat 1.8s ease-in-out infinite;
}
/* シェブロン（CSS 描画・画像不使用） */
.pol-scroll-hint i {
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #3d6b8a;
  border-bottom: 2px solid #3d6b8a;
  transform: rotate(45deg) translate(-1px, -1px); /* 下向き */
  transition: transform 0.25s ease;
}
.pol-scroll-hint.up i {
  transform: rotate(-135deg) translate(-1px, -1px); /* 上向き（最下部で反転） */
}
@keyframes polHintFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .pol-scroll-hint { animation: none; }
}

/* ============================================================
   POL-2 押下フィードバック（spec §E）
   全 <button> 共通の :active（沈み + 減光 0.1s）。
   translate/scale は transform プロパティと独立に合成されるため、
   transform で配置・アニメする既存ボタンと衝突しない。
   独自の :active を持つカード類（.choice / .ss-card 等）は現状維持
   ============================================================ */
button:not(:disabled):active,
.btn:active {
  translate: 0 1px;
  scale: 0.985;
  filter: brightness(0.92);
  /* 押し込みのみ 0.1s（離した時は各ボタン既存の transition に従う） */
  transition: translate 0.1s ease, scale 0.1s ease, filter 0.1s ease;
}
@media (prefers-reduced-motion: reduce) {
  button:not(:disabled):active,
  .btn:active {
    translate: none;
    scale: none;
    filter: brightness(0.92); /* 減光のみ残す（動きを伴わないフィードバック） */
  }
}

/* 送信中ボタン: スピナー + 連打防止（app.js polBtnBusy() とセット） */
.pol-busy {
  pointer-events: none;
  opacity: 0.75;
}
.pol-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  margin-right: 6px;
  animation: polSpin 0.8s linear infinite;
}
/* reduced-motion でも回転は維持（進行中表示は本質的フィードバックのため） */
@keyframes polSpin {
  to { transform: rotate(360deg); }
}