/* ─────────── ベース ─────────── */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  height: 100vh; overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans CJK JP",
               "Microsoft YaHei", "Microsoft JhengHei", sans-serif;
  font-feature-settings: "palt";
}

body {
  --bg:        #151821;
  --bg-elev:   #1c2030;
  --border:   #2a2f42;
  --text:     #e4e6ee;
  --muted:    #8a90a3;
  --accent:   #6cb2ff;

  background: var(--bg);
  color: var(--text);
  display: flex; flex-direction: column;
  /* Form 側の 6px パディングを埋めるための背景色を統一 */
}
/* U-2: 以前の `body.theme-light html` は無効セレクタだった。
   テーマクラスは html/body 両方に付与する運用にして CSS で切替。 */
html { background: #0f1220; }
html.theme-light { background: #dcdfe8; }
/* WD-UI2: 追加テーマの地色 */
html.theme-navy   { background: #091423; }
html.theme-sepia  { background: #e9dfcb; }

/* ─────────── スクロールバー (Chromium/WebView2) ─────────── */
/* html/body 両方に付ける + !important で確実に上書き */
html, body { scrollbar-width: thin; scrollbar-color: #3a3f55 transparent; }
body.theme-light { scrollbar-color: #b8bbc7 transparent; }
::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb {
  background: #3a3f55 !important;
  border-radius: 6px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  min-height: 30px;
}
::-webkit-scrollbar-thumb:hover { background: #565b74 !important; background-clip: padding-box !important; }
::-webkit-scrollbar-corner { background: transparent !important; }
::-webkit-scrollbar-button { display: none !important; }
body.theme-light ::-webkit-scrollbar-thumb, body.theme-sepia ::-webkit-scrollbar-thumb { background: #b8bbc7 !important; background-clip: padding-box !important; }
body.theme-light ::-webkit-scrollbar-thumb:hover, body.theme-sepia ::-webkit-scrollbar-thumb:hover { background: #91949e !important; background-clip: padding-box !important; }
body.overlay ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25) !important; background-clip: padding-box !important; }
body.theme-light {
  --bg:        #f5f6fa;
  --bg-elev:   #ffffff;
  --border:    #d8dbe6;
  --text:      #1c2030;
  --muted:     #5b6274;
  --accent:    #2e6fd6;
}

/* ─────────── WD-UI2: 追加テーマ (black/forest は Yuki判断で削除済み) ─────────── */
body.theme-navy {            /* ネイビー */
  --bg:        #0d1b2e;
  --bg-elev:   #14253f;
  --border:    #24395c;
  --text:      #dce6f5;
  --muted:     #8195b0;
  --accent:    #4da3ff;
}
body.theme-sepia {           /* セピア (明るい暖色) */
  --bg:        #f4ecdd;
  --bg-elev:   #fbf6ea;
  --border:    #d9cdb4;
  --text:      #3a3226;
  --muted:     #7a6f5c;
  --accent:    #b07d3c;
}

body.size-small  { font-size: 12px; }
body.size-medium { font-size: 14px; }
body.size-large  { font-size: 16px; }

/* ─────────── カスタムタイトルバー ─────────── */
#titlebar {
  height: 32px; flex: 0 0 32px;
  display: flex; align-items: center;
  padding: 0 4px 0 12px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  -webkit-app-region: drag;
  app-region: drag;
  user-select: none;
}
#titlebar .title { font-size: .85em; color: var(--muted); flex: 1; }
#titlebar .win-btns { display: flex; gap: 2px; -webkit-app-region: no-drag; app-region: no-drag; }
#titlebar .win-btn {
  width: 32px; height: 26px;
  background: transparent; color: var(--muted);
  border: none; border-radius: 4px;
  cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: color .12s, background .12s;
}
#titlebar .win-btn.icon {
  /* Windows 標準搭載のモノクロ アイコンフォント。
     Segoe Fluent Icons (Win11) / Segoe MDL2 Assets (Win10) の順にフォールバック。 */
  font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets";
}
#titlebar .win-btn:hover { background: rgba(255,255,255,.08); color: var(--text); }
body.theme-light #titlebar .win-btn:hover { background: rgba(0,0,0,.06); color: var(--text); }
#titlebar .win-btn.close:hover { background: #c33; color: #fff; }
/* タイトルバーのウィンドウ操作ボタンはフォーカス枠を一切出さない
   (クリック後に残る黒い矩形の抑止。汎用 .win-btn:focus-visible の青枠もここで打ち消す)。
   状態はホバーと .on の色分けで示すのでアクセシビリティ上の問題はない。 */
#titlebar .win-btn:focus,
#titlebar .win-btn:focus-visible { outline: none; box-shadow: none; }
/* トグル ON 状態: アクセント色 + 背景うっすら */
#titlebar .win-btn.on { color: var(--accent); background: rgba(108,178,255,.12); }
#titlebar .win-btn.on:hover { color: #fff; background: var(--accent); }

/* ─────────── トップバー ─────────── */
#topbar {
  height: 40px; flex: 0 0 40px;
  display: flex; align-items: center;
  gap: 10px; padding: 0 12px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-title { font-weight: 600; }
/* U-6: 通常はtitlebarがアプリ名を表示するのでtopbarのbrand-titleは隠す */
.brand-title.web-only { display: none; }
body.is-web .brand-title.web-only { display: inline; }
/* U-8: SVG アイコンをボタン内で縦中央に */
.btn .ic { vertical-align: middle; margin-right: 4px; }
.btn .ic + .btn-label { vertical-align: middle; }
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #888; display: inline-block;
}
.dot.ok { background: #55d685; animation: pulse 2s infinite; }
.dot.warn { background: #ffb946; }
.dot.err { background: #ff6479; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(85, 214, 133, .6); }
  70%  { box-shadow: 0 0 0 10px rgba(85, 214, 133, 0); }
  100% { box-shadow: 0 0 0 0 rgba(85, 214, 133, 0); }
}
.status { color: var(--muted); font-size: .9em; }
.spacer { flex: 1; }
.btn {
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 10px; cursor: pointer;
  font-size: 1em; line-height: 1.2;
}
.btn:hover { background: rgba(255,255,255,.05); }
/* Z-3: マウス クリック時のフォーカス枠は消し、キーボード (Tab) 時だけ枠を出す */
.btn:focus:not(:focus-visible),
.win-btn:focus:not(:focus-visible),
.tab-settings-btn:focus:not(:focus-visible),
.tab:focus:not(:focus-visible),
.tab-add:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }
.btn:focus-visible,
.win-btn:focus-visible,
.tab-settings-btn:focus-visible,
.tab:focus-visible,
.tab-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
body.theme-light .btn:hover { background: rgba(0,0,0,.04); }
.btn.small { padding: 2px 6px; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.1); }
.btn-label { display: inline; }
@media (max-width: 640px) { .btn-label { display: none; } }

/* ─────────── タブ ─────────── */
#tabs {
  flex: 0 0 auto; display: flex; gap: 4px;
  padding: 6px 12px; overflow-x: auto;
  background: var(--bg-elev); border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
}
.tab {
  padding: 4px 12px; border-radius: 999px;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); cursor: pointer;
  white-space: nowrap; font-size: .95em;
  display: flex; align-items: center;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tab-add {
  background: transparent; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 999px;
  padding: 4px 12px; cursor: pointer; font-size: .95em;
}
.tab-add:hover { color: var(--text); border-color: var(--text); }
/* WD-UI18: タブ設定の歯車アイコンは廃止 (タブ右クリックで開く・Yuki指示) */
.tab .tab-close-icon {
  margin-left: 6px; opacity: .6; cursor: pointer;
  display: inline-flex; align-items: center;
}
.tab .tab-close-icon:hover { opacity: 1; }
/* U-3/WD-UI12: DnD ビジュアルフィードバック。
   縦バーは「入る隙間」を指す: drag-over-left = このタブの前 / drag-over-right = このタブの後ろ */
.tab.dragging { opacity: .5; }
.tab { position: relative; }
.tab.drag-over-left::after, .tab.drag-over-right::after {
  content: "";
  position: absolute; top: 10%; bottom: 10%; width: 3px;
  background: var(--accent); border-radius: 2px;
  pointer-events: none;
}
.tab.drag-over-left::after  { left: -4px; }
.tab.drag-over-right::after { right: -4px; }

/* 未読バッジ (タブ右上に表示される小さな数字) */
.tab .unread-badge {
  margin-left: 6px;
  min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px;
  background: #ff5470; color: #fff;
  font-size: .7em; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.tab.active .unread-badge { display: none; }

/* ─────────── チャットエリア ─────────── */
#chatArea {
  flex: 1 1 auto; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
#messages {
  flex: 1 1 auto; overflow-y: auto;
  padding: 8px 12px;
  scrollbar-width: thin;
}
/* WD-P1: 大量ログ (最大3000行) の再レイアウト負荷対策。
   画面外の行はレイアウト・描画をスキップさせる (モード切替・リサイズが桁違いに軽くなる)。
   auto 指定により一度描画した行は実寸を記憶するためスクロールのガタつきも最小。 */
#messages .msg {
  content-visibility: auto;
  contain-intrinsic-size: auto 30px;
}
/* WD-P1b: 「新着」区切り線が付いた行は除外。content-visibility の描画クリップが
   行の外にはみ出すラベル (::before) を切り取り、線ズレ・文字消えが起きるため (Yuki報告)。 */
#messages .msg.unread-divider {
  content-visibility: visible;
  contain: none;
}

