/* Reset & base styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

/* 縦スクロールバー幅(::-webkit-scrollbar=8px・非オーバーレイ)の有無で window 利用可能幅が変わり、
   中央寄せ(mainContent margin:0 auto)の中身が左右に約4px ブレる問題への対処（2026/6/12・PC-9 横ブレ解消）。
   root スクローラに gutter を常時確保＝スクロールバーの出没（受信=件数多で有／送信=少/空で無 等）に依らず
   表示幅を一定化し、画面切替時の横ブレを無くす。未対応ブラウザ(旧Safari)は従来挙動にフォールバック（無害）。 */
html {
  scrollbar-gutter: stable;
}

body {
  font-family: "Hiragino Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #09090b;
  color: #fafafa;
}

input,
textarea,
select,
button {
  font-family: inherit;
}

/* ============================================================
   2026/7/10：押した感（pressed state）＝全 <button> に共通の押下フィードバック（Apple 寄り・ripple 不採用・二宮さん確定）。
   ・押している間だけ ★はっきり凹む＝暗く(brightness 0.78)＋縮小(scale 0.94・44px で約2.6px)＋内側の影(inset shadow)。離すと 0.12s で戻る。
   ・2026/7/10 調整：旧 0.92/0.97 は実機で目視困難（44px で約1.3px 縮小）と確定（実イベント計測で :active は Chromium/WebKit とも発火・原因は弱すぎ）。値を強め、
     ★押した瞬間は transition:none で ★即時に凹む（!important で inline transition:"all …" にも勝つ）＝離すときだけ 0.12s で戻す＝「押した瞬間に凹み、離した瞬間に戻る」体感。
   ・★button 要素セレクタのみ（div/span の onClick 行・モーダル backdrop には当てない＝backdrop の dim を避ける。型2 は次段で JS state 方式）。
   ・iOS 既定のグレー矩形ハイライトは index.html:73 -webkit-tap-highlight-color:transparent で既に抑止済（本 CSS と二重にならない）。touch-action:manipulation(index.html:86)・非ズーム viewport(index.html:11) も既設定。
   ・inline transform:translateY を持つ ~11 button は scale が効かず dim+inset影 のみ／inline box-shadow を持つ button（FAB のグラデ影 等）は inset影 が効かず scale+dim のみ（いずれも許容・非破壊・JSX 不変）。
   ・disabled button は :active に非マッチ＝処理中スピナー(opacity 0.7 等)との二重 dim なし（button:disabled:active でブラウザ差も明示的に打ち消す）。
   ・prefers-reduced-motion では scale を止め、dim+inset影 は維持（.btn-spinner の @media と同作法）。
   ============================================================ */
button {
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}
button:active {
  filter: brightness(0.78);
  transform: scale(0.94);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
  /* 押した瞬間は ★即時（transition:none）＝離すときだけ上の button{} の 0.12s で戻す。
     ★!important＝inline transition:"all …" を持つ button にも勝たせ、押下の即時性を全 button で揃える（filter/transform/box-shadow 本体には付けない）。 */
  transition: none !important;
}
button:disabled:active {
  filter: none;
  transform: none;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  button:active {
    transform: none;
  }
}

/* ============================================================
   2026/7/10：押した感 その2＝押せる行・カード（div/span+onClick）用の「押している間だけへこむ」表現（型2・opt-in）。
   ・★:active は使わない（非 button の :active は iOS WKWebView で不確実。v43/v44 調査で確定）＝JS state（usePressable）で .pressable-press を付け外し。
   ・button:active（上）と体感を揃える方向。行/カードは大きい面なので控えめに（暗く brightness 0.90＋わずかに縮小 scale 0.985）。
     押した瞬間は transition:none で ★即時に凹み、離すと .pressable の 0.12s で戻す。
   ・.pressable-press の transition:none !important は inline transition:"all …"（例 ChatPanel ルーム行）にも勝たせ、押下の即時性を揃える。
   ・prefers-reduced-motion では scale を止め dim は維持（button:active / .btn-spinner と同作法）。
   ・★backdrop / 透明レイヤ（OverlayModal 等 42件）には ★付けない＝対象要素だけ .pressable を付与する opt-in 方式（画面全体の暗転を防ぐ）。
   ============================================================ */
