/* 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; }
.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; }

/* ===== 会社側ページ レイアウト（.sc-*・recruit-admin .ra-* の 2 カラム改変 #92） ===== */
.gs-page:has(.sc-wrap) { max-width: 1250px; }
.sc-wrap { max-width: 1210px; margin: 0 auto; }
.sc-header {
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin: 4px 0 14px;
}
.sc-header h1 { font-size: var(--text-lg); font-weight:700; margin:0; color: var(--color-text); }
.sc-header .sub { font-size: var(--text-xs); color: var(--color-text-muted); margin-top:2px; }
.sc-grid { display:grid; grid-template-columns: 320px 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); }

/* 拠点タブ（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; }
.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; }
.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; }
}