/* ─────────── メッセージ (統一構造) ─────────── */
/* JSは常に以下の構造を出す:
   <div class="msg" data-channel=N>
     <div class="msg-meta">
       <span class="time">HH:mm:ss</span>
       <span class="badge">ラベル</span>
       <span class="sender">名前</span>
     </div>
     <div class="msg-body">本文</div>
   </div>
   → display style ごとに CSS でレイアウト変更。 */
.msg {
  padding: 3px 4px;
  border-radius: 4px;
}
.msg:hover { background: rgba(255,255,255,.03); }
body.theme-light .msg:hover { background: rgba(0,0,0,.03); }
.msg.hidden { display: none !important; }
.msg-meta { display: inline; }
.msg-body { display: inline; }
.msg .time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .9em; margin-right: 6px; }
.msg .badge {
  display: inline-block;
  padding: 1px 8px; border-radius: 999px;
  font-size: .75em; font-weight: 600; letter-spacing: .04em;
  color: #fff;
  margin-right: 6px;
  background: #666;
  vertical-align: middle;
}
.msg .sender { font-weight: 600; margin-right: 6px; cursor: pointer; }
.msg .sender:hover { text-decoration: underline; }
.msg.ephemeral .badge::after { content: " · 非保存"; opacity: .7; font-weight: 400; }

