/* ==========================================================================
   チャット画面 (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-xs { width: 15px; height: 15px; font-size: 8px; }
.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;
  border-right: 1px solid var(--c-line); background: #fff;
}
.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-side-foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  margin: 8px 12px 14px; min-width: 0;
}

/* 寄せ書き。 新しいチャットより控えめな大きさにする */
.chat-msgbtn {
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 14px; border: 1.5px solid #e3e5e8; border-radius: 19px;
  background: #fff; color: var(--c-ink); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.chat-msgbtn:hover { background: #f8f9fa; }
.chat-msgbtn svg { width: 16px; height: 16px; color: #e0736f; }

/* 書くのを頼まれている印。 ボタンの右上に手紙 (封筒の形が分かるよう SVG で描く) */
.chat-msgbtn.has-mail::after {
  content: ""; position: absolute; top: -6px; right: -5px; width: 20px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Crect x='.9' y='.9' width='18.2' height='14.2' rx='2.6' fill='%23e0736f' stroke='%23fff' stroke-width='1.8'/%3E%3Cpath d='M3.2 4.6 10 9.3l6.8-4.7' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.chat-new {
  flex: 1 1 auto; min-width: 0; margin: 0;
  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; }
}

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

/* アイコンの下に出す「…」
   縦並びに変えるので align-items も付け直すこと。
   .chat-msg-av (上の方) は 横並び前提で align-items:flex-start にしてあり、
   縦並びでは これが **左寄せ**になる。 PC幅では 列 36px に対して
   ボタンが 30px なので 3px 左にずれて見えていた
   (スマホ幅は 列も 30px なので たまたま揃っていた)。 */
.chat-msg-av { flex-direction: column; align-items: center; 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); }
}

/* 送信中の仮の吹き出し (送信ボタンを押した瞬間に出す)
   通信が終わるとページが読み直され、 本物の発言に置き換わる */
.chat-msg.is-pending { opacity: 0.65; }
.chat-msg.is-pending .chat-msg-time { color: #7a8a99; font-style: normal; }
/* 仮の吹き出しは textContent で入れるので、 改行は CSS で見せる (本物は nl2br) */
.chat-msg.is-pending .chat-msg-text { white-space: pre-wrap; }
.chat-pending-files { font-size: 0.78rem; color: #7a8a99; margin-top: 2px; }
.chat-pending-bar {
  margin-top: 6px;
  height: 3px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .08);
  overflow: hidden;
}
.chat-pending-bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 3px;
  background: currentColor;
  opacity: .5;
  animation: chat-pending-slide 1.1s ease-in-out infinite;
}
@keyframes chat-pending-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
/* 送信中は 入力欄まわりを触れないように見せる */
.chat-composer-box.is-sending { opacity: 0.75; }
.chat-composer-box.is-sending .chat-composer-tools { pointer-events: none; }

