/* v6.156.4 アルバイト向け app TOP（app.grpkoshin.com）の **portal ビュー専用** スタイル。
 *
 * ログイン画面は grpkoshin.com と完全一致させるため style.css + index.css を共通参照する
 * （app-index.html が両 CSS を読み込む）。本ファイルには **ログイン関連スタイルは含めない**。
 *
 * portal 部分（ヒーロー・CTA・KOSHIN NEXT フッター）のクラスはすべて `app-` プレフィックスにして、
 * style.css / index.css の既存クラス（.hero-card / .gs-topbar / .gs-logo 等）と衝突しないようにする。
 * CSS 変数（--color-* / --shadow-*）は style.css :root を参照する（このファイルでは再定義しない）。 */

/* portal 表示中の body 背景は index.css の body.portal-on を共有参照する（v6.156.5・grpkoshin と完全同一の薄青系グラデ）。
 *   → app-index.js が showPortal で body.className='portal-on' を付与。ここでは独自背景を定義しない（#92 同一参照）。 */

/* ===== ヘッダーは style.css の共通 gs-topbar / gs-logo / gs-btn-icon を使う（v6.156.6・既存ページと同一・#92） =====
 *   独自 .app-topbar 系は廃止。app-index.js が #logoutBtn にクロスドメインログアウトをバインドする。 */

/* v6.156.6: 横スクロール対策。根本原因（フッターの負マージン）は別途修正済み。
 *   これは親コンテナ限定の保険（body 全体ではなく portal ビュー内に限定）。login ビューには影響しない。 */
#portalSection { overflow-x: hidden; }

/* ===== メイン ===== */
.app-main { padding: 20px 16px 32px; max-width: 500px; margin: 0 auto; }

/* ===== 挨拶 ===== */
.app-greet { padding: 4px 4px 20px; }
/* v6.197.1: 「お疲れ様です」（.app-greet-text）を除去し、氏名（左）+ 部署・日付（右）の 1 行 flex に再構成（信介さん FB）。
   フォントサイズ・色は従来値のまま（name 20px / meta 12px）。長い氏名は flex-wrap で自然折返しし、
   meta は margin-left:auto + nowrap で折返し後も右寄せ・日付は分断しない（412px 幅観点）。 */