/* ─── デフォルト = compact (1行) ─── */
/* WD-UI9: 折返し行が行頭まで戻らず本文開始位置に揃うよう、IRC風と同じグリッド構造にする。
   WD-UI11b: ピン一覧・検索結果の行 (.pinned-row = 先頭に移動ボタンが挿入される) には
   適用しない (グリッドの列数が合わずレイアウトが崩れるため。モーダル内は素のインライン表示)。 */
body.display-compact .msg:not(.pinned-row) {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  column-gap: 6px;
  align-items: baseline;
}
body.display-compact .msg:not(.pinned-row) .msg-meta { display: contents; }
body.display-compact .msg:not(.pinned-row) .msg-body { min-width: 0; word-break: break-word; }

/* ─── 2行表示 ─── */
body.display-twoLine .msg {
  padding: 5px 6px;
  border-bottom: 1px dotted var(--border);
  border-radius: 0;
}
body.display-twoLine .msg-meta { display: block; margin-bottom: 2px; }
body.display-twoLine .msg-body { display: block; padding-left: 4px; color: var(--text); }

/* ─── 吹き出し (名前の右横から言葉を発しているイメージ) ─── */
body.display-bubble #messages { padding: 10px 12px; }
/* WD-UI6: 幅が狭いと名前・タグが1文字ずつ縦に潰れる問題 (Yuki報告)。
   グリッド化して「1列目=時間(上)+タグ(下) / 2列目=名前(折返さない) / 3列目=吹き出し」
   の固定配置にする。狭いときは吹き出し側だけが改行して縮む。 */
