/* v6.198.0 スタッフチャット（会社側 staff-chat.html + app チャット pane 共用）
調査 docs/research/staff-chat_20260703.md §7。
- .sc-* = 会社側ページのレイアウト（recruit-admin .ra-grid の 2 カラム版・新規プレフィックスで非衝突 #93）
- .rc-chat-* / .rc-bubble 等 = recruit.css のチャットバブル群の意図された複製（#92）。
RecruitChat.render（共有描画モジュール）が出力するクラス名のため名前は rc- のまま。
recruit.css は本ページ・app-index では読み込まない（§8-1 recruit.css 非参照）ためここに複製する。
変更時は recruit.css L244〜 と grep 同期すること（#92）。 */
/* ===== チャットバブル（recruit.css L244-270 の複製・#92） ===== */
.rc-chat-list { display:flex; flex-direction:column; gap:2px; overflow-y:auto; padding:8px 4px; }
.rc-chat-empty { text-align:center; color:var(--color-text-faint); font-size:13px; padding:30px 10px; }
.rc-chat-day { text-align:center; margin:12px 0 8px; }
.rc-chat-day span { font-size:11px; color:var(--color-text-muted); background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:9999px; padding:2px 12px; }
.rc-chat-row { display:flex; gap:7px; align-items:flex-end; margin:5px 0; max-width:100%; }
.rc-chat-row.me { flex-direction:row-reverse; }
.rc-chat-avatar { width:28px; height:28px; flex-shrink:0; border-radius:50%; background:var(--color-primary-soft); color:var(--color-primary); display:grid; place-items:center; font-size:12px; font-weight:600; }
.rc-chat-col { display:flex; flex-direction:column; max-width:78%; }
.rc-chat-row.me .rc-chat-col { align-items:flex-end; }
.rc-chat-sender { font-size:10px; color:var(--color-text-faint); margin:0 0 2px 4px; }
/* v6.198.1 FB②': 右寄せ（会社側・showOwnSenderLabel）の送信者ラベルは右揃えの margin ミラー */
.rc-chat-row.me .rc-chat-sender { margin:0 4px 2px 0; }
/* v6.198.1: LINEWORKS 風メタ列（metaLayout:'side'・承認済みサンプル chat_meta_layout_sample.html 準拠）。
行は align-items:flex-end のためメタ列は吹き出しの下端に揃う（me=左下 / other=右下）。 */
.rc-chat-row.meta-side .rc-meta-col {
flex-shrink:0; display:flex; flex-direction:column; justify-content:flex-end;
gap:1px; font-size:10px; color:var(--color-text-faint); line-height:1.4; padding-bottom:2px;
}
.rc-chat-row.me.meta-side .rc-meta-col { align-items:flex-end; text-align:right; }
.rc-chat-row.other.meta-side .rc-meta-col { align-items:flex-start; }
.rc-meta-sender { color:var(--color-text-muted); font-weight:600; }
.rc-meta-status { white-space:nowrap; }
/* v6.205.0 FB-1: 受信（左寄せ）のメタ列上段 = 送信者名（senderInMeta）。長い名前は省略して
吹き出しレイアウトを崩さない（412px 実測・会社側 = スタッフ名 / app 側 = 拠点名の両方に適用）。 */
.rc-chat-row.other.meta-side .rc-meta-sender {
max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* v6.205.0 FB-2: 対応済みライン（緑系の点線 + ラベル・承認サンプル準拠の控えめトーン）。
描画はレンダラー opt-in confirmLine = 会社側 staff-chat.js のみが渡す（app には出ない = R-2・
本 CSS は app-index.html にも読み込まれるがクラス未使用のため不活性）。 */
.rc-confirm-line {
display: flex; align-items: center; gap: 12px; margin: 4px 0;
font-size: 11.5px; color: var(--color-green, #188038); font-weight: 600; white-space: nowrap;
}
.rc-confirm-line::before,
.rc-confirm-line::after {
content: ''; flex: 1; border-top: 1px dashed var(--color-green, #188038); opacity: .5;
}
/* メタ列の分だけ吹き出し列の最大幅を絞る（長文・添付カードの折返し崩れ防止） */
.rc-chat-row.meta-side .rc-chat-col { max-width:72%; }
/* v6.198.1: 本文中の URL リンク（linkify）。相手側=青系下線 / 自分側（青吹き出し）=白系下線。
長い URL は吹き出し幅で強制折返し（横溢れ防止）。 */
.rc-bubble .rc-link { color:var(--color-primary); text-decoration:underline; word-break:break-all; }
.rc-chat-row.me .rc-bubble .rc-link { color:#fff; }
.rc-bubble { padding:9px 13px; border-radius:16px; font-size:14px; line-height:1.6; word-break:break-word; }
.rc-chat-row.other .rc-bubble { background:var(--color-surface); border:1px solid var(--color-border); color:var(--color-text); border-bottom-left-radius:4px; }
.rc-chat-row.me .rc-bubble { background:var(--color-primary); color:#fff; border-bottom-right-radius:4px; }
.rc-chat-row.is-system .rc-bubble { background:var(--color-surface-2); border:1px solid var(--color-border); color:var(--color-text); }
.rc-chat-row.me.is-system .rc-bubble { border-bottom-right-radius:4px; }
.rc-sys-label { font-size:10px; color:var(--color-text-muted); margin-bottom:4px; }
.rc-sys-pre { font-family:inherit; font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-word; margin:0; }
.rc-bubble-text { white-space:normal; }
.rc-chat-time { font-size:10px; color:var(--color-text-faint); margin:2px 4px 0; display:flex; align-items:center; gap:5px; }
.rc-chat-row.me .rc-chat-time { flex-direction:row-reverse; }
.rc-read-mark { font-size:11px; color:var(--color-text-muted); }
/* 入力欄（recruit.css L267-270 の複製） */
.rc-chat-inputbar { display:flex; gap:8px; align-items:center; padding:10px; border-top:1px solid var(--color-divider, rgba(60,64,67,.10)); background:var(--color-surface); }
.rc-chat-input { flex:1; min-width:0; height:42px; padding:0 14px; font-size:14px; font-family:inherit; border:1px solid var(--color-border); border-radius:9999px; background:var(--color-surface-2); color:var(--color-text); }
.rc-chat-send { flex-shrink:0; height:42px; padding:0 16px; border-radius:9999px; border:none; background:var(--color-primary); color:#fff; font-size:14px; font-weight:500; font-family:inherit; cursor:pointer; }
.rc-chat-send:disabled { opacity:.5; cursor:default; }
/* ===== v6.198.1: 添付（recruit.css L427-458 の意図された複製 #92・変更時は grep 同期） ===== */
/* 「+」添付ボタン */
.rc-chat-attach-btn { flex-shrink:0; width:42px; height:42px; border:none; background:transparent; font-size:28px; font-weight:700; line-height:1; cursor:pointer; border-radius:9999px; color:var(--color-text-muted); display:flex; align-items:center; justify-content:center; padding:0 0 3px; box-sizing:border-box; }
.rc-chat-attach-btn:hover { background:var(--color-surface-2); }
.rc-chat-attach-btn:disabled { opacity:.5; cursor:default; }
/* 送信前プレビュー（横スクロール・× 取消） */
.rc-chat-attach-preview { display:none; }
.rc-chat-attach-preview.has { display:flex; gap:10px; overflow-x:auto; padding:8px 10px; background:var(--color-surface); border-top:1px solid var(--color-divider, rgba(60,64,67,.10)); }
.rc-pre-item { position:relative; flex-shrink:0; width:64px; display:flex; flex-direction:column; align-items:center; gap:3px; }
.rc-pre-thumb { width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--color-border); }
.rc-pre-pdf { width:56px; height:56px; display:grid; place-items:center; font-size:26px; background:var(--color-surface-2); border-radius:8px; border:1px solid var(--color-border); }
.rc-pre-name { font-size:9px; max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--color-text-muted); }
.rc-pre-del { position:absolute; top:-6px; right:-2px; width:20px; height:20px; border-radius:50%; border:none; background:#e53935; color:#fff; font-size:13px; line-height:1; cursor:pointer; }
/* メッセージ内の添付（画像サムネ / ファイルカード / 削除証跡） */
.rc-attachments { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.rc-att { position:relative; }
.rc-att-image .rc-att-thumb { display:block; width:240px; max-width:100%; height:180px; object-fit:cover; border-radius:10px; cursor:zoom-in; background:var(--color-surface-2); }
.rc-att-file { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:10px; text-decoration:none; color:var(--color-text); max-width:260px; }
.rc-att-ico { font-size:22px; flex-shrink:0; }
.rc-att-meta { display:flex; flex-direction:column; min-width:0; }
.rc-att-name { font-size:14px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rc-att-size { font-size:11px; color:var(--color-text-muted); }
.rc-att-deleted { font-size:13px; color:var(--color-text-faint); font-style:italic; padding:6px 0; }
.rc-att-file-wrap { position:relative; display:inline-block; }
.rc-att-del { position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:50%; border:none; background:rgba(32,33,36,.6); color:#fff; font-size:15px; line-height:1; cursor:pointer; opacity:0; transition:opacity .15s; }
.rc-att:hover .rc-att-del { opacity:1; }
@media (hover: none) { .rc-att-del { opacity:.85; } } /* タッチ端末は常時表示 */
/* 画像タップの全画面ライトボックス（RecruitChat.render が動的生成） */
.rc-lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:1000; align-items:center; justify-content:center; }
.rc-lightbox.open { display:flex; }
.rc-lightbox-img { max-width:96vw; max-height:92vh; object-fit:contain; border-radius:4px; }
.rc-lightbox-close { position:fixed; top:16px; right:16px; width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.2); color:#fff; font-size:22px; cursor:pointer; }
/* ===== 会社側ページ レイアウト（.sc-*・recruit-admin .ra-* の 2 カラム改変 #92） =====
v6.202.0 FB-2: ページ +100px（1250→1350 / 1210→1310）し、増分は全て左のスタッフリスト列
（320→420px）へ。チャットペインは remainder のため px 幅不変（1310 - 420 - gap14 = 876px = 従来と同値）。
ページ内見出し（.sc-header）は除去済み（グローバルヘッダーの表記のみ・当番ピル行がページ先頭）。 */
.gs-page:has(.sc-wrap) { max-width: 1350px; }
.sc-wrap { max-width: 1310px; margin: 0 auto; }
.sc-grid { display:grid; grid-template-columns: 420px minmax(0,1fr); gap:14px; align-items:start; }
.sc-panel { background: var(--color-surface); border:1px solid var(--color-border); border-radius:24px; box-shadow: var(--shadow-1); overflow:hidden; }
.sc-panel-head { padding:14px 18px; border-bottom:1px solid var(--color-divider, rgba(60,64,67,.10)); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sc-panel-head h2 { font-size: var(--text-sm); font-weight:700; margin:0; color: var(--color-text); }
.sc-panel-head .sc-head-loc { font-size:11px; color: var(--color-text-muted); }
/* ===== v6.198.3: 通知当番 + 対象現場設定ポップ =====
v6.202.0 FB-2: 1 枚カード同居 → 独立 3 ピル（①当番情報ピル ②「通知当番になる」③「⚙ 設定」）へ分割。
DESIGN.md 準拠（白ベース・ピル型・同一行 44px 基準 = ボタンは gs-btn-pill 既定 44px に戻す）。
狭幅は flex-wrap で折返し。既存の状態表示（0 名フォールバック ⚠ 等）・表示制御（is-hidden）は不変。 */
.sc-duty-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:4px 0 14px; }
.sc-duty-pill {
display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
min-height:44px; padding:8px 18px; box-sizing:border-box;
background:var(--color-surface); border:1px solid var(--color-border); border-radius:9999px;
box-shadow:var(--shadow-1); font-size:12px; color:var(--color-text);
max-width:100%;
}
.sc-duty-title { font-weight:700; color:var(--color-text-muted); flex-shrink:0; }
.sc-duty-list { min-width:0; }
.sc-duty-fallback { color:#b45309; font-weight:700; } /* 注意トーン（当番未設定 = 管理者フォールバック中） */
/* v6.202.0 FB-3: コントロールバー再構成（左: 情報/タグフィルター/一括送信・右: 当番トグル/⚙設定） */
.sc-duty-row .sc-duty-spacer { flex:1; }
.sc-duty-row .gs-btn.active { background: var(--color-primary-soft, #e8f0fe) !important; border-color: rgba(26,115,232,.45) !important; color: var(--color-primary, #1a73e8) !important; }
/* v6.202.0 FB-4: フォントを他のピルボタン（gs-btn-pill = --text-sm・通常ウェイト）と統一（太字解除） */
.sc-duty-toggle { cursor:pointer; user-select:none; gap:10px; font-weight:400; font-size:var(--text-sm, 14px); color:var(--color-text); }
.sc-duty-toggle.busy { opacity:.6; pointer-events:none; }
/* トグルスイッチ（DESIGN 準拠の最小実装・ON = primary。order/syukan の .toggle-switch と同型の並列定義 #92） */
.sc-switch {
position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0;
background: var(--color-border, #dadce0); border-radius:9999px; transition: background .18s;
}
.sc-switch-knob {
position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition: left .18s;
}
.sc-switch.on { background: var(--color-primary, #1a73e8); }
.sc-switch.on .sc-switch-knob { left:18px; }
/* フィルタモーダル（v6.202.0 FB-4: 案A = タップ式チップ + AND/OR セグメント・幅 560px / 文字 15px 基準） */
.sc-filter-note { font-size:13px; color:var(--color-text-muted, #5f6368); margin-bottom:12px; }
.sc-filter-mode {
display:inline-flex; margin-bottom:10px; border:1px solid var(--color-border, #dadce0);
border-radius:9999px; overflow:hidden; background:var(--color-surface-2, #f1f3f4);
}
.sc-filter-mode button {
font:inherit; font-size:13px; padding:8px 16px; border:none; background:none;
color:var(--color-text-muted, #5f6368); cursor:pointer; white-space:nowrap;
}
.sc-filter-mode button.active {
background:var(--color-surface, #fff); color:var(--color-primary, #1a73e8); font-weight:700;
box-shadow:var(--shadow-1, 0 1px 2px rgba(60,64,67,.15)); border-radius:9999px;
}
.sc-filter-chips { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 6px; }
.sc-filter-chip {
display:inline-flex; align-items:center; gap:7px;
font:inherit; font-size:15px; padding:9px 16px; border-radius:9999px;
border:1px solid var(--color-border, #dadce0); background:var(--color-surface, #fff);
color:var(--color-text); cursor:pointer;
}
.sc-fc-dot { width:10px; height:10px; border-radius:50%; background:var(--color-text-faint, #9aa0a6); flex-shrink:0; }
.sc-filter-chip.on { font-weight:700; }
.sc-filter-chip.on::after { content:'✓'; font-size:13px; font-weight:700; }
/* 選択中 = タグ色の淡背景 + 濃枠（ドット・✓ とも同系色。c-key 8 色 = .sc-tag と同値の並列定義 #92 対比表: 5 系統目） */
.sc-filter-chip.c-red .sc-fc-dot { background:#e53935; }
.sc-filter-chip.c-blue .sc-fc-dot { background:var(--color-primary, #1a73e8); }
.sc-filter-chip.c-green .sc-fc-dot { background:var(--color-green, #188038); }
.sc-filter-chip.c-emerald .sc-fc-dot { background:#0f9d67; }
.sc-filter-chip.c-amber .sc-fc-dot { background:#b06000; }
.sc-filter-chip.c-gray .sc-fc-dot { background:var(--color-text-faint, #80868b); }
.sc-filter-chip.c-gray-outline .sc-fc-dot { background:var(--color-text-muted, #5f6368); }
.sc-filter-chip.c-purple .sc-fc-dot { background:#7c5ce0; }
.sc-filter-chip.c-red.on { background:rgba(229,57,53,.12); border-color:#e53935; color:#e53935; }
.sc-filter-chip.c-blue.on { background:var(--color-primary-soft, #e8f0fe); border-color:var(--color-primary, #1a73e8); color:var(--color-primary, #1a73e8); }
.sc-filter-chip.c-green.on { background:var(--color-green-soft, rgba(52,168,83,.12)); border-color:var(--color-green, #188038); color:var(--color-green, #188038); }
.sc-filter-chip.c-emerald.on { background:rgba(16,185,129,.14); border-color:#0f9d67; color:#0f9d67; }
.sc-filter-chip.c-amber.on { background:var(--color-amber-soft, rgba(245,167,66,.16)); border-color:#b06000; color:#b06000; }
.sc-filter-chip.c-gray.on { background:var(--color-surface-2, #f1f3f4); border-color:var(--color-text-faint, #80868b); color:var(--color-text-muted, #5f6368); }
.sc-filter-chip.c-gray-outline.on { background:var(--color-surface-2, #f1f3f4); border-color:var(--color-text-muted, #5f6368); color:var(--color-text-muted, #5f6368); }
.sc-filter-chip.c-purple.on { background:rgba(124,92,224,.14); border-color:#7c5ce0; color:#7c5ce0; }
/* 適用中チップバーの AND モードバッジ + 履歴の条件表示 */
.sc-tag-mode { background:var(--color-text-muted, #5f6368); color:#fff; }
.sc-bulk-log-mode { font-size:10px; color:var(--color-text-muted, #5f6368); border:1px solid var(--color-border, #dadce0); border-radius:9999px; padding:1px 6px; white-space:nowrap; }
/* 適用中チップの × */
.sc-tag-remove {
border:none; background:none; color:inherit; font-size:11px; line-height:1;
margin-left:4px; padding:0; cursor:pointer; opacity:.7;
}
.sc-tag-remove:hover { opacity:1; }
/* 一括モーダルフッター（FB-3: 左に履歴リンク） */
.sc-bulk-foot-spacer { flex:1; }
.sc-duty-pop {
position:fixed; top:120px; left:50%; transform:translateX(-50%);
width:min(480px, 92vw); background:var(--color-surface); border:1px solid var(--color-border);
border-radius:16px; box-shadow:0 8px 30px rgba(0,0,0,.18); padding:16px; z-index:60;
}
.sc-duty-pop-head { font-size:13px; font-weight:700; margin-bottom:10px; color:var(--color-text); }
.sc-duty-pop-list { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.sc-duty-site-row { display:flex; align-items:center; gap:8px; font-size:13px; padding:6px 12px; background:var(--color-surface-2); border-radius:10px; }
.sc-duty-site-row button { margin-left:auto; border:none; background:#e53935; color:#fff; width:20px; height:20px; border-radius:50%; cursor:pointer; line-height:1; font-size:12px; }
.sc-duty-pop input { width:100%; height:36px; padding:0 12px; border:1px solid var(--color-border); border-radius:9999px; background:var(--color-surface-2); font-size:13px; box-sizing:border-box; font-family:inherit; }
.sc-duty-pop-results { display:flex; flex-direction:column; gap:4px; margin-top:8px; max-height:200px; overflow-y:auto; }
.sc-duty-result { font-size:13px; padding:6px 12px; border-radius:10px; cursor:pointer; }
.sc-duty-result:hover { background:var(--color-primary-soft); }
.sc-duty-pop-foot { display:flex; justify-content:flex-end; margin-top:12px; }
/* 拠点タブ（scope で出し分け・all=全て/本社/久留米/宗像/下関） */
.sc-tabs { display:flex; gap:6px; padding:12px 12px 0; flex-wrap:wrap; }
.sc-tab {
position:relative; display:inline-flex; align-items:center; gap:4px;
height:32px; padding:0 12px; border-radius:9999px; cursor:pointer;
border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text-muted);
font-size:12px; font-weight:600; font-family:inherit;
}
.sc-tab.active { background: var(--color-primary-soft); border-color: var(--color-primary-soft); color: var(--color-primary); }
/* 拠点別未読バッジ（赤=未読/新着・.ra-list-unread / .badge-pending と並列定義 #92） */
.sc-tab-badge { display:inline-flex; min-width:18px; height:18px; padding:0 5px 1px; background:#e53935; color:#fff; border-radius:9999px; font-size:10px; font-weight:700; line-height:1; align-items:center; justify-content:center; box-sizing:border-box; }
/* 氏名検索 */
.sc-search { padding:10px 12px; }
.sc-search input {
width:100%; height:38px; padding:0 14px; font-size:13px; font-family:inherit; box-sizing:border-box;
border:1px solid var(--color-border); border-radius:9999px; background:var(--color-surface-2); color:var(--color-text);
}
/* スタッフ一覧（未読順ソート・480 名クライアント絞り込み） */
.sc-list { max-height: 66vh; overflow-y:auto; }
.sc-list-item {
padding:10px 16px; cursor:pointer; border-top:1px solid var(--color-divider, rgba(60,64,67,.08));
display:flex; flex-direction:column; gap:2px;
}
.sc-list-item:hover { background: var(--color-surface-2); }
.sc-list-item.selected { background: var(--color-primary-soft); }
.sc-list-name { font-size:14px; font-weight:500; color: var(--color-text); display:flex; align-items:center; gap:7px; }
/* v6.202.0 FB-2: 氏名は明示 span 化（#117: flex 内の匿名テキストノードを避ける）+ nowrap/ellipsis。
チップ・バッジ側は flex-shrink:0 で、行が溢れる時は氏名だけが省略される（行の折返し破綻を構造的に防止）。 */
.sc-list-name-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:2em; flex:0 1 auto; }
.sc-list-name .sc-tag, .sc-list-name .sc-list-loc { flex-shrink:0; }
.sc-list-loc { display:inline-flex; align-items:center; height:18px; padding:0 8px; background:var(--color-surface-2); color:var(--color-text-muted); border:1px solid var(--color-border); border-radius:9999px; font-size:10px; font-weight:600; }
.sc-list-unread { display:inline-flex; min-width:20px; height:20px; padding:0 6px 1px; background:#e53935; color:#fff; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.25); border-radius:9999px; font-size:11px; font-weight:700; line-height:1; align-items:center; justify-content:center; margin-left:auto; box-sizing:border-box; }
.sc-list-meta { font-size:11px; color: var(--color-text-faint); display:flex; align-items:center; gap:8px; min-width:0; }
.sc-list-last { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.sc-list-time { flex-shrink:0; }
.sc-list-empty { padding:28px 16px; text-align:center; color: var(--color-text-muted); font-size:13px; }
/* 右カラム: スレッド（recruit-admin .ra-chat-wrap と同型） */
.sc-chat-wrap { display:flex; flex-direction:column; height:70vh; }
.sc-chat-wrap .rc-chat-list { flex:1; }
/* v6.198.1 FB③: textarea 化（Enter=改行・送信はボタンのみ）。伸びても送信/添付ボタンは下揃え。
高さは staff-chat.js の autosize が制御し CSS で上限ガード（recruit .rc-chat-pane textarea と同型 #92）。 */
.sc-chat-wrap .rc-chat-inputbar { align-items:flex-end; }
.sc-chat-wrap textarea.rc-chat-input {
flex:1; min-width:0;
height:42px; min-height:42px; max-height:120px;
padding:9px 14px; line-height:1.5;
font-size:14px; 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;
}
.sc-chat-more { text-align:center; font-size:11px; color:var(--color-text-faint); padding:4px 0; }
.sc-empty { padding:48px 16px; text-align:center; color: var(--color-text-muted); font-size:13px; }
.sc-chat-toast { font-size:12px; padding:6px 10px; margin:0 10px; border-radius:8px; display:none; }
.sc-chat-toast.err { display:block; background:var(--color-red-soft, #fdecef); color:var(--color-red, #e8443f); }
/* スマホは縦積み（recruit-admin と同型 @media） */
@media (max-width: 900px) {
.sc-grid { grid-template-columns: 1fr; }
.sc-list { max-height: 40vh; }
.sc-chat-wrap { height: 60vh; }
}
/* ===== v6.199.0: 送信ブロック（対策1・調査 docs/research/chat-risk_20260704.md） ===== */
.sc-head-spacer { flex: 1; }
/* ===== v6.201.0: ユーザータグ =====
c- 8 色は既存 3 系統（.ann-cat / .news-cat / .app-news-item-category・v6.197.0）と同値の
4 系統目並列定義（#92 対比表: red/blue/green/emerald/amber/gray/gray-outline/purple × 4 系統。
変更時は 4 系統 + サーバー定数（announcements.js CATEGORY_COLOR_KEYS / staffChat.js TAG_COLOR_KEYS）を同時更新）。 */
.sc-tag {
display: inline-flex; align-items: center;
font-size: 10px; font-weight: 700; line-height: 1;
padding: 3px 8px; border-radius: 9999px; white-space: nowrap;
margin-left: 4px; cursor: default; flex-shrink: 0;
}
.sc-tag.c-red { background: rgba(229,57,53,.12); color: #e53935; }
.sc-tag.c-blue { background: var(--color-primary-soft, #e8f0fe); color: var(--color-primary, #1a73e8); }
.sc-tag.c-green { background: var(--color-green-soft, rgba(52,168,83,.12)); color: var(--color-green, #188038); }
.sc-tag.c-emerald { background: rgba(16,185,129,.14); color: #0f9d67; }
.sc-tag.c-amber { background: var(--color-amber-soft, rgba(245,167,66,.16)); color: #b06000; }
.sc-tag.c-gray { background: var(--color-surface-2, #f1f3f4); color: var(--color-text-faint, #80868b); }
.sc-tag.c-gray-outline { background: var(--color-surface-2, #f1f3f4); color: var(--color-text-muted, #5f6368); border: 1px solid var(--color-border, #dadce0); }
.sc-tag.c-purple { background: rgba(124,92,224,.14); color: #7c5ce0; }
.sc-tag.sc-tag-more { background: var(--color-surface-2, #f1f3f4); color: var(--color-text-muted, #5f6368); }
/* フィルタバー（複数選択 OR・active = 青リング。box-shadow はレイアウト不変の装飾レイヤー v6.14.0 知見） */
.sc-tag-filter { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 8px; }
.sc-tag-filter .sc-tag { cursor: pointer; margin-left: 0; }
.sc-tag-filter .sc-tag.active { box-shadow: 0 0 0 2px var(--color-primary, #1a73e8); }
/* ヘッダーのタグ列 + 「+」（feature 保持者全員が付け外し可） */
.sc-head-tags { display: inline-flex; align-items: center; gap: 0; }
.sc-tag-edit-btn {
width: 20px; height: 20px; margin-left: 4px; padding: 0;
border-radius: 50%; border: 1px dashed var(--color-border, #dadce0);
background: none; color: var(--color-text-muted, #5f6368);
font-size: 12px; line-height: 1; cursor: pointer;
}
.sc-tag-edit-btn:hover { background: var(--color-surface-2, #f1f3f4); }
/* タグ選択ポップ（ヘッダー直下・右パネル .sc-panel を位置基準にする） */
.sc-panel { position: relative; }
.sc-tag-pop {
position: absolute; top: 52px; right: 12px; z-index: 30;
min-width: 240px; max-height: 320px; overflow-y: auto;
background: var(--color-surface, #fff); border: 1px solid var(--color-border, #dadce0);
border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.15); padding: 8px;
}
.sc-tag-pop-row { display: flex; align-items: center; gap: 6px; padding: 6px 4px; cursor: pointer; font-size: 13px; }
.sc-tag-pop-row:hover { background: var(--color-surface-2, #f5f5f5); border-radius: 8px; }
.sc-tag-pop-empty { font-size: 12px; color: var(--color-text-muted, #5f6368); padding: 8px; }
.sc-tag-pop-foot { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; }
/* タグ管理カード（設定ポップ内・admin のみ） */
.sc-tag-manage { margin-top: 14px; border-top: 1px solid var(--color-divider, rgba(60,64,67,.1)); padding-top: 10px; }
.sc-tag-manage-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.sc-tag-manage-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.sc-tag-manage-row .cm-color { cursor: pointer; }
.sc-tag-manage-name { font-size: 13px; cursor: pointer; }
.sc-tag-manage-name:hover { text-decoration: underline dashed; }
.sc-tag-manage-count { font-size: 11px; color: var(--color-text-faint, #9aa0a6); }
.sc-tag-manage-empty { font-size: 12px; color: var(--color-text-muted, #5f6368); }
.sc-tag-rename { font: inherit; font-size: 13px; padding: 2px 6px; border: 1px solid var(--color-border, #dadce0); border-radius: 6px; }
.sc-tag-mini-btn {
width: 22px; height: 22px; padding: 0; border-radius: 6px;
border: 1px solid var(--color-border, #dadce0); background: var(--color-surface, #fff);
font-size: 11px; cursor: pointer; color: var(--color-text-muted, #5f6368);
}
.sc-tag-mini-btn:disabled { opacity: .35; cursor: default; }
.sc-tag-mini-btn.danger { color: #c62828; }
.sc-tag-add-row { display: flex; align-items: center; gap: 6px; }
.sc-tag-add-row input { flex: 1; font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid var(--color-border, #dadce0); border-radius: 8px; }
.sc-tag-add-row .sc-tag { cursor: pointer; margin-left: 0; }
.sc-tag-palette { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.sc-tag-palette .sc-tag { cursor: pointer; margin-left: 0; }
.sc-tag-palette .sc-tag.active { box-shadow: 0 0 0 2px var(--color-primary, #1a73e8); }
/* ===== v6.202.0: タグ指定一括送信（FB-3: ボタンはコントロールバーへ移設・.sc-bulk-row は廃止） ===== */
.sc-bulk-btn { color: var(--color-primary, #1a73e8) !important; border-color: rgba(26, 115, 232, .45) !important; font-weight: 600 !important; }
.sc-bulk-btn:disabled { opacity: .45; cursor: default; }
.sc-bulk-log-link {
font: inherit; font-size: 12px; color: var(--color-text-muted, #5f6368);
background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0;
}
.sc-bulk-modal { width: 560px; max-width: calc(100vw - 32px); }
.sc-bulk-tags { font-size: 13px; margin-bottom: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.sc-bulk-tags-note { font-size: 11px; color: var(--color-text-muted, #5f6368); }
.sc-bulk-body {
width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; line-height: 1.6;
padding: 10px 12px; border: 1px solid var(--color-border, #dadce0); border-radius: 10px; resize: vertical;
}
.sc-bulk-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.sc-bulk-confirm-head { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.sc-bulk-target-list {
max-height: 240px; overflow-y: auto; border: 1px solid var(--color-border, #dadce0);
border-radius: 10px; padding: 6px 10px; margin-bottom: 10px;
}
.sc-bulk-target-row { font-size: 13px; padding: 3px 0; display: flex; align-items: center; gap: 6px; }
.sc-bulk-body-preview {
font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
background: var(--color-surface-2, #f8f9fa); border-radius: 10px; padding: 10px 12px;
max-height: 140px; overflow-y: auto;
}
.sc-bulk-log-list { max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.sc-bulk-log-row {
display: flex; align-items: center; gap: 8px; font-size: 12px;
padding: 6px 8px; border: 1px solid var(--color-divider, rgba(60,64,67,.1)); border-radius: 8px;
}
.sc-bulk-log-ts { color: var(--color-text-faint, #9aa0a6); white-space: nowrap; }
.sc-bulk-log-sender { font-weight: 600; white-space: nowrap; }
.sc-bulk-log-tags { color: var(--color-primary, #1a73e8); white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.sc-bulk-log-count { white-space: nowrap; }
.sc-bulk-log-body { color: var(--color-text-muted, #5f6368); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.sc-bulk-log-empty { font-size: 13px; color: var(--color-text-muted, #5f6368); padding: 12px 0; }
/* v6.207.0 FB-3: 旧 .sc-confirm-trail（ヘッダー対応証跡）は除去（対応済みラインに一本化） */
/* 「対応済みにする」ボタン（未対応 > 0 のときのみ is-hidden が外れる）。青系アクセントで主要操作を明示 */
.sc-confirm-btn { color: var(--color-primary, #1a73e8) !important; border-color: rgba(26, 115, 232, .45) !important; font-weight: 600 !important; }
.sc-blocked-badge {
display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 9999px;
background: rgba(229,57,53,.12); color: #c62828; border: 1px solid rgba(229,57,53,.35); white-space: nowrap;
}
.sc-list-blocked {
display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px;
background: rgba(229,57,53,.12); color: #c62828; margin-left: 6px; flex-shrink: 0;
}
/* ===== v6.199.1: 送信取消し（案A・調査 chat-risk_20260704） ===== */
/* 取消済み吹き出し（admin=原文グレー破線 / 他=プレースホルダ）。.rc-chat-row.me .rc-bubble より
高詳細度の複合セレクタ + ソース順末尾で me/other の背景色を確実に上書き（#96）。 */
.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; }
/* ホバー縦三点メニュー（PC 会社側）
v6.199.4 FB-2: row 反対端の absolute 配置（マウス移動が長い）→ 吹き出し + メタ列の隣の
flex アイテムへ変更。ボタンは bindMsgMenus が row 末尾に append しているため、
other（左寄せ）= メタ列の右隣 / me（右寄せ = row-reverse）= メタ列の左隣に左右対称で自動配置。
縦位置は行の align-items:flex-end に従い吹き出し下端（時刻メタと同じ基準）で左右統一。
ホバー判定は従来どおり row 全体（:hover で display 切替のみ）。ボタンは行内容の外側端に
出現するため、ホバー時も既存の吹き出し・メタの位置は動かない（レイアウトシフトなし）。 */
.sc-chat-wrap .rc-chat-row { position: relative; }
.sc-msg-menu-btn {
display: none; flex-shrink: 0;
width: 24px; height: 24px; align-items: center; justify-content: center;
font: inherit; font-size: 14px; color: var(--color-text-muted, #5f6368);
background: var(--color-surface, #fff); border: 1px solid rgba(60,64,67,.18); border-radius: 50%;
cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.rc-chat-row:hover .sc-msg-menu-btn { display: inline-flex; }
.sc-msg-menu {
display: none; position: fixed; z-index: 120; min-width: 160px;
background: var(--color-surface, #fff); border: 1px solid rgba(60,64,67,.15); border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,.18); padding: 4px; box-sizing: border-box;
}
.sc-msg-menu button {
display: block; width: 100%; font: inherit; font-size: 13px; text-align: left;
padding: 9px 14px; background: none; border: none; border-radius: 8px; cursor: pointer;
}
.sc-msg-menu button:hover { background: var(--color-surface-2, #f5f5f5); }
.sc-msg-menu button.danger { color: #c62828; font-weight: 600; }
/* ===== v6.199.2: AI 内容チェック（対策3・admin/sub_admin のみ表示） ===== */
.sc-list-flagged {
display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px;
background: rgba(230,81,0,.14); color: #b45309; margin-left: 6px; flex-shrink: 0;
}
.sc-flag-filter {
font: inherit; font-size: 12px; font-weight: 600; color: #b45309; white-space: nowrap;
background: #fff; border: 1px solid rgba(230,81,0,.35); border-radius: 9999px;
padding: 6px 12px; cursor: pointer; flex-shrink: 0;
}
.sc-flag-filter.active { background: rgba(230,81,0,.14); }
.sc-search { display: flex; gap: 8px; align-items: center; }
/* 検知メッセージの枠強調（bubble 単位・#96 複合セレクタ + ソース順） */
.rc-chat-row.sc-mod-flagged .rc-bubble { outline: 2px solid rgba(230,81,0,.55); outline-offset: 1px; }
.sc-mod-info {
margin-top: 4px; padding: 8px 10px; border-radius: 10px;
background: rgba(230,81,0,.07); border: 1px solid rgba(230,81,0,.25);
font-size: 12px; color: #7c4a03; max-width: 420px;
}
.sc-mod-pill {
display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 9999px;
background: rgba(230,81,0,.16); color: #b45309; margin-right: 6px;
}
.sc-mod-cats { font-size: 11px; font-weight: 600; }
.sc-mod-reason { margin-top: 4px; font-size: 12px; line-height: 1.5; }
.sc-mod-resolve {
display: inline-block; margin-top: 6px; font: inherit; font-size: 12px; font-weight: 600;
color: #1a56c4; background: #fff; border: 1px solid rgba(26,115,232,.4); border-radius: 9999px;
padding: 4px 12px; cursor: pointer;
}
.sc-mod-resolve:hover { background: rgba(26,115,232,.08); }
/* ===== v6.199.2 FB-3: 「↓ 新着メッセージ」フローティングボタン ===== */
.sc-chat-wrap { position: relative; }
.sc-new-msg-btn {
position: absolute; left: 50%; transform: translateX(-50%);
bottom: 76px; /* 入力バーの上（textarea 1 行時基準・入力バーの多少の高さ変化は視覚上許容） */
z-index: 6;
font: inherit; font-size: 12px; font-weight: 600; color: #fff;
background: var(--color-primary, #1a73e8); border: none; border-radius: 9999px;
padding: 7px 16px; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.25);
white-space: nowrap;
}
.sc-new-msg-btn:hover { opacity: .92; }
/* v6.202.0 FB-1: 一括送信権限リストの付与メタ（付与者・日付） */
.sc-bulk-grant-meta { font-size: 10px; color: var(--color-text-faint, #9aa0a6); margin-left: auto; padding-right: 6px; white-space: nowrap; }
/* ============================================================
v6.204.0: 新着通知の拠点別化（承認サンプル staff_chat_notif_sample_v3.html 準拠）
①ピル 0 名表示 / ②新着通知ボタンの状態バッジ / ③拠点行 + トグル / ④担当者一覧 + 拠点チップ
============================================================ */
/* ① 拠点別 0 名時（faint。「全て」で 0 名は既存 .sc-duty-fallback = 注意トーンを使用） */
.sc-duty-none { color: var(--color-text-faint, #9aa0a6); }
.sc-duty-list b { font-weight: 700; } /* 管制シフト連動 = 太字（サンプル準拠・名前のみ表示） */
/* ② 「新着通知」ボタン内の状態バッジ（n拠点オン / すべてオフ） */
.sc-notif-cnt {
font-size: 10.5px; font-weight: 700; color: var(--color-primary, #1a73e8);
background: var(--color-surface-3, #eef3fd); border-radius: 9999px; padding: 2px 8px;
margin-left: 2px; white-space: nowrap;
}
/* ③ 新着通知モーダル（拠点行 + 即時トグル・トグルは既存 .sc-switch を共用） */
.sc-notif-note { font-size: 11.5px; color: var(--color-text-faint, #9aa0a6); line-height: 1.7; margin: 2px 0 12px; }
.sc-loc-row {
display: flex; align-items: center; gap: 10px;
padding: 11px 4px; border-top: 1px solid var(--color-border, #dadce0); font-size: 13px;
}
.sc-loc-row:first-of-type { border-top: none; }
.sc-loc-name { font-weight: 700; }
.sc-loc-sub { font-size: 11px; color: var(--color-text-faint, #9aa0a6); }
.sc-loc-row .sc-switch { margin-left: auto; cursor: pointer; }
/* ④ スタッフの通知設定モーダル（680px・担当者行 + 状態バッジ + 拠点チップ） */
.sc-np-modal { max-width: 680px; }
.sc-np-search {
width: 100%; height: 36px; border-radius: 9999px;
border: 1px solid var(--color-border, #dadce0); background: var(--color-surface, #fff);
padding: 0 14px; font: inherit; font-size: 12.5px; color: var(--color-text);
outline: none; margin-bottom: 10px;
}
.sc-np-rows { max-height: 56vh; overflow-y: auto; }
.sc-np-row { border-top: 1px solid var(--color-border, #dadce0); padding: 10px 4px; }
.sc-np-row:first-of-type { border-top: none; }
.sc-np-line1 { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.sc-np-name { font-size: 13px; font-weight: 700; }
.sc-np-badge {
font-size: 10px; font-weight: 700; border-radius: 9999px; padding: 2px 8px;
border: 1px solid var(--color-border, #dadce0); background: var(--color-surface-2, #f8fafd);
color: var(--color-text-muted, #5f6368); white-space: nowrap;
}
.sc-np-badge.kansei { color: var(--color-green, #188038); } /* 管制シフト連動中（〜HH:MM） */
.sc-np-badge.adm { color: var(--color-amber, #f29900); } /* 管理者（ピル非表示） */
.sc-np-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-np-chip {
height: 30px; border-radius: 9999px; padding: 0 12px;
border: 1px solid var(--color-border, #dadce0); background: var(--color-surface, #fff);
font: inherit; font-size: 11.5px; font-weight: 600; color: var(--color-text-muted, #5f6368);
display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
}
.sc-np-chip.on {
background: var(--color-primary-soft, rgba(26,115,232,.10));
border-color: var(--color-primary, #1a73e8);
color: var(--color-primary, #1a73e8);
}
.sc-np-empty { font-size: 12px; color: var(--color-text-faint, #9aa0a6); padding: 10px 4px; }