/* ============================================================
   tOS PWA(ホーム画面から起動したとき)の見た目調整
   読み込み順: style.css → nav.css → chat-theme.css → pwa.css(最後に上書き)

   クラスの意味(pwa.js が付与する)
     html.pwa-html      … スタンドアロン起動(ホーム画面から)
     body.pwa           … 同上
     body.pwa-ios       … iOS / iPadOS
     body.tab-chat-active … いまチャットタブを開いている
     body.kb-open       … ソフトキーボードが出ている
     body.chatfull      … チャットを全画面レイアウトにする(既定ON)

   ★ブラウザで普通に開いたときは .pwa が付かないので、
     ここの大半のルールは何も影響しない。
   ============================================================ */

/* ---- どこでも安全な最低限(ブラウザでも適用) ---- */
* { -webkit-tap-highlight-color: transparent; }
/* ダブルタップの拡大を止める(ピンチズームは残す) */
button, a, label, summary, .tabs button, .chat-user, .card, .pj-row { touch-action: manipulation; }

/* ============================================================
   スタンドアロン(ホーム画面起動)専用
   ============================================================ */

/* 上端でバウンドしたときに白地が見えないよう、地色をトップバーと合わせる */
html.pwa-html { background: var(--s900); overscroll-behavior: none; }
body.pwa { overscroll-behavior: none; background: var(--s50); }

/* ステータスバー(黒透過)の下にトップバーを潜り込ませる。
   viewport-fit=cover を付けているので env() が実値を返す */
body.pwa .topbar { padding-top: env(safe-area-inset-top); height: auto; min-height: 56px; }
body.pwa .content { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }

/* UI部品(ナビ・ボタン)は選択/長押しメニューを出さない。本文は選択できるまま */
body.pwa .topbar, body.pwa .tabs, body.pwa .sidemenu, body.pwa button,
body.pwa .chat-user, body.pwa .side-toggle, body.pwa .mini-btn, body.pwa .card-label {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* タップの手応え(押し込み) */
body.pwa button, body.pwa .chat-user, body.pwa .card, body.pwa .pj-row {
  transition: transform .09s ease, opacity .09s ease;
}
body.pwa button:active, body.pwa .chat-user:active, body.pwa .card:active, body.pwa .pj-row:active {
  transform: scale(.978); opacity: .88;
}
body.pwa .tabs button:active { transform: none; opacity: .7; }

/* iOSのフォーム見た目をアプリ寄りに */
body.pwa-ios input, body.pwa-ios textarea, body.pwa-ios select { -webkit-appearance: none; appearance: none; border-radius: 10px; }
body.pwa-ios input[type="checkbox"], body.pwa-ios input[type="radio"] { -webkit-appearance: auto; appearance: auto; }
body.pwa-ios select { background-image: none; }

/* ★ 旧式の加速スクロール指定(-webkit-overflow-scrolling の touch)は使わないこと。
   iOS 13以降は指定しなくても慣性スクロールが効く一方、高さを固定した
   レイアウトや position:fixed と併用するとコンパジタが壊れ、固定要素が
   古い位置のまま描かれてページ全体が無反応になることがある
   (実機で「チャンネル一覧を触ると固まってどこも押せない」として発生)。
   内側スクロールは overflow-y:auto + overscroll-behavior:contain で足りる。 */

/* ============================================================
   起動スプラッシュ(ホーム画面起動時のみ表示)
   ============================================================ */
#pwaSplash { display: none; }
html.pwa-html #pwaSplash {
  position: fixed; inset: 0; z-index: 9999; background: #0d1117;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  transition: opacity .3s ease;
}
html.pwa-html #pwaSplash.hide { opacity: 0; pointer-events: none; }
#pwaSplash img.ps-logo { width: 216px; max-width: 68vw; height: auto; border-radius: 0; box-shadow: none; }
#pwaSplash .ps-name { color: #e2e8f0; font-weight: 800; font-size: 14px; letter-spacing: .12em; }
#pwaSplash .ps-bar { width: 112px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
#pwaSplash .ps-bar i { display: block; width: 38%; height: 100%; background: #2dd4bf; animation: psSlide 1.15s ease-in-out infinite; }
@keyframes psSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(330%); } }

/* ============================================================
   引き下げて更新(pull to refresh)
   ============================================================ */
#pwaPtr {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 58px);
  width: 34px; height: 34px; border-radius: 50%; z-index: 40;
  background: #fff; box-shadow: 0 6px 18px rgba(15,23,42,.22);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transform: translate(-50%, -14px) scale(.8);
  transition: opacity .12s ease, transform .12s ease;
}
#pwaPtr.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
#pwaPtr .ptr-i {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--teal); border-top-color: transparent;
  transition: transform .1s linear;
}
#pwaPtr.spin .ptr-i { animation: ptrSpin .68s linear infinite; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* ============================================================
   オフライン表示
   ============================================================ */