body.display-bubble .msg:not(.pinned-row) {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  grid-template-areas:
    "time  sender body"
    "badge sender body";
  column-gap: 8px; row-gap: 2px;
  align-items: center;
  padding: 8px 6px; margin: 4px 0;
  border-radius: 6px;
}
body.display-bubble .msg:not(.pinned-row) .msg-meta { display: contents; }
body.display-bubble .msg:not(.pinned-row) .time   { grid-area: time; margin-right: 0; align-self: end; }
body.display-bubble .msg:not(.pinned-row) .badge  { grid-area: badge; margin-right: 0; justify-self: start; align-self: start; }
body.display-bubble .msg:not(.pinned-row) .sender {
  grid-area: sender; margin-right: 0;
  white-space: nowrap;                       /* 名前は縦書きにしない */
  max-width: 9em; overflow: hidden; text-overflow: ellipsis;  /* 超長い名前は…で省略 */
}
body.display-bubble .msg:not(.pinned-row) .msg-body { grid-area: body; justify-self: start; margin-left: 8px; /* 名前と吹き出しの間隔 (Yuki調整) */ }
body.display-bubble .msg:not(.pinned-row) .msg-body {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px 14px;
  /* WD-UI6b: 旧 max-width:75% は右に余白を残したまま早めに改行してしまう (Yuki報告)。
     グリッド化で列幅が既に制御されているため、列いっぱいまで使ってよい。 */
  max-width: 100%;
  word-break: break-word;
  line-height: 1.4;
}
/* 吹き出しの尖った尻尾 (名前側を指す三角) */
body.display-bubble .msg:not(.pinned-row) .msg-body::before,
body.display-bubble .msg:not(.pinned-row) .msg-body::after {
  content: "";
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-style: solid;
}
body.display-bubble .msg:not(.pinned-row) .msg-body::before {
  left: -9px;
  border-width: 8px 10px 8px 0;
  border-color: transparent var(--border) transparent transparent;
}
body.display-bubble .msg:not(.pinned-row) .msg-body::after {
  left: -7px;
  border-width: 7px 9px 7px 0;
  border-color: transparent var(--bg-elev) transparent transparent;
}
body.theme-light.display-bubble .msg:not(.pinned-row) .msg-body { background: #fff; }
body.theme-light.display-bubble .msg:not(.pinned-row) .msg-body::after { border-color: transparent #fff transparent transparent; }

/* ─── WD-UI7: LINE風 — 自分 (UID設定済み) の発言は吹き出し表示で右寄せ ───
   (WD-UI11b: モーダル内の行 .pinned-row は対象外) */
body.display-bubble .msg.self:not(.pinned-row) {
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-areas:
    "body time"
    "body badge";
  /* 通常表示用の self ハイライト (青帯+左ボーダー) は吹き出し色で代替するため無効化 */
  background: transparent; border-left: none; padding-left: 6px;
}
body.display-bubble .msg.self:not(.pinned-row) .sender { display: none; }   /* 自分の名前は出さない (LINE風) */
body.display-bubble .msg.self:not(.pinned-row) .msg-body {
  justify-self: end;
  margin-left: 0; margin-right: 8px;
  background: var(--bg-elev);   /* color-mix 非対応ブラウザ用フォールバック */
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}
/* 尻尾を右側に付け替え */
body.display-bubble .msg.self:not(.pinned-row) .msg-body::before {
  left: auto; right: -9px;
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent color-mix(in srgb, var(--accent) 28%, var(--border));
}
body.display-bubble .msg.self:not(.pinned-row) .msg-body::after {
  left: auto; right: -7px;
  border-width: 7px 0 7px 9px;
  border-color: transparent transparent transparent var(--bg-elev);
  border-color: transparent transparent transparent color-mix(in srgb, var(--accent) 12%, var(--bg-elev));
}
body.theme-light.display-bubble .msg.self:not(.pinned-row) .msg-body {
  background: color-mix(in srgb, var(--accent) 8%, #fff);
}
body.theme-light.display-bubble .msg.self:not(.pinned-row) .msg-body::after {
  border-color: transparent transparent transparent color-mix(in srgb, var(--accent) 8%, #fff);
}

/* ─── IRC風 ─── */
body.display-irc .msg {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  gap: 6px;
  padding: 1px 4px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: .95em;
  align-items: baseline;
}
body.display-irc .msg-meta { display: contents; }
body.display-irc .msg-body { min-width: 0; word-break: break-word; }
body.display-irc .msg .sender::before { content: "<"; opacity: .5; }
body.display-irc .msg .sender::after { content: ">"; opacity: .5; margin-right: 4px; }
body.display-irc .msg .badge { font-size: .7em; padding: 0 5px; }

/* V-4: Web版 (スマホ) は常に 2 行固定。displayStyle クラスに関わらず優先適用。 */
body.is-web .msg {
  display: block;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
body.is-web .msg-meta { display: block; margin-bottom: 2px; }
body.is-web .msg-body { display: block; padding-left: 4px; }
body.is-web .msg-body::before, body.is-web .msg-body::after { display: none; } /* 吹き出し尻尾を打ち消し */

.jump-btn {
  position: absolute; right: 20px; bottom: 20px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 999px;
  padding: 8px 16px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.jump-btn.hidden { display: none !important; }

/* ─────────── 絞り込み ─────────── */
#filterBar {
  flex: 0 0 auto; display: flex; gap: 4px;
  padding: 6px 12px; background: var(--bg-elev);
  border-top: 1px solid var(--border);
}
#filterInput {
  flex: 1; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font: inherit;
}
#filterInput:focus { outline: 1px solid var(--accent); }

/* ─────────── モーダル ─────────── */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal.hidden { display: none !important; }
.modal-inner {
  width: min(920px, 96vw); max-height: 88vh; overflow: auto;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px;
}
.modal-inner.narrow { width: min(520px, 96vw); }
/* M-6: モーダルヘッダーをスクロール中でも常に上部に見えるように sticky 化 */
.modal-inner header {
  display: flex; align-items: center; gap: 12px;
  margin: -20px -20px 12px;   /* modal-inner の padding をキャンセルして端まで伸ばす */
  padding: 12px 20px;
  position: sticky; top: -20px;   /* modal-inner の padding-top と相殺 */
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  z-index: 2;
}
.modal-inner header h2 { flex: 1; margin: 0; font-size: 1.2em; }

.search-form {
  display: grid; grid-template-columns: 1fr 140px 140px 140px auto auto;
  gap: 8px; margin-bottom: 16px;
}
@media (max-width: 720px) { .search-form { grid-template-columns: 1fr 1fr; } }
.search-form input, .search-form select {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font: inherit;
}

.settings-form section {
  margin: 12px 0; padding: 12px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px;
}
.settings-form section h3 { margin: 0 0 10px; font-size: 1em; color: var(--muted); font-weight: 500; }
.settings-form label { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.settings-form label input[type=number],
.settings-form label input[type=text],
.settings-form label select {
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px;
}
/* U-9: レンジスライダーは 0-100 で表示 (最小20は JS 側で丸め)。
   accent-color + カスタムトラック fill で満杯視覚を確保。 */
.settings-form label input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px; width: 200px;
  background: transparent;
  border-radius: 6px;
  accent-color: var(--accent);
  padding: 0;
  border: none;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 6px;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill, 0%), var(--border) var(--fill, 0%), var(--border) 100%);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
  margin-top: -5px; cursor: pointer;
}

#qrArea { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
#qrArea img { width: 200px; height: 200px; background: #fff; border-radius: 8px; }
.qr-info { flex: 1; min-width: 240px; }
#qrUrl { font-family: monospace; word-break: break-all; padding: 8px; background: var(--bg-elev); border-radius: 6px; }
.hint { color: var(--muted); font-size: .85em; margin-top: 6px; }
.hint.danger { color: #ff8f8f; }
.mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .85em; white-space: pre-wrap; }

/* P-4: 保持日数グリッド (バッジ色グリッドと同じ形式) */
.retention-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px; margin: 8px 0;
}
.retention-grid .ret-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: 6px;
}
.retention-grid .ret-badge {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto;
}
.retention-grid .ret-name { flex: 1; font-size: .9em; }
.retention-grid .ret-days {
  width: 60px; padding: 2px 6px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; text-align: right;
}