.app-greet-row { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.app-greet-name { font-size: 20px; font-weight: 500; letter-spacing: -.01em; color: var(--color-text); }
.app-greet-meta { font-size: 12px; color: var(--color-text-faint); margin-left: auto; white-space: nowrap; }

/* ===== ヒーローカード ===== */
.app-hero-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: #fff; border-radius: 24px; padding: 22px 24px;
  box-shadow: 0 4px 16px rgba(26,115,232,.25); margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.app-hero-card::after {
  content: ""; position: absolute; right: -50px; top: -30px;
  width: 160px; height: 160px; background: rgba(255,255,255,.08); border-radius: 50%;
}
.app-hero-card::before {
  content: ""; position: absolute; right: 24px; bottom: -40px;
  width: 100px; height: 100px; background: rgba(255,255,255,.04); border-radius: 50%;
}
.app-hero-label {
  font-size: 11px; opacity: .9; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500; margin-bottom: 6px; position: relative; z-index: 1;
}
/* v6.156.6/.7: 次の現場の日付（本日/明日/明後日 + M/d（曜日））・フォント拡大 */
.app-hero-date {
  font-size: 17px; font-weight: 600; opacity: .96; margin-bottom: 6px;
  position: relative; z-index: 1;
}
.app-hero-time {
  font-size: 32px; font-weight: 500; letter-spacing: -.02em; margin-bottom: 6px;
  font-feature-settings: 'tnum'; position: relative; z-index: 1;
}
.app-hero-site { font-size: 15px; font-weight: 500; margin-bottom: 2px; position: relative; z-index: 1; }
/* v6.156.7: 現場名の下のポスト名（現場名より小さく控えめ・空なら JS で hidden） */
.app-hero-post { font-size: 12px; font-weight: 400; opacity: .82; margin-bottom: 4px; position: relative; z-index: 1; }
.app-hero-loc {
  font-size: 12px; opacity: .85; display: flex; align-items: center; gap: 6px;
  position: relative; z-index: 1;
}
.app-hero-loc svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ===== プライマリCTA ===== */
.app-cta-primary {
  position: relative; /* v6.156.7: 右上バッジの基準 */
  width: 100%; background: var(--color-primary); color: #fff; border: none;
  height: 56px; border-radius: 28px; font-size: 16px; font-weight: 500;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 2px 6px rgba(26,115,232,.3); transition: all .15s;
  text-decoration: none; margin-bottom: 10px;
}
.app-cta-primary:hover { box-shadow: 0 4px 12px rgba(26,115,232,.4); transform: translateY(-1px); }
.app-cta-primary svg { width: 22px; height: 22px; }
/* v6.156.7/.8: CTA 右上の要対応数バッジ（赤丸白文字・0 は JS で hidden）。
 *   v6.156.8 で一回り拡大（24→28px・font 12→15px）。報告ページのタブ内 .badge-pending は無変更（CTA 専用クラス）。 */
.app-cta-badge {
  position: absolute; top: -10px; right: -10px;
  min-width: 28px; height: 28px; padding: 0 8px 2px;
  background: #e53935; color: #fff;
  font-size: 15px; font-weight: 700; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-sizing: border-box;
}

/* ===== セカンダリ ===== */
.app-cta-secondary {
  width: 100%; background: #fff; color: var(--color-primary);
  border: 1px solid var(--color-border); height: 52px; border-radius: 26px;
  font-size: 15px; font-weight: 500; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  text-decoration: none; transition: all .15s;
}
.app-cta-secondary:hover { background: var(--color-primary-soft); }
.app-cta-secondary svg { width: 16px; height: 16px; }

/* ===== フッター（KOSHIN NEXT ブランドエリア） ===== */
/*   v6.156.6: 横スクロール解消のため負の左右マージン（-16px）を撤去（body 幅超過の主因だった）。
 *   footer は #portalSection 直下の全幅ブロックのため margin 0 でフルブリード。 */
.app-brand-footer {
  margin: 40px 0 0;
  background: var(--color-surface-2);
  padding: 16px 24px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  text-align: center;
  border-top: 1px solid var(--color-divider);
}
/* v6.156.6/.7: 会社名行は削除・ロゴをさらに拡大（40px → 60px）・上下余白を詰める */
.app-brand-footer-logo { height: 60px; width: auto; max-width: 100%; opacity: .92; margin-bottom: 4px; }
.app-brand-footer-version {
  margin-top: 2px; font-size: 10px; color: var(--color-text-faint);
  font-variant-numeric: tabular-nums; letter-spacing: .05em;
}

/* ===== v6.194.1/.3: お知らせ（ホーム TOP カード + 一覧アイテム・.app-news-* で .news- / .ann- 系と非衝突） =====
   v6.197.1: 旧コメント内の「.news-＊/」の並びが「＊/」としてコメントを早期終了させ、残骸が不正セレクタとして
   直後の .app-news-card { } ルール全体を無効化していた（v6.194.1 以来 padding/border/margin が全て未適用＝
   CTA と「一覧を見る」が近すぎた根本原因）。コメント内に「＊/」の並びを書かないこと。 */
/*   v6.194.3: お知らせ pane を廃止しホーム TOP の「お知らせカード」に一本化（.app-news-card-*）。
 *   一覧アイテム（.app-news-list/.app-news-item*）はカード内で再利用。CSS 変数は style.css :root 参照・本文 15px。
 *   0件/取得失敗時は app-index.js が #appNewsCard ごと非表示にするため空状態 DOM/CSS は持たない。 */
.app-news-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  /* v6.197.1: 報告確認 CTA と「一覧を見る」（本カード内の見出し行）の押し間違え防止（信介さん FB）。
     親 .app-main は block コンテナのため CTA の margin-bottom:10px と本 margin-top は【相殺】され、
     実間隔 = max(10, margin-top)。当初の 14px は実質 +4px にしかならず効かなかった（追加修正で 28px に）。
     → 実間隔 = ちょうど 28px。margin-top 方式なのでお知らせ 0 件（カード非表示）時は従来レイアウトのまま。
     この値を変える時は「相殺後の実間隔 = max(10, この値)」で計算すること。 */
  border-radius: 16px; padding: 16px; margin-top: 28px; margin-bottom: 16px;
}
.app-news-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.app-news-card-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--color-text); }
.app-news-card-title svg { width: 20px; height: 20px; color: var(--color-primary); flex-shrink: 0; }
.app-news-card-badge {
  min-width: 20px; height: 20px; padding: 0 6px 1px;
  background: #e53935; color: #fff; border-radius: 10px;
  font-size: 11px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.app-news-card-link { font-size: 13px; font-weight: 500; color: var(--color-primary); text-decoration: none; flex-shrink: 0; white-space: nowrap; }
.app-news-card-link:hover { text-decoration: underline; }
.app-news-list { display: flex; flex-direction: column; gap: 10px; }
.app-news-item {
  display: block; text-decoration: none;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: 12px; padding: 12px 14px; transition: box-shadow .15s, transform .15s;
}
.app-news-item:hover { box-shadow: var(--shadow-1); transform: translateY(-1px); }
.app-news-item-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.app-news-item-category {
  font-size: 11px; font-weight: 700; color: var(--color-primary);
  background: var(--color-primary-soft); border-radius: 6px; padding: 2px 8px;
}
.app-news-item-date { font-size: 12px; color: var(--color-text-faint); }
/* v6.195.0: 掲示板名ラベル（カテゴリ chip より控えめなグレー枠） */
.app-news-item-board {
  font-size: 11px; font-weight: 600; color: var(--color-text-muted);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 6px; padding: 2px 8px;
}
/* v6.195.0: 新カテゴリの色分け（重要=赤 / 一般=グレー / 募集=緑・announcements.css .ann-cat と同トーン #92） */
.app-news-item-category.cat-important { background: rgba(229,57,53,.12); color: #e53935; }
.app-news-item-category.cat-general { background: var(--color-surface-2); color: var(--color-text-faint); }
.app-news-item-category.cat-recruit { background: rgba(16,185,129,.14); color: #0f9d67; }
.app-news-item-title {
  font-size: 15px; font-weight: 500; color: var(--color-text);
  margin: 0; line-height: 1.5; display: flex; align-items: center; gap: 6px;
}
.app-news-item-dot { width: 8px; height: 8px; border-radius: 50%; background: #e53935; flex-shrink: 0; }

/* ===== v6.194.0: ボトムタブ（recruit .rc-tabs を app 向けに水平展開 #92・命名は .app-* で非衝突） ===== */
/* タブバー本体（画面下部に固定・中央寄せ・safe-area 対応・recruit .rc-tabs と同構造） */
.app-tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 500px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider, rgba(60,64,67,.12));
  display: flex; z-index: 40;
  padding-bottom: env(safe-area-inset-bottom);
}
.app-tab-item {
  position: relative; flex: 1;
  background: none; border: none; cursor: pointer; font-family: inherit;
  padding: 8px 2px 7px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--color-text-faint); transition: color .15s;
}
.app-tab-item.is-active { color: var(--color-primary); }
.app-tab-icon { width: 22px; height: 22px; }
.app-tab-label { font-size: 10px; font-weight: 500; }
/* 未読バッジ（v6.194.0 は枠のみ・既定 display:none。将来 .has-badge 付与で表示）。
   赤=未読/新着（週間予定表 .unfilled-badge / TOP .badge-pending と並列定義 #92・色セマンティック分離）。 */
.app-tab-badge {
  position: absolute; top: 1px; right: 50%; transform: translateX(24px);
  min-width: 18px; height: 18px; padding: 0 4px 1px;
  background: #e53935; color: #fff; border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25); border-radius: 9999px;
  font-size: 10px; font-weight: 700; line-height: 1;
  display: none; align-items: center; justify-content: center; box-sizing: border-box;
}
.app-tab-item.has-badge .app-tab-badge { display: flex; }

/* タブコンテンツ（案 A: JS で is-active を付替えて show/hide）。
   下部はタブバー高さ + safe-area 分の余白を確保し、ホームの footer 等がタブに隠れないようにする。 */
.app-tab-content { display: none; padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
.app-tab-content.is-active { display: block; }

/* ===== v6.198.0: チャット pane（スタッフチャット Phase 1） =====
   recruit-onboarding .rc-chat-pane の複製改変（#93: recruit は「画面下端」基準の固定だが、
   app はボトムタブ .app-tabbar（約54px + safe-area）の上に固定する必要がある = 複製時の要改変ポイント）。
   バブル本体（.rc-chat-* / .rc-bubble）は staff-chat.css の複製版を共通参照。 */
.app-tab-content[data-pane="chat"] { padding-bottom: 0; } /* 高さは pane 内で計算するため既定の下余白を外す */
.app-chat-pane {
  display: flex; flex-direction: column;
  max-width: 500px; margin: 0 auto;
  /* ヘッダー約72px + タブバー約54px + セーフエリアを差引き。dvh 非対応ブラウザは vh フォールバック */
  height: calc(100vh - 72px - 54px - env(safe-area-inset-bottom));
  height: calc(100dvh - 72px - 54px - env(safe-area-inset-bottom));
}
.app-chat-pane .rc-chat-list {
  flex: 1; overflow-y: auto;
  padding-bottom: 80px; /* 固定入力欄（最大約134px）に最新メッセージが隠れない下余白 */
}
/* 入力欄はボトムタブ（z-index:40）の直上に固定 */
.app-chat-inputbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 500px;
  bottom: calc(54px + env(safe-area-inset-bottom));
  z-index: 39; box-sizing: border-box;
  align-items: flex-end; /* textarea が伸びても送信ボタンは下揃え */
}
/* v6.199.0: 送信ブロック中の案内バナー（対策1）。入力バー内に全幅で表示（文言はサーバー同梱 notice）。
   バー内配置のため updateChatLayout の ResizeObserver が高さを自動吸収する。 */
.app-chat-blocked-notice {
  flex-basis: 100%;
  font-size: 12px; line-height: 1.6; color: #b06000;
  background: #fff4e5; border: 1px solid rgba(230,81,0,.25); border-radius: 10px;
  padding: 10px 12px;
}
/* v6.198.1: 送信前プレビューは固定入力バー（bottom:54px + バー高 約62px）の直上に固定
   （recruit .rc-chat-pane の bottom:calc(122px+safe-area) と同型 #92・app はタブ高 54px 基準で再計算 #93） */
.app-chat-pane .app-chat-attach-preview.has {
  position: fixed; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 500px;
  bottom: calc(116px + env(safe-area-inset-bottom));
  z-index: 39; box-sizing: border-box;
}

/* textarea 化（初期1行・最大5行=138px・超過のみ内部スクロール。高さは app-chat.js の autosize が制御）
   v6.199.4: iOS Safari は font-size 16px 未満の入力欄フォーカスで画面を自動ズームするため 16px 化
   （padding 9→8px で 1 行時の高さ 42px を維持・最大5行 = 24px×5 + padding 16 + border 2 = 138px）。 */
.app-chat-pane textarea.rc-chat-input {
  flex: 1; min-width: 0;
  height: 42px; min-height: 42px; max-height: 138px;
  padding: 8px 14px; line-height: 1.5;
  font-size: 16px; font-family: inherit;
  border: 1px solid var(--color-border); border-radius: 20px;
  background: var(--color-surface-2); color: var(--color-text);
  resize: none; overflow-y: hidden; box-sizing: border-box;
}

/* ===== v6.199.4: iOS 自動ズーム対策（ログイン入力欄・app のみ） =====
   ログイン画面は index.css（会社側 grpkoshin.com と共用・14px !important）を参照しているため、
   本ファイルで後勝ち上書きする（読込順が index.css より後 + ID セレクタで詳細度も上）。
   注: 本ファイルはタブバー注入ページ（announcements/attendance/schedule）も読むが、
   #loginSection はそれらに存在しない（grep 確認済み）ため会社側ログインへは非波及。 */
#loginSection .login-card input[type="text"],
#loginSection .login-card input[type="password"] {
  font-size: 16px !important;
}