#pwaOffline {
  position: fixed; left: 0; right: 0; top: 0; z-index: 60;
  padding: calc(env(safe-area-inset-top) + 6px) 12px 7px;
  background: #b45309; color: #fff; font-size: 12px; font-weight: 700; text-align: center;
  transform: translateY(-100%); transition: transform .2s ease;
}
#pwaOffline.on { transform: translateY(0); }

/* ============================================================
   チャットを全画面レイアウトに(スタンドアロン + スマホ幅のときだけ)
   ・メッセージ欄だけが内側スクロール
   ・入力欄はキーボードの上に固定
   無効化したいときは localStorage の tarteos:chatfull を 0 にする
   ============================================================ */
@media (max-width: 780px) {
  /* body を position:fixed にするのは試したが、下タブバーのラベルが切れて
     下に白帯が出る(固定要素の基準が視覚ビューポートとずれる)ため撤回した。
     文書側のスクロールは overflow:hidden と overscroll-behavior で抑える。 */
  body.pwa.chatfull.tab-chat-active {
    overflow: hidden; height: 100dvh; overscroll-behavior: none;
  }
  body.pwa.chatfull.tab-chat-active .content { padding: 0; max-width: none; }
  body.pwa.chatfull.tab-chat-active #tab-chat .sec-head { display: none; }

  body.pwa.chatfull.tab-chat-active #tab-chat .chat-wrap {
    height: calc(var(--app-h, 100dvh) - var(--topbar-h, 52px) - var(--tabbar-h, 0px));
    min-height: 0; margin: 0; padding: 0; border-radius: 0;
    border-left: none; border-right: none; border-bottom: none;
    overflow: hidden; display: flex; flex-direction: column;
  }
  body.pwa.chatfull.tab-chat-active #tab-chat .chat-mobile-bar { flex: 0 0 auto; }
  /* サイドバー(一覧)は外側では伸びない。中のチャンネル一覧だけがスクロールし、
     DM欄と注記は画面内の下側に残る(2026-08: 以前はサイドバー全体が縦に伸びていて、
     DMを見るにはチャンネルを全部通り過ぎるまでスクロールする必要があった) */
  body.pwa.chatfull.tab-chat-active #tab-chat .chat-users {
    flex: 1 1 auto; height: auto; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column;
  }
  body.pwa.chatfull.tab-chat-active #tab-chat .chat-users .chat-sec,
  body.pwa.chatfull.tab-chat-active #tab-chat .chat-users .chat-search-row { flex: 0 0 auto; }
  body.pwa.chatfull.tab-chat-active #tab-chat #chatChannelList,
  body.pwa.chatfull.tab-chat-active #tab-chat #chatSearchList:not(.hidden) {
    flex: 1 1 0; min-height: 96px; max-height: none; overflow-y: auto; overscroll-behavior: contain;
  }
  body.pwa.chatfull.tab-chat-active #tab-chat #chatUserList {
    flex: 0 1 auto; min-height: 58px; max-height: 38%; overflow-y: auto; overscroll-behavior: contain;
  }
  body.pwa.chatfull.tab-chat-active #tab-chat .chat-note-box { flex: 0 0 auto; margin-top: 0; }
  body.pwa.chatfull.tab-chat-active #tab-chat .chat-main { flex: 1 1 auto; height: auto; min-height: 0; }
  /* 会話欄には下限を持たせる。ピンや録音バーが伸びても、ここから下は削らせない */
  body.pwa.chatfull.tab-chat-active #tab-chat .chat-messages {
    flex: 1 1 auto; min-height: min(30%, 150px); max-height: none; overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* 📌ピン(タスクの手順・プロジェクトのまとめ)は「残りの高さの中で」畳む。
     chat-theme.css の上限は画面全体(30vh)基準で、しかも flex-shrink:0 のため、
     高さが固定されたこのレイアウトではピンが会話欄を数十pxまで押し潰していた
     (チャンネルを開いても会話が出てこないように見える)。ここでは上限を
     会話ペインに対する割合で決め、足りなければピン側が縮む。 */
  body.pwa.chatfull.tab-chat-active #tab-chat .chat-pin {
    flex: 0 1 auto; min-height: 0; max-height: 30%;
    display: flex; flex-direction: column; overflow: hidden;
  }
  body.pwa.chatfull.tab-chat-active #tab-chat .chat-pin-head { flex: 0 0 auto; }
  body.pwa.chatfull.tab-chat-active #tab-chat .chat-pin-body {
    flex: 1 1 auto; min-height: 0; max-height: none;
    overflow-y: auto; overscroll-behavior: contain;
  }
  body.pwa.chatfull.tab-chat-active #tab-chat .chat-input-row { flex: 0 0 auto; }

  /* キーボードが出ている間は下の安全領域ぶんの余白が不要 */
  body.pwa.kb-open .chat-input-row { padding-bottom: 10px; }
  body.pwa.kb-open .content { padding-bottom: 12px; }
}