/* バッジ色設定グリッド */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-bottom: 8px; }
.color-grid .color-row { display: flex; align-items: center; gap: 8px; }
.color-grid input[type=color] { width: 40px; height: 32px; border: 1px solid var(--border); background: var(--bg-elev); border-radius: 6px; padding: 2px; cursor: pointer; }
.color-grid .swatch-label { font-size: .9em; }

/* タブ編集モーダル */
.tab-edit-form label { display: block; margin: 10px 0; }
.tab-edit-form input[type=text] {
  width: 100%; margin-top: 4px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font: inherit;
}
.tab-edit-form .channel-checks { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }
.tab-edit-form .channel-checks label { display: flex; align-items: center; gap: 4px; margin: 0; cursor: pointer; }
.modal-actions { display: flex; gap: 8px; margin-top: 18px; align-items: center; }
#tabEditDelete { color: #ff8f8f; border-color: #6b3a3a; }

/* N-4: 自分の発言ハイライト */
.msg.self { background: rgba(108, 178, 255, .1); border-left: 3px solid var(--accent); padding-left: 4px; }

/* N-3: ルールハイライト (inline styleで色指定するのでベースだけ) */
.msg.rule-highlight { padding-left: 4px; }

/* N-5: 送信者メニュー (右クリック風の小さなポップ) */
.ctx-menu {
  position: fixed; z-index: 300;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0,0,0,.4);
  padding: 4px 0; min-width: 180px;
}
.ctx-menu.hidden { display: none; }
.ctx-menu button {
  display: block; width: 100%; text-align: left;
  background: transparent; color: var(--text);
  border: none; padding: 8px 14px; cursor: pointer; font: inherit;
}
.ctx-menu button:hover { background: rgba(255,255,255,.08); }
body.theme-light .ctx-menu button:hover { background: rgba(0,0,0,.06); }

/* N-5: ミュートリスト行 */
#muteList .mute-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
#muteList .mute-row .mute-name { flex: 1; }
#muteList .mute-row .mute-uid { color: var(--muted); font-size: .85em; font-family: monospace; }

/* N-3: ルール一覧 */
/* WD-UI17: #rulesList 系スタイルは廃止 (ルールUI撤去) */

/* R-7: メッセージ行のピンボタン。右端に絶対配置し、常に同じ位置に来る。 */
.msg { position: relative; padding-right: 28px; }
.msg .pin-btn, .msg .pin-mark {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; padding: 4px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.msg:hover .pin-btn { opacity: .7; }
.msg .pin-btn:hover { opacity: 1; background: rgba(255,255,255,.1); color: var(--accent); }
.msg.pinned .pin-btn, .msg.pinned .pin-mark { opacity: 1; color: var(--accent); }
.msg .pin-mark { cursor: default; pointer-events: none; }
/* IRC のグリッド行でも右端に来るように */
body.display-irc .msg { padding-right: 30px; }

/* N-3: フラッシュ (オーバーレイ中) */
@keyframes msgFlash {
  0%, 100% { background: transparent; }
  25%, 75% { background: rgba(255, 213, 122, .5); }
}
.msg.flash { animation: msgFlash 0.6s ease-in-out 3; }
#miniBanner {
  position: fixed; top: 40px; left: 50%; transform: translateX(-50%);
  background: rgba(255, 213, 122, .95); color: #000;
  padding: 6px 20px; border-radius: 20px; font-weight: 600;
  z-index: 500; box-shadow: 0 4px 12px rgba(0,0,0,.4);
  animation: bannerFade 1.5s forwards;
}
@keyframes bannerFade { 0% { opacity: 0; transform: translate(-50%, -10px); } 20%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* 検索結果 */
#searchResults .msg { border-bottom: 1px solid var(--border); }
#searchResults .msg:last-child { border-bottom: none; }

/* P-3: ピン一覧の「表示位置へ」ボタンを行の左端に固定 */
#pinsList .msg.pinned-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 32px 6px 6px;   /* 右端はピン解除ボタン用に確保 */
}
#pinsList .msg.pinned-row .jump-to-btn {
  flex: 0 0 auto;
  padding: 2px 6px;
  display: inline-flex;
  align-items: center;
  align-self: center;
  color: var(--accent);
  border-color: var(--accent);
}
#pinsList .msg.pinned-row > .msg-meta,
#pinsList .msg.pinned-row > .msg-body {
  display: inline;
}

