/* Brain viewer のチャット画面。
   色・余白・明暗は app.css のトークン (--panel / --ink / --accent …) をそのまま使う。
   ここは chat のときだけ出す。タブやトークンの定義は app.css のまま。 */

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- 器の出し入れ -------------------------------------------
   chat は画面いっぱいの 1 枚。他の一覧・詳細・絞り込みは出さない */
.chat-pane { display: none; min-width: 0; min-height: 0; background: var(--panel-2); }
.view-chat .chat-pane { display: grid; grid-template-columns: minmax(210px, 300px) 1fr; }
.view-chat .layout { grid-template-columns: 1fr; }
.view-chat .filters,
.view-chat .list-pane,
.view-chat .detail-pane { display: none; }
/* 開いている部屋が無いときは、話題のタブと入力欄を出さない */
.chat-pane:not(.room-open) .chat-tabs,
.chat-pane:not(.room-open) .chat-composer { display: none; }
/* 上部の検索は知識のもの。チャットでは出さない */
.view-chat .search { display: none; }

.chat-rooms {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  overflow-y: auto; border-right: 1px solid var(--line);
}
.chat-rooms-head {
  position: sticky; top: 0; z-index: 1; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; background: color-mix(in srgb, var(--panel-2) 92%, transparent);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--line);
}
.chat-rooms-head h2 { margin: 0; font-size: 13px; }