.pressable {
  transition: transform 0.12s ease, filter 0.12s ease;
}
.pressable-press {
  transition: none !important;
  filter: brightness(0.90);
  transform: scale(0.985);
}
@media (prefers-reduced-motion: reduce) {
  .pressable-press {
    transform: none;
  }
}

/* iOS でズームを防ぐため、入力フィールドは最低 16px */
input,
textarea,
select {
  font-size: 16px;
}

/* スクロールバー（任意） */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ============================================================
   Phase 24b 後続 (2026/5/27 セッション 58): 顧客一覧クイックアクション 3 ボタンの
   モバイル対応。プロジェクト全体は inline style 設計だが、メディアクエリ分岐は CSS
   側でしか書けないため、本セクションでのみ class セレクタを使用 (CrmPanel.jsx
   の 3 ボタンで className 指定)。

   ブレークポイント 640px: Tailwind の sm 互換、業界標準 (Apple HIG / Material
   Design でも mobile/tablet 境界として一般的)。

   PC (>= 641px) の表示:
     [📋 活動] [💰 売上] [📁 案件]
     - .qa-btn-icon: 絵文字表示 (📋 / 💰 / 📁)
     - .qa-btn-label: テキスト表示 (活動 / 売上 / 案件)
     - .qa-btn-mobile-label: 非表示 (display: none)

   スマホ (<= 640px) の表示 (2026/5/27 セッション 58 後半 更新):
     [動] [売] [件]
     - .qa-btn-icon: 非表示 (display: none、絵文字を消して幅を稼ぐ)
     - .qa-btn-label: visually-hidden (sr-only パターン、DOM 残置で a11y 維持)
     - .qa-btn-mobile-label: 漢字 1 文字表示 (動 / 売 / 件)
     - .qa-btn: 最小サイズに縮小 (高さ 24px 程度、padding 最小)

   a11y: スマホでも .qa-btn-label は visually-hidden で DOM に残し、スクリーン
   リーダーが「活動」「売上」「案件」を読み上げ可能。さらに button 自体に
   aria-label="活動記録" 等のフルラベルがある (CrmPanel.jsx 側で指定)、title 属性
   も併用で 3 層防御。
   ============================================================ */

/* PC 既定: スマホ専用ラベルを非表示 */
.qa-btn-mobile-label {
  display: none;
}