/* 未読区切り線 (Discord風: 非アクティブ中に来た最初のチャットの直上に線と "新着" ラベル)
   WD-P1c: 線・ラベルとも absolute で行の上に重ねて描き、レイアウト上の高さを一切消費しない。
   (旧実装の margin/padding は線の出現時にスクロール位置をずらし、下が見切れる原因だった) */
/* WD-P1d: ボックス関連のプロパティは一切変更しない (通常行と完全に同じ高さを維持)。
   padding-top:0 を指定していた前版は、行本来の上パディングまで消して行間が縮んでいた。 */
.msg.unread-divider {
  position: relative;
}
.msg.unread-divider::after {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: #ff5470; border-radius: 1px;
  pointer-events: none;
}
.msg.unread-divider::before {
  content: "新着";
  position: absolute;
  top: -9px;
  right: 12px;
  z-index: 1;
  background: var(--bg);
  padding: 0 8px;
  color: #ff5470;
  font-size: .7em; font-weight: 700; letter-spacing: .1em;
  line-height: 16px;
  border-radius: 4px;
  pointer-events: none;
}
body.theme-light .msg.unread-divider::after { background: #d32f4a; }
body.theme-light .msg.unread-divider::before { color: #d32f4a; background: var(--bg); }
body.overlay .msg.unread-divider::before { background: rgba(21, 24, 33, .95); }

/* N-1: 過去ログ読込中スピナー */
.history-spinner, .history-end {
  text-align: center; color: var(--muted); font-size: .85em;
  padding: 12px 0;
}
.history-spinner::before {
  content: ""; display: inline-block;
  width: 12px; height: 12px; margin-right: 6px;
  border: 2px solid var(--muted); border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* N-2: 日付区切り */
.date-divider {
  text-align: center; margin: 12px 0 6px; padding: 4px 12px;
  color: var(--muted); font-size: .85em; font-weight: 600;
  background: transparent;
  position: relative;
}
.date-divider::before, .date-divider::after {
  content: ""; position: absolute; top: 50%;
  width: 30%; height: 1px; background: var(--border);
}
.date-divider::before { left: 0; }
.date-divider::after  { right: 0; }

/* ─────────── Web版 (スマホ想定): デスクトップ専用UIを隠す ─────────── */
body.is-web #titlebar,
body.is-web #filterBar {
  /* タイトルバーはWeb版では不要 (ブラウザのタブが代わり) */
}
body.is-web #titlebar { display: none; }
body.is-web #btnPin,
body.is-web #btnOverlay,
body.is-web #overlayHandle,
body.is-web #btnOpenPurge,
/* V-2: Web版は閲覧特化 → 絞り込み・検索・ピン一覧を非表示 */
body.is-web #filterBar,
body.is-web #btnSearch,
body.is-web #btnPins,
body.is-web #searchView,
body.is-web #pinsView,
/* V-3: 設定画面の分離 - Web版では pc-only-section を全て非表示 */
body.is-web .pc-only-section,
/* W-3: Web版のヘッダー行 (#topbar) を完全非表示。設定は右下 FAB へ移動 */
body.is-web #topbar {
  display: none !important;
}
/* Y-2/Z-2: FAB 廃止。タブバーを 2 カラム構成 (タブ列 flex:1 / 歯車 flex:0 0 auto)。 */
.fab { display: none !important; }
#tabsRow {
  display: flex;
  align-items: stretch;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
/* タブ列: 横スクロール専用。min-width:0 で flex コンテナ内での縮小を許可 */
#tabsRow #tabs {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: none;   /* 親 (#tabsRow) 側で持つ */
}
/* Z-2: 歯車ボタンはタブ列の下に潜り込まないよう不透明背景 + 境界を明示 */
.tab-settings-btn {
  display: none;   /* PC版はヘッダーの設定ボタンを使う */
  flex: 0 0 44px;   /* 固定幅・縮小しない */
  align-items: center; justify-content: center;
  width: 44px; height: auto;
  background: var(--bg-elev);
  color: var(--muted); border: none;
  border-left: 1px solid var(--border);   /* タブ列との境界を明示 */
  cursor: pointer;
  position: relative; z-index: 2;         /* スクロールしたタブより手前 */
}
.tab-settings-btn:hover, .tab-settings-btn:active { color: var(--text); }
body.is-web .tab-settings-btn { display: flex; }
/* Z-2: 最後のタブが歯車の下に隠れないよう、タブ列の右パディングを確保 */
body.is-web #tabsRow #tabs { padding-right: 8px; }
/* W-3/Y-2: Web版はタブバー行を最上部に、safe-area の padding-top を確保 */
body.is-web #tabsRow {
  padding-top: env(safe-area-inset-top);
  background: var(--bg-elev);
}
body.is-web #tabs { padding-top: 6px; padding-bottom: 6px; }
body.is-web .tab-settings-btn { padding-top: 6px; padding-bottom: 6px; }