.chat-room-list { list-style: none; margin: 0; padding: 6px; }
.chat-room {
  display: grid; gap: 3px; width: 100%; text-align: left; color: inherit;
  border: 1px solid transparent; border-radius: 10px; padding: 9px 11px; background: transparent;
}
.chat-room:hover { background: var(--panel); border-color: var(--line); }
.chat-room[aria-current="true"] { background: var(--select); border-color: var(--line-2); }
.chat-room-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chat-room-name { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-room-time { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.chat-room-badge {
  min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums;
}
.chat-room-last { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chat-note { margin: 8px 14px; font-size: 12.5px; color: var(--muted); }

/* ---- 発言 ---------------------------------------------------- */
.chat-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); }
.chat-thread-head {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
}
.chat-thread-head h2 { margin: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-live { font-size: 11.5px; color: var(--muted); }
.chat-back { display: none; }

.chat-tabs {
  flex: none; display: flex; gap: 4px; overflow-x: auto; padding: 8px 14px;
  border-bottom: 1px solid var(--line);
}
.chat-tab {
  flex: none; display: inline-flex; align-items: center; border: 1px solid var(--line-2);
  border-radius: 999px; background: var(--panel); overflow: hidden;
}
.chat-tab-name {
  border: 0; background: transparent; color: var(--ink-2); font-size: 12px;
  padding: 3px 8px 3px 12px; white-space: nowrap;
}
.chat-tab-menu { border: 0; background: transparent; color: var(--muted); font-size: 12px; line-height: 1; padding: 3px 8px 3px 2px; }
.chat-tab-menu:hover { color: var(--ink); }
.chat-tab.selected { background: var(--ink); border-color: var(--ink); }
.chat-tab.selected .chat-tab-name { color: var(--panel); font-weight: 700; }
.chat-tab.selected .chat-tab-menu { color: var(--panel); }

.chat-messages {
  flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 8px;
  display: flex; flex-direction: column; gap: 12px;
}
.chat-empty { margin: 20px 0; text-align: center; color: var(--muted); font-size: 13px; }

/* 発言は縦に積む (名前・引用・本文・画像)。自分の発言だけ右寄せにする */
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; }
.chat-msg.mine { align-items: flex-end; }
/* 吹き出しと、そのすぐ横のメニューのボタン。自分の発言では左右を入れ替える */
.chat-row { display: flex; align-items: flex-start; gap: 4px; max-width: 100%; }
.chat-msg.mine .chat-row { flex-direction: row-reverse; }
.chat-bubble { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; max-width: min(680px, 78vw); }
.chat-msg.mine .chat-bubble { align-items: flex-end; }
.chat-messages:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.chat-msg:focus-visible { outline: none; }
.chat-msg:focus-visible .chat-bubble { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 14px; }
.chat-msg-head { display: flex; align-items: baseline; gap: 8px; font-size: 11px; color: var(--muted); }
.chat-msg-head b { font-size: 12px; color: var(--ink-2); }
.chat-msg.mine .chat-msg-head { justify-content: flex-end; }
.chat-edited { font-size: 10.5px; }
.chat-pinned { font-size: 10.5px; color: var(--k-todo); font-weight: 700; }
/* 畳んだ話題のまとめ。分かれた元の発言の下に出す札 (Brain #900196) */
.chat-fold-note {
  display: flex; flex-direction: column; gap: 3px; max-width: min(300px, 80%); margin-top: 6px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  color: var(--ink); text-align: left; font: inherit; cursor: pointer;
}
.chat-fold-note:hover { border-color: var(--line-2); }
.chat-fold-note-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.chat-fold-note-more { padding: 1px 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 600; }
.chat-fold-note-body { font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-quote {
  display: block; text-align: left; max-width: 100%; margin-bottom: 3px; padding: 2px 9px;
  border: 0; border-left: 3px solid var(--line-2); background: transparent;
  color: var(--muted); font-size: 11.5px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-body {
  max-width: 100%; padding: 9px 12px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.chat-body a { color: var(--k-spec); }
/* 自分の発言: 右寄せで、塗りをアクセント色にする (塗りの上は accent-ink で読める)。
   ほかの人の発言は panel-2 の吹き出しのまま。明暗どちらのトークンでも成り立つ */
.chat-msg.mine .chat-body { background: var(--accent); border-color: transparent; color: var(--accent-ink); font-weight: 500; }
.chat-msg.mine .chat-body a { color: var(--accent-ink); text-decoration: underline; }
.chat-msg.mine .chat-quote { align-self: flex-end; border-left: 0; border-right: 3px solid var(--line-2); text-align: right; }
.chat-deleted { color: var(--muted); font-style: italic; font-size: 12.5px; }
.chat-file { font-size: 12.5px; color: var(--muted); }

/* 画像は読み込みが終わるまで大きさを持った枠を出す。幅・高さが分かる発言は
   その比率 (button の style)、分からない発言は既定の 4:3 で枠を取る */
.chat-image {
  display: grid; place-items: center; width: min(420px, 76vw); aspect-ratio: 4 / 3;
  padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--line); line-height: 0;
}
.chat-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.chat-video {
  display: block; width: min(420px, 76vw); aspect-ratio: 16 / 9; max-height: 340px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--line); object-fit: contain;
}
.chat-audio { display: block; width: min(360px, 76vw); }
.chat-media-note { font-size: 12.5px; color: var(--muted); }
.chat-file-card {
  display: grid; gap: 2px; text-align: left; max-width: min(320px, 76vw);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: inherit;
}
.chat-file-card:hover { border-color: var(--line-2); }
.chat-file-kind { font-size: 10.5px; font-weight: 700; color: var(--k-spec); }
.chat-file-name { font-size: 13px; overflow-wrap: anywhere; }
.chat-file-go { font-size: 11px; color: var(--muted); }

/* ---- スタンプ (吹き出しなしで絵だけ) -------------------------- */
.chat-sticker { display: block; width: 160px; height: 160px; object-fit: contain; }
.chat-sticker-button { padding: 0; border: 0; background: transparent; line-height: 0; }
.chat-sticker-unknown { font-size: 12.5px; color: var(--muted); }
.chat-sticker-open { white-space: nowrap; }
.chat-sticker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; padding: 4px 0 8px;
}
.chat-sticker-item {
  display: grid; place-items: center; aspect-ratio: 1; padding: 6px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2);
}
.chat-sticker-item:hover, .chat-sticker-item:focus-visible { border-color: var(--k-decision); background: var(--select); }
.chat-sticker-item img { width: 100%; height: 100%; object-fit: contain; }

/* 吹き出しのすぐ横に、ホバー・フォーカスで出るメニューのボタン */
.chat-msg-tools { flex: none; margin-top: 2px; opacity: 0; pointer-events: none; transition: opacity .12s; }
.chat-msg:hover .chat-msg-tools, .chat-msg:focus-within .chat-msg-tools { opacity: 1; pointer-events: auto; }
@media (pointer: coarse) { .chat-msg-tools { opacity: 1; pointer-events: auto; } }
.chat-tools-button {
  width: 26px; height: 26px; padding: 0; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--panel); color: var(--ink-2); font-size: 14px; line-height: 1;
}
.chat-tools-button:hover { border-color: var(--ink-2); color: var(--ink); }

/* リアクション */
.chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; }
.chat-react-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; min-height: 26px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--ink-2); font-size: 13px;
}
.chat-react-chip .n { font-size: 11px; font-variant-numeric: tabular-nums; }
.chat-react-chip.on { background: var(--select); border-color: var(--k-decision); color: var(--ink); }
.chat-react-add {
  padding: 2px 9px; min-height: 26px; border: 1px dashed var(--line-2); border-radius: 999px;
  background: transparent; color: var(--muted); font-size: 13px;
}

