/* ==========================================================================
   チャット画面 (Google Chat 風)
   このページでしか使わないので style.css とは分けている。
   読み込みは renderHeader(..., 'chat') の第3引数から。
   ========================================================================== */

/* 色の定義は body に置く。
   メンバーのモーダルと添付ビューアは .chat-app の外に置いてあるため、
   .chat-app に定義すると そちらに色が届かない
   (var() が未定義になり、 背景が透明・白文字で消える) */
body.chat-page {
  --c-line:  #e3e3e3;
  --c-hover: #f1f3f4;
  --c-sel:   #d3e3fd;
  --c-muted: #5f6368;
  --c-blue:  #0b57d0;
  --c-ink:   #202124;
}

/* 共通レイアウトの余白を打ち消して、画面いっぱいに使う */
body.chat-page main.container {
  max-width: none;
  padding: 0;
  margin: 0;
}
/* body に overflow:hidden は掛けない。
   スマホのメニューは header 内の絶対配置で開くため、 隠すと下が切れる。
   高さは下のJSで「ヘッダーの下〜画面下」にぴったり合わせるので、
   結果としてページ自体はスクロールしない。 */

.chat-app {
  display: grid;
  grid-template-columns: 300px 1fr;
  height: 70vh;              /* JSで実際の高さに差し替える (JS無効時の保険) */
  background: #fff;
  border-top: 1px solid var(--c-line);
  overflow: hidden;
  color: var(--c-ink);
}
.chat-app svg { width: 20px; height: 20px; display: block; }

/* --- 丸アイコン ------------------------------------------------------- */
.chat-av {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; border-radius: 50%; flex: 0 0 auto;
  line-height: 1; user-select: none;
  --pat: 255,255,255;          /* 柄の重ね色。 明るい下地では黒に切り替える */
}
/* 明るい色を選んだときは、 文字も柄も黒に寄せて読めるようにする */
.chat-av.is-light { color: #202124; --pat: 0,0,0; }
.chat-av.is-light .chat-av-t { text-shadow: 0 1px 2px rgba(255,255,255,.55); }
.chat-av-sm { width: 32px; height: 32px; font-size: 14px; }
.chat-av-md { width: 36px; height: 36px; font-size: 15px; }
.chat-av-lg { width: 64px; height: 64px; font-size: 26px; }
.chat-av-sp { border-radius: 9px; }   /* スペースは人ではないので角丸四角 */

/* hidden を付けたら必ず消えるようにする。
   .chat-xxx { display: flex } のような指定は 既定の [hidden]{display:none} より強く、
   hidden を付けても消えない。 ここで一度きり打ち消しておく
   (▽の「最新へ戻る」が常に出ていたのがこれ) */
[hidden] { display: none !important; }

/* --- アイコンの中の文字 -------------------------------------------------
   苗字をそのまま出すので、 文字数に合わせて縮める。
   柄の上でも読めるよう、 うっすら影を敷いておく。 */
.chat-av-t {
  position: relative; z-index: 1;
  max-width: 92%; overflow: hidden; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
  letter-spacing: -.02em;
}
.chat-av.is-w2 .chat-av-t { font-size: .78em; }
.chat-av.is-w3 .chat-av-t { font-size: .56em; letter-spacing: -.05em; }
.chat-av.is-w4 .chat-av-t { font-size: .44em; letter-spacing: -.06em; }

/* --- 背景の柄 ----------------------------------------------------------
   どれも「白の薄い重ね」で描く。 下地の色は inline の background のまま
   残るので、 どんな色を選んでも文字とのコントラストは変わらない。 */
.chat-av[class*="pat-"] { background-repeat: repeat; background-blend-mode: normal; }

/* 斜線 */
.chat-av.pat-stripe {
  background-image: repeating-linear-gradient(45deg,
    rgba(var(--pat, 255,255,255),.30) 0 2.5px, rgba(var(--pat, 255,255,255),0) 2.5px 6px);
}
/* 千鳥格子 (四角と三角を組み合わせた簡略版) */
.chat-av.pat-houndstooth {
  background-image:
    linear-gradient(45deg,  rgba(var(--pat, 255,255,255),.32) 25%, transparent 25% 75%, rgba(var(--pat, 255,255,255),.32) 75%),
    linear-gradient(-45deg, rgba(var(--pat, 255,255,255),.32) 25%, transparent 25% 75%, rgba(var(--pat, 255,255,255),.32) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
}
/* シャボン玉 */
.chat-av.pat-bubble {
  background-image:
    radial-gradient(circle at 26% 26%, rgba(var(--pat, 255,255,255),.46) 0 15%, transparent 16%),
    radial-gradient(circle at 74% 20%, rgba(var(--pat, 255,255,255),.30) 0 10%, transparent 11%),
    radial-gradient(circle at 62% 74%, rgba(var(--pat, 255,255,255),.38) 0 18%, transparent 19%),
    radial-gradient(circle at 20% 76%, rgba(var(--pat, 255,255,255),.26) 0 11%, transparent 12%);
}
/* 水玉 */
.chat-av.pat-dot {
  background-image: radial-gradient(rgba(var(--pat, 255,255,255),.36) 1.7px, transparent 1.8px);
  background-size: 7px 7px;
}
/* 格子 */
.chat-av.pat-grid {
  background-image:
    repeating-linear-gradient(0deg,  rgba(var(--pat, 255,255,255),.28) 0 1.4px, transparent 1.4px 8px),
    repeating-linear-gradient(90deg, rgba(var(--pat, 255,255,255),.28) 0 1.4px, transparent 1.4px 8px);
}
/* うろこ */
.chat-av.pat-wave {
  background-image:
    radial-gradient(circle at 50% 100%, transparent 0 3px, rgba(var(--pat, 255,255,255),.34) 3px 4.2px, transparent 4.3px);
  background-size: 9px 5.5px;
}

/* 大きいアイコンでは柄も少し大きく (64px で細かすぎないように) */
.chat-av-lg.pat-houndstooth { background-size: 13px 13px; background-position: 0 0, 6.5px 6.5px; }
.chat-av-lg.pat-dot  { background-size: 11px 11px; }
.chat-av-lg.pat-grid { background-image:
    repeating-linear-gradient(0deg,  rgba(var(--pat, 255,255,255),.28) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(90deg, rgba(var(--pat, 255,255,255),.28) 0 2px, transparent 2px 13px); }
.chat-av-lg.pat-wave { background-size: 15px 9px; }
.chat-av-lg.pat-stripe { background-image: repeating-linear-gradient(45deg,
    rgba(var(--pat, 255,255,255),.30) 0 4px, rgba(var(--pat, 255,255,255),0) 4px 10px); }

/* --- 丸いアイコンボタン ----------------------------------------------- */
.chat-ico {
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: var(--c-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex: 0 0 auto;
}
.chat-ico:hover { background: var(--c-hover); color: var(--c-ink); }

/* ======================================================================
   左: 一覧
   ====================================================================== */
.chat-side {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  /* 会話一覧は下地の薄い緑。 本文側 (.chat-main) は読みやすさのため白のまま */
  border-right: 1px solid var(--c-line); background: var(--bg);
}
.chat-side-head {
  padding: 12px; flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
}
.chat-side-head .chat-search { flex: 1 1 auto; min-width: 0; }

/* 自分のアイコン (検索の右) */
.chat-me {
  flex: 0 0 auto; padding: 0; border: 0; background: transparent; cursor: pointer;
  border-radius: 50%; line-height: 0;
}
.chat-me:hover { box-shadow: 0 0 0 3px var(--c-hover); }
.chat-me:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }

.chat-search {
  display: flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 14px;
  background: var(--c-hover); border-radius: 24px;
}
.chat-search svg { color: var(--c-muted); width: 18px; height: 18px; }
.chat-search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 14px; color: var(--c-ink);
}
.chat-search input::-webkit-search-cancel-button { cursor: pointer; }

.chat-side-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }

/* --- 折りたためる かたまり (スペース / カテゴリ / チャット) --- */

/* 見出し: 上位 (スペース / チャット) */
.chat-grp-head {
  width: 100%; display: flex; align-items: center; gap: 7px;
  padding: 14px 12px 7px 10px; border: 0; background: transparent;
  font: inherit; font-size: 15px; font-weight: 700; color: #3c4043;
  text-align: left; cursor: pointer; border-radius: 8px;
}
.chat-grp-head:hover { background: var(--c-hover); color: var(--c-ink); }
.chat-grp-head:focus-visible { outline: 2px solid var(--c-blue); outline-offset: -2px; }
.chat-grp-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 見出し: カテゴリ (スペースの中) */
.chat-grp.is-sub > .chat-grp-head {
  padding: 9px 12px 7px 12px; font-size: 13.5px; font-weight: 600; color: #444746;
  border-radius: 0;
}
.chat-grp.is-sub > .chat-grp-head:hover { background: rgba(32,33,36,.045); }

/* 薄い下地 — ここが1つの「エリア」 ------------------------------------
   カテゴリは 見出しごと1枚の面にする (閉じていても、 そこに何かある と分かる)。
   カテゴリを使わない一覧 (個人チャットなど) は、 見出しは素のままで
   会話の並びだけに下地を敷く。 */
.chat-grp.is-sub {
  background: #f3f6f9; border-radius: 12px;
  margin: 0 8px 6px; overflow: hidden;
}
.chat-grp.is-sub > .chat-grp-body { padding-bottom: 5px; }

.chat-grp.is-flat:not(.is-sub) > .chat-grp-body {
  background: #f3f6f9; border-radius: 12px;
  margin: 0 8px 6px; padding: 5px 0;
}
/* 閉じているときに 薄い帯だけ残らないように */
.chat-grp.is-flat:not(.is-sub):not(.is-open) > .chat-grp-body { padding: 0; }

/* ▶ が開くと ▼ に回る */
.chat-grp-caret { flex: 0 0 auto; display: inline-flex; color: #80868b; transition: transform .18s ease; }
.chat-grp-caret svg { width: 16px; height: 16px; }
.chat-grp.is-sub > .chat-grp-head .chat-grp-caret svg { width: 15px; height: 15px; }
.chat-grp.is-open > .chat-grp-head .chat-grp-caret { transform: rotate(90deg); }

/* 閉じているときだけ「未読 ●」を出す */
.chat-grp-dot {
  display: none; align-items: center; gap: 4px; flex: 0 0 auto;
  font-size: 11px; font-weight: 700; color: var(--c-blue);
}
.chat-grp:not(.is-open) > .chat-grp-head .chat-grp-dot { display: inline-flex; }
.chat-grp-dot-mark {
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-blue);
  animation: chatDotPulse 1.6s ease-in-out infinite;
}
@keyframes chatDotPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-grp-dot-mark { animation: none; }
  .chat-grp-caret, .chat-grp-body { transition: none !important; }
}