/* X-3: ダブルタップズーム/ピンチズームの抑止 */
body.is-web { touch-action: pan-x pan-y; }
body.is-web .tab, body.is-web .btn, body.is-web .fab, body.is-web .win-btn { touch-action: manipulation; }
/* V-3: PC版では web-only-section を非表示 */
body:not(.is-web) .web-only-section {
  display: none !important;
}
/* タブ・ボタンは44px以上のタップ領域を確保 */
body.is-web .btn { min-height: 44px; padding: 8px 12px; }
body.is-web .tab { min-height: 44px; padding: 10px 16px; }
body.is-web #tabs {
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
/* Web版はモーダルを全画面に */
body.is-web .modal-inner {
  width: 100vw; max-width: 100vw;
  height: 100vh; max-height: 100vh;
  border-radius: 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
}
/* W-4: Web版で sticky ヘッダーの ×/タイトルが時計や電波表示に食い込まないよう safe-area の分だけ余白 */
body.is-web .modal-inner header {
  padding-top: calc(12px + env(safe-area-inset-top));
  top: calc(-20px);   /* modal-inner の padding-top を相殺 (現行) */
}
/* Web版のセーフエリア (ノッチ・ホームバー) 対応 */
body.is-web #filterBar {
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
}
/* W-3: 旧: is-web の #topbar padding-top はヘッダーごと非表示化したので不要 */
/* Y-3: 湾曲画面 (エッジディスプレイ) 対策で左右セーフエリア + 最低余白を確保 */
body.is-web #messages {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
body.is-web #tabsRow {
  padding-left: max(4px, env(safe-area-inset-left));
  padding-right: max(4px, env(safe-area-inset-right));
}
body.is-web #wsBanner {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
body.is-web .modal-inner {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* WS切断バナー */
#wsBanner {
  flex: 0 0 auto;
  background: #ffb946;
  color: #000;
  text-align: center;
  padding: 6px 12px;
  font-weight: 600;
  font-size: .9em;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
#wsBanner .ic { animation: spin 1.4s linear infinite; }
#wsBanner.hidden { display: none; }

/* ─────────── オーバーレイモード ─────────── */
/* トップバー(統計)、絞込バー、タイトルバーは隠す。
   タブは表示を維持し、切替できるようにする。
   復帰は右上ハンドルの ✕ ボタン or トレイメニューから。 */
body.overlay #topbar,
body.overlay #filterBar,
body.overlay #titlebar {
  display: none;
}
/* WD-UI3d: ✕/移動ボタン (overlayHandle) がタブに重なって使いづらい (Yuki報告)。
   経緯: 上部に専用帯を設ける案 (3) は帯が目障り、帯のカラーキー透過 (3c) は
   WebView2 にカラーキーが効かず黒帯化して両方却下。
   最終形: ボタンをタブバー行の右端 (タブのない空き) に重ね、タブ側は右端に
   余白を取って重ならないようにする。追加の帯や透過ハックは使わない。 */
/* WD-UI3e: 位置はタブバーの「下の行」の右端 (スクロールバー上端付近、Yuki指定の位置)。
   タブとは行が違うので重ならず、ホバー時のみ出るためチャットの邪魔も最小。 */
body.overlay #overlayHandle { top: 44px; right: 4px; }
body.overlay #tabs {
  background: rgba(28, 32, 48, 0.55);
  backdrop-filter: blur(4px);
}
/* WD-UI2: オーバーレイ時、非選択タブは透明背景+muted文字だと背後が明るい画面で
   ほぼ読めない (Yuki報告)。不透明寄りの暗いチップ背景+明るめの文字にする。 */
body.overlay .tab, body.overlay .tab-add {
  background: rgba(14, 17, 30, .78);
  color: #ccd3e4;
  border-color: rgba(255, 255, 255, .30);
}
body.overlay .tab:hover { color: #fff; border-color: rgba(255,255,255,.5); }
body.overlay .tab.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
/* 復帰用の隠れハンドル: 画面右上ホバーで見えるようになる小さな ✕ ボタン */
body.overlay #overlayHandle { display: flex; }
#overlayHandle {
  display: none;
  position: fixed; top: 4px; right: 4px; z-index: 500;
  gap: 4px; opacity: 0; transition: opacity .18s;
  -webkit-app-region: no-drag; app-region: no-drag;
}
#overlayHandle:hover, body.overlay:hover #overlayHandle { opacity: 1; }
#overlayHandle .win-btn {
  width: 28px; height: 22px; font-size: 11px;
  background: rgba(0,0,0,.5); color: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: 4px;
  cursor: pointer;
  font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets";
  display: flex; align-items: center; justify-content: center;
}
#overlayHandle .win-btn:hover { background: rgba(0,0,0,.75); }
#overlayHandle .win-btn.on { color: #ffd57a; border-color: #ffd57a; }