/* ============================================================
   横向き(ノッチ/ダイナミックアイランド側)と、ドロワーの安全領域
   ============================================================ */
@media (orientation: landscape) {
  body.pwa .topbar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  body.pwa .content { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
}
body.pwa .sidemenu { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); }
body.pwa #pwaOffline { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }

/* ============================================================
   下部タブバー(スタンドアロン + スマホ幅のときだけ)
   iOSのアプリと同じく、主要5つを下に固定。残りは「もっと」→ドロワー。
   ボタンは pwa.js が生成し、.tabs クラスを持たせているので
   app.js 側の active 切替(.tabs button)がそのまま効く。
   ============================================================ */
#pwaTabbar { display: none; }
#pwaSideTop { display: none; }

@media (max-width: 780px) {
  body.pwa #pwaTabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    background: rgba(13, 17, 23, .94);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid rgba(255, 255, 255, .09);
    padding: 6px max(4px, env(safe-area-inset-left)) calc(4px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-right));
  }
  body.pwa #pwaTabbar button {
    position: relative; background: none; border: none; color: #8b98a9;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 5px 2px 3px; font-size: 10px; font-weight: 700; line-height: 1.1;
    border-radius: 10px; min-height: 46px;
  }
  body.pwa #pwaTabbar button .tb-ic { font-size: 19px; line-height: 1; transition: transform .12s ease; }
  body.pwa #pwaTabbar button.active { color: #fff; }
  body.pwa #pwaTabbar button.active .tb-ic { transform: translateY(-1px) scale(1.06); }
  body.pwa #pwaTabbar button:active { opacity: .55; transform: none; }
  body.pwa #pwaTabbar .tb-badge {
    position: absolute; top: 1px; left: 50%; margin-left: 6px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: #ef4444; color: #fff; font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
  }
  body.pwa #pwaTabbar .tb-badge.hidden { display: none; }

  /* 上部のタブ行は下に移したので隠す(ドロワー内の .side-tabs は対象外) */
  body.pwa .topbar .tabs { display: none; }
  body.pwa .content { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }

  /* ドロワー: 上部タブのうち下バーに入らなかったもの */
  body.pwa #pwaSideTop { display: block; }
  body.pwa .side-note { display: none; }

  /* キーボードが出ている間は下バーを隠して入力に集中させる。
     display:none にすると、戻したときにiOSが「縮んだままのレイアウト
     ビューポート」で固定配置の位置を決め直すことがあり、キーボードを閉じても
     下バーが安全領域の上に浮いて下に白い帯が残る(2026-08-21の報告)。
     位置の決め直しが起きないよう、要素は出したまま画面の外へずらす。
     高さの計算(--tabbar-h)は pwa.js が kb-open のとき0として扱う。 */
  body.pwa.kb-open #pwaTabbar {
    transform: translateY(115%); pointer-events: none; opacity: 0;
  }
  body.pwa.kb-open .content { padding-bottom: 12px; }

  /* 全画面チャットのときは .content の余白を打ち消す(高さは chat-wrap 側で計算) */
  body.pwa.chatfull.tab-chat-active .content { padding: 0; }
  body.pwa.chatfull.tab-chat-active .chat-input-row { padding-bottom: 10px; }
}

/* ============================================================
   タブ切替のフェード(アプリらしい画面遷移)
   ============================================================ */
body.pwa main.content > section:not(.hidden) { animation: appSectionIn .17s ease-out; }
@keyframes appSectionIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ============================================================
   トースト(alert の置き換え。OSのダイアログを出さない)
   ============================================================ */
#pwaToastWrap {
  position: fixed; left: 12px; right: 12px; bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.pwa-toast {
  max-width: 560px; background: rgba(15, 23, 42, .95); color: #fff;
  padding: 11px 16px; border-radius: 13px; font-size: 13.5px; line-height: 1.55;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3); white-space: pre-wrap; word-break: break-word;
  opacity: 0; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease;
}
.pwa-toast.on { opacity: 1; transform: none; }
.pwa-toast.err { background: rgba(153, 27, 27, .96); }

/* ドロワー先頭に足した上部タブぶんの区切り */
@media (max-width: 780px) {
  body.pwa #pwaSideTop { border-bottom: 1px solid var(--s100); padding-bottom: 8px; }
}