/* 準備中空状態（recruit .rc-coming-wrap を水平展開・中央寄せ・高齢アルバイト向けフォント 16/14px） */
.app-tab-empty { padding: 60px 24px; text-align: center; max-width: 500px; margin: 0 auto; }
.app-tab-empty-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--color-surface-2); color: var(--color-text-faint);
  display: grid; place-items: center; margin: 0 auto 16px;
}
.app-tab-empty-icon svg { width: 30px; height: 30px; }
.app-tab-empty-title { font-size: 16px; font-weight: 700; color: var(--color-text); margin: 0 0 8px; }
.app-tab-empty-desc { font-size: 14px; color: var(--color-text-muted); line-height: 1.7; margin: 0; }

/* ===== v6.232.1（機能② マイページ D案・DESIGN.md 準拠）: プロフィール帯ヒーロー + アイコン付きメニュー行 =====
   ステータスはドット、色はメニュー件数ピルのみ。塗りバッジ・色背景アイコン・weight700・強い影は使わない。 */
.app-mypage { padding: 16px; max-width: 560px; margin: 0 auto; }
/* ヒーロー（card 相当・padding0 + 上部に淡い primary-soft 帯） */
.app-mypage-hero {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px;
  box-shadow: var(--shadow-1); padding: 0; overflow: hidden; margin-bottom: 14px;
}
.amh-band {
  background: linear-gradient(180deg, var(--color-primary-soft), transparent);
  padding: 22px 22px 18px; display: flex; align-items: center; gap: 14px;
}
.amh-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-surface); box-shadow: var(--shadow-1); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500;
}
.amh-name { font-size: 19px; font-weight: 500; letter-spacing: -.01em; color: var(--color-text); }
.amh-dept { font-size: 12.5px; color: var(--color-text-muted); margin-top: 3px; }
/* メニューカード（card 相当・薄 padding） */
.app-mypage-menu-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px;
  box-shadow: var(--shadow-1); padding: 6px 18px; margin-bottom: 14px;
}
.app-menu-item {
  display: grid; grid-template-columns: 38px 1fr auto auto; align-items: center; gap: 14px;
  padding: 15px 4px; text-decoration: none; cursor: pointer;
}
/* アイコンは色背景なし・text-muted 単色 */
.app-menu-ico { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); }
.app-menu-ico svg { width: 22px; height: 22px; }
.app-menu-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-menu-main .t { font-size: 15px; font-weight: 500; color: var(--color-text); }
.app-menu-main .s { font-size: 12px; color: var(--color-text-faint); }
/* 件数ピル = primary-soft（0件は JS で display:none） */
.app-menu-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 7px; border-radius: 9999px;
  font-size: 11px; font-weight: 600; background: var(--color-primary-soft); color: var(--color-primary);
}
.app-menu-arrow { color: var(--color-text-faint); font-size: 18px; }