/* 開閉の動き。 高さはJSが実寸を入れる */
.chat-grp-body { overflow: hidden; transition: max-height .2s ease; }
.chat-grp:not(.is-open) > .chat-grp-body { max-height: 0 !important; }

/* 検索中は開閉を無視して全部見せる
   (「閉じている」指定より確実に勝つよう、 一段細かく指定している) */
.chat-side-scroll.is-searching .chat-grp > .chat-grp-body { max-height: none !important; padding: 5px 0; }
.chat-side-scroll.is-searching .chat-grp > .chat-grp-head { display: none; }

.chat-side-note { padding: 6px 16px 10px; font-size: 12.5px; color: var(--c-muted); margin: 0; }

.chat-item {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 10px; margin: 0 5px;
  border-radius: 10px;
  text-decoration: none; color: var(--c-ink);
}
.chat-item:hover { background: rgba(32,33,36,.055); }
.chat-item.is-on { background: var(--c-sel); }
.chat-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-item-name {
  font-size: 14px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-item-time { font-size: 11px; color: var(--c-muted); flex: 0 0 auto; }
.chat-item-prev {
  font-size: 12.5px; line-height: 1.3; color: var(--c-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-item.is-unread .chat-item-name,
.chat-item.is-unread .chat-item-prev { font-weight: 700; color: var(--c-ink); }
.chat-item-badge {
  flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--c-blue); color: #fff;
  font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}

.chat-empty-search { padding: 24px 16px; font-size: 13px; color: var(--c-muted); text-align: center; }

.chat-new {
  flex: 0 0 auto; margin: 8px 12px 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border: 0; border-radius: 22px;
  background: #fff; color: var(--c-ink); font: inherit; font-size: 14px; font-weight: 600;
  box-shadow: 0 1px 3px rgba(60,64,67,.3), 0 4px 8px rgba(60,64,67,.15);
  cursor: pointer;
}
.chat-new:hover { background: #f8f9fa; }
.chat-new svg { width: 18px; height: 18px; color: var(--c-blue); }

/* ======================================================================
   右: 会話
   ====================================================================== */
/* min-height:0 が要る。 無いと「中身の高さぶんは縮まない」扱いになり、
   発言が増えたぶんだけ下に伸びて、 入力欄が枠の外へ押し出されてしまう。 */
.chat-main {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: #fff;
}

.chat-top {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--c-line);
}
.chat-back {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; color: var(--c-muted);
  flex: 0 0 auto; text-decoration: none; margin-left: -4px;
}
.chat-back:hover { background: var(--c-hover); }
.chat-top-txt { flex: 1; min-width: 0; }
.chat-top-txt h1 {
  margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-top-sub { font-size: 12px; color: var(--c-muted); }
.chat-top-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }

/* --- 発言の流れ -------------------------------------------------------
   発言の切れ目が分かるよう、 1件ずつ白い吹き出しにする。
   下地はごく薄い緑。
   自分の発言は ▲ が右から、 他の人のは左から出る。
   ただし LINE のような右寄せ・左寄せにはしない
   (スマホでは本文に幅を目一杯使いたいため、 吹き出しは常に横いっぱい)。 */
.chat-stream {
  flex: 1 1 0; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 12px 12px;
  background: #f4f5f6;
}

.chat-day { display: flex; align-items: center; gap: 12px; margin: 16px 4px 12px; }
.chat-day::before, .chat-day::after { content: ""; flex: 1; height: 1px; background: #e3e5e7; }
.chat-day span {
  font-size: 12px; font-weight: 600; color: #6b7075;
  background: #eaecee; border-radius: 999px; padding: 3px 12px;
}

.chat-msg { display: flex; gap: 10px; padding: 0; }
.chat-msg + .chat-msg { margin-top: 8px; }

/* 自分の発言はアイコンを右に置き、 吹き出しの ▲ も右から出す */
.chat-msg.is-mine { flex-direction: row-reverse; }

.chat-msg-av {
  flex: 0 0 36px; width: 36px; display: flex; justify-content: center;
  align-items: flex-start; padding-top: 4px;
}

/* ここが吹き出し本体 */
.chat-msg-body {
  position: relative; min-width: 0; flex: 1;
  background: var(--pin-bg, #fff); border-radius: 3px;   /* ほぼ角。 ごく僅かに丸める */
  padding: 8px 12px 9px;
  box-shadow: 0 1px 2px rgba(15, 30, 20, .10);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.chat-msg:hover .chat-msg-body { box-shadow: 0 1px 5px rgba(15, 30, 20, .16); }

/* ▲ のしっぽ */
.chat-msg-body::before {
  content: ""; position: absolute; top: 10px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.chat-msg:not(.is-mine) > .chat-msg-body::before {
  left: -7px; border-right: 7px solid var(--pin-bg, #fff);
}
.chat-msg.is-mine > .chat-msg-body::before {
  right: -7px; border-left: 7px solid var(--pin-bg, #fff);
}

/* 見出し: [ピン] 名前 時刻。 続きの発言は名前を省いて時刻だけ出す */
.chat-msg-head {
  display: flex; align-items: center; gap: 7px;
  padding-right: 92px;   /* 右上の数字と重ならないように空ける */
  min-height: 22px;
}
.chat-msg-name { font-size: 14px; font-weight: 600; }
.chat-msg-time { font-size: 11px; color: var(--c-muted); }
.chat-msg-text { font-size: 14px; line-height: 1.55; word-break: break-word; }

.chat-stream-blank {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 56px 16px; color: var(--c-muted); text-align: center;
}
.chat-stream-blank h3 { margin: 0; font-size: 18px; color: var(--c-ink); }
.chat-stream-blank p { margin: 0; font-size: 13px; }

/* --- 入力欄 ------------------------------------------------------------ */
.chat-composer { flex: 0 0 auto; padding: 4px 16px 14px; }
.chat-composer-box {
  border: 1px solid var(--c-line); border-radius: 16px;
  padding: 6px 8px; background: #fff;
  box-shadow: 0 1px 3px rgba(60,64,67,.15);
}
.chat-composer-box:focus-within { border-color: var(--c-blue); }
.chat-composer-box textarea {
  display: block; width: 100%; max-height: 160px;
  border: 0; outline: none; resize: none; background: transparent;
  font: inherit; font-size: 14px; line-height: 1.5;
  padding: 6px 8px; color: var(--c-ink);
}
.chat-composer-box textarea::placeholder { color: #80868b; }
.chat-composer-bar { display: flex; align-items: center; justify-content: space-between; }
.chat-composer-tools { display: flex; align-items: center; gap: 2px; }
.chat-send {
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: var(--c-blue); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.chat-send svg { width: 18px; height: 18px; }
.chat-send:disabled { background: #e8eaed; color: #9aa0a6; cursor: default; }
.chat-note { margin: 8px 4px 0; font-size: 12px; color: var(--c-muted); }

/* --- 何も選んでいないとき ---------------------------------------------- */
.chat-blank {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  color: var(--c-muted); text-align: center; padding: 24px;
}
.chat-blank-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--c-hover); color: var(--c-blue); margin-bottom: 4px;
}
.chat-blank-icon svg { width: 32px; height: 32px; }
.chat-blank h2 { margin: 0; font-size: 20px; color: var(--c-ink); font-weight: 600; }
.chat-blank p { margin: 0; font-size: 13.5px; }

/* ======================================================================
   スマホ: 一覧と会話を1画面ずつ出す
   ====================================================================== */
@media (max-width: 900px) {
  .chat-app { grid-template-columns: 1fr; }
  .chat-app[data-view="list"]   .chat-main { display: none; }
  .chat-app[data-view="thread"] .chat-side { display: none; }
  .chat-side { border-right: 0; }
  .chat-back { display: inline-flex; }
  .chat-item { margin-right: 0; border-radius: 0; }
  .chat-composer { padding: 4px 10px 10px; }
  .chat-stream { padding: 8px 6px 12px; }
}

/* ======================================================================
   添付 (画像 / PDF)
   画面の中で見るだけ。 保存のボタンは置かない。
   ====================================================================== */
.chat-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.chat-file {
  border: 1px solid var(--c-line); border-radius: 10px; padding: 0;
  background: #fff; cursor: zoom-in; overflow: hidden; font: inherit;
  display: inline-flex; align-items: center; max-width: 100%;
}
.chat-file:hover { border-color: var(--c-blue); }
.chat-file:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 1px; }
.chat-file img {
  display: block; max-width: 220px; max-height: 170px; object-fit: cover;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.chat-file.is-pdf { gap: 8px; padding: 8px 12px 8px 8px; cursor: pointer; }
.chat-file-pdf {
  flex: 0 0 auto; background: #c5221f; color: #fff; font-size: 10.5px; font-weight: 700;
  border-radius: 5px; padding: 3px 6px; letter-spacing: .04em;
}
.chat-file-name {
  font-size: 13px; color: var(--c-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15em;
}

/* 添付できない会話での案内 */
.chat-attach-off { font-size: 11.5px; color: var(--c-muted); margin-left: 4px; }
.chat-ico[disabled] { opacity: .35; cursor: not-allowed; }
.chat-ico[disabled]:hover { background: transparent; color: var(--c-muted); }

/* --- 見るための画面 --- */
.chat-lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 18, 22, .93);
  display: flex; flex-direction: column;
  user-select: none;
}
.chat-lb[hidden] { display: none; }
.chat-lb-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; color: #f1f3f4;
}
.chat-lb-name {
  flex: 1; min-width: 0; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-lb-tools { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.chat-lb-btn {
  min-width: 34px; height: 34px; padding: 0 8px;
  border: 0; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff;
  font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.chat-lb-btn.is-txt { font-size: 12.5px; }
.chat-lb-btn:hover { background: rgba(var(--pat, 255,255,255),.22); }
.chat-lb-pct { font-size: 12px; color: #c5c9ce; min-width: 3.6em; text-align: center; }

.chat-lb-stage {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none; padding: 0 8px;
}
.chat-lb-img {
  max-width: 92%; max-height: 100%;
  transform-origin: center center; cursor: grab;
  -webkit-user-drag: none; user-select: none;
}
.chat-lb-img:active { cursor: grabbing; }
.chat-lb-pdf { width: 100%; height: 100%; border: 0; background: #fff; border-radius: 4px; }

.chat-lb-note {
  flex: 0 0 auto; margin: 0; padding: 8px 14px 14px;
  font-size: 11.5px; color: #9aa0a6; text-align: center;
}

@media (max-width: 620px) {
  .chat-file img { max-width: 160px; max-height: 130px; }
  .chat-lb-note { font-size: 11px; }
}

/* 投稿NGワードの案内 */
.chat-ng {
  margin: 8px 4px 0; font-size: 12px; font-weight: 600;
  color: #c5221f;
}

/* ======================================================================
   スペースのメンバー
   ====================================================================== */
.chat-mm {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(15, 18, 22, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.chat-mm[hidden] { display: none; }
.chat-mm-box {
  background: #fff; border-radius: 14px; width: 100%; max-width: 520px;
  max-height: 88vh;
  max-height: 88dvh;   /* スマホのアドレスバーぶんを差し引く (未対応なら上の vh) */ display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .28);
}
.chat-mm-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 14px 12px 12px 18px; border-bottom: 1px solid var(--c-line);
}
.chat-mm-head h2 {
  flex: 1; min-width: 0; margin: 0; font-size: 15.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-mm-x {
  width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--c-muted); font-size: 22px; line-height: 1;
}
.chat-mm-x:hover { background: var(--c-hover); }

/* 参加中の欄は人数ぶん伸びるので、 高さに上限を付けて中でスクロールさせる。
   これが無いと 300人でチップが十数行になり、 下の「追加」ボタンが箱から押し出される */
.chat-mm-now {
  flex: 0 1 auto; min-height: 0;
  max-height: 26vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 18px; border-bottom: 1px solid var(--c-line);
}
.chat-mm-label { font-size: 11.5px; font-weight: 600; color: var(--c-muted); margin-bottom: 7px; }
.chat-mm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-mm-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--c-hover); border-radius: 999px;
  padding: 4px 4px 4px 11px; font-size: 13px;
}
.chat-mm-del {
  width: 20px; height: 20px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: #9aa0a6; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.chat-mm-del:hover { background: rgba(197,34,31,.14); color: #c5221f; }
.chat-mm-none { font-size: 12.5px; color: var(--c-muted); }

.chat-mm-search {
  flex: 0 0 auto; margin: 12px 18px 8px;
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px; background: var(--c-hover); border-radius: 20px;
}
.chat-mm-search svg { width: 17px; height: 17px; color: var(--c-muted); flex: 0 0 auto; }
.chat-mm-search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 13.5px;
}

/* 画面が低いときは、 一覧を縮めてでも 見出しと追加ボタンを残す。
   flex-basis を 0 にすると箱が潰れるので auto にしている (上と同じ理由)。 */
.chat-mm-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 10px 8px; }
.chat-mm-grp + .chat-mm-grp { margin-top: 4px; }

/* 店舗の見出し: 開閉 + まとめて選択 */
.chat-mm-grp-t {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 6px 2px 0;
}
.chat-mm-grp-x {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--c-muted);
  padding: 8px 6px; border-radius: 8px; text-align: left;
}
.chat-mm-grp-x:hover { background: var(--c-hover); color: var(--c-ink); }
.chat-mm-grp-x svg { width: 14px; height: 14px; flex: 0 0 auto; transition: transform .16s ease; }
.chat-mm-grp.is-open .chat-mm-grp-x svg { transform: rotate(90deg); }
.chat-mm-grp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-mm-grp-n {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 600; color: #80868b;
  background: rgba(32,33,36,.06); border-radius: 999px; padding: 1px 7px;
}
.chat-mm-all {
  flex: 0 0 auto; border: 1px solid var(--c-line); border-radius: 999px;
  background: #fff; color: var(--c-blue); cursor: pointer; font: inherit;
  font-size: 11.5px; font-weight: 600; padding: 4px 11px;
}
.chat-mm-all:hover { background: #eef4fd; }
.chat-mm-all.is-on { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }

/* 畳んでいる店舗の中身は出さない */
/* 候補は2列に並べる (1画面に入る人数を増やすため) */
.chat-mm-grp-b { display: none; }
.chat-mm-grp.is-open > .chat-mm-grp-b {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 6px;
}
.chat-mm-row {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 6px 8px; border-radius: 9px; cursor: pointer;
}
.chat-mm-row:hover { background: var(--c-hover); }
/* 参加中は薄い青。 もう一度押すと外れる */
.chat-mm-row.is-in { background: #eaf2fd; }
.chat-mm-row.is-in:hover { background: #dce9fa; }
.chat-mm-row input { width: auto; margin: 0; flex: 0 0 auto; }
.chat-mm-row .chat-mm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-mm-name { font-size: 13.5px; flex: 0 0 auto; }
.chat-mm-emp {
  font-size: 10.5px; color: var(--c-muted);
  background: rgba(32,33,36,.06); border-radius: 999px; padding: 1px 7px;
  flex: 0 0 auto; white-space: nowrap;
}
.chat-mm-store {
  font-size: 11px; color: #80868b; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-mm-in { font-size: 10.5px; color: var(--c-blue); font-weight: 700; margin-left: auto; flex: 0 0 auto; }

.chat-mm-foot {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 18px; border-top: 1px solid var(--c-line);
}
.chat-mm-sel { font-size: 12.5px; color: var(--c-muted); }
.chat-mm-hint { flex: 1; min-width: 0; font-size: 11.5px; color: var(--c-muted); line-height: 1.4; }
.chat-mm-state { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: #137333; }
.chat-mm-state.is-err { color: var(--c-danger, #c5221f); }
.chat-mm-add {
  border: 0; border-radius: 20px; padding: 9px 22px; cursor: pointer;
  background: var(--c-blue); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600;
}
.chat-mm-add[disabled] { background: #e8eaed; color: #9aa0a6; cursor: default; }
.chat-mm-nope { margin: 0; padding: 16px 18px; font-size: 12.5px; color: var(--c-muted); }

@media (max-width: 620px) {
  .chat-mm { padding: 0; align-items: stretch; }
  .chat-mm-box { max-width: none; max-height: none; height: 100%; border-radius: 0; }
}

/* ======================================================================
   既読 / 確認
   ====================================================================== */
.chat-msg.has-rc { cursor: pointer; }
.chat-msg.has-rc:focus-visible { outline: 2px solid var(--c-blue); outline-offset: -2px; }

/* 既読の数字は 吹き出しの中の右上に収める */
.chat-rc {
  position: absolute; top: 7px; right: 10px;
  display: flex; align-items: center; gap: 4px;
  pointer-events: none;
}
/* 要確認の印。 赤い丸に白い !。
     自分が確認したら   … うっすいピンク (! は赤)
     全員が確認し終えたら … 薄いグレー */
.chat-rc-need {
  width: 17px; height: 17px; border-radius: 50%;
  background: #d93025; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
}
.chat-rc-need::before {
  content: "!";
  color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
}
.chat-rc-need.is-mine-done { background: #fbdce0; }
.chat-rc-need.is-mine-done::before { color: #d93025; }
.chat-rc-need.is-done { background: #c8ccd0; }
.chat-rc-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
  white-space: nowrap; flex: 0 0 auto;   /* 潰れて縦組みにならないように */
}
.chat-rc-n.is-c { background: #e6f4ea; color: #137333; }   /* 確認 ●/● */
.chat-rc-n.is-r { background: #e8f0fe; color: #1967d2; }   /* 既読 ●/● */

/* 数字が本文に重ならないように、 右側を空ける */

/* --- 内訳 --- */
.chat-rcm {
  position: fixed; inset: 0; z-index: 195;
  background: rgba(15, 18, 22, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.chat-rcm[hidden] { display: none; }
.chat-rcm-box {
  background: #fff; border-radius: 14px; width: 100%; max-width: 520px;
  max-height: 82vh;
  max-height: 82dvh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .28);
}
.chat-rcm-head {
  flex: 0 0 auto; display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 12px 12px 18px; border-bottom: 1px solid var(--c-line);
}
.chat-rcm-ttl { flex: 1; min-width: 0; }
.chat-rcm-ttl h2 { margin: 0; font-size: 15px; font-weight: 600; }
.chat-rcm-sub {
  display: block; font-size: 11.5px; color: var(--c-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-rcm-x {
  width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--c-muted); font-size: 22px; line-height: 1;
}
.chat-rcm-x:hover { background: var(--c-hover); }

.chat-rcm-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; }
.chat-rcm-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.chat-rcm-col + .chat-rcm-col { border-left: 1px solid var(--c-line); }
.chat-rcm-h {
  flex: 0 0 auto; padding: 10px 14px 8px;
  font-size: 12px; font-weight: 700; color: #80868b;
}
.chat-rcm-h.is-ok { color: #137333; }
.chat-rcm-ul { margin: 0; padding: 0 0 6px 26px; list-style: none; }

/* 名前で絞り込む */
.chat-rcm-find {
  flex: 0 0 auto; margin: 10px 14px 4px;
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px; background: var(--c-hover); border-radius: 18px;
}
.chat-rcm-find svg { width: 16px; height: 16px; color: var(--c-muted); flex: 0 0 auto; }
.chat-rcm-find input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 13px;
}

/* 店舗ごとに畳む (300人でも見出しだけで人数が分かる) */
/* flex-basis は auto。 0 にすると中身の高さが 0 として扱われ、
   箱 (max-height だけで height が無い) が見出しの高さまで潰れてしまう。
   auto なら中身ぶん伸び、 上限に達したら min-height:0 で縮んでスクロールする。 */
.chat-rcm-col > .chat-rcm-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 10px 12px;
}
.chat-rcm-g + .chat-rcm-g { margin-top: 2px; }
.chat-rcm-gt {
  width: 100%; display: flex; align-items: center; gap: 5px;
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 700; color: var(--c-muted);
  padding: 6px 6px; border-radius: 8px; text-align: left;
}
.chat-rcm-gt:hover { background: var(--c-hover); color: var(--c-ink); }
.chat-rcm-gt svg { width: 13px; height: 13px; flex: 0 0 auto; transition: transform .16s ease; }
.chat-rcm-g.is-open .chat-rcm-gt svg { transform: rotate(90deg); }
.chat-rcm-gn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-rcm-gc {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700;
  background: rgba(32,33,36,.06); border-radius: 999px; padding: 1px 7px; color: #80868b;
}
.chat-rcm-g > .chat-rcm-ul { display: none; }
.chat-rcm-g.is-open > .chat-rcm-ul { display: block; }
.chat-rcm-none { margin: 8px 12px; font-size: 12.5px; color: #b8c0c7; }
.chat-rcm-ul li { font-size: 13.5px; padding: 5px 0; line-height: 1.4; }
.chat-rcm-ul li.is-part { color: var(--c-muted); }
.chat-rcm-ul li.is-none { color: #b8c0c7; font-size: 12.5px; }

@media (max-width: 620px) {
  .chat-rcm { padding: 0; align-items: flex-end; }
  .chat-rcm-box { max-width: none; border-radius: 14px 14px 0 0; max-height: 76vh; }

}

/* 発言できないスペース (読み専用) */
.chat-readonly {
  margin: 0; padding: 14px 16px; text-align: center;
  font-size: 12.5px; color: var(--c-muted);
  background: var(--c-hover); border-radius: 12px;
}


/* 画面が低いとき (スマホ横向きなど) は、 余白を削って
   見出し・検索・操作ボタンが必ず残るようにする */
@media (max-height: 520px) {
  .chat-mm-box, .chat-rcm-box { max-height: 96vh; max-height: 96dvh; }
  .chat-mm-now { max-height: 16vh; padding: 8px 14px; }
  .chat-mm-head, .chat-rcm-head { padding-top: 8px; padding-bottom: 8px; }
  .chat-mm-search { height: 34px; margin: 8px 14px 4px; }
  .chat-mm-foot { padding: 8px 14px; }
  .chat-rcm-find { height: 32px; margin: 6px 12px 2px; }
}

/* 正社員のアイコンは八角形 (アルバイトは丸のまま) */
.chat-av-ft {
  border-radius: 0;
  clip-path: polygon(
    30% 0%, 70% 0%, 100% 30%, 100% 70%,
    70% 100%, 30% 100%, 0% 70%, 0% 30%
  );
}

/* ======================================================================
   上部固定トピック (スレッドごとに4件まで)
   ====================================================================== */
.chat-ico.is-on { background: var(--c-sel); color: var(--c-blue); }

.chat-pins {
  flex: 0 0 auto;
  background: #f7f9fb; border-bottom: 1px solid var(--c-line);
}
.chat-pins-in {
  display: grid; grid-template-columns: 1fr 1fr;   /* 2列 */
  gap: 5px; padding: 6px 8px 7px;
}
.chat-pin {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 5px 9px; border: 1px solid var(--c-line); border-radius: 6px;
  background: #fff; cursor: pointer; font: inherit; text-align: left;
  transition: border-color .12s, box-shadow .12s;
}
.chat-pin:hover { border-color: var(--c-blue); box-shadow: 0 1px 4px rgba(11,87,208,.12); }
.chat-pin:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 1px; }
.chat-pin-i { flex: 0 0 auto; display: inline-flex; color: #9aa7b4; }
.chat-pin-i svg { width: 14px; height: 14px; }
/* 1行だけ。 入りきらない分は … で切る (高さを増やさないため) */
.chat-pin-t {
  flex: 1; min-width: 0;
  font-size: 12.5px; line-height: 1.5; color: var(--c-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}



@media (max-width: 620px) {
  .chat-pins-in { gap: 4px; padding: 5px 6px 6px; }
  .chat-pin { padding: 5px 8px; }
  .chat-pin-t { font-size: 12px; }
}

/* ======================================================================
   期限付きスペース (kind='temp')
   終わると一覧から消えるので、 用件ごとに立てても溜まらない。
   ====================================================================== */
/* 会話の上部に常に出す帯。 いつ消えるか と 終了の進み具合 */
.chat-tmp {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; background: #eef6ff; border-bottom: 1px solid #d5e6f8;
  font-size: 12.5px; color: #17457d;
}
.chat-tmp.is-over { background: #fdecea; border-bottom-color: #f3c4c0; color: #b3261e; }
.chat-tmp.is-closed { background: #f1f3f4; border-bottom-color: var(--c-line); color: #5f6368; }
.chat-tmp-i { flex: 0 0 auto; display: inline-flex; }
.chat-tmp-i svg { width: 15px; height: 15px; }
.chat-tmp-t {
  flex: 1; min-width: 0; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-tmp-n {
  flex: 0 0 auto; padding: 1px 8px; border-radius: 999px;
  background: #fff; border: 1px solid currentColor; font-size: 11px; font-weight: 700;
}
.chat-tmp-f { flex: 0 0 auto; display: flex; }
.chat-tmp-b {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1.5px solid #137333; border-radius: 999px; background: #fff; color: #137333;
  font: inherit; font-size: 11px; font-weight: 700; padding: 2px 10px; cursor: pointer;
  white-space: nowrap; line-height: 1.5;
}
.chat-tmp-b:hover { background: #e6f4ea; }
.chat-tmp-b svg { width: 13px; height: 13px; }
/* 押したあとは 取り消せることが分かる程度に控えめにする */
.chat-tmp-b.is-done { border-color: #b7c0c8; color: #5f6368; }
.chat-tmp-b.is-done:hover { background: var(--c-hover); }

/* 一覧の行に出す期限 */
.chat-item-exp {
  display: inline-block; margin-right: 5px; padding: 0 5px;
  border-radius: 3px; background: #e8f0fe; color: #17457d;
  font-size: 11px; font-weight: 700;
}

/* 新規作成: 選んだ参加者のタグ */
.chat-new-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 14px 0; }
.chat-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border: 1px solid var(--c-line); border-radius: 999px;
  background: var(--c-sel); color: var(--c-blue);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.chat-chip:hover { border-color: var(--c-blue); }
.chat-chip span { font-size: 14px; line-height: 1; color: var(--c-muted); }

@media (max-width: 620px) {
  .chat-tmp { gap: 6px; padding: 5px 8px; font-size: 12px; }
  .chat-tmp-b { padding: 2px 8px; }
}

/* ======================================================================
   未確認のお知らせ (投稿欄のすぐ上に浮かぶ近道ボタン)
   自分がまだ「確認しました」を押していない発言へ飛ぶ。
   高さ 0 の箱に絶対配置で入れて、 発言に重ねる (場所を取らない)。
   投稿欄と発言の境目に置き、 下端をそこに合わせて上へ積む
   (新しいものが一番上)。
   ====================================================================== */
.chat-unack {
  flex: 0 0 auto;
  position: relative; z-index: 20; height: 0; overflow: visible;
}
.chat-unack-in {
  position: absolute; bottom: 2px; right: 12px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  max-width: min(62%, 260px);
}
.chat-unack-b {
  display: flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 5px 10px; border: 1px solid #f3c4c0; border-radius: 999px;
  background: #fff; color: #b3261e; text-decoration: none;
  font-size: 12px; font-weight: 700; line-height: 1.4;
  box-shadow: 0 2px 8px rgba(20,25,30,.16);
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.chat-unack-b:hover { background: #fdecea; border-color: #d93025; box-shadow: 0 3px 10px rgba(217,48,37,.22); }
.chat-unack-b:focus-visible { outline: 2px solid #d93025; outline-offset: 1px; }
.chat-unack-d {
  flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
  background: #d93025; display: inline-flex; align-items: center; justify-content: center;
}
.chat-unack-d::before {
  content: "!"; color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
}
/* 1行だけ。 入りきらない分は … で切る */
.chat-unack-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-unack-b.is-more { font-weight: 600; color: var(--c-muted); border-color: var(--c-line); }
.chat-unack-b.is-more:hover { color: #b3261e; border-color: #f3c4c0; background: #fff; }

@media (max-width: 620px) {
  .chat-unack-in { bottom: 2px; right: 8px; gap: 4px; max-width: 70%; }
  .chat-unack-b { padding: 4px 9px; font-size: 11.5px; }
}

/* --- 送信まわり --- */
.chat-kind {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 4px;
  font-size: 12px; color: var(--c-muted); cursor: pointer; white-space: nowrap;
}
.chat-kind input { width: auto; margin: 0; }
.chat-picked {
  font-size: 11.5px; color: var(--c-muted); padding: 4px 8px 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 確認しました — ! の左に置く。
   .chat-rc は pointer-events:none なので、 押せるように戻す */
.chat-actf { display: flex; pointer-events: auto; }
.chat-confirm {
  border: 1.5px solid #137333; border-radius: 999px; background: #fff; color: #137333;
  font: inherit; font-size: 11px; font-weight: 700; padding: 2px 10px; cursor: pointer;
  white-space: nowrap; line-height: 1.5;
}
.chat-confirm:hover { background: #e6f4ea; }
.chat-done {
  font-size: 11px; font-weight: 700; color: #137333;
  white-space: nowrap; pointer-events: auto;
}

/* 確認ボタンがある発言は、 見出しの右をその分だけ広く空ける */
.chat-msg-head.has-act  { padding-right: 190px; }
.chat-msg-head.has-done { padding-right: 160px; }

/* 発言を固定する切り替え */
.chat-pinf { display: flex; flex: 0 0 auto; margin-left: -4px; }
.chat-pinb {
  width: 28px; height: 28px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: #b6c0ca;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .6; transition: opacity .12s, color .12s;   /* 最初から見える */
}
.chat-pinb svg { width: 19px; height: 19px; }
.chat-msg:hover .chat-pinb, .chat-pinb.is-on { opacity: 1; }
.chat-pinb.is-on { color: var(--c-blue); }
.chat-pinb:hover { background: var(--c-hover); color: var(--c-blue); }

/* 新しいチャット */
.chat-new-tabs { display: flex; gap: 4px; padding: 10px 14px 0; flex: 0 0 auto; }
.chat-new-tab {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; color: var(--c-muted);
  padding: 8px 14px; border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent;
}
.chat-new-tab.is-on { color: var(--c-blue); border-bottom-color: var(--c-blue); }
.chat-new-pane { display: none; flex-direction: column; min-height: 0; flex: 1; }
.chat-new-pane.is-on { display: flex; }
.chat-new-fields { padding: 14px 18px 4px; display: flex; flex-direction: column; gap: 12px; }
.chat-new-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--c-muted); }
.chat-new-f input, .chat-new-f select {
  font: inherit; font-size: 14px; padding: 8px 10px;
  border: 1px solid var(--c-line); border-radius: 8px; background: #fff; color: var(--c-ink);
}
.chat-new-note { margin: 0; padding: 6px 18px 0; font-size: 12px; color: var(--c-muted); }


/* スマホ: 本文に幅を使えるよう、 余白とアイコンを詰める */
@media (max-width: 620px) {
  .chat-stream { padding: 6px 6px 10px; }
  .chat-msg { gap: 7px; }
  .chat-msg-av { flex: 0 0 30px; width: 30px; }
  .chat-stream .chat-av-md { width: 30px; height: 30px; font-size: 13px; }
  .chat-msg-body { padding: 7px 10px 8px; border-radius: 3px; }
}

/* 退会した人の発言。 氏名は残さず従業員番号のままなので、 色で分かるようにする */
.chat-msg-name.is-left { color: var(--c-muted); font-weight: 500; }

@media (max-width: 620px) {
  /* 画面が狭いときは 見出しを折り返して、 名前が潰れないようにする */
  .chat-msg-head { flex-wrap: wrap; }
  .chat-msg-head.has-act  { padding-right: 150px; }
  .chat-msg-head.has-done { padding-right: 130px; }
  .chat-confirm { font-size: 10.5px; padding: 2px 8px; }
}

/* ======================================================================
   固定されている発言 / 固定トピックの色分け
   ====================================================================== */

/* 固定されている発言は、 上部に並ぶボタンと同じ色にする
   (左上から ピンク → 水色 → うす緑 → 薄黄色)。
   しっぽの色も同じ変数を見ているので、 そこだけ白く残ることはない。 */
.chat-msg.is-pin1 { --pin-bg: #fdeef2; }
.chat-msg.is-pin2 { --pin-bg: #eaf3fb; }
.chat-msg.is-pin3 { --pin-bg: #edf7ee; }
.chat-msg.is-pin4 { --pin-bg: #fdf8e6; }

/* 上に並ぶ固定トピックは、 左上から ピンク → 水色 → うす緑 → 薄黄色 */
.chat-pin:nth-child(1) { background: #fdeef2; border-color: #f3d3dd; }
.chat-pin:nth-child(2) { background: #eaf3fb; border-color: #cfe0f0; }
.chat-pin:nth-child(3) { background: #edf7ee; border-color: #cfe6d2; }
.chat-pin:nth-child(4) { background: #fdf8e6; border-color: #eee0b4; }
.chat-pin:nth-child(1):hover { border-color: #e79ab3; }
.chat-pin:nth-child(2):hover { border-color: #86b4e0; }
.chat-pin:nth-child(3):hover { border-color: #8fc79a; }
.chat-pin:nth-child(4):hover { border-color: #d9bd63; }
.chat-pin:hover { box-shadow: 0 1px 4px rgba(15,30,20,.14); }

/* ======================================================================
   ピンの入れ替え
   ====================================================================== */
.chat-swap {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; background: #fff4e5; border-bottom: 1px solid #f0dcc0;
  font-size: 15px; font-weight: 700; color: #7a5320;
}
.chat-swap[hidden] { display: none; }
.chat-swap-t { flex: 1; min-width: 0; line-height: 1.5; }
.chat-swap-b { flex: 0 0 auto; display: flex; gap: 6px; }
.chat-swap-ok, .chat-swap-no {
  border: 0; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 700; padding: 6px 16px; white-space: nowrap;
}
.chat-swap-ok { background: #ed8a2a; color: #fff; }
.chat-swap-ok:hover { background: #d8781c; }
.chat-swap-no { background: #fff; color: #7a5320; border: 1px solid #e6cfae; }
.chat-swap-no:hover { background: #fbf0e0; }

/* 選んでいる間、 上の4つを目立たせる。
   選び直せるよう、 選択中も点滅は続ける (選んだ1件は塗って区別する) */
.chat-pins.is-picking .chat-pin {
  outline: 2px solid #ed8a2a; outline-offset: 1px;
  animation: chatPickPulse 1.2s ease-in-out infinite;
  cursor: pointer;
}
.chat-pins.is-picking .chat-pin.is-chosen {
  outline-width: 3px; animation: none;
  box-shadow: 0 2px 10px rgba(237,138,42,.4);
}
.chat-pins.is-picking .chat-pin.is-chosen .chat-pin-t { font-weight: 700; }
@keyframes chatPickPulse {
  0%, 100% { outline-color: #ed8a2a; }
  50%      { outline-color: #f6c48c; }
}

/* 選ばれた発言 / 入れ替え後の発言を照らす。
   枠だけだと分かりにくいので、 背景も変える */
.chat-msg.is-spot > .chat-msg-body {
  background: #ffe9cf;
  box-shadow: 0 0 0 3px #ed8a2a, 0 4px 14px rgba(237,138,42,.35);
}
.chat-msg.is-spot:not(.is-mine) > .chat-msg-body::before { border-right-color: #ffe9cf; }
.chat-msg.is-spot.is-mine > .chat-msg-body::before { border-left-color: #ffe9cf; }
@media (prefers-reduced-motion: reduce) {
  .chat-pins.is-picking .chat-pin { animation: none; }
}

@media (max-width: 620px) {
  /* 狭い画面では1列に戻す */
  .chat-mm-grp.is-open > .chat-mm-grp-b { grid-template-columns: 1fr; }
}

/* ======================================================================
   発言の編集 / 削除 (本人のみ)
   ====================================================================== */

/* アイコンの下に出す「…」 */
.chat-msg-av { flex-direction: column; gap: 2px; }
/* 白い小さなボタンにして、 影を付けてはっきり見えるようにする
   (スマホには hover が無いので、 最初からくっきり出す) */
.chat-more {
  width: 30px; height: 22px; cursor: pointer;
  border: 1px solid #d9dde1; border-radius: 999px;
  background: #fff; color: #5f6368;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; transition: background-color .12s, color .12s, box-shadow .12s;
}
.chat-more svg { width: 16px; height: 16px; display: block; }
.chat-more:hover {
  background: #f1f3f4; color: var(--c-ink);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .26);
}
.chat-more:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 1px; }

/* 削除された発言 */
.chat-av-gone { background: #c8ccd0 !important; color: #fff; }
.chat-av-gone svg { width: 20px; height: 20px; }
.chat-msg-text.is-gone { color: #9aa0a6; font-style: italic; }

/* 編集のモーダル */
.chat-ed-box { max-width: 560px; }
.chat-ed { display: flex; flex-direction: column; min-height: 0; }
.chat-ed textarea {
  margin: 14px 18px 0; padding: 10px 12px;
  border: 1px solid var(--c-line); border-radius: 8px;
  font: inherit; font-size: 14px; line-height: 1.6; resize: vertical;
  min-height: 120px; max-height: 40vh; color: var(--c-ink); background: #fff;
}
.chat-ed textarea:focus { outline: none; border-color: var(--c-blue); }
.chat-ed-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; margin-top: 12px; border-top: 1px solid var(--c-line);
}
.chat-ed-del {
  border: 1.5px solid #e5a2a2; border-radius: 999px; background: #fff; color: #c5221f;
  font: inherit; font-size: 13px; font-weight: 700; padding: 7px 18px; cursor: pointer;
}
.chat-ed-del:hover { background: #fdeeee; }
.chat-ed-chk {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end;
  gap: 6px; font-size: 12.5px; color: var(--c-muted); cursor: pointer; white-space: nowrap;
}
.chat-ed-chk input { width: auto; margin: 0; }
.chat-ed-ok {
  border: 0; border-radius: 999px; background: var(--c-blue); color: #fff;
  font: inherit; font-size: 13px; font-weight: 700; padding: 8px 22px; cursor: pointer;
}
.chat-ed-ok[disabled] { background: #e8eaed; color: #9aa0a6; cursor: default; }

@media (max-width: 620px) {
  .chat-ed-foot { flex-wrap: wrap; gap: 8px; }
  .chat-ed-chk { order: 3; flex-basis: 100%; justify-content: flex-start; }
}

/* ======================================================================
   ファイル送信の依頼
   ====================================================================== */
/* 入力欄: 相手を選ぶ */
.chat-ask {
  margin: 6px 4px 2px; padding: 8px 10px;
  background: #f4f7fb; border: 1px solid #dbe5f0; border-radius: 8px;
}
.chat-ask[hidden] { display: none; }
.chat-ask-t { font-size: 11.5px; font-weight: 700; color: #35618f; margin-bottom: 6px; }
.chat-ask-n { font-weight: 700; color: var(--c-blue); margin-left: 6px; }
.chat-ask-list { display: flex; flex-wrap: wrap; gap: 4px 10px; max-height: 22vh; overflow-y: auto; }
.chat-ask-i {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.chat-ask-i input { width: auto; margin: 0; }
.chat-ask-no { font-size: 12px; color: var(--c-muted); }

/* 発言に出す依頼カード */
.chat-req {
  margin-top: 8px; border: 1px solid #dbe5f0; border-radius: 8px;
  background: #f7fafd; overflow: hidden;
}
/* 見出しは押して開閉する。 ふだんは畳んでおく */
.chat-req-h {
  width: 100%; display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; background: #eaf1f9; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; color: #35618f;
  text-align: left;
}
.chat-req-h:hover { background: #dfe9f5; }
.chat-req-h:focus-visible { outline: 2px solid var(--c-blue); outline-offset: -2px; }
.chat-req-ttl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-req-caret { flex: 0 0 auto; display: inline-flex; transition: transform .16s ease; }
.chat-req-caret svg { width: 13px; height: 13px; }
.chat-req.is-open .chat-req-caret { transform: rotate(90deg); }
.chat-req-b { display: none; }
.chat-req.is-open > .chat-req-b { display: block; }
.chat-req-h svg { width: 15px; height: 15px; flex: 0 0 auto; }
.chat-req-n {
  margin-left: auto; background: #fff; border-radius: 999px;
  padding: 1px 8px; font-size: 11px; color: #35618f;
}
/* 人数が多くなるので2列で出す */
.chat-req-l {
  list-style: none; margin: 0; padding: 6px 10px 8px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px;
}
.chat-req-i {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 5px 0; font-size: 13px; min-width: 0;
  border-top: 1px solid #e8eef5;
}
/* 1行目 (2列ぶん) には上の線を引かない */
.chat-req-i:nth-child(1), .chat-req-i:nth-child(2) { border-top: 0; }
.chat-req-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-req-s { font-size: 11px; font-weight: 700; color: #9aa0a6; }
.chat-req-s.is-ok { color: #137333; }
.chat-req-dl {
  border: 1px solid var(--c-blue); border-radius: 999px; background: #fff; color: var(--c-blue);
  font: inherit; font-size: 11.5px; font-weight: 700; padding: 3px 12px; cursor: pointer;
  max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-req-dl:hover { background: #eaf1fd; }
.chat-req-up { margin-left: auto; }
.chat-req-btn {
  border: 0; border-radius: 999px; background: var(--c-blue); color: #fff;
  font: inherit; font-size: 11.5px; font-weight: 700; padding: 4px 14px; cursor: pointer;
}
.chat-req-btn:hover { background: #0a49ad; }
.chat-req-note {
  margin: 0; padding: 0 10px 8px; font-size: 11px; color: var(--c-muted);
}

@media (max-width: 620px) {
  /* 狭い画面では1列に戻す */
  .chat-req-l { grid-template-columns: 1fr; }
  .chat-req-i:nth-child(2) { border-top: 1px solid #e8eef5; }
}

/* 期限切れで消えた提出ファイル */
.chat-req-s.is-gone { color: #b26500; }

/* 近道ボタン: ファイルの提出をお願いされているもの (未確認とは色を分ける) */
.chat-unack-b.is-file {
  border-color: #bcd3ee;
  color: #1a5fa8;
}
.chat-unack-b.is-file:hover { border-color: #7aa9dd; background: #f2f7fd; }
.chat-unack-i {
  flex: 0 0 auto; width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #1a5fa8;
}
.chat-unack-i svg { width: 13px; height: 13px; }

/* ======================================================================
   はじめてチャットを開いたときの案内
   ====================================================================== */
.chat-intro-box { max-width: 520px; }
.chat-intro { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 18px 8px; }
.chat-intro-s { padding: 12px 0; }
.chat-intro-s + .chat-intro-s { border-top: 1px solid var(--c-line); }
.chat-intro-s h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--c-ink); }
.chat-intro-s p { margin: 0; font-size: 13px; line-height: 1.7; color: #4a5057; }
.chat-intro-ul { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.9; color: #4a5057; }
.chat-intro-k {
  display: inline-block; border: 1px solid var(--c-line); border-radius: 4px;
  padding: 0 5px; background: #fff; font-size: 11px;
}
.chat-intro-btn {
  margin-top: 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--c-blue); color: #fff; font: inherit;
  font-size: 13px; font-weight: 700; padding: 8px 20px;
}
.chat-intro-btn:hover { background: #0a49ad; }
.chat-intro-btn[disabled] { background: #e8eaed; color: #9aa0a6; cursor: default; }
.chat-intro-state { margin-left: 10px; font-size: 12px; font-weight: 700; color: #137333; }

/* ======================================================================
   上へさかのぼって読み足す / 最新へ戻る
   ====================================================================== */
.chat-more-top {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 0 10px; color: var(--c-muted); font-size: 12px;
}
.chat-more-sp {
  width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid var(--c-line); border-top-color: var(--c-blue);
  animation: chatSpin .7s linear infinite;
}
@keyframes chatSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chat-more-sp { animation: none; } }

/* 最新へ戻る ▽ — 投稿欄のすぐ上、 中央に浮かせる。
   入れ物は高さ0にして、 本文の領域を狭めない */
.chat-bottom-w {
  flex: 0 0 auto;
  position: relative; z-index: 19; height: 0; overflow: visible;
}
.chat-bottom {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--c-line); border-radius: 999px;
  background: #fff; color: var(--c-ink); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.16);
  z-index: 3;
}
.chat-bottom:hover { background: var(--c-hover); border-color: #c6cdd4; }
.chat-bottom svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ▽ が出ているあいだは、 未確認の近道を持ち上げて重ならないようにする */
.chat-app.has-bottom-btn .chat-unack-in { bottom: 44px; }

/* ======================================================================
   自分のアイコンの見た目を選ぶ
   ====================================================================== */
.chat-avm-box { max-width: 460px; }
.chat-avm { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 18px 10px; }

.chat-avm-prev {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0 16px; border-bottom: 1px solid var(--c-line);
}
.chat-avm-name { font-size: 14px; font-weight: 600; color: var(--c-ink); }

.chat-avm-sec { padding: 14px 0; }
.chat-avm-sec + .chat-avm-sec { border-top: 1px solid var(--c-line); }
.chat-avm-sec h3 {
  margin: 0 0 10px; font-size: 12px; font-weight: 700; color: var(--c-muted);
  letter-spacing: .04em;
}

/* 色の見本 */
.chat-avm-cols { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; }
.chat-avm-c {
  aspect-ratio: 1 / 1; width: 100%; border: 0; border-radius: 50%;
  cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
}
.chat-avm-c:hover { transform: scale(1.12); }
.chat-avm-c.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-blue); }

.chat-avm-free {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; flex-wrap: wrap;
}
.chat-avm-pick {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13px; color: var(--c-ink);
}
.chat-avm-pick input[type=color] {
  width: 34px; height: 30px; padding: 0; cursor: pointer;
  border: 1px solid var(--c-line); border-radius: 8px; background: #fff;
}
.chat-avm-auto {
  border: 1px solid var(--c-line); border-radius: 999px; background: #fff;
  color: var(--c-muted); font: inherit; font-size: 12px; padding: 5px 12px; cursor: pointer;
}
.chat-avm-auto:hover { border-color: #c6cdd4; color: var(--c-ink); }

/* 柄の見本 */
.chat-avm-pats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.chat-avm-p {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px; cursor: pointer;
  border: 1px solid var(--c-line); border-radius: 12px; background: #fff;
  font: inherit;
}
.chat-avm-p:hover { border-color: #c6cdd4; background: var(--c-hover); }
.chat-avm-p.is-on { border-color: var(--c-blue); box-shadow: inset 0 0 0 1px var(--c-blue); }
.chat-avm-p-n { font-size: 11.5px; color: var(--c-muted); }
.chat-avm-p.is-on .chat-avm-p-n { color: var(--c-blue); font-weight: 700; }

@media (max-width: 620px) {
  .chat-avm-cols { grid-template-columns: repeat(6, 1fr); }
  .chat-avm-pats { grid-template-columns: repeat(3, 1fr); }
}