/* 発言が跳ねたときの目印 */
.chat-msg.flash .chat-body, .chat-msg.flash .chat-image, .chat-msg.flash .chat-file-card, .chat-fold-note.flash { box-shadow: 0 0 0 3px var(--focus); }

/* ---- メニュー・ピッカー (発言の操作) -------------------------- */
.chat-popover {
  position: fixed; z-index: 40; min-width: 160px; padding: 5px;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow);
}
.chat-menu { min-width: 180px; }
.chat-popover-item {
  display: block; width: 100%; text-align: left; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink); font-size: 13px; padding: 7px 10px;
}
.chat-popover-item:hover, .chat-popover-item:focus-visible { background: var(--panel-2); }
.chat-popover-item.danger { color: var(--late); }
.chat-picker { display: flex; gap: 2px; min-width: 0; }
.chat-picker-item { border: 0; border-radius: 7px; background: transparent; font-size: 20px; line-height: 1; padding: 5px 6px; }
.chat-picker-item:hover, .chat-picker-item:focus-visible { background: var(--panel-2); }

/* ---- 返信・添付・進み具合 ------------------------------------ */
.chat-reply-bar {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 5px 10px;
  border-left: 3px solid var(--k-decision); border-radius: 6px; background: var(--panel-2); font-size: 12px;
}
.chat-reply-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.chat-attach-name { font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.chat-progress { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.chat-progress-track { flex: 1; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.chat-progress-fill { width: 0; height: 100%; background: var(--accent); transition: width .15s; }
.chat-progress-text { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- パネル (検索・アナウンス・話題) -------------------------- */
.chat-thread.panel-open .chat-messages { display: none; }
.chat-panel { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 14px 16px; background: var(--panel); }
.chat-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0 10px; }
.chat-panel-head h2 { margin: 0; font-size: 14px; }
.chat-panel-search input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 9px;
  background: var(--panel-2); outline: none;
}
.chat-panel-search input:focus { border-color: var(--k-decision); box-shadow: 0 0 0 3px var(--focus); }
.chat-panel-sub { margin: 12px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.chat-panel-list { list-style: none; margin: 0; padding: 0; }
.chat-panel-item { display: flex; align-items: flex-start; gap: 6px; border-bottom: 1px solid var(--line); }
.chat-panel-main {
  flex: 1; min-width: 0; display: grid; gap: 3px; text-align: left;
  border: 0; background: transparent; color: inherit; padding: 10px 4px;
}
.chat-panel-main:hover { background: var(--panel-2); }
.chat-panel-top { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.chat-panel-topic { font-size: 11px; color: var(--k-spec); }
.chat-panel-time { margin-left: auto; font-size: 11px; color: var(--muted); }
.chat-panel-text { font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.chat-panel-empty { margin: 14px 2px; font-size: 12.5px; color: var(--muted); }
.chat-panel-item > .ghost { margin-top: 10px; }

/* ---- 見出しのボタン ------------------------------------------ */
.chat-head-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.chat-head-tools button[aria-pressed="true"] { background: var(--select); border-color: var(--line-2); color: var(--ink); }
.chat-count {
  min-width: 16px; margin-left: 5px; padding: 0 4px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 700;
}
.chat-notify { white-space: nowrap; }

/* ---- 編集 ---------------------------------------------------- */
.chat-edit { display: grid; gap: 6px; width: min(680px, 78vw); }
.chat-edit-input {
  width: 100%; min-height: 90px; max-height: 320px; padding: 8px 10px; border: 1px solid var(--k-decision);
  border-radius: 10px; background: var(--panel-2); outline: none; resize: none; overflow-y: auto;
}
.chat-edit-actions { display: flex; align-items: center; gap: 6px; }
.chat-edit-actions .chat-error { margin-right: auto; }

/* ---- 確認と文字入力のダイアログ ------------------------------ */
.chat-dialog { border: 1px solid var(--line-2); border-radius: 12px; padding: 0; background: var(--panel); color: var(--ink); max-width: min(420px, 92vw); }
.chat-dialog::backdrop { background: rgba(10, 20, 16, .45); }
.chat-dialog form { padding: 20px; }
.chat-dialog h2 { margin: 0 0 8px; font-size: 16px; }
.chat-dialog p { margin: 0 0 14px; font-size: 13px; white-space: pre-wrap; }
.chat-dialog-field { display: block; margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.chat-dialog-field input {
  display: block; width: 100%; margin-top: 4px; padding: 9px 11px; border: 1px solid var(--line-2);
  border-radius: 9px; background: var(--panel-2); color: var(--ink); outline: none;
}
.chat-dialog-field input:focus { box-shadow: 0 0 0 3px var(--focus); }
.chat-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* 危険な操作 (削除など) のボタン。app.css の --late を使う */
.chat-dialog .primary.danger { background: var(--late); color: var(--panel); }

/* ---- ルーム一覧の絞り込みと、一覧の開閉 (⌘K / ⌘B) ------------ */
.chat-room-filter {
  flex: none; margin: 8px 12px 0; padding: 7px 11px; border: 1px solid var(--line-2);
  border-radius: 9px; background: var(--panel-2); outline: none;
}
.chat-room-filter:focus { border-color: var(--k-decision); box-shadow: 0 0 0 3px var(--focus); }
.view-chat .chat-pane.list-hidden { grid-template-columns: 1fr; }
.view-chat .chat-pane.list-hidden .chat-rooms { display: none; }
@media (max-width: 720px) {
  .view-chat .chat-pane.list-hidden .chat-rooms { display: none; }
}

/* ---- 話題の先頭に出す、分けた元の発言 ------------------------ */
.chat-origin {
  display: grid; gap: 2px; width: 100%; text-align: left; padding: 10px 12px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel-2); color: inherit;
}
.chat-origin:hover { border-color: var(--ink-2); }
.chat-origin-label { font-size: 11px; color: var(--k-spec); }
.chat-origin-body { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---- メンションの候補 ---------------------------------------- */
.chat-mentions {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; padding: 4px;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow);
  max-height: 200px; overflow-y: auto;
}
.chat-mention {
  text-align: left; border: 0; border-radius: 7px; background: transparent;
  color: var(--ink); font-size: 13px; padding: 6px 10px;
}
.chat-mention:hover, .chat-mention.selected { background: var(--select); }

/* ---- ショートカット一覧 -------------------------------------- */
.chat-shortcuts {
  width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: auto;
  border: 1px solid var(--line-2); border-radius: 16px; padding: 20px; background: var(--panel); color: var(--ink);
}
/* タッチ端末ではキーボードの一覧を使わないので、入力欄の幅を削らない */
@media (pointer: coarse) { #chat-shortcuts-button { display: none; } }
.chat-shortcuts::backdrop { background: rgba(10, 20, 16, .45); }
.chat-shortcuts-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-shortcuts-head h2 { margin: 0; font-size: 18px; }
.chat-shortcuts-close {
  display: grid; place-items: center; min-width: 44px; min-height: 44px; flex-shrink: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer;
}
.chat-shortcuts-close:hover { background: var(--line); }
.chat-shortcuts > p { margin: 4px 0 0; font-size: 12px; }
.chat-shortcuts section { margin-top: 20px; }
.chat-shortcuts h3 { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.chat-shortcuts dl { margin: 0; }
.chat-shortcuts-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 13px; }
.chat-shortcuts dt { color: var(--ink-2); }
.chat-shortcuts dd { margin: 0; flex-shrink: 0; }
.chat-shortcuts kbd { white-space: nowrap; }

/* ---- 入力欄 -------------------------------------------------- */
.chat-composer { flex: none; border-top: 1px solid var(--line); padding: 8px 14px 12px; background: var(--panel); }
.chat-composer-top { display: flex; align-items: center; gap: 10px; min-height: 17px; font-size: 11.5px; }
.chat-dest { color: var(--muted); }
.chat-error { margin-left: auto; color: var(--k-todo); min-height: 0; }
.chat-attach { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
.chat-attach img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.chat-composer-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 6px; }
.chat-composer-row textarea {
  flex: 1; min-width: 0; min-height: 40px; max-height: 140px; resize: none;
  padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--panel-2); outline: none;
}
.chat-composer-row textarea:focus { border-color: var(--k-decision); box-shadow: 0 0 0 3px var(--focus); background: var(--panel); }

/* ---- 狭い画面: 一覧と発言を切り替える ------------------------ */
@media (max-width: 720px) {
  .view-chat .chat-pane { grid-template-columns: 1fr; }
  .chat-pane:not(.room-open) .chat-thread { display: none; }
  .chat-pane.room-open .chat-rooms { display: none; }
  .chat-back { display: inline-block; }
  .chat-msg-head { flex-wrap: wrap; }
  .chat-thread-head { flex-wrap: wrap; }
  .chat-body, .chat-image { max-width: 84vw; }
  /* 6 つのタブが 1 行に収まらないときは折り返す */
  .topbar .views { flex-wrap: wrap; }
}