@media (max-width: 640px) {
  /* スマホ表示: 絵文字を完全に非表示 (幅節約) */
  .qa-btn-icon {
    display: none;
  }
  /* スマホ表示: PC 用テキスト「活動」「売上」「案件」を視覚的に隠す (sr-only パターン)。
     display: none ではなくスクリーンリーダーには残す手法 = a11y 維持 (button の
     aria-label と併せて 2 層防御)。 */
  .qa-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  /* スマホ表示: 漢字 1 文字「動」「売」「件」を表示 */
  .qa-btn-mobile-label {
    display: inline;
  }
  /* スマホ表示: ボタンサイズを最小化。
     漢字 1 文字なので min-width 24px / min-height 24px で十分、tap target は
     ブラウザ既定 (約 24-28px) を尊重しつつ最小、複数ボタン横並びでも会社名表示
     領域を最大化。 */
  .qa-btn {
    padding: 4px 6px !important;
    font-size: 13px !important;
    font-weight: 700;
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
}

/* ============================================================
   FilterBottomSheet（絞り込みボトムシート）内の入力 16px 強制（2026/7/7・修正B-2）。
   シート内の input は各画面の inline style が fontSize 13〜14px を指定しており、iOS Safari は
   16px 未満の入力への focus で ★ページを自動ズームする（実機写真で確定＝キーボード時の表示崩壊の一因）。
   上の基底ルール（L41-46「入力フィールドは最低 16px」）と方針は同じだが inline style に負けるため、
   ★シートの中身ラッパー .filter-sheet-content（FilterBottomSheet.jsx の scroller）にスコープした
   !important でシート内だけ 16px に引き上げる（placeholder も同サイズ）。
   スコープ外＝PC の浮きパネル（DropdownFilterPanel）と画面本体の見た目は不変・5画面側 JSX も無変更。
   ============================================================ */
.filter-sheet-content input,
.filter-sheet-content select,
.filter-sheet-content textarea {
  font-size: 16px !important;
}
.filter-sheet-content input::placeholder,
.filter-sheet-content textarea::placeholder {
  /* 2026/7/9 見切れ対策(A): シート内も placeholder は一段小さく（入力値は 16px 維持＝iOS ズーム防止／placeholder サイズはズームに無関係）。 */
  font-size: 0.87em !important;
}

/* ============================================================
   2026/7/9 見切れ対策(A)：placeholder（薄い案内文）を入力値より ★一段小さく（0.87em）。
   ・iOS Safari は placeholder に text-overflow:ellipsis が効かず右端で単純クリップするため、
     文字を小さくして「入る量」を増やす（文言短縮=(B) と併用）。
   ・★入力値（入力した文字）の font-size は変えない＝::placeholder のみに適用（可読性は値側で担保）。
   ・em 指定＝各 input の実 font-size に対する相対（例 15px→約13px）。5画面の絞り込みシートは上のスコープ規則で別途適用。
   ============================================================ */
input::placeholder,
textarea::placeholder {
  font-size: 0.87em;
}

/* ============================================================
   2026/7/9：共通スピナー部品 ButtonSpinner（src/shared/ui/ButtonSpinner.jsx）の回転。
   ・アニメ本体の @keyframes spin は App.jsx:4959 にグローバル定義済（ここでは名前参照のみ・keyframes を増やさない）。
   ・速度 0.8s＝ProjectsPanel.jsx:588 の既存 in-button spinner に合わせる。
   ・★prefers-reduced-motion:reduce では回転を止める（EmailInboxPanel.css:216-218 と同作法）。
   ============================================================ */
.btn-spinner {
  animation: spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .btn-spinner {
    animation: none;
  }
}

/* ============================================================
   2026-07-26：長押しでOSの文字選択（青い選択＋コピー/調べるの帯）が起きるのを止める★単一情報源。
   ・当てる先＝(1) 長押しの共通部品 useLongPress が配る目印 [data-longpress]
               (2) 長押しで出るメニュー [data-picker]（リアクション/返信/削除 等）
     ＝★新しい画面は共通部品を使うだけで自動的に効く（範囲の指定を書き足す必要が無い）。
   ・★body や * には当てない（入力欄が壊れる／iOS 26 の WKWebView 不具合報告があるため必要な場所に限る）。
     出典 https://developer.apple.com/forums/thread/797368 （-webkit-user-select:none と特定操作の
     組合せで WKWebView が落ちる報告。iOS beta 7 で修正済だが、全体に当てない根拠として記録）
   ・★入力欄（input/textarea/入力できる箇所）と、読んでコピーしたい箇所 [data-selectable="true"] は
     選択を戻す（打てる・選べる・貼れる／メール本文はコピーできる）。
   ・★touch-action はここに入れない（会話は pan-y など箇所ごとの事情があるため各箇所のまま）。
   ・出典（止める指定の中身）＝ https://developer.apple.com/forums/thread/691568
   ・歯止め＝src/shared/hooks/longPressNoSelect.source.test.js（★走査＝固定の一覧を持たない）
   ============================================================ */
[data-longpress],
[data-picker] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
[data-longpress] input,
[data-longpress] textarea,
[data-longpress] [contenteditable="true"],
[data-longpress] [data-selectable="true"],
[data-picker] input,
[data-picker] textarea,
[data-picker] [contenteditable="true"],
[data-picker] [data-selectable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}