/* ===== v6.197.0: カテゴリ色プリセットパレット（c-<key>・announcements.css の 2 系統と並列定義 #92） =====
   app のお知らせカード用。値は announcements.css の c- 系と同一（対比表チェック済み）。
   旧 cat-important/cat-general/cat-recruit は静的フォールバック用に残置。 */
.app-news-item-category.c-red          { background: rgba(229,57,53,.12); color: #e53935; }
.app-news-item-category.c-blue         { background: var(--color-primary-soft, #e8f0fe); color: var(--color-primary, #1a73e8); }
.app-news-item-category.c-green        { background: var(--color-green-soft, rgba(52,168,83,.12)); color: var(--color-green, #188038); }
.app-news-item-category.c-emerald      { background: rgba(16,185,129,.14); color: #0f9d67; }
.app-news-item-category.c-amber        { background: var(--color-amber-soft, rgba(245,167,66,.16)); color: #b06000; }
.app-news-item-category.c-gray         { background: var(--color-surface-2, #f1f3f4); color: var(--color-text-faint, #80868b); }
.app-news-item-category.c-gray-outline { background: var(--color-surface-2, #f1f3f4); color: var(--color-text-muted, #5f6368); border: 1px solid var(--color-border, #dadce0); }
.app-news-item-category.c-purple       { background: rgba(124,92,224,.14); color: #7c5ce0; }

/* ===== v6.199.1: 送信取消し（案A・staff-chat.css と並列定義 #92） ===== */
.rc-chat-row .rc-bubble.rc-bubble-unsent, .rc-chat-row.me .rc-bubble.rc-bubble-unsent {
  background: rgba(60,64,67,.05); border: 1px dashed rgba(60,64,67,.35); color: var(--color-text-muted, #5f6368);
}
.rc-bubble.rc-bubble-unsent .rc-bubble-text { color: var(--color-text-muted, #5f6368); }
.rc-chat-row .rc-bubble.rc-bubble-unsent-ph, .rc-chat-row.me .rc-bubble.rc-bubble-unsent-ph {
  background: rgba(60,64,67,.06); border: 1px solid rgba(60,64,67,.12);
}
.rc-unsent-ph { font-size: 12px; color: var(--color-text-muted, #5f6368); }
.rc-unsent-pill {
  display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 9999px;
  background: rgba(60,64,67,.12); color: #5f6368; margin-bottom: 4px;
}
.rc-unsent-trace { font-size: 11px; color: var(--color-text-faint, #9aa0a6); margin-top: 2px; }

/* 長押しボトムシート（app・コピー / 送信を取り消す）
   v6.199.4: 案A（暗転 + 対象浮き上がり）に合わせ暗転を .35 → .45 に強める。 */
.app-msg-sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 60; display: none; }
.app-msg-sheet-overlay.open { display: block; }

/* ===== v6.199.4: 長押し対象ハイライト（案A・LINE/LINEWORKS 方式） =====
   シート表示中、対象メッセージの行だけを暗転オーバーレイ（z:60）より上に浮き上がらせる。
   祖先（.app-tab-content / .app-chat-pane / .rc-chat-list）はスタッキング文脈を作らないため
   position:relative + z-index が root 文脈で確実に効く（実 DOM 確認済み）。z:61 はシートと同層だが
   シートは body 末尾 append で DOM 順が後 = 重なった場合もシートが上に描画される。
   枠は outline でなく box-shadow の二重リング（角丸追従 + レイアウト不変・css-ui.md v6.14.0 知見）。
   スコープは .app-chat-pane 配下限定 = recruit チャット / PC 会社側へ構造的に非波及（v6.199.3 と同じ二重分離）。 */
.app-chat-pane .rc-chat-row.app-msg-target {
  position: relative; z-index: 61;
}
.app-chat-pane .rc-chat-row.app-msg-target .rc-bubble {
  box-shadow: 0 0 0 3px #4f8df7, 0 0 16px 4px rgba(26, 115, 232, .45);
}
.app-msg-sheet {
  position: fixed; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 500px; bottom: 0; box-sizing: border-box;
  background: var(--color-surface, #fff); border-radius: 16px 16px 0 0;
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 24px rgba(0,0,0,.18); z-index: 61;
}
.app-msg-sheet button {
  display: block; width: 100%; font: inherit; font-size: 15px; padding: 14px;
  background: none; border: none; border-bottom: 1px solid rgba(60,64,67,.08); text-align: center; cursor: pointer;
}
.app-msg-sheet button.danger { color: #c62828; font-weight: 600; }
.app-msg-sheet button:last-child { border-bottom: none; color: var(--color-text-muted, #5f6368); }

/* ===== v6.199.3: iOS 長押し時の文字選択抑止（app チャットのみ） =====
   iOS Safari の長押し文字選択は contextmenu 抑止（v6.199.1・Android 向け）では止まらないため、
   CSS で選択自体を無効化する。スコープは .app-chat-pane / .app-msg-sheet 配下に限定 =
   recruit チャット（共有レンダラーの他利用箇所）と PC 会社側 staff-chat.html には構造的に非適用
   （recruit-onboarding/staff-chat は本ファイル非読込 + セレクタでも二重に分離。
   ※ タブバー注入ページは本ファイルを読むが .app-chat-pane 等の DOM を持たない・v6.199.4 訂正）。
   全文コピーはボトムシートの「コピー」で従来どおり可能（機能削減なし）。 */
.app-chat-pane .rc-chat-row, .app-chat-pane .rc-chat-row * {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.app-msg-sheet-overlay, .app-msg-sheet, .app-msg-sheet button {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

/* ============ v6.210.0: イベント予約の入口カード（ホーム pane） ============ */
/* お知らせカード（.app-news-card）と同トーンの白カード。対象タグ保持者のみ JS が表示する。 */
.app-es-entry {
  display: flex; align-items: center; gap: 12px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(60, 64, 67, .14));
  border-radius: 20px;
  padding: 14px 16px;
  margin-top: 12px;
  box-shadow: var(--shadow-1, 0 1px 2px rgba(60, 64, 67, .08));
  text-decoration: none; color: var(--color-text, #202124);
}
.app-es-entry svg { width: 22px; height: 22px; color: var(--color-primary, #1a73e8); flex-shrink: 0; }
.app-es-entry-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.app-es-entry-txt b { font-size: 14.5px; font-weight: 600; }
.app-es-entry-txt span { font-size: 12px; color: var(--color-text-muted, #5f6368); }
.app-es-entry-chev { margin-left: auto; color: var(--color-text-faint, #80868b); font-size: 18px; }