/* 移動モード: オーバーレイ中、ウィンドウ全体が広くドラッグ領域になる。
   タブと復帰ハンドルだけは no-drag にしてクリック可能を維持。 */
body.overlay.move-mode,
body.overlay.move-mode #chatArea,
body.overlay.move-mode #messages,
body.overlay.move-mode .msg,
body.overlay.move-mode .msg-body,
body.overlay.move-mode .msg-meta {
  -webkit-app-region: drag; app-region: drag;
  cursor: move;
  user-select: none;
}
body.overlay.move-mode #tabs,
body.overlay.move-mode .tab,
body.overlay.move-mode .tab-add,
body.overlay.move-mode #overlayHandle,
body.overlay.move-mode #overlayHandle .win-btn {
  -webkit-app-region: no-drag; app-region: no-drag;
  cursor: pointer;
}
body.overlay.move-mode #overlayHandle { opacity: 1; }
body.overlay.move-mode::before {
  content: "移動モード ON — どこでもドラッグでウィンドウ移動";
  position: fixed; top: 8px; left: 8px; z-index: 400;
  background: rgba(255, 213, 122, .9); color: #000;
  padding: 4px 10px; border-radius: 4px; font-size: .8em; font-weight: 600;
  pointer-events: none;
}

/* ─────────── WD-UI4: 文字の太さゲージ (名前/チャット本文で別々) ───────────
   設定スライダー (0〜10) が body の CSS 変数 --sender-bold / --body-bold にセットされる
   (app.js applyDisplaySettings)。1段 = text-stroke 0.08px。
   日本語フォントは中間ウェイト(500等)の実体を持たないことが多いため、
   輪郭を太らせる text-stroke で擬似的に太さを作る。
   既定: すべて 0 = 標準 (Yuki指定)。時計は WD-UI9 で追加。 */
.msg .sender { -webkit-text-stroke: calc(var(--sender-bold, 0) * 0.08px) currentColor; }
.msg-body    { -webkit-text-stroke: calc(var(--body-bold, 0) * 0.08px) currentColor; }
.msg .time   { -webkit-text-stroke: calc(var(--time-bold, 0) * 0.08px) currentColor; }

/* ─────────── WD-UI18b: ジャンプ時の過去ログ読み込みバナー ─────────── */
#jumpLoading {
  position: fixed; left: 50%; bottom: 56px; transform: translateX(-50%);
  z-index: 950;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 16px; font-size: .9em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
  white-space: nowrap;
}

/* ─────────── WD-UI14: カスタムツールチップ ───────────
   ネイティブの title ツールチップは最前面ウィンドウの後ろに隠れるため自前描画 (app.js) */
#appTooltip {
  position: fixed; z-index: 1000; display: none;
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 10px; font-size: .8em; line-height: 1.4;
  max-width: 320px; pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

/* ─────────── WD-UI11: 汎用ダイアログをコンパクトに ───────────
   確認1行に対してウィンドウが広く、キャンセルとOKが離れすぎる問題 (Yuki報告)。
   幅を狭め、ボタンは右端に寄せて並べる。
   WD-UI14b: 汎用ダイアログは「他のモーダルの上から出る確認」なので、
   全モーダル (.modal z-index:100) より必ず手前に出す (タブ編集中の警告が裏に隠れる問題)。 */
#appDialogView { z-index: 900; }
#appDialogView .modal-inner { max-width: 380px; }
#appDialogView .modal-actions { justify-content: flex-end; gap: 10px; }
#appDialogView .modal-actions .spacer { display: none; }

/* ─────────── WD-UI21: 条件のかんたん入力 (単語チップ + AND/OR) ─────────── */
.cond-simple { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.cond-simple .cond-word {
  flex: 0 1 200px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font: inherit;
}
.cond-mode { display: inline-flex; }
.cond-mode .btn { border-radius: 6px 0 0 6px; }
.cond-mode .btn + .btn { border-radius: 0 6px 6px 0; border-left: none; }
.cond-mode .btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.cond-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cond-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px;
  background: rgba(108, 178, 255, .15); border: 1px solid var(--accent);
  font-size: .9em;
}
.cond-chip button { background: none; border: none; color: inherit; cursor: pointer; padding: 0 2px; font-size: 1em; }
.cond-switch {
  display: block; margin-top: 4px; padding: 0;
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: .8em; text-decoration: underline;
}
.cond-switch:hover { color: var(--text); }