/* 予約送信 ------------------------------------------------------------- */
/* 送信ボタンの左に置く 小さな時計 */
.chat-clock {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-right: 4px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line, #dfe3e8);
  border-radius: 50%;
  background: #fff;
  color: #5b6b7d;
  cursor: pointer;
}
.chat-clock svg { width: 18px; height: 18px; }
.chat-clock:hover { background: #f2f6fa; color: #2e7dd1; border-color: #c3d3e4; }
.chat-clock-n {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #2e7dd1;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  font-weight: 700;
}

.chat-sched {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 18px 4px;   /* 箱の左右にくっつかないように (他のモーダルと同じ 18px) */
}
/* 本文が空のまま開いたとき (予約の一覧を見にきた場合) は 入れる方を使えなくする */
.chat-sched.is-off .chat-sched-f,
.chat-sched.is-off .chat-sched-t,
.chat-sched.is-off .chat-sched-prev { opacity: .45; pointer-events: none; }
.chat-sched-empty {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff7e6;
  border: 1px solid #f0dcb4;
  color: #7a6a3a;
  font-size: 12.5px;
}
.chat-sched:not(.is-off) .chat-sched-empty { display: none; }
.chat-sched-prev {
  max-height: 6.5em;
  overflow: auto;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f4f7fa;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-sched-note { margin: 0; font-size: 12px; color: #7a8a99; }
.chat-sched-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #5b6b7d; }
.chat-sched-f input[type="number"] {
  width: 5em;
  height: 44px;
  padding: 0 10px;
  border: 2px solid var(--c-line, #dfe3e8);
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  font-family: inherit;
}
.chat-sched-f input[type="number"]:focus { outline: none; border-color: #2e7dd1; }
.chat-sched-t { display: flex; align-items: flex-end; gap: 8px; }
.chat-sched-colon { padding-bottom: 10px; font-size: 18px; font-weight: 700; color: #7a8a99; }

.chat-sched-list {
  margin-top: 12px;
  border-top: 1px solid var(--c-line, #dfe3e8);
  padding: 12px 18px 16px;
  overflow-y: auto;
}
.chat-sched-list h3 { margin: 0 0 8px; font-size: 13px; color: #5b6b7d; }
.chat-sched-none { margin: 0; font-size: 13px; color: #9aa5b1; }
.chat-sched-list ul { list-style: none; margin: 0; padding: 0; }
.chat-sched-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  padding: 8px 0;
  border-bottom: 1px dotted var(--c-line, #dfe3e8);
}
.chat-sched-list li:last-child { border-bottom: none; }
.chat-sched-when { font-size: 13px; }
.chat-sched-when strong { font-size: 15px; }
.chat-sched-kind {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: #fdeeee; color: #b3261e; font-size: 11px; font-weight: 700;
}
.chat-sched-body { grid-column: 1; font-size: 12px; color: #7a8a99; word-break: break-word; }
.chat-sched-cancel { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.chat-sched-cancel button {
  padding: 5px 10px;
  border: 1px solid #e6bcbc;
  border-radius: 8px;
  background: #fff;
  color: #b3261e;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.chat-sched-cancel button:hover { background: #fdf3f3; }

/* 予約送信のモーダルは 中身が短いので、 スマホでも全画面にせず 余白を残す
   (.chat-mm は狭い画面で padding:0 / 全画面になる作りのため、 ここで戻す) */
@media (max-width: 620px) {
  #chatSchedMM { padding: 14px; align-items: center; }
  #chatSchedMM .chat-mm-box {
    max-width: none;
    height: auto;
    max-height: 86vh;
    max-height: 86dvh;
    border-radius: 14px;
  }
  .chat-sched { padding: 12px 14px 4px; }
  .chat-sched-list { padding: 12px 14px 16px; }
}


/* ======================================================================
   メッセージ (寄せ書き) をはじめるモーダル
   ====================================================================== */
/* モーダルの箱は overflow:hidden の flex 列。
   間に入る form と pane にも 高さを渡さないと 一覧の高さが決まらず、
   はみ出したぶんが切られて **下までスクロールできない**。
   (「新しいチャット」の .chat-new-pane と同じ形にそろえる) */
#chatMsgForm { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.msgw-pane.is-on { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.msgw-pane > p,
.msgw-pane > .chat-mm-search,
.msgw-pane > .chat-new-fields { flex: 0 0 auto; }
.msgw-pane > .chat-mm-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* 3枚目は一覧が無いので pane そのものを スクロールさせる */
.msgw-pane[data-p="3"] { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; }
.msgw-pane[data-p="3"] .chat-new-note { padding: 12px 18px 0; line-height: 1.7; }

.msgw-steps {
  flex: 0 0 auto;
  display: flex; gap: 6px; list-style: none; margin: 0 0 10px; padding: 10px 14px 0;
}
.msgw-steps li {
  flex: 1; display: flex; align-items: center; gap: 6px; justify-content: center;
  font-size: 12px; font-weight: 600; color: #9aa0a6;
  padding: 6px 4px; border-bottom: 2.5px solid #eceef0;
}
.msgw-steps li span {
  width: 18px; height: 18px; border-radius: 50%; background: #eceef0; color: #fff;
  display: grid; place-items: center; font-size: 11px;
}
.msgw-steps li.is-on { color: #d4674f; border-bottom-color: #e0736f; }
.msgw-steps li.is-on span { background: #e0736f; }

.msgw-pane { display: none; }   /* is-on のときの形は上の flex の指定を使う */

/* 3枚目のまとめ。 左右の余白が無いと 文字が箱の縁に張り付いて窮屈に見える */
.msgw-sum {
  margin: 14px 18px 0; padding: 12px 14px;
  background: #fafafa; border: 1px solid #ececee; border-radius: 10px;
  font-size: 13px;
}
.msgw-sum p { margin: 0; display: flex; align-items: baseline; gap: 12px; line-height: 1.9; }
.msgw-sum p + p { margin-top: 4px; border-top: 1px dashed #e6e6e8; padding-top: 4px; }
.msgw-sum-k { flex: 0 0 5em; font-size: 11.5px; font-weight: 600; color: var(--c-muted); }
.msgw-sum-v { flex: 1; min-width: 0; word-break: break-word; }
.msgw-self {
  margin: 10px 18px 0; padding: 10px 12px; border-radius: 9px;
  background: #fff6ec; border: 1px solid #f3d3ae;
  font-size: 12px; line-height: 1.75;
}

/* 贈る相手は 集める側で選べない */
.chat-mm-row.is-lock { opacity: .5; }
.chat-mm-row.is-lock .chat-mm-store { color: #d4674f; }

@media (max-width: 420px) {
  .chat-msgbtn span { display: none; }        /* 幅が無いときは手紙だけ */
  .chat-msgbtn { padding: 0 12px; }
}

/* 寄せ書きが届いた発言 (本文の代わりに出るカード) */
.chat-gift {
  display: flex; align-items: center; gap: 11px; margin-top: 2px;
  padding: 11px 13px; border-radius: 12px; text-decoration: none; color: inherit;
  background: linear-gradient(135deg, #fff6f3, #fff9ee);
  border: 1.5px solid #f3cfc4;
}
.chat-gift:hover { background: linear-gradient(135deg, #fff1ec, #fff6e4); }
/* 全体の a:hover が下線を付けるので、 カードの中では消す */
.chat-gift, .chat-gift:hover, .chat-gift:focus,
.chat-gift *, .chat-gift:hover * { text-decoration: none; }
.chat-gift-i { font-size: 26px; line-height: 1; flex: none; }
.chat-gift-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chat-gift-t strong { font-size: 13.5px; }
.chat-gift-s { font-size: 13px; color: #6b5b52; word-break: break-word; }
.chat-gift-n { font-size: 11.5px; color: #9c8b80; }
.chat-gift-go {
  margin-left: auto; flex: none; font-size: 12px; font-weight: 600; color: #fff;
  background: #e0736f; border-radius: 999px; padding: 5px 13px;
}

/* ======================================================================
   メッセージ: 押したとき最初に出るハブ (頼まれている分 / 新しく作る)
   ====================================================================== */
.msgh-body { padding: 14px 18px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.msgh-lead { margin: 0 0 10px; font-size: 13px; color: var(--c-muted); }
.msgh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.msgh-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border: 1.5px solid #e6e6ea; border-radius: 12px; background: #fbfbfc;
}
/* 自分がまだ書いていないものだけ 目立たせる */
.msgh-row.is-todo { border-color: #f3cfc4; background: linear-gradient(135deg, #fff6f3, #fff9ee); }
.msgh-row .msgh-mail { visibility: hidden; }
.msgh-row.is-todo .msgh-mail { visibility: visible; }
.msgh-btns { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.msgh-see {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1.5px solid #ddd; background: #fff; color: #555; border-radius: 999px; padding: 5px 12px;
}
.msgh-see:hover { background: #f6f6f8; }
.msgh-cnt { font-size: 11.5px; color: #9c8b80; }
.msgh-mail {
  flex: none; width: 24px; height: 19px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Crect x='.9' y='.9' width='18.2' height='14.2' rx='2.6' fill='%23e0736f' stroke='%23fff' stroke-width='1.8'/%3E%3Cpath d='M3.2 4.6 10 9.3l6.8-4.7' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.msgh-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.msgh-txt strong { font-size: 13.5px; }
.msgh-sub { font-size: 12px; color: #9c8b80; word-break: break-word; }
.msgh-go {
  flex: none; font: inherit; font-size: 12px; font-weight: 600; color: #fff; cursor: pointer;
  border: 0; background: #e0736f; border-radius: 999px; padding: 6px 14px;
}
.msgh-go:hover { background: #d4635f; }
.msgh-all { font-size: 12.5px; color: var(--c-muted); }

/* ======================================================================
   メッセージを書くモーダル (編集欄をそのまま入れる)
   ====================================================================== */
.chat-msgw-box { max-width: 760px; }
.msgw-editor { overflow-y: auto; min-height: 0; flex: 1 1 auto; padding: 14px 18px 18px; }
.msg-editor.is-modal { padding: 0; border: 0; box-shadow: none; background: transparent; }
/* 飾りの操作パネルは モーダル (z-index 190) より前に出す */
.msg-itembar { z-index: 240; }

@media (max-width: 760px) {
  .chat-msgw-box { max-width: 100%; }
}

/* 「確認」モーダルの中身 */
.msgv-head { margin: 0 0 12px; font-size: 13.5px; }
.msgv-title { display: block; font-size: 12px; color: #9c8b80; margin-top: 2px; }
.msgv-h { margin: 16px 0 8px; font-size: 13px; }
.msgv-h:first-of-type { margin-top: 0; }
.msgv-foot { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid #eee; font-size: 12.5px; }
.msgv-note { color: var(--c-muted); margin-left: 6px; }

/* ======================================================================
   本文の中のリンクと メンション
   ====================================================================== */
.chat-link { color: var(--c-blue); text-decoration: underline; word-break: break-all; }
.chat-link:hover { text-decoration: none; }

/* @名前。 Google チャットのようにボタン風にする */
.chat-mention {
  display: inline-block; padding: 1px 7px; margin: 0 1px;
  border-radius: 999px; background: #e6f0fa; color: #1e5b96;
  font-weight: 600; font-size: 0.94em; line-height: 1.5;
  white-space: nowrap;
}
/* 自分の吹き出しの中では 背景に埋もれないようにする */
.chat-msg.is-mine .chat-mention { background: #fff; color: #1e5b96; }

/* ======================================================================
   @ で呼ぶ相手を選ぶ
   ====================================================================== */
.chat-at-list { padding: 6px 10px 10px; }
.chat-at-row {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border: 0; border-radius: 8px; background: transparent;
  font: inherit; text-align: left; cursor: pointer;
}
.chat-at-row:hover { background: var(--c-hover); }
/* ↑↓ で選んでいる行。 hover より濃くして、 どちらが決定されるか分かるようにする */
.chat-at-row.is-active { background: #e6f0fa; }
.chat-at-row.is-active .chat-at-name { font-weight: 600; }
.chat-at-at {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: #e6f0fa; color: #1e5b96; font-weight: 700; font-size: 13px;
  display: grid; place-items: center;
}
.chat-at-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 右下の未確認パネル: メンションの印 */
.chat-unack-b.is-mention { border-color: #c3daf0; background: #eef5fc; }
.chat-unack-i.is-at { font-weight: 700; color: #1e5b96; font-size: 13px; line-height: 1; }

/* @ の一覧は 編集モーダルの上に重ねて開くことがあるので 前に出す */
#chatAtMm { z-index: 200; }

/* 見出しを置かないぶん 小さくまとめる。
   人数が多くても 画面いっぱいにならないよう 一覧側で頭打ちにする */
.chat-at-box { max-width: 360px; max-height: 60vh; max-height: 60dvh; }
.chat-at-search { padding: 12px 10px 10px 14px; border-bottom: 1px solid var(--c-line); }
.chat-at-search input { flex: 1; min-width: 0; }
.chat-at-x {
  flex: 0 0 auto; width: 30px; height: 30px; margin-left: 4px;
  border: 0; border-radius: 50%; background: transparent; color: var(--c-muted);
  font-size: 21px; line-height: 1; cursor: pointer;
}
.chat-at-x:hover { background: var(--c-hover); color: var(--c-ink); }
/* 一覧側には上限を付けない。 箱と両方に付けると
   人が少ないときに 箱の下に余白が残る (一覧が先に頭打ちになるため)。
   高さは .chat-at-box の max-height に任せ、 一覧はその残りを埋める。 */

/* スマホ幅では モーダルを全画面にする共通指定 (620px 以下) があるが、
   @ の一覧だけは 入力の続きなので 小さいカードのままにする。 */
@media (max-width: 620px) {
  #chatAtMm { padding: 14px; align-items: center; }
  #chatAtMm .chat-at-box {
    max-width: none; height: auto;
    max-height: 60vh; max-height: 60dvh;
    border-radius: 14px;
  }
}

/* ======================================================================
   返信 (2026-09-14)
     ・他の人のアイコンの下 → 返信ボタン (.chat-reply)
     ・返信した発言のアイコンの上 → 返信元へ飛ぶ印 (.chat-reto)
     どちらも .chat-msg-av の縦並び (line 1148) に入るので、
     並び順は HTML の順で決まる (印 → アイコン → 返信ボタン)。
   ====================================================================== */
.chat-reply, .chat-reto {
  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; flex: none;
  transition: background-color .12s, color .12s, box-shadow .12s;
}
.chat-reply svg { width: 15px; height: 15px; display: block; }
/* 返信の印は **返信元の人のアイコン + ↩** の縦2段。 相手が一目で分かるように */
.chat-reto {
  flex-direction: column; gap: 1px;
  width: 30px; height: auto; padding: 3px 0 2px;
}
.chat-reto svg { width: 13px; height: 13px; display: block; }
.chat-reto .chat-av { pointer-events: none; }
.chat-reply:hover, .chat-reto:hover {
  background: #f1f3f4; color: var(--c-ink);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .26);
}
.chat-reply:focus-visible, .chat-reto:focus-visible {
  outline: 2px solid var(--c-blue); outline-offset: 1px;
}
/* 返信元へ飛ぶ印は 返信だと一目で分かるように 色を付けておく */
.chat-reto { background: #e6f0fa; border-color: #c3daf0; color: #1e5b96; }
.chat-reto:hover { background: #d7e7f7; color: #16497a; }
/* さかのぼって探している間 */
.chat-reto.is-busy { opacity: .55; pointer-events: none; }

/* 入力欄の上に出る「◯◯ さんに返信」の帯 */
.chat-reply-bar {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 6px; padding: 5px 8px;
  background: #e6f0fa; border-left: 3px solid #1e5b96; border-radius: 4px;
  font-size: 12.5px; color: #1e5b96;
}
.chat-reply-bar svg { width: 14px; height: 14px; flex: none; }
.chat-reply-who {
  flex: 1; min-width: 0; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-reply-x {
  flex: none; border: 0; background: transparent; cursor: pointer;
  color: #1e5b96; font-size: 18px; line-height: 1; padding: 0 2px;
}
.chat-reply-x:hover { color: #16497a; }

/* 添付の一覧: 1件ずつ ✕ で外せる札にする (2026-09-14)
   貼り付け (Ctrl+V) で増やせるようになったので、 間違えたときに
   1枚だけ取り消せないと困る */
.chat-picked {
  display: flex; flex-wrap: wrap; gap: 4px;
  white-space: normal; overflow: visible; text-overflow: clip;
}
.chat-chip {
  display: inline-flex; align-items: center; gap: 3px; max-width: 100%;
  padding: 2px 3px 2px 8px; border-radius: 999px;
  background: #eef1f4; border: 1px solid #dfe3e7;
  font-size: 11.5px; color: var(--c-ink);
}
.chat-chip-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14em; }
.chat-chip-x {
  flex: none; width: 16px; height: 16px; border: 0; border-radius: 50%;
  background: transparent; color: var(--c-muted); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.chat-chip-x:hover { background: #d8dde2; color: var(--c-ink); }

/* @ の一覧の「全員」(2026-09-14)。 人の行と見分けが付くように 下に線を引く */
.chat-at-all { border-bottom: 1px solid var(--c-line); border-radius: 8px 8px 0 0; }
.chat-at-all .chat-at-at { background: #1e5b96; color: #fff; }
.chat-at-sub { margin-left: auto; font-size: 11.5px; color: var(--c-muted); white-space: nowrap; }

/* 「@全員」は ふつうのメンションより少し目立たせる (2026-09-14) */
.chat-mention.is-all { background: #1e5b96; color: #fff; }
.chat-msg.is-mine .chat-mention.is-all { background: #1e5b96; color: #fff; }

/* 外されたマスターが 入り直すための帯 (2026-09-19)。
   一覧には出ないので ここからしか戻れない */
.chat-rejoin {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0; padding: 10px 14px;
  background: #fdf4e3; border: 1px solid #e8d9b5; border-radius: 10px;
  font-size: 13px; color: #8a5a14;
}
.chat-rejoin span { flex: 1 1 auto; min-width: 0; }

/* マスター向け: 入っていないスペース (外されたときの戻り道) */
.chat-item-nj { opacity: .72; }
.chat-item-nj:hover { opacity: 1; }
.chat-item-nj .chat-item-prev { color: #a8631a; }