/* ============================================================
   Android(ホーム画面から起動)の調整
   ・Androidはシステムバーが別枠なので env(safe-area-*) が 0 になる。
     下バーが詰まって見えるので固定の余白を足す。
   ・キーボードは interactive-widget=resizes-content でレイアウトごと縮む。
   ============================================================ */
@media (max-width: 780px) {
  body.pwa.pwa-android #pwaTabbar { padding-bottom: 9px; padding-top: 5px; }
  body.pwa.pwa-android .content { padding-bottom: 78px; }
  body.pwa.pwa-android .chat-input-row { padding-bottom: 10px; }
  body.pwa.pwa-android .sidemenu { padding-top: 0; }
  /* Androidは押し込みより「押した色」のほうが自然 */
  body.pwa.pwa-android button:active { transform: none; opacity: .72; }
  body.pwa.pwa-android #pwaTabbar button.active { background: rgba(45, 212, 191, .12); }
}
body.pwa.pwa-android #pwaPtr { top: 66px; }

/* ============================================================
   「アプリとして追加」バナー(ブラウザで開いているときだけ出る)
   ============================================================ */
#pwaInstall {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 80; display: flex; align-items: center; gap: 12px;
  background: rgba(13, 17, 23, .97); color: #e6edf3;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px;
  padding: 12px 14px; font-size: 12.5px; line-height: 1.55;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .34);
  opacity: 0; transform: translateY(12px); transition: opacity .22s ease, transform .22s ease;
}
#pwaInstall.on { opacity: 1; transform: none; }
#pwaInstall .pi-tx { flex: 1; min-width: 0; }
#pwaInstall .pi-tx b { color: #fff; font-size: 13px; }
#pwaInstall .pi-btns { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#pwaInstall button { border-radius: 10px; font-size: 12.5px; font-weight: 700; padding: 9px 14px; border: none; }
#pwaInstall .pi-add { background: #2dd4bf; color: #04211f; }
#pwaInstall .pi-later { background: none; color: #8b98a9; border: 1px solid rgba(255, 255, 255, .16); }
@media (min-width: 781px) {
  #pwaInstall { left: auto; right: 18px; max-width: 460px; }
}

/* ============================================================
   スマホ: チャットの会話欄が潰れないようにする(2026-08-21)
   症状: iPhoneでチャンネルを開くと、☰一覧バー + チャンネル見出し(説明で3行) +
         🎙録音バー(ボタン+説明が2行)で上が埋まり、キーボードを出すと
         会話がほぼ見えず、入力欄まで画面の外へ押し出されていた。
   方針: 上に積まれた「常設の帯」を1行に詰め、キーボードが出ている間は
         畳んで、その高さを会話(.chat-messages)へ渡す。
   ※ chat-theme.css / callrec.js のCSSは実行時に <head> へ後入れされるため、
     ここは body 起点のセレクタで詳細度を上げて上書きしている。
   ============================================================ */
@media (max-width: 780px) {
  /* 1) チャンネル見出しは常に1行(名前を優先し、説明は入る幅だけ…で省略) */
  body #tab-chat .chat-head {
    flex-wrap: nowrap; white-space: nowrap; overflow: hidden;
    gap: 6px; padding: 8px 12px; min-height: 0;
  }
  body #tab-chat .chat-head > strong { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  body #tab-chat .chat-head > .muted {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px;
  }

  /* 2) 🎙録音バーは待機中だけ1行に畳む(説明文はしまう。録音中は今までどおり) */
  body #tab-chat #crBar { padding: 6px 10px; gap: 6px; }
  body #tab-chat #crBar:not(.rec) .cr-hint { display: none; }
  body #tab-chat #crBar:not(.rec) .cr-btn { min-height: 34px; padding: 7px 12px; font-size: 13px; }

  /* 3) キーボードを出している間は、周辺の帯を畳んで会話に高さを渡す */
  body.kb-open #tab-chat .chat-mobile-bar { display: none; }
  body.kb-open #tab-chat #crBar:not(.rec) { display: none; }
  body.kb-open #tab-chat #crPanel { max-height: 20vh; }
  body.kb-open #tab-chat .chat-head { padding: 5px 12px; font-size: 12.5px; }
  body.kb-open #tab-chat .chat-head > .muted { display: none; }
  body.kb-open #tab-chat .chat-pin { max-height: 18%; }
  /* 会話の下限(既定 min(30%,150px))は、キーボードで縮んだ高さでは
     入力欄を画面外へ押し出す。キーボード中だけ下限を下げて入力欄を必ず残す */
  body.kb-open #tab-chat .chat-messages { min-height: 48px; }
}