/* Eternity — 画面スタイル
   テーマ: data-theme = dark(既定) / light / mint / oled
   密度:   data-density = cozy / compact
   文字:   --fs */

:root {
  color-scheme: dark;
  --dl-fit: 0.9;          /* 枠の詰め具合。小さくすると枠が締まる */
  /* 既定＝炭（すみ）。黒に近い地色に、炭火の色をひとつだけ差す */
  --bg: #100f0e;
  --rail: #0a0a09;
  --side: #151312;
  --main: #100f0e;
  --solid: #171513;
  --panel: #1b1816;
  --panel-2: #231f1c;
  --soft: rgba(224, 122, 60, .15);
  --hover: rgba(255, 246, 235, .055);
  --line: rgba(255, 246, 235, .1);
  --text: #ece6de;
  --muted: #9b938a;
  --accent: #e07a3c;
  --accent-2: #f0a068;
  --accent-ink: #19120c;
  --bubble: #1c1917;
  --ok: #5fb87a;
  --idle: #d9a441;
  --dnd: #d4564b;
  --danger: #d4564b;
  --shadow: 0 2px 12px rgba(0, 0, 0, .45);
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px;
  --fs: 15px; --gap: 14px;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f2ee; --rail: #ffffff; --side: #faf8f5; --main: #f5f2ee;
  --solid: #ffffff; --panel: #ffffff; --panel-2: #efebe5; --soft: rgba(185, 80, 26, .1);
  --hover: rgba(40, 30, 20, .055); --line: rgba(40, 30, 20, .14);
  --text: #211c17; --muted: #6b6259; --accent: #b9501a; --accent-2: #8f3d13; --accent-ink: #fff;
  --bubble: #eceae4;
  --shadow: 0 2px 10px rgba(60, 45, 30, .14);
}
:root[data-theme="mint"] {
  color-scheme: light;
  --bg: #eaefe9; --rail: #ffffff; --side: #f4f7f2; --main: #eaefe9;
  --solid: #ffffff; --panel: #ffffff; --panel-2: #e6ede3; --soft: rgba(32, 112, 76, .12);
  --hover: rgba(20, 50, 35, .06); --line: rgba(20, 60, 40, .16);
  --text: #17241c; --muted: #4c6354; --accent: #20704c; --accent-2: #17563a; --accent-ink: #fff;
  --bubble: #e4ece0;
  --shadow: 0 2px 10px rgba(20, 60, 40, .12);
}
:root[data-theme="oled"] {
  --bg: #000; --rail: #000; --side: #060605; --main: #000; --solid: #0d0c0b; --panel: #121110;
  --panel-2: #191716; --soft: rgba(224, 122, 60, .16); --hover: rgba(255, 246, 235, .05);
  --line: rgba(255, 246, 235, .11);
  --text: #f1ece5; --muted: #8e8780; --bubble: #121110; --shadow: 0 2px 12px rgba(0, 0, 0, .8);
}
:root[data-density="compact"] { --gap: 8px; }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overscroll-behavior-y: none; }   /* iOSでスワイプしたとき、うしろの白い背景が見えないように */
body {
  font-family: "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, -apple-system, sans-serif;
  background: var(--bg); background-attachment: fixed; color: var(--text); overflow: hidden;
  font-size: var(--fs); -webkit-font-smoothing: antialiased;
}
button, a, [role="button"] { touch-action: manipulation; }   /* ボタン連打でのダブルタップ拡大を防ぐ（ピンチ拡大は残す） */
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
button:active { filter: brightness(.92); }                  /* タップした感触を、枠でなく色でつける */
input, textarea, select { font: inherit; color: inherit; }
/* キーボード操作のときだけ、はっきりしたフォーカス枠を出す（マウスのクリックでは出さない） */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* Chromeの自動入力が、背景を黄色く塗り替えるのを防ぐ */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--panel) inset;
  transition: background-color 9999s ease-in-out 0s;
}
[hidden] { display: none !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }   /* Firefox */
.messages, .nest, .set-body, .set-nav, .rp-list, .rp-panel, .members, .cmd-list, .rail,
.pop, .modal, .eb-grid { -webkit-overflow-scrolling: touch; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7;
      stroke-linecap: round; stroke-linejoin: round; display: block; flex-shrink: 0; }
:root[data-motion="reduced"] * { transition: none !important; animation: none !important; }

/* ===== 全体：上のバー / チャンネル / メイン / メンバー ===== */
.app { display: grid; grid-template-columns: 268px 1fr; grid-template-rows: 46px 1fr; height: 100%; }
.content { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.content-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.members { width: 276px; flex-shrink: 0; min-height: 0; border-left: 1px solid var(--line); }
/* ヘッダーのボタンで、一覧そのものを出し入れする */
.members.closed { display: none; }
.ibtn.on { color: var(--accent-2); background: var(--soft); }

/* ===== 上のバー：アプリ名・コミュニティ・自分 ===== */
.topbar { grid-column: 1 / -1; display: flex; align-items: center; min-width: 0;
          background: var(--rail); border-bottom: 1px solid var(--line); padding-right: 8px; }
.wordmark { flex-shrink: 0; height: 100%; display: flex; align-items: center; padding: 0 16px;
            font-size: 12.5px; font-weight: 800; letter-spacing: .18em; color: var(--text);
            border-right: 1px solid var(--line); }
.rail { flex: 1; min-width: 0; height: 100%; display: flex; align-items: stretch; gap: 2px;
        padding: 0 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }

/* コミュニティのボタン。下の線が「いま開いている場所」を表す */
.srv-wrap { position: relative; flex-shrink: 0; display: flex; align-items: center; padding: 0 1px; }
.srv-wrap::before { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px;
                    background: var(--accent); opacity: 0; transition: opacity .12s; }
.srv-wrap:hover::before { opacity: .45; }
.srv-wrap.on::before { opacity: 1; }
.srv { width: 34px; height: 34px; border-radius: var(--r-md); background: transparent; display: grid;
       place-items: center; font-size: 15px; color: var(--muted); position: relative; }
.srv:hover { background: var(--hover); color: var(--text); }
.srv-wrap.on .srv { background: var(--hover); color: var(--text); }
.srv.home { background: transparent; color: var(--accent); }
.srv.tool { color: var(--muted); }
.srv.add { color: var(--muted); }
.srv.add:hover { color: var(--ok); }
.srv .vc { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%;
           background: var(--ok); border: 2px solid var(--rail); }
.srv svg { width: 18px; height: 18px; }
.rail-sep { width: 1px; height: 20px; background: var(--line); flex-shrink: 0; margin: auto 7px; }

/* 通話中パネル・自分のパネル */
.voice-panel { border-top: 1px solid var(--line); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.voice-panel .vp-top { display: flex; align-items: center; gap: 8px; }
.voice-panel .vp-state { flex: 1; min-width: 0; }
.voice-panel .vp-state b { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ok); }
.voice-panel .vp-state small { display: block; font-size: 11px; color: var(--muted); overflow: hidden;
                               text-overflow: ellipsis; white-space: nowrap; }
.voice-panel .vp-btns { display: flex; gap: 6px; }
.voice-panel .vp-btns button { flex: 1; min-width: 0; height: 44px; border-radius: var(--r-sm); background: var(--panel);
                               border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center;
                               justify-content: center; gap: 3px; color: var(--text); }
.voice-panel .vp-btns button svg { width: 16px; height: 16px; }
.voice-panel .vp-btns button .cl { font-size: 10.5px; font-weight: 600; line-height: 1; white-space: nowrap; }
.voice-panel .vp-btns button:hover { border-color: var(--accent); }
.voice-panel .vp-btns button.off { background: var(--danger); color: #fff; border-color: transparent; }
.voice-panel .vp-btns button.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.voice-panel .vp-btns button.hang { background: var(--danger); color: #fff; border-color: transparent; }

.user-panel { display: flex; align-items: center; gap: 4px; margin-left: 6px; padding-left: 10px;
              border-left: 1px solid var(--line); flex-shrink: 0; }
.user-panel .who { display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 5px; border-radius: 6px;
                   text-align: left; max-width: 190px; min-width: 0; }
.user-panel .who:hover { background: var(--hover); }
.user-panel .names { min-width: 0; }
.user-panel .names b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-panel .names small { display: block; font-size: 11px; color: var(--muted); overflow: hidden;
                           text-overflow: ellipsis; white-space: nowrap; max-width: 108px; }
@media (max-width: 900px) { .user-panel .names { display: none; } }


/* ===== 部屋：チャットの上に、通話の様子を並べる ===== */
.main.with-call #voiceView { order: -1; flex: 0 0 auto; height: min(48%, 440px); min-height: 230px;
                             border-bottom: 1px solid var(--line); background: var(--bg); }
.main.with-call #voiceView .stage { padding: 14px 16px 8px; }
.main.with-call #voiceView .controls { padding: 0 16px 12px; }
.main.with-call #textView { flex: 1; min-height: 0; }
.callbtn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
           border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel);
           color: var(--text); font-size: 13px; font-weight: 700; flex-shrink: 0; }
.callbtn svg { width: 15px; height: 15px; color: var(--accent); }
.callbtn:hover { border-color: var(--accent); }
.callbtn.on { background: var(--soft); border-color: var(--accent); color: var(--accent-2); cursor: default; }
@media (max-width: 760px) {
  .callbtn span { display: none; }
  .callbtn { padding: 0 9px; }
  .main.with-call #voiceView { height: 44%; min-height: 200px; }
}

/* ===== ジャンプ（Ctrl+K） ===== */
.jump { margin: 10px 10px 2px; padding: 0 10px; height: 34px; display: flex; align-items: center; gap: 8px;
        border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel);
        color: var(--muted); font-size: 13px; }
.jump:hover { border-color: var(--accent); color: var(--text); }
.jump svg { width: 15px; height: 15px; }
.jump .jt { flex: 1; text-align: left; }
.jump kbd { font: inherit; font-size: 10.5px; letter-spacing: .04em; color: var(--muted);
            border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; }
.modal.palette { padding: 0; width: min(560px, 100%); overflow: hidden; }
.jump-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px;
             border-bottom: 1px solid var(--line); color: var(--muted); }
.jump-head svg { width: 18px; height: 18px; flex-shrink: 0; }
.jump-head input { flex: 1; min-width: 0; border: none; outline: none; background: none;
                   color: var(--text); font-size: 15px; }
.jump-list { max-height: 360px; overflow-y: auto; padding: 6px; }
.jump-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px;
            border-radius: var(--r-sm); text-align: left; color: var(--text); font-size: 14px; }
.jump-row.on { background: var(--hover); }
.jump-row .ji { display: grid; place-items: center; color: var(--muted); flex-shrink: 0; }
.jump-row .ji svg { width: 16px; height: 16px; }
.jump-row.on .ji { color: var(--accent); }
.jump-row .jl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jump-row .js { font-size: 11px; color: var(--muted); letter-spacing: .06em; flex-shrink: 0; }
.jump-list .hint { padding: 18px 12px; text-align: center; }

/* ===== 左：チャンネル一覧 ===== */
.side { background: var(--side); display: flex; flex-direction: column;
        min-width: 0; border-right: 1px solid var(--line); position: relative; }
.side-head { height: 48px; padding: 0 14px; display: flex; align-items: center; gap: 8px; font-weight: 700;
             font-size: 14px; border-bottom: 1px solid var(--line); width: 100%; text-align: left; flex-shrink: 0; }
.side-head:hover { background: var(--hover); }
.side-head .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-head .chev { display: grid; place-items: center; color: var(--muted); }
.side-head .chev svg { width: 16px; height: 16px; }
.chan-scroll { flex: 1; overflow-y: auto; padding: 10px 10px 16px; }
/* マイページの左側：コミュニティとフレンドを別々にスクロール */
.chan-scroll.my-side { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 10px; }
.my-side .my-nav { flex-shrink: 0; }
.my-side .cat { flex-shrink: 0; padding-top: 14px; }
.my-box { overflow-y: auto; min-height: 0; border-radius: 8px; overscroll-behavior: contain; }
.my-box .ch { height: 38px; margin: 0; }
.my-box.spaces { flex: 0 0 auto; max-height: calc(38px * 5); }
.my-box.friends { flex: 1 1 auto; }
.my-empty { padding: 8px 10px; font-size: 13px; color: var(--muted); }
.cat { display: flex; align-items: center; gap: 2px; padding: 18px 6px 6px; font-size: 11px; font-weight: 800;
       color: var(--muted); letter-spacing: .12em; }
.cat button.fold { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; text-align: left;
                   font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.cat button.fold span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat button.fold:hover, .cat button.add:hover { color: var(--text); }
.cat .arrow { display: grid; place-items: center; transition: transform .15s; width: 14px; color: var(--muted); }
.cat .arrow svg { width: 12px; height: 12px; }
.cat.closed .arrow { transform: rotate(-90deg); }
.cat button.add { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); }
.cat button.add svg { width: 14px; height: 14px; }
.ch { position: relative; width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 10px; margin: 1px 0;
      border-radius: var(--r-sm); color: var(--muted); text-align: left; font-size: 14px;
      transition: background .12s, color .12s; }
.ch:hover { background: var(--hover); color: var(--text); }
.ch.on { background: var(--hover); color: var(--text); font-weight: 700; }
.ch.on::before { content: ""; position: absolute; left: -10px; top: 4px; bottom: 4px;
                 width: 2px; background: var(--accent); }
.ch.unread { color: var(--text); font-weight: 700; }
.ch .ico { width: 20px; display: grid; place-items: center; opacity: .85; flex-shrink: 0; font-size: 15px; }
.ch .ico svg { width: 17px; height: 17px; }
.ch .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch .count { background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 3px; padding: 1px 6px; }
.ch-gear { opacity: 0; width: 22px; height: 22px; border-radius: var(--r-sm); color: var(--muted); display: grid;
           place-items: center; flex-shrink: 0; }
.ch-gear svg { width: 14px; height: 14px; }
.ch:hover .ch-gear, .ch.on .ch-gear { opacity: .7; }
.ch-gear:hover { background: var(--panel); opacity: 1 !important; color: var(--text); }
.vmembers { padding: 2px 0 6px 30px; display: flex; flex-direction: column; gap: 1px; }
.vm { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; font-size: 13px;
      color: var(--muted); width: 100%; text-align: left; }
.vm:hover { background: var(--hover); color: var(--text); }
.vm .nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ミュート・配信中は、名前のすぐ右に赤で出す */
.vm .flags { display: flex; align-items: center; gap: 5px; color: var(--danger); flex-shrink: 0; }
.vm .flags svg { width: 14px; height: 14px; display: block; }
.vm .fl-live { font-size: 11px; font-weight: 700; color: var(--danger); letter-spacing: .02em; }
.dot-ok { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; }

/* ===== アバター ===== */
.ava { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700;
       flex-shrink: 0; font-size: 14px; position: relative; transition: box-shadow .12s; }
.ava.xs { width: 24px; height: 24px; border-radius: 50%; font-size: 11px; }
.ava.lg { width: 72px; height: 72px; border-radius: 50%; font-size: 28px; }
/* 縁取りは box-shadow で描く。border だと、重ねるデコレーションの
   倍率が縁の内側を基準に計算されて、約1割小さくなってしまう */
.ava.xl { width: 84px; height: 84px; border-radius: 50%; font-size: 32px;
          box-shadow: 0 0 0 4px var(--panel); }
.ava .pres { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; z-index: 4;
             background: var(--ok); border: 2.5px solid var(--solid); }
.ava.lg .pres, .ava.xl .pres { width: 20px; height: 20px; border-width: 4px; }
.pres.idle { background: var(--idle); }
.pres.dnd { background: var(--dnd); }
.pres.offline, .pres.invisible { background: #6b7090; }
.speaking > .ava, .ava.speaking { box-shadow: 0 0 0 2px var(--solid), 0 0 0 4px var(--ok); }

/* ===== 右：本文 ===== */
.main { display: flex; flex-direction: column; min-width: 0; background: var(--main); }
.main-head { height: 48px; padding: 0 12px 0 18px; display: flex; align-items: center; gap: 10px;
             border-bottom: 1px solid var(--line); flex-shrink: 0; }
.main-head .ico { color: var(--muted); display: grid; place-items: center; }
.main-head h2 { font-size: 15.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-head .grow { flex: 1; }
.topic { font-size: 12.5px; color: var(--muted); border-left: 1px solid var(--line); padding-left: 12px;
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 38vw; }
.ibtn { width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--muted); flex-shrink: 0; }
.ibtn:hover { background: var(--hover); color: var(--text); }
.ibtn.off { color: var(--danger); }
.ibtn.act { color: var(--ok); }
.menu { display: none; }
.nav-scrim { display: none; }
.view { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

/* ===== メッセージ ===== */
.messages { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
             padding: 16px 0 8px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.hello { padding: 22px 20px 26px; }
.hello .big { width: 66px; height: 66px; border-radius: 12px; background: var(--panel-2); display: grid;
              place-items: center; margin-bottom: 14px; color: var(--accent-2); }
.hello .big svg { width: 30px; height: 30px; }
.hello b { display: block; font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.hello p { color: var(--muted); font-size: 14px; }
.day { display: flex; align-items: center; gap: 12px; margin: 20px 20px 10px; font-size: 11.5px; color: var(--muted); }
.day::before, .day::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.msg { display: flex; gap: 14px; padding: 2px 20px; position: relative; }
.msg.first { margin-top: var(--gap); padding-top: 6px; }
.msg:hover { background: var(--hover); }
.msg .gutter { width: 40px; flex-shrink: 0; display: flex; justify-content: center;
               align-items: flex-start; }
.msg .gutter .ts { font-size: 10.5px; color: var(--muted); opacity: 0; line-height: 22px; }
.msg:hover .gutter .ts { opacity: 1; }
.msg .body { flex: 1; min-width: 0; }
.msg .meta { display: flex; align-items: baseline; gap: 9px; margin-bottom: 3px; }
.msg .meta .who { font-size: 15px; font-weight: 700; }
.msg .meta .when { font-size: 11.5px; color: var(--muted); letter-spacing: .02em; }
.msg .text { font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.msg .text code { background: rgba(0,0,0,.28); padding: 1px 6px; border-radius: 5px; font-family: ui-monospace, monospace; font-size: .92em; }
.msg .text pre { background: rgba(0,0,0,.3); border: 1px solid var(--line); padding: 10px 12px; border-radius: 8px;
                 overflow-x: auto; margin: 6px 0; }
.msg .text pre code { background: none; padding: 0; }
.msg .text a { color: var(--accent-2); text-underline-offset: 3px; }
.msg .hover-acts { position: absolute; top: -14px; right: 18px; display: none; gap: 2px; background: var(--panel);
                   border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px; box-shadow: var(--shadow); }
.msg:hover .hover-acts { display: flex; }
.msg .hover-acts button { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--muted); }
.msg .hover-acts button:hover { background: var(--hover); color: var(--text); }
.msg .hover-acts svg { width: 16px; height: 16px; }
.bot-tag { background: var(--accent); color: var(--accent-ink); font-size: 9px;
           font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .04em; vertical-align: 1px; }

/* BOTのボタン */
.msg-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.msg-btn { padding: 7px 14px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line);
           font-size: 13px; font-weight: 700; }
.msg-btn:hover { border-color: var(--accent); }
.msg-btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.msg-btn.danger { background: var(--danger); color: #fff; border-color: transparent; }

/* 返信 */
.reply-quote { display: flex; align-items: center; gap: 7px; text-align: left; font-size: 12.5px; color: var(--muted);
               margin-bottom: 4px; max-width: 100%; }
.reply-quote::before { content: ""; width: 24px; height: 9px; border-left: 2px solid var(--line);
                       border-top: 2px solid var(--line); border-top-left-radius: 7px; margin-left: -38px; flex-shrink: 0; }
.reply-quote b { color: var(--text); flex-shrink: 0; }
.reply-quote b { flex-shrink: 0; }
.reply-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.reply-bar { display: flex; align-items: center; gap: 10px; margin: 0 20px 8px; padding: 9px 12px;
             background: var(--panel); border-radius: var(--r-sm); font-size: 13px; border: 1px solid var(--line); }
.reply-bar .rb-mark { color: var(--accent-2); display: grid; place-items: center; }
.reply-bar .rb-mark svg { width: 16px; height: 16px; }
.reply-bar .rb-body { flex: 1; min-width: 0; }
.reply-bar .rb-body b { display: block; font-size: 12px; }
.reply-bar .rb-body span { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-bar .rb-x { color: var(--muted); padding: 4px; border-radius: 8px; display: grid; place-items: center; }
.reply-bar .rb-x:hover { background: var(--hover); color: var(--text); }
.reply-bar .rb-x svg { width: 15px; height: 15px; }

/* リアクション */
.reacts { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.react { display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; font-size: 13px;
         background: var(--panel); border: 1px solid var(--line); line-height: 1.4; }
.react span { font-size: 11px; font-weight: 700; color: var(--muted); }
.react.mine { border-color: var(--accent); background: var(--soft); }
.react.mine span { color: var(--accent-2); }
.react.add { color: var(--muted); }
.react.add svg { width: 14px; height: 14px; }
.react:hover { border-color: var(--accent); }
.quick-reacts { display: flex; gap: 2px; padding: 4px 6px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.quick-reacts button { width: 34px; height: 34px; border-radius: 9px; font-size: 17px; display: grid; place-items: center; }
.quick-reacts button:hover { background: var(--hover); transform: scale(1.1); }
.quick-reacts button svg { width: 16px; height: 16px; }
.emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.emoji-grid button { aspect-ratio: 1; border-radius: 9px; font-size: 18px; }
.emoji-grid button:hover { background: var(--hover); }
.msg.flash { animation: flash 1.4s ease-out; }
@keyframes flash { 0%, 45% { background: var(--soft); } 100% { background: transparent; } }

/* BOTのボタン */
.msg-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.msg-btn { padding: 7px 14px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--line);
           font-size: 13px; font-weight: 700; }
.msg-btn:hover { border-color: var(--accent); color: var(--text); }
.msg-btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.msg-btn.danger { background: var(--danger); color: #fff; border-color: transparent; }

/* 入力欄 */
.typing { min-height: 20px; padding: 0 22px; font-size: 12px; color: var(--muted); }
.composer { display: flex; gap: 8px; align-items: flex-end; padding: 6px 18px 18px;
            flex-shrink: 0; background: var(--bg); }
.composer textarea { flex: 1; resize: none; border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-md);
                     padding: 12px 16px; outline: none; max-height: 170px; line-height: 1.5; font-size: 14.5px; transition: border-color .15s; }
.composer textarea:focus { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.composer textarea::placeholder { color: var(--muted); }
.cmd-btn, .send { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; }
.cmd-btn { background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
.cmd-btn:hover { color: var(--text); border-color: var(--accent); }
.send { background: var(--accent); color: var(--accent-ink); }
.send:disabled { opacity: .35; cursor: default; box-shadow: none; }

/* ===== 通話画面 ===== */
.stage { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; }
.tiles { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 300px)); gap: 14px;
         align-content: center; justify-content: center; }
.tile { aspect-ratio: 16 / 10; background: var(--panel); border-radius: var(--r-lg); display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 12px; position: relative; border: 2px solid transparent;
        transition: border-color .12s; overflow: hidden; }
.tile.speaking { border-color: var(--ok); }
.tile .tname { position: absolute; left: 12px; bottom: 12px; background: rgba(0,0,0,.5); color: #fff; font-size: 12.5px;
               padding: 4px 9px; border-radius: 8px; display: flex; align-items: center; gap: 5px; max-width: calc(100% - 24px); }
.tile .tname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .tname svg { width: 13px; height: 13px; color: #fca5a5; }
.tile .emote { position: absolute; top: 12px; right: 14px; font-size: 30px; animation: pop .4s ease-out; }
@keyframes pop { from { transform: scale(.4) translateY(10px); opacity: 0 } to { transform: none; opacity: 1 } }
.tile.blocked { opacity: .45; }
.stage-empty { flex: 1; display: grid; place-items: center; text-align: center; color: var(--muted); }
.stage-empty b { display: block; color: var(--text); font-size: 20px; margin: 10px 0 4px; }
.stage-empty .big { width: 64px; height: 64px; border-radius: 12px; background: var(--panel); display: grid;
                    place-items: center; margin: 0 auto; color: var(--accent-2); }
.stage-empty .big svg { width: 28px; height: 28px; }
.stage-join { display: flex; justify-content: center; padding: 0 16px 20px; }
.controls { display: flex; justify-content: center; gap: 10px; padding: 0 16px 22px; }
.cbtn { width: 48px; height: 48px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line);
        display: grid; place-items: center; color: var(--text); }
.cbtn:hover { border-color: var(--accent); }
.cbtn.off { background: var(--danger); color: #fff; border-color: transparent; }
.cbtn.hang { background: var(--danger); color: #fff; width: 62px; border-radius: 10px; border-color: transparent; }
.join-btn { background: var(--accent); color: var(--accent-ink); padding: 14px 30px;
            border-radius: 6px; font-weight: 700; display: flex; align-items: center; gap: 10px;
            box-shadow: none; }

/* フォーカスタイマー */
.focus-card { background: var(--panel); border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 18px;
              display: flex; align-items: center; gap: 18px; border: 1px solid var(--line); }
.focus-card .ring { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
                    background: conic-gradient(var(--accent) var(--p, 0%), var(--panel-2) 0); }
.focus-card .ring > div { width: 72px; height: 72px; border-radius: 50%; background: var(--panel); display: grid;
                          place-items: center; font-weight: 700; font-size: 19px; font-variant-numeric: tabular-nums; }
.focus-card.break .ring { background: conic-gradient(var(--ok) var(--p, 0%), var(--panel-2) 0); }
.focus-card .fi { flex: 1; min-width: 0; }
.focus-card .fi b { font-size: 16px; }
.focus-card .fi p { color: var(--muted); font-size: 13px; margin-top: 3px; }
.focus-card .fa { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== ホーム／巣 ===== */
.nest { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 26px 40px; overscroll-behavior: contain; }
.greet { margin-bottom: 22px; }
.back-home { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 7px 12px 7px 9px;
             border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.back-home:hover { color: var(--text); background: var(--hover); }
.back-home svg { width: 16px; height: 16px; }
.greet h1 { font-size: 26px; font-weight: 700; }
.greet p { color: var(--muted); font-size: 14px; margin-top: 6px; }
.nest h3 { font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .06em;
           margin: 28px 0 12px; display: flex; align-items: center; gap: 10px; }
.nest h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; text-align: left;
        display: flex; flex-direction: column; gap: 10px; min-width: 0; transition: transform .12s, border-color .12s; }
.card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.card .ct { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; min-width: 0; }
.card .ct .ico { color: var(--muted); display: grid; place-items: center; flex-shrink: 0; }
.card .ct .em { width: 32px; height: 32px; border-radius: 10px; background: var(--panel-2); display: grid;
                place-items: center; font-size: 16px; flex-shrink: 0; }
.card .ct .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .ct .tag { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px;
                 background: var(--panel-2); color: var(--muted); flex-shrink: 0; }
.card .ct .tag.live { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); }
.card .ct .tag.unread { background: var(--danger); color: #fff; }
.card .prev { font-size: 13px; color: var(--muted); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2;
              -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.card .prev b { color: var(--text); font-weight: 700; }
.card .faces { display: flex; align-items: center; gap: 6px; }
.card .faces .ava { margin-left: -8px; box-shadow: 0 0 0 2px var(--panel); }
.card .faces .ava:first-child { margin-left: 0; }
.card .faces small { color: var(--muted); font-size: 12px; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.live-call { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.card.focus-now { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.card .timer { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.card .timer svg { width: 18px; height: 18px; color: var(--accent-2); }
.quiet { color: var(--muted); font-size: 14px; padding: 8px 2px; }

.big-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.big-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm);
            text-align: left; background: var(--panel); border: 1px solid var(--line);
            transition: border-color .12s, background .12s; }
.big-card:hover { background: var(--panel-2); border-color: var(--accent); }
.big-card .bc-emoji { width: 28px; height: 28px; display: grid; place-items: center;
                      flex-shrink: 0; color: var(--muted); }
.big-card .bc-emoji svg { width: 18px; height: 18px; }
.big-card b { display: block; font-size: 13.5px; font-weight: 700; }
.big-card small { color: var(--muted); font-size: 11.5px; }

.friend-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.fchip { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 6px;
         background: var(--panel); border: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.fchip:hover { border-color: var(--accent); }

/* 探す */
.disc-search { width: 100%; border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-md);
               padding: 13px 16px; outline: none; font-size: 14.5px; margin-bottom: 14px; }
.disc-search:focus { border-color: var(--accent); }
.genres { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.genre { padding: 7px 15px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line);
         font-size: 12.5px; font-weight: 700; color: var(--muted); }
.genre:hover { color: var(--text); }
.genre.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.disc-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); align-items: center; }
.disc-meta span { display: flex; align-items: center; gap: 5px; }
.disc-meta svg { width: 13px; height: 13px; }
.disc-meta .on { color: var(--ok); font-weight: 700; }
.disc-last { border-top: 1px solid var(--line); padding-top: 10px; }
.disc-last small { color: var(--muted); font-size: 11px; }

/* テンプレート・BOTの機能えらび */
.tpl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.tpl { display: flex; flex-direction: column; gap: 5px; padding: 15px; border-radius: var(--r-md); background: var(--panel);
       text-align: left; border: 1px solid var(--line); }
.tpl:hover { border-color: var(--accent); transform: translateY(-1px); }
.tpl-em { font-size: 24px; }
.tpl b { font-size: 14px; }
.tpl small { color: var(--muted); font-size: 11px; line-height: 1.6; }
.feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.feat { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--r-sm); background: var(--panel);
        border: 1px solid var(--line); text-align: left; }
.feat.on { border-color: var(--accent); background: var(--soft); }
.feat .fe { width: 30px; height: 30px; border-radius: 9px; background: var(--panel-2); display: grid; place-items: center;
            color: var(--accent-2); flex-shrink: 0; }
.feat .fe svg { width: 16px; height: 16px; }
.feat b { display: block; font-size: 13px; }
.feat small { color: var(--muted); font-size: 11px; }
.feat .fcheck { margin-left: auto; color: var(--accent-2); display: grid; place-items: center; }
.feat .fcheck svg { width: 16px; height: 16px; }
.rep-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.rep-row input { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
                 padding: 9px 11px; outline: none; font-size: 13.5px; }
.arrow-r { color: var(--muted); display: grid; place-items: center; }
.arrow-r svg { width: 15px; height: 15px; }

/* ===== メンバー（右の列） ===== */
.members { background: var(--side); border-left: 1px solid var(--line); padding: 14px 6px; overflow-y: auto; }
.members h4 { font-size: 10.5px; color: var(--muted); font-weight: 700; letter-spacing: .06em; padding: 12px 10px 6px; }
.people-pop { width: 290px; max-height: 62vh; overflow-y: auto; }
.people-pop h4 { font-size: 10.5px; color: var(--muted); font-weight: 700; letter-spacing: .06em; padding: 10px 8px 6px; }
.person { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm); width: 100%; text-align: left; }
.person:hover { background: var(--hover); }
.person .pi { min-width: 0; }
.person .pi b { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .pi small { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tabs { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .sep { width: 1px; height: 22px; background: var(--line); margin: 0 8px; }
.tab { padding: 6px 13px; border-radius: 6px; color: var(--muted); font-weight: 700; font-size: 13px; white-space: nowrap; }
.tab:hover { background: var(--hover); color: var(--text); }
.tab.on { background: var(--soft); color: var(--text); }
.tab.addf { background: var(--accent); color: var(--accent-ink); }
.tab.addf.on { background: transparent; color: var(--accent-2); }
.tab .n { background: var(--danger); color: #fff; border-radius: 9px; font-size: 10.5px; padding: 1px 6px; margin-left: 5px; }
.friends { flex: 1; overflow-y: auto; padding: 20px 24px 30px; }
.friends h4 { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .06em;
              padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.frow { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: var(--r-sm);
        border-bottom: 1px solid var(--line); cursor: pointer; }
.frow:hover { background: var(--hover); }
.frow .fname { flex: 1; min-width: 0; }
.frow .fname b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow .fname small { color: var(--muted); font-size: 12px; }
.round { width: 36px; height: 36px; border-radius: 50%; background: var(--panel-2); display: grid; place-items: center; color: var(--muted); }
.round svg { width: 17px; height: 17px; }
.round:hover { color: var(--text); background: var(--panel); }
.round.yes:hover { color: var(--ok); }
.round.no:hover { color: var(--danger); }
.empty { text-align: center; color: var(--muted); padding: 60px 20px; }
.empty .big { width: 66px; height: 66px; border-radius: var(--r-lg); background: var(--panel); display: grid; place-items: center;
              margin: 0 auto 14px; color: var(--accent-2); }
.empty .big svg { width: 30px; height: 30px; }
.add-box h3 { font-size: 17px; margin-bottom: 6px; }
.add-box p { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; line-height: 1.7; }
.add-form { display: flex; gap: 8px; background: var(--panel); border-radius: var(--r-md); padding: 8px 8px 8px 14px;
            border: 1px solid var(--line); }
.add-form input { flex: 1; min-width: 0; border: none; outline: none; background: none; letter-spacing: .06em; }
.mycode { margin-top: 24px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
          display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mycode code { font-size: 21px; font-weight: 700; letter-spacing: .14em; flex: 1; }

/* ===== 下のオーディオバー ===== */
.bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--rail);
       border-top: 1px solid var(--line); position: relative; z-index: 12; }
.bar .qt { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex-shrink: 0;
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.bar .dot.poor { background: var(--idle); box-shadow: 0 0 0 3px color-mix(in srgb, var(--idle) 22%, transparent); }
.bar .dot.lost { background: var(--danger); box-shadow: none; }
.bar .where { min-width: 0; }
.bar .where b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .where b svg { width: 15px; height: 15px; color: var(--muted); }
.bar .where small { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.bar .spk { display: flex; margin-left: 6px; }
.bar .spk .ava { margin-left: -8px; box-shadow: 0 0 0 2px var(--rail); }
.bar .ctrls { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cbtn { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--line);
        display: grid; place-items: center; color: var(--text); }
.cbtn:hover { border-color: var(--accent); }
.cbtn.off { background: var(--danger); color: #fff; border-color: transparent; }
.cbtn.act { background: var(--ok); color: #05261a; border-color: transparent; }
.cbtn.hang { background: var(--danger); color: #fff; width: 58px; border-color: transparent; }

/* 通話の操作ボタン：絵の下に必ず名前を出し、役割ごとにまとめる */
.controls { display: flex; justify-content: center; align-items: stretch; gap: 14px; flex-wrap: wrap;
            padding: 0 16px 20px; }
.cgroup { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-lg);
          background: var(--solid); }
.controls .cbtn { width: 68px; height: 58px; display: flex; flex-direction: column; align-items: center;
                  justify-content: center; gap: 5px; border: 1px solid transparent; background: transparent;
                  border-radius: var(--r-md); color: var(--text); }
.controls .cbtn svg { width: 20px; height: 20px; }
.controls .cbtn .cl { font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--muted); }
.controls .cbtn:hover { background: var(--hover); }
.controls .cbtn:hover .cl { color: var(--text); }
.controls .cbtn.off { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.controls .cbtn.off .cl { color: var(--danger); }
.controls .cbtn.on { background: var(--soft); color: var(--accent-2); }
.controls .cbtn.on .cl { color: var(--accent-2); }
.controls .cbtn.hang { width: 76px; background: var(--danger); color: #fff; }
.controls .cbtn.hang .cl { color: #fff; }
.controls .cbtn.hang:hover { filter: brightness(1.08); }
.bar .ftime { display: flex; align-items: center; gap: 6px; font-weight: 700; font-variant-numeric: tabular-nums;
              font-size: 13px; padding: 0 8px; color: var(--accent-2); }
.bar .ftime svg { width: 15px; height: 15px; }

/* ===== ポップオーバー・メニュー ===== */
.pop { position: fixed; z-index: 55; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
       box-shadow: var(--shadow); padding: 12px; width: 300px; }
.pop h4 { font-size: 10.5px; color: var(--muted); font-weight: 700; letter-spacing: .06em; margin-bottom: 10px; }
.menu-pop { width: 252px; padding: 6px; }
.menu-pop h4 { padding: 8px 10px 6px; margin: 0; }
.menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px;
                   border-radius: var(--r-sm); font-size: 13.5px; color: var(--text); }
.menu-pop button svg { width: 16px; height: 16px; color: var(--muted); }
.menu-pop button:hover { background: var(--hover); }
.menu-pop button.danger, .menu-pop button.danger svg { color: var(--danger); }
.menu-pop .hr, .ctx .hr { height: 1px; background: var(--line); margin: 5px 6px; }
.cmd-pop { width: 306px; height: min(58vh, 420px); display: flex; flex-direction: column; overflow: hidden; }
.cmd-find { margin: 6px 0 8px; width: 100%; }
.cmd-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.cmd-bot { display: flex; align-items: center; gap: 6px; padding: 8px 4px 3px; font-size: 11px;
  font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.cmd-bot .emo { width: 15px; height: 15px; vertical-align: 0; }
.cmd-bot svg { width: 14px; height: 14px; }
.cmd-row { display: flex; flex-direction: column; gap: 2px; align-items: flex-start !important;
  padding: 8px 10px; border-radius: var(--r-sm); width: 100%; }
.cmd-row:hover { background: var(--hover); }
.cmd-row b { font-size: 13.5px; color: var(--accent-2); }
.cmd-row small { color: var(--muted); font-size: 11.5px; }
.cmd-row .cmd-args { font-size: 10.5px; color: var(--muted); background: var(--soft);
  padding: 1px 6px; border-radius: 999px; margin-top: 2px; }

/* BOT一覧 → そのBOTのコマンド */
.cmd-sec { padding: 10px 4px 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; color: var(--muted); }
.cmd-botrow { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: var(--r-sm); text-align: left; }
.cmd-botrow:hover { background: var(--hover); }
.cmd-botrow .cb-txt { flex: 1; min-width: 0; }
.cmd-botrow .cb-txt b { display: block; font-size: 13.5px; }
.cmd-botrow .cb-txt small { display: block; color: var(--muted); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-botrow .cb-go { color: var(--muted); display: inline-flex; flex-shrink: 0; }
.cmd-botrow .cb-go svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.cmd-back { display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 4px;
  color: var(--muted); font-size: 12px; text-align: left; }
.cmd-back:hover { color: var(--text); }
.cmd-back svg { width: 15px; height: 15px; transform: rotate(90deg); }
.cmd-head { display: flex; align-items: center; gap: 10px; padding: 4px 4px 10px;
  border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.cmd-head b { display: block; font-size: 14px; }
.cmd-head small { display: block; color: var(--muted); font-size: 11.5px; }
.ava.sm { width: 32px; height: 32px; border-radius: 50%; font-size: 13px; }
.cmd-empty { color: var(--muted); font-size: 13px; padding: 12px 4px 2px; }
.cmd-empty2 { color: var(--muted); font-size: 12px; padding: 0 4px 8px; }
.sounds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sounds button { aspect-ratio: 1; border-radius: var(--r-sm); background: var(--panel-2); font-size: 20px; display: grid; place-items: center; }
.sounds button:hover { background: var(--hover); transform: translateY(-1px); }
.sounds button small { display: block; font-size: 9px; color: var(--muted); margin-top: 2px; }
.emotes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.emotes button { width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--panel-2); font-size: 19px; }
.emotes button:hover { background: var(--hover); }

.ctx { position: fixed; z-index: 47; padding: 6px; min-width: 216px; background: var(--panel); border: 1px solid var(--line);
       border-radius: var(--r-md); box-shadow: var(--shadow); }
.ctx .label { padding: 7px 10px; font-size: 11px; color: var(--muted); }
.ctx button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px;
              border-radius: var(--r-sm); font-size: 13.5px; }
.ctx button svg { width: 16px; height: 16px; color: var(--muted); }
.ctx button:hover { background: var(--hover); }
.ctx .danger, .ctx .danger svg { color: var(--danger); }
.ctx input[type=range] { width: 100%; accent-color: var(--accent); margin: 4px 0 8px; }

/* プロフィールカード */
/* カード全体で切ると、アイコンからはみ出すデコレーションが削られる。
   切り抜きはバナーだけにして、デコはそのまま見せる */
.pcard { position: fixed; z-index: 46; width: 330px; background: var(--panel); border: 1px solid var(--line);
         border-radius: var(--r-lg); box-shadow: var(--shadow); }
.pcard .banner { height: 76px; overflow: hidden;
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
/* デコレーションが左右にはみ出しても収まるよう、アイコンのまわりを広めにとる */
.pcard .ava.xl { margin-left: 6px; }
.pcard .body { padding: 0 18px 18px; margin-top: -42px; }
.pcard .nm { margin-top: 12px; font-size: 19px; font-weight: 700; }
.pcard .st { color: var(--muted); font-size: 13px; margin-top: 3px; }
.pcard .box { background: var(--panel-2); border-radius: var(--r-md); padding: 12px 14px; margin-top: 12px;
              font-size: 13px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.pcard .box h5 { font-size: 10.5px; color: var(--muted); font-weight: 700; letter-spacing: .06em; margin-bottom: 5px; }
.pcard .acts { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* ===== モーダル ===== */
.overlay { position: fixed; inset: 0; background: rgba(8, 6, 4, .72);
           display: grid; place-items: center; z-index: 50; padding: 18px; }
.modal { width: min(470px, 100%); padding: 26px; max-height: 90vh; overflow-y: auto; background: var(--solid);
         border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.modal.wide { width: min(880px, 100%); padding: 0; display: flex; height: min(660px, 90vh); overflow: hidden; }
.modal h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.modal p.desc { color: var(--muted); font-size: 13.5px; margin-bottom: 20px; line-height: 1.8; }
.field { margin-bottom: 16px; }
.field > label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .06em; margin-bottom: 8px; }
.field input:not([type=radio]):not([type=range]):not([type=checkbox]), .field textarea, .field select {
  width: 100%; border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-sm); padding: 11px 13px;
  outline: none; font-size: 14px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.field input[type=range] { width: 100%; accent-color: var(--accent); }
.hint { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.7; }
.kind { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--r-sm); background: var(--panel);
        border: 1px solid var(--line); margin-bottom: 7px; cursor: pointer; }
.kind:hover { border-color: var(--accent); }
.kind input { accent-color: var(--accent); }
.kind small { display: block; color: var(--muted); font-size: 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.7; margin-bottom: 16px; }
.check input { margin-top: 4px; accent-color: var(--accent); }
.check a, .settings a { color: var(--accent-2); }
.emojis { display: flex; flex-wrap: wrap; gap: 6px; }
.emojis button { width: 42px; height: 42px; border-radius: var(--r-sm); font-size: 20px; background: var(--panel); border: 1px solid var(--line); }
.emojis button.on { border-color: var(--accent); background: var(--soft); }
.actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.btn { padding: 11px 20px; border-radius: var(--r-sm); font-weight: 700; font-size: 14px;
       background: var(--accent); color: var(--accent-ink); white-space: nowrap;
       display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:hover { filter: brightness(1.07); }
.btn:disabled { opacity: .4; cursor: default; filter: none; }
.btn.sub { background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.btn.sub:hover { border-color: var(--accent); filter: none; }
.btn.danger { background: var(--danger); }
.btn.ok { background: var(--ok); color: #04261a; }
.btn.sm { padding: 7px 13px; font-size: 12.5px; }
.btn svg { width: 16px; height: 16px; }
.settings button, .settings a { display: flex; justify-content: space-between; align-items: center; width: 100%;
                                padding: 13px 4px; border-bottom: 1px solid var(--line); text-align: left;
                                color: inherit; text-decoration: none; font-size: 14px; }
.settings .danger { color: var(--danger); }
.blocked-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
.invite-out { margin-top: 18px; }
.invite-link { display: flex; align-items: center; gap: 8px; background: var(--panel); border-radius: var(--r-sm);
               padding: 11px 13px; border: 1px solid var(--line); }
.invite-link code { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--panel);
         border: 1px solid var(--line); color: var(--text); padding: 12px 20px; border-radius: 6px; font-size: 13.5px;
         z-index: 70; box-shadow: var(--shadow); }
.tip { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
       padding: 6px 11px; border-radius: 8px; font-size: 13px; font-weight: 700; pointer-events: none; white-space: nowrap; }
.badge { position: absolute; right: -4px; bottom: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
         background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }

/* 検索 */
.search-out { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.search-row { text-align: left; padding: 11px 13px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); }
.search-row:hover { border-color: var(--accent); }
.sr-top { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.sr-top small { color: var(--muted); font-size: 11px; }
.sr-body { font-size: 13px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 設定モーダル */
.set-nav { width: 226px; background: var(--side); padding: 18px 10px; overflow-y: auto; flex-shrink: 0; border-right: 1px solid var(--line); }
.set-nav h5 { font-size: 10.5px; color: var(--muted); font-weight: 700; letter-spacing: .06em; padding: 14px 10px 6px; }
.set-nav button { width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--r-sm); color: var(--muted);
                  font-size: 13.5px; font-weight: 600; }
.set-nav button:hover { background: var(--hover); color: var(--text); }
.set-nav button.on { background: var(--soft); color: var(--text); }
.set-body { flex: 1; padding: 30px 34px; overflow-y: auto; min-width: 0; }
.set-body h3 { font-size: 19px; font-weight: 700; margin-bottom: 20px; }
.set-body h4 { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .06em; margin: 26px 0 12px; }
.srow { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.srow .sl { flex: 1; min-width: 0; }
.srow .sl b { display: block; font-size: 14px; }
.srow .sl small { color: var(--muted); font-size: 12px; line-height: 1.6; }
button.sw { width: 46px; height: 27px; border-radius: 6px; background: var(--panel-2); position: relative; flex-shrink: 0;
      transition: background .15s; border: 1px solid var(--line); }
button.sw::after { content: ""; position: absolute; left: 3px; top: 2.5px; width: 20px; height: 20px; border-radius: 50%;
             background: var(--muted); transition: transform .15s, background .15s; }
button.sw.on { background: var(--accent); border-color: transparent; }
button.sw.on::after { transform: translateX(19px); background: #fff; }
.pick { display: flex; gap: 8px; flex-wrap: wrap; }
.pick button { padding: 10px 15px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line);
               font-size: 13px; font-weight: 700; color: var(--muted); }
.pick button.on { background: var(--soft); border-color: var(--accent); color: var(--text); }
.meter { height: 10px; border-radius: 5px; background: var(--panel-2); overflow: hidden; position: relative; }
.meter i { display: block; height: 100%; background: var(--ok); width: 0; transition: width .06s linear; }
.meter .thr { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--danger); }
.keycap { padding: 9px 15px; border-radius: var(--r-sm); background: var(--panel); border: 1.5px solid var(--line);
          font-weight: 700; font-size: 12.5px; min-width: 104px; text-align: center; }
.keycap.rec { border-color: var(--accent); color: var(--accent-2); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches button { width: 34px; height: 34px; border-radius: var(--r-sm); border: 2px solid transparent; }
.swatches button.on { border-color: var(--text); }

/* ===== スマホ ===== */
@media (max-width: 1000px) { .topic { display: none; } }
@media (max-width: 1100px) {
  .members { display: none; }
  .members.open { display: block; position: fixed; right: 0; top: 94px; bottom: 0; width: 252px; z-index: 16;
                  background: var(--solid); box-shadow: var(--shadow); }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .wordmark { display: none; }
  .side { position: fixed; left: 0; top: 46px; bottom: 0; z-index: 25; width: min(282px, 86vw);
          background: var(--solid); box-shadow: var(--shadow);
          transform: translateX(-110%); transition: transform .2s; }
  body.nav .side { transform: none; }
  /* メニューを開いている間は、後ろを暗くして、そこを押すと閉じられるようにする */
  .nav-scrim { display: block; position: fixed; left: 0; right: 0; top: 46px; bottom: 0; z-index: 24; background: rgba(0, 0, 0, .5);
               opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.nav .nav-scrim { opacity: 1; pointer-events: auto; }

  /* 指で押しやすい大きさにする */
  .ch, .person, .srow { min-height: 42px; }
  .ch { padding: 9px 10px; font-size: 14.5px; }
  .cat .fold { font-size: 11.5px; }
  /* 入力欄。文字が折り返して読みにくくならないようにする */
  .composer { gap: 6px; padding: 6px 10px max(10px, env(safe-area-inset-bottom)); }
  .composer textarea { font-size: 16px; padding: 10px 12px; }   /* iOSで勝手に拡大されないように */
  .composer .cmd-btn { width: 34px; height: 34px; flex-shrink: 0; }
  .composer .send { width: 38px; height: 38px; flex-shrink: 0; }
  .msg { padding: 2px 12px; gap: 10px; }
  .hover-acts { display: none; }            /* 長押しのメニューを使う */
  .btn { padding: 12px 20px; }
  .btn.sm { padding: 9px 14px; }
  .overlay { padding: 10px; }
  .modal { width: 100%; padding: 20px 18px; max-height: 88vh; }
  .modal.shop-modal, .modal.bot-modal, .modal.profile-modal,
  .modal.buy-modal, .modal.auth-modal { width: 100%; }
  .dgrid { grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); }
  .sgrid { grid-template-columns: 1fr; }
  .prof-edit { grid-template-columns: 1fr; }
  .set-body.prof-only { padding: 20px 16px; }
  .menu { display: grid; }
  /* 狭い画面では、見出しの飾りアイコンを出さない。
     左のメニューを開けばホームはそこにあるので、同じものが2つ出ないようにする */
  .main-head .ico { display: none; }
  .main-head { padding: 0 8px 0 8px; gap: 6px; }
  .main-head h2 { min-width: 0; flex: 1; font-size: 15px; }
  .main-head .grow { display: none; }
  .user-panel { gap: 2px; }
  .user-panel .who { padding: 3px 4px; }
  .main-head .ibtn { width: 32px; height: 32px; }
  .nest, .friends { padding: 16px 14px 28px; }
  .cards, .big-cards { grid-template-columns: 1fr; }
  .messages { padding: 14px 12px 4px; }
  .stack { max-width: 86%; }
  .composer { padding: 6px 12px max(12px, env(safe-area-inset-bottom)); }
  .reply-bar { margin: 0 12px 8px; }
  .bar { padding: 8px 10px max(8px, env(safe-area-inset-bottom)); gap: 8px; }
  .bar .where small, .bar .spk { display: none; }
  .stage { padding: 14px; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .modal.wide { flex-direction: column; height: 92vh; }
  .set-nav { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; overflow-x: visible; padding: 10px;
             border-right: none; border-bottom: 1px solid var(--line); max-height: 40vh; overflow-y: auto; }
  .set-nav h5 { display: none; }
  .set-nav button { width: auto; white-space: nowrap; padding: 9px 13px; font-size: 13px; }
  .set-body { padding: 20px 16px; }
  .pop, .pcard { width: min(320px, calc(100vw - 24px)); }
  .tpl-grid, .feat-grid { grid-template-columns: 1fr; }
  .pf-banner { height: 96px; }
  .pf-ava { margin-top: -30px; }
  .ava.xl { width: 64px; height: 64px; font-size: 24px; }
  .pf-card-body { padding: 0 14px 16px; }
  .pf-name-in { font-size: 17px; }
  /* 押しやすいように、一覧のボタンやリアクションの高さをそろえる */
  .ctx button { padding: 12px 10px; font-size: 14.5px; }
  .menu-pop button { padding: 12px 10px; }
  .pick button { padding: 12px 15px; }
  .pick-row .pick { padding: 13px; }
  .msg-btn { padding: 9px 15px; font-size: 13.5px; }
  .react { padding: 6px 11px; }
}

/* コミュニティのアイコン */
.sp-icon { width: 30px; height: 30px; border-radius: 10px; object-fit: cover; display: grid; place-items: center;
           font-size: 16px; background: var(--panel-2); flex-shrink: 0; }
.sp-icon.sm { width: 22px; height: 22px; border-radius: 7px; font-size: 13px; }
.sp-icon.lg { width: 46px; height: 46px; border-radius: 15px; font-size: 20px; }
.sp-icon.xl { width: 84px; height: 84px; border-radius: 28px; font-size: 38px; margin: 0 auto 6px; }
.srv .sp-icon.lg { border-radius: 15px; }
.srv-wrap.on .srv .sp-icon.lg { border-radius: 13px; }
.card .ct .em { overflow: hidden; }
.invite-icon { display: flex; justify-content: center; margin-bottom: 4px; }

/* アイコンを選ぶ部品 */
.icon-picker { display: flex; gap: 16px; align-items: flex-start; }
.icon-preview { width: 92px; height: 92px; border-radius: 28px; background: var(--panel-2); display: grid;
                place-items: center; font-size: 40px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--line); }
.icon-preview img { width: 100%; height: 100%; object-fit: cover; }
.ip-side { flex: 1; min-width: 0; }
.ip-side .hint { margin-top: 8px; }
.ip-emoji { margin-top: 12px; }
.ip-emoji summary { font-size: 12.5px; color: var(--muted); cursor: pointer; margin-bottom: 8px; }
.ip-emoji summary:hover { color: var(--text); }

/* 作成ウィザード */
.wizard { display: block; }
.wz-steps { display: flex; gap: 6px; margin-bottom: 16px; }
.wz-dot { width: 26px; height: 4px; border-radius: 2px; background: var(--line); }
.wz-dot.on { background: var(--accent); }
.wz-dot.done { background: var(--accent-2); }
.tpl.on { border-color: var(--accent); background: var(--soft); }
.wz-preview { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; }
.wz-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.wz-head .sp-icon.xl { margin: 0; }
.wz-head b { font-size: 17px; display: block; }
.wz-head small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.wz-head .wz-pub { color: var(--accent-2); font-weight: 700; }
.wz-rooms { display: flex; flex-wrap: wrap; gap: 6px; }
.wz-room { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 6px;
           background: var(--panel-2); font-size: 12.5px; color: var(--muted); }
.wz-room svg { width: 13px; height: 13px; }
@media (max-width: 560px) { .icon-picker { flex-direction: column; } }

/* 作成画面の詳しい設定 */
.adv { border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 8px; }
.adv summary { font-size: 12.5px; color: var(--muted); cursor: pointer; }
.adv summary:hover { color: var(--text); }
.tpl-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tpl-chip { padding: 8px 14px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line);
            font-size: 12.5px; font-weight: 700; color: var(--muted); }
.tpl-chip:hover { color: var(--text); }
.tpl-chip.on { background: var(--soft); border-color: var(--accent); color: var(--text); }

/* ホーム：コミュニティ一覧パネル */
.comm-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
              padding: 18px; margin-top: 26px; }
.cp-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cp-head b { font-size: 16px; }
.cp-head small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.cp-acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.cp-search { width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm);
             padding: 10px 13px; outline: none; margin-bottom: 12px; font-size: 13.5px; }
.cp-search:focus { border-color: var(--accent); }
.comm-list { display: flex; flex-direction: column; gap: 6px; }
.comm-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-md);
            border: 1px solid transparent; transition: background .12s, border-color .12s; }
.comm-row:hover { background: var(--hover); }
.comm-row.current { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--soft); }
.cr-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; text-align: left; padding: 4px; }
.cr-txt { min-width: 0; }
.cr-txt b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-txt small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.cr-meta span { display: flex; align-items: center; gap: 4px; }
.cr-meta svg { width: 12px; height: 12px; }
.cr-meta .on { color: var(--ok); font-weight: 700; }
.cr-side { display: flex; gap: 4px; flex-shrink: 0; }
.cr-side .round { width: 32px; height: 32px; }
.cr-side .round svg { width: 15px; height: 15px; }
.cr-side .round.on { background: var(--soft); color: var(--accent-2); }
.cr-side .round:disabled { opacity: .3; cursor: default; }
.sp-icon.xl2 { width: 52px; height: 52px; border-radius: 17px; font-size: 24px; }
.ch.pinned .ico::after { content: ""; position: absolute; }
@media (max-width: 760px) {
  .cr-meta { display: none; }
  .cp-acts { width: 100%; margin-left: 0; }
}

.voice-audio { display: none; }

/* 画像アイコン */
.ava.has-img { background: var(--panel-2); overflow: visible; }
.ava.has-img > img:not(.decor) { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.ava.has-img { position: relative; }

.voice-panel .vp-state.warn b { color: var(--idle); }
.voice-panel .vp-state.warn .dot-ok { background: var(--idle); }

/* メンバー・ロール・ログ・絵文字 */
.mem-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mem-txt { flex: 1; min-width: 0; }
.mem-txt b { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.mem-txt small { display: block; color: var(--muted); font-size: 11.5px; }
.mem-acts { display: flex; gap: 6px; flex-shrink: 0; }
.role-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.role-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; border: 1px solid; }
.role-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.log-list { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; }
.log-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm);
           background: var(--panel); font-size: 12.5px; flex-wrap: wrap; }
.log-row .lg-time { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.log-row .lg-act { color: var(--accent-2); }
.log-row .lg-detail { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.log-conf { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 14px; }
.log-conf .check { margin-bottom: 4px; font-size: 13px; }
.emoji-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.emoji-item { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--r-sm); background: var(--panel); }
.emoji-item img { width: 28px; height: 28px; object-fit: contain; }
.emoji-item code { flex: 1; min-width: 0; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.emoji-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.emoji-add input[type=text], .emoji-add input:not([type=file]) { flex: 1; min-width: 140px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 12px; outline: none; }
.emoji-preview { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--panel-2);
                 display: grid; place-items: center; overflow: hidden; }
.emoji-preview img { width: 100%; height: 100%; object-fit: contain; }
.emoji-img { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; }
@media (max-width: 760px) { .log-conf { grid-template-columns: 1fr; } }

/* 並び替え */
.ch.dragging { opacity: .4; }
.ch.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.ch.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.order-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.order-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm);
             background: var(--panel); border: 1px solid var(--line); }
.order-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-row .ico { color: var(--muted); display: grid; place-items: center; }
.order-row .round { width: 32px; height: 32px; }
.order-row .round:disabled { opacity: .3; cursor: default; }

/* ログイン画面 */
.auth-logo { width: 62px; height: 62px; border-radius: 12px; margin: 0 auto 14px; display: grid; place-items: center;
             background: var(--accent); color: var(--accent-ink);
             font-size: 26px; font-weight: 700; object-fit: cover; }
img.auth-logo { background: none; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; margin: 16px 0; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-switch { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.auth-switch button { color: var(--accent-2); font-size: 13px; font-weight: 700; }
.auth-switch button:hover { text-decoration: underline; }

.focus-card .ring > div svg { width: 26px; height: 26px; color: var(--accent-2); }
.ctx button svg, .menu-pop button svg { flex-shrink: 0; }

.kind-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--panel-2); display: grid;
            place-items: center; color: var(--accent-2); flex-shrink: 0; }
.kind-ico svg { width: 16px; height: 16px; }
.round svg { width: 17px; height: 17px; }
.fcheck { width: 18px; display: grid; place-items: center; }
.stage-empty .big svg { width: 30px; height: 30px; }

.disc-meta i { font-style: normal; }
.disc-meta .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: block; }

/* パスワード欄：目のボタンで表示を切り替える */
.pass-wrap { position: relative; display: block; }
.pass-wrap input { width: 100%; padding-right: 44px; }
.pass-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 32px; height: 32px;
            display: grid; place-items: center; border: 0; background: none; color: var(--muted);
            border-radius: 8px; cursor: pointer; }
.pass-eye:hover { color: var(--text); background: var(--panel-2); }
.pass-eye svg { width: 17px; height: 17px; }

/* ログインできないときの案内 */
.recover { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--panel-2);
           border: 1px solid var(--line); display: grid; gap: 8px; }
.recover-t { margin: 0; font-size: 13px; font-weight: 700; color: var(--text); }
.recover .hint { margin: 0; }
.recover .btn { width: 100%; }

/* 通知を切ったコミュニティ */
.srv.muted { opacity: .45; }
.srv.muted:hover { opacity: .8; }

/* ユーザー名（@で使うほう） */
.uname-row { display: flex; align-items: center; gap: 0; }
.uname-row .at { width: 30px; height: 40px; display: grid; place-items: center; font-weight: 700;
                 color: var(--muted); background: var(--panel-2); border: 1px solid var(--line);
                 border-right: 0; border-radius: 10px 0 0 10px; }
.uname-row input { flex: 1; border-radius: 0 10px 10px 0; }
.uname-note { font-size: 12px; margin-top: 5px; color: var(--muted); min-height: 16px; }
.uname-note.good { color: var(--ok); }
.uname-note.bad { color: var(--danger, #ff6b6b); }

/* プロフィールの @ユーザー名 */
.pcard .uname { font-size: 13px; color: var(--muted); margin-top: -2px; margin-bottom: 4px; }

/* 生年月日 */
.bday-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; }
.bday-row select { width: 100%; }

/* ===== ログイン画面：メールとQRを並べる ===== */
.auth-split { display: grid; grid-template-columns: 1fr 250px; gap: 26px; align-items: start; }
.auth-main { min-width: 0; }
.qr-panel { border-left: 1px solid var(--line); padding-left: 26px; text-align: center; }
.qr-panel h3 { margin: 0 0 6px; font-size: 15px; }
.qr-lead { margin: 0 0 14px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.qr-img { width: 168px; height: 168px; margin: 0 auto; border-radius: 14px; background: #fff;
          padding: 8px; display: grid; place-items: center; transition: filter .2s, opacity .2s; }
.qr-img img, .qr-img svg { width: 100%; height: 100%; display: block; }
.qr-img.stale { filter: blur(4px); opacity: .5; }
.qr-state { margin: 12px 0 8px; font-size: 12px; color: var(--muted); }
@media (max-width: 720px) {
  .auth-split { grid-template-columns: 1fr; gap: 20px; }
  .qr-panel { border-left: 0; border-top: 1px solid var(--line); padding: 20px 0 0; }
}

/* ログイン画面だけは、QRの分すこし広くする */
.modal.auth-modal { width: min(720px, 100%); }
@media (max-width: 720px) { .modal.auth-modal { width: min(470px, 100%); } }

/* 2択（公開／プライベートなど） */
.pick-row { display: grid; gap: 8px; }
.pick { display: flex; align-items: center; gap: 11px; text-align: left; padding: 11px 13px;
        border-radius: 12px; border: 1px solid var(--line); background: var(--panel); cursor: pointer;
        color: var(--text); }
.pick:hover { background: var(--panel-2); }
.pick.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pick-ico { width: 32px; height: 32px; border-radius: 10px; background: var(--panel-2); display: grid;
            place-items: center; color: var(--accent-2); flex-shrink: 0; }
.pick.on .pick-ico { background: var(--accent); color: var(--accent-ink); }
.pick b { display: block; font-size: 13.5px; }
.pick small { color: var(--muted); font-size: 11.5px; }

/* 選ぶボタンが1つだけのときは中央に置く */
.auth-switch:has(> button:only-child) { justify-content: center; }

/* 自分のメニューのオンライン状態 */
.menu-pop .pres-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin: 0 4px; }
.menu-pop .pres-dot.online { background: var(--ok); }
.menu-pop .pres-dot.idle { background: #f5a623; }
.menu-pop .pres-dot.dnd { background: #f04452; }
.menu-pop .pres-dot.invisible { background: var(--muted); }
.menu-pop .menu-tick { margin-left: auto; color: var(--accent-2); display: grid; place-items: center; }
.menu-pop .menu-tick svg { width: 14px; height: 14px; }

/* ===== デコレーション ===== */
/* デコレーションは、アイコンそのものに重ねる。
   左上を中心に合わせてから、自分の半分だけ引き戻して真ん中にそろえる */
.ava { overflow: visible; }
.ava > .dl { position: absolute; left: 50%; top: 50%;
  width: calc(var(--dl-size, 148%) * var(--dl-fit, 1));
  height: calc(var(--dl-size, 148%) * var(--dl-fit, 1));
  margin-left: calc(var(--dl-size, 148%) * var(--dl-fit, 1) / -2);
  margin-top: calc(var(--dl-size, 148%) * var(--dl-fit, 1) / -2);
  pointer-events: none; z-index: 3; overflow: visible; object-fit: contain; }
/* 絵の内側の穴（絵の54%）に、アイコンがちょうど収まる。
   z-index を負にすると、背景のある場所で枠ごと裏に隠れてしまう */
.ava > .dl-frame { z-index: 1; --dl-size: 185%; }
/* 小さいアイコンでは、周りの文字にかぶらないよう控えめにする */
.ava.xs > .dl { --dl-size: 124%; }
.ava.xs > .dl-frame { --dl-size: 185%; }
.decor { display: block; width: 100%; height: 100%; object-fit: contain;
  user-select: none; -webkit-user-drag: none; }

/* ===== ショップ ===== */
.modal.shop-modal { width: min(960px, 100%); }
.sh-top { display: flex; align-items: flex-start; gap: 12px; }
.sh-top h2 { margin-bottom: 2px; }
.sh-badge { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 3px 9px;
            border-radius: 5px; background: var(--accent); color: var(--accent-ink); }
.shop-body { max-height: min(58vh, 540px); overflow-y: auto; margin: 14px 0 4px; padding-right: 4px; }
.shop-group { margin-bottom: 22px; }
.shop-group h4 { font-size: 11.5px; color: var(--muted); margin-bottom: 9px;
                 text-transform: none; letter-spacing: .04em; }

.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 9px; }
.dgrid.small { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

/* 商品のカード。暗い台紙に載せて、光を目立たせる */
.dtile { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 0 9px;
         text-align: center; cursor: pointer; overflow: hidden; position: relative;
         background: linear-gradient(180deg, #0d0e1a, #14162a);
         transition: border-color .14s, transform .14s; }
.dtile:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.dtile.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.dtile:not(.owned):not(.none) .dt-art { opacity: .78; }
.dtile:not(.owned):not(.none)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35)); }
.dt-art { height: 88px; display: grid; place-items: center; margin-bottom: 7px;
          overflow: hidden;
          background: radial-gradient(60% 60% at 50% 45%, rgba(224,122,60,.16), transparent 70%); }
.dt-art > svg { width: 58px; height: 58px; overflow: visible; }
.dt-art > img.decor { width: 100%; height: 100%; max-height: 62px; padding: 0 6px; }
.dt-art.multi { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.dt-art.multi svg { width: 30px; height: 30px; }
.dtile.none .dt-art { background: none; color: var(--muted); }
.dt-name { font-size: 12px; font-weight: 700; padding: 0 6px; }
.dt-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* セット */
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.scard { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; cursor: pointer;
         background: linear-gradient(180deg, #0d0e1a, #15172c); transition: border-color .14s, transform .14s; }
.scard:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.st-strip { display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 96px; padding: 8px 12px; overflow: hidden;
            padding: 0 10px; background: radial-gradient(70% 80% at 50% 40%, rgba(224,122,60,.2), transparent 72%); }
.st-strip svg { width: 40px; height: 40px; overflow: visible; flex-shrink: 0; }
.st-strip img.decor { width: auto; height: auto; max-height: 72px; max-width: 36%;
  object-fit: contain; flex: 0 1 auto; }
.st-foot { display: flex; align-items: center; gap: 10px; padding: 11px 13px;
           border-top: 1px solid var(--line); }
.st-foot b { display: block; font-size: 13.5px; }
.st-foot small { color: var(--muted); font-size: 11.5px; }
.st-price { margin-left: auto; text-align: right; white-space: nowrap; }
.st-price s { color: var(--muted); font-size: 11.5px; margin-right: 6px; }
.st-price b { font-size: 14px; }
.st-foot .tag { font-size: 11px; color: var(--ok); font-weight: 700; }

/* 購入の画面 */
.modal.buy-modal { width: min(760px, 100%); padding: 0; overflow: hidden; }
.buy { display: grid; grid-template-columns: 300px 1fr; }
.buy-stage { background: radial-gradient(80% 70% at 50% 40%, rgba(224,122,60,.28), #0b0c16 72%);
             display: grid; place-items: center; align-content: center; gap: 16px; padding: 30px 20px; }
.buy-caption { font-size: 11.5px; color: var(--muted); }
.demo { position: relative; display: grid; place-items: center; gap: 12px; }
.demo-glow { position: absolute; width: 150px; height: 150px; border-radius: 50%;
             background: radial-gradient(circle, rgba(224,122,60,.35), transparent 65%); }
.demo .ava { position: relative; z-index: 1; }
.demo-name { font-size: 13px; font-weight: 700; position: relative; z-index: 1; }
.buy-side { padding: 26px 26px 22px; position: relative; }
.buy-kind { font-size: 11px; color: var(--accent-2); font-weight: 700; margin-bottom: 4px; }
.buy-side h2 { font-size: 22px; margin-bottom: 8px; }
.buy-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px;
             margin: 14px 0; }
.bi { text-align: center; border: 1px solid var(--line); border-radius: 6px; padding: 5px 2px;
      background: #0d0e1a; }
.bi.owned { border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
.bi-art { height: 34px; display: grid; place-items: center; }
.bi-art svg { width: 28px; height: 28px; overflow: visible; }
.bi small { font-size: 9.5px; color: var(--muted); display: block; }
.buy-price { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 14px; }
.buy-price s { color: var(--muted); font-size: 13px; }
.buy-price b { font-size: 26px; }
.buy-price .off { font-size: 11px; font-weight: 700; color: var(--ok);
                  border: 1px solid var(--ok); border-radius: 4px; padding: 1px 6px; }
.buy-acts { display: grid; gap: 8px; }
.buy-acts .btn { width: 100%; justify-content: center; }
.buy-owned { display: flex; align-items: center; justify-content: center; gap: 7px;
             color: var(--ok); font-weight: 700; font-size: 13px; padding: 10px; }
.buy-close { position: absolute; top: 14px; right: 14px; color: var(--muted); }
.buy-close:hover { color: var(--text); }
@media (max-width: 720px) {
  .buy { grid-template-columns: 1fr; }
  .buy-stage { padding: 24px; }
}

.slot-row { margin-bottom: 18px; }
.slot-row h4 { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.gift-list { max-height: 240px; overflow-y: auto; display: grid; gap: 4px; margin: 10px 0; }
.gift-list .person.on { background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* ===== プロフィール編集 ===== */
/* 右の列は、スクロールしても貼り付いたままにする */
.prof-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 30px; align-items: start; }
.pe-left { min-width: 0; }
.pe-sticky { position: sticky; top: 0; padding-bottom: 8px; }
.pe-sticky h4 { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.pf-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.pf-shot { border: 1px solid var(--line); background: var(--panel-2); border-radius: var(--r-sm);
           overflow: hidden; display: grid; place-items: center; flex-shrink: 0; color: var(--muted); }
.pf-shot.sq { width: 76px; height: 76px; }
.pf-shot.wide { width: 152px; height: 62px; }
.pf-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-side { min-width: 0; }
.pf-side b { font-size: 13.5px; }
.pf-btns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pf-line { display: flex; align-items: center; gap: 10px; }
.pf-line code { font-size: 14px; font-weight: 700; }
.pf-slot { margin-bottom: 16px; }
.pf-slot h5 { font-size: 11.5px; color: var(--muted); margin-bottom: 7px; }
.pf-decor { margin-bottom: 8px; }

/* 出来上がりの見本 */
.pv-card { background: var(--solid); border: 1px solid var(--line); border-radius: var(--r-md);
           overflow: hidden; }
.pv-banner { height: 84px; position: relative; }
.pv-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-body { padding: 0 16px 16px; }
.pv-ava { margin-top: -30px; margin-bottom: 8px; }
.pv-name { font-size: 17px; font-weight: 700; }
.pv-user { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.pv-box { background: var(--panel-2); border-radius: var(--r-sm); padding: 9px 11px; margin-top: 10px;
          font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; }
.pv-box h5 { font-size: 10.5px; color: var(--muted); margin-bottom: 3px; }
.pcard .banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 860px) {
  .prof-edit { grid-template-columns: 1fr; }
  .pe-sticky { position: static; }
  .pv-card { max-width: 300px; }
}

/* ===== 発言のフレーム ===== */
/* 絵の四隅をそのまま残して、辺だけを伸ばす（9分割） */
.cf-line { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  border-style: solid; border-image-repeat: stretch stretch; }
.cf-cf01 { border-width: 18px 34px;
  border-image-source: url(/static/decor/cf01.webp);
  border-image-slice: 250 300 250 300;
  border-image-width: 18px 34px;
  border-image-outset: 8px 12px; }
.cf-cf02 { border-width: 16px 36px;
  border-image-source: url(/static/decor/cf02.webp);
  border-image-slice: 175 260 175 260;
  border-image-width: 16px 36px;
  border-image-outset: 6px 14px; }

.msg.has-cf { position: relative; padding: 10px 26px 10px 62px; margin: 8px 12px;
              border-radius: 12px; }
/* 重ねても、枠が動いたり色が変わったりしない */
.msg.has-cf:hover { background: none; }
.msg.has-cf .hover-acts { top: -18px; right: 6px; z-index: 4; }
/* ここで * を使うと、浮かせてある操作ボタンまで流れに戻ってしまい、
   重ねたときに枠が横に伸びる。中身だけを指す */
.msg.has-cf > .gutter, .msg.has-cf > .body { position: relative; z-index: 2; }

/* 名前の横のバッジ */
.name-badge { width: 15px; height: 15px; overflow: visible; display: inline-block;
              vertical-align: -2px; margin-left: 5px; }

/* ショップでの見本 */
.cf-demo { position: relative; width: 168px; height: 52px; display: grid; place-items: center; }
.cf-demo.big { width: 280px; height: 84px; }
.cf-demo .cf-line { border-width: 16px 22px; }
.cf-demo .cf-cf01 { border-image-width: 16px 22px; border-image-outset: 4px 6px; }
.cf-demo .cf-cf02 { border-image-width: 14px 24px; border-image-outset: 4px 8px; }
.cf-demo.big .cf-line { border-width: 26px 38px; }
.cf-demo.big .cf-cf01 { border-image-width: 26px 38px; border-image-outset: 8px 12px; }
.cf-demo.big .cf-cf02 { border-image-width: 22px 40px; border-image-outset: 6px 14px; }
.cf-demo-txt { font-size: 11.5px; color: var(--muted); position: relative; z-index: 2; }
.cf-demo.big .cf-demo-txt { font-size: 13.5px; }
.dt-art.cf { height: 76px; }

/* ===== プロフィールだけの画面 ===== */
.modal.profile-modal { width: min(1200px, 100%); padding: 0; position: relative; overflow: hidden; }
.set-body.prof-only { padding: 26px 28px 24px; max-height: min(82vh, 760px); overflow-y: auto; }
.pe-close { position: absolute; top: 14px; right: 14px; z-index: 5; color: var(--muted);
            width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; }
.pe-close:hover { color: var(--text); background: var(--hover); }
.pf-dhead { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0 10px; }
.pf-dhead h4 { margin: 0; }
.pf-dhead .hint { margin: 2px 0 0; }
.pf-dhead .btn { margin-left: auto; flex-shrink: 0; }

/* ===== BOT開発者画面 ===== */
.modal.bot-modal { width: min(940px, 100%); padding: 0; display: flex;
                   height: min(680px, 90vh); overflow: hidden; }
.bd-nav { width: 224px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--line);
          padding: 16px 10px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.bd-nav h5 { font-size: 10.5px; color: var(--muted); padding: 0 8px 6px; letter-spacing: .04em; }
.bd-nav > button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px;
                   border-radius: var(--r-sm); color: var(--muted); font-size: 13.5px;
                   text-align: left; font-weight: 700; }
.bd-nav > button:hover { background: var(--hover); color: var(--text); }
.bd-nav > button.on { background: var(--soft); color: var(--text); }
.bd-nav .bd-new { margin-top: 8px; color: var(--accent-2); }
.bd-navfoot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.bd-navfoot button { font-size: 12.5px; color: var(--muted); padding: 7px 9px; text-align: left;
                     border-radius: var(--r-sm); }
.bd-navfoot button:hover { background: var(--hover); color: var(--text); }

.bd-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 22px 24px; overflow: hidden; }
.bd-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.bd-head h3 { font-size: 17px; }
.bd-head small { color: var(--muted); font-size: 12px; }
.bd-head .btn { margin-left: auto; }
.bd-pane { flex: 1; min-height: 0; overflow-y: auto; padding-top: 16px; }
.bd-empty { display: grid; place-items: center; align-content: center; gap: 12px; height: 100%; text-align: center; }

.tok-box { background: #0b0c14; border: 1px solid var(--line); border-radius: var(--r-sm);
           padding: 13px 15px; margin: 12px 0; overflow-x: auto; }
.tok-box code { font-size: 12.5px; word-break: break-all; }

.cmd-rows { display: grid; gap: 7px; margin: 12px 0; }
.cmd-row { display: flex; align-items: center; gap: 7px; }
.cmd-row .slash { color: var(--muted); font-weight: 700; }
.cmd-row input:first-of-type { width: 150px; flex-shrink: 0; }
.cmd-row input { flex: 1; }

.inst-rows { display: grid; gap: 6px; margin-top: 12px; }
.inst-rows .sl { display: flex; align-items: center; gap: 9px; }
.inst-rows .sl small { color: var(--muted); font-size: 11.5px; }

.bd-pane pre { background: #0b0c14; border: 1px solid var(--line); border-radius: var(--r-sm);
               padding: 14px 16px; overflow-x: auto; font-size: 12.5px; line-height: 1.7; margin: 12px 0; }
.bd-pane ol.steps li { font-size: 13px; }
.bd-pane ol.steps code { background: var(--panel-2); border-radius: 4px; padding: 1px 6px; font-size: 12px; }

@media (max-width: 720px) {
  .modal.bot-modal { flex-direction: column; height: 92vh; }
  .bd-nav { width: 100%; flex-direction: row; overflow-x: auto; border-right: 0;
            border-bottom: 1px solid var(--line); }
  .bd-navfoot { display: none; }
}

/* 手順のリスト */
.bd-pane ol.steps { counter-reset: st; list-style: none; display: grid; gap: 8px;
                    margin: 14px 0; padding: 0; }
.bd-pane ol.steps li { counter-increment: st; position: relative; padding: 10px 12px 10px 42px;
                       background: var(--panel); border: 1px solid var(--line);
                       border-radius: var(--r-sm); line-height: 1.8; }
.bd-pane ol.steps li::before { content: counter(st); position: absolute; left: 12px; top: 11px;
                               width: 20px; height: 20px; border-radius: 5px;
                               background: var(--accent); color: var(--accent-ink); display: grid;
                               place-items: center; font-size: 11.5px; font-weight: 700; }
.bd-pane ol.steps a { color: var(--accent-2); }

/* ===== プロフィール編集：アイコン／バナーとおすすめ ===== */
.pf-row.col { display: block; }
.pf-shotline { display: flex; gap: 14px; align-items: flex-start; }
.pf-shotwrap { position: relative; padding-top: 20px; flex-shrink: 0; }
.pf-edit { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 5px;
           font-size: 11.5px; font-weight: 700; color: var(--accent-2); padding: 2px 0; }
.pf-edit:hover { color: var(--text); }
.pf-edit svg { width: 13px; height: 13px; }
.pf-shot.sq .ava { width: 100%; height: 100%; }
.pf-shot svg { width: 100%; height: 100%; display: block; }
.pf-reco { margin: 12px 0 20px; }
.pf-reco-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.pf-reco-h span { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.pf-reco-h button { margin-left: auto; font-size: 11.5px; color: var(--accent-2); font-weight: 700; }
.pf-reco-h button:hover { text-decoration: underline; }
.dgrid.mini { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 7px; }
/* おすすめ欄は枠が小さい。いちばん大きな枠（約2.1倍）でも
   切れないよう、置き場所を広げ、見本の顔を小さくする */
.dgrid.mini .dt-art { height: 68px; }
.dgrid.mini .dt-art > svg { width: 42px; height: 42px; }
.dgrid.mini .dt-art > img.decor { max-height: 46px; }
.dgrid.mini .dt-face { width: 28px; height: 28px; }
/* 板は横長なので、置き場所も板の形に合わせる。
   枠と同じ高さにすると、上下に大きな空白ができてしまう */
.dgrid.mini .dt-art.cf { height: auto; padding: 0; }
.dgrid.mini .dt-plate { padding: 0; }
.dgrid.mini .dt-plate > .dt-face { width: 24%; height: auto; }
.dgrid.mini .dt-bar { width: 36%; height: 5px; }
.dgrid.mini .dt-name { font-size: 11px; }
.dgrid.mini .dt-sub { font-size: 10px; }

/* 背景の見本 */
.bn-demo { width: 100%; height: 100%; border-radius: 6px; overflow: hidden; display: block; }
.dt-art .bn-demo { width: 92%; height: 62px; }
.bn-demo.big { width: 260px; height: 92px; border-radius: 10px; }
.bn-demo svg { width: 100%; height: 100%; display: block; }
.pv-banner svg { width: 100%; height: 100%; display: block; }

/* ===== 商品の見せ方を良くする ===== */
.dtile { position: relative; }
.dtile::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(179,155,255,.35), transparent 62%);
  opacity: 0; transition: opacity .18s;
}
.dtile:hover::before { opacity: 1; }
.dtile:hover { border-color: var(--accent-2);
               box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 55%, transparent),
                           0 8px 26px rgba(224, 122, 60, .28); }
.dtile.on { box-shadow: 0 0 0 1px var(--accent), 0 6px 22px rgba(224, 122, 60, .32); }
.dtile .dt-art > svg, .dtile .dt-art > img.decor { transition: transform .25s ease; }
.dtile:hover .dt-art > svg, .dtile:hover .dt-art > img.decor { transform: scale(1.08); }

/* ===== デコレーションを動かす ===== */
/* transform ではなく rotate / scale / translate を動かす。
   transform を使うと、置き場所の指定（王冠を上に出すなど）が消えてしまう */
@keyframes decor-spin { to { rotate: 360deg; } }
@keyframes decor-twinkle { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes decor-flicker { 0%,100% { scale: 1 1; } 45% { scale: 1 1.06; } }
@keyframes decor-pulse { 0%,100% { scale: 1; } 50% { scale: 1.05; } }

/* 輪っか・軌道はゆっくり回す */
.decor-d002, .decor-d012, .decor-d018, .decor-d069, .decor-d070, .decor-d071,
.decor-d072, .decor-d074, .decor-d118, .decor-d119, .decor-d122
  { animation: decor-spin 24s linear infinite; }
.decor-d018, .decor-d072 { animation-duration: 14s; }

/* 星・粒はまたたく */
.decor-d006, .decor-d008, .decor-d017, .decor-d025, .decor-d026, .decor-d027,
.decor-d034, .decor-d035, .decor-d044, .decor-d045, .decor-d130, .decor-d155,
.decor-d156 { animation: decor-twinkle 2.8s ease-in-out infinite; }

/* 炎は揺れる */
.decor-d020, .decor-d021, .decor-d022, .decor-d023, .decor-d030, .decor-d031,
.decor-d033, .decor-d036, .decor-d042, .decor-d062, .decor-d141
  { transform-origin: 50% 100%; animation: decor-flicker 1.8s ease-in-out infinite; }

/* 王冠・宝石はゆっくり脈打つ */
.decor-d088, .decor-d089, .decor-d139
  { animation: decor-pulse 3.4s ease-in-out infinite; }

/* バッジはやわらかく光る */
.name-badge > g { transform-origin: 50% 50%; animation: decor-pulse 3.4s ease-in-out infinite; }

/* 動きを減らす設定のときは止める */
:root[data-motion="reduced"] .decor, :root[data-motion="reduced"] .name-badge > g
  { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .decor, .name-badge > g { animation: none !important; }
}

/* 変更を確定するところ */
.pe-save { margin-top: 12px; background: var(--panel); border: 1px solid var(--accent);
           border-radius: var(--r-sm); padding: 12px 13px; display: grid; gap: 9px; }
.pe-save b { font-size: 12.5px; }
.pe-save-btns { display: flex; gap: 7px; }
.pe-save-btns .btn { flex: 1; justify-content: center; padding: 9px 12px; font-size: 13px; }

/* BOTの画面は、画面いっぱいに開く */
.modal.bot-modal.full { width: min(1180px, calc(100vw - 48px));
                        height: min(820px, calc(100dvh - 48px)); }
@media (max-width: 760px) {
  .modal.bot-modal.full { width: calc(100vw - 16px); height: calc(100dvh - 16px); }
}

/* ===== BOT開発：ホーム（一覧） ===== */
.bd-nav .bd-top { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px;
                  border-radius: var(--r-sm); color: var(--muted); font-weight: 700;
                  font-size: 13.5px; margin-bottom: 10px; }
.bd-nav .bd-top:hover { background: var(--hover); color: var(--text); }
.bd-nav .bd-top.on { background: var(--soft); color: var(--text); }
.bd-nav .bd-top svg { width: 16px; height: 16px; }

.bd-hero { margin-bottom: 20px; }
.bd-hero h2 { font-size: 21px; margin-bottom: 4px; }
.bd-hero .desc { margin: 0; }

.bcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.bcard { display: flex; align-items: flex-start; gap: 13px; padding: 16px; text-align: left;
         background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
         transition: border-color .14s, background .14s; }
.bcard:hover { border-color: var(--accent); background: var(--panel-2); }
.bcard-body { min-width: 0; flex: 1; }
.bcard-body b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.bcard-body small { color: var(--muted); font-size: 12px; display: block; overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }
.bcard-meta { display: flex; gap: 12px; margin-top: 9px; flex-wrap: wrap; }
.bcard-meta span { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
.bcard-meta svg { width: 13px; height: 13px; }
.bcard.add { border-style: dashed; }
.bcard-plus { width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--panel-2);
              display: grid; place-items: center; color: var(--accent-2); flex-shrink: 0; }

.bd-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 10px; margin-top: 22px; }
.bd-links button { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left;
                   background: var(--panel); border: 1px solid var(--line);
                   border-radius: var(--r-sm); color: var(--text); }
.bd-links button:hover { border-color: var(--accent); }
.bd-links svg { width: 20px; height: 20px; color: var(--accent-2); flex-shrink: 0; }
.bd-links b { display: block; font-size: 13.5px; }
.bd-links small { color: var(--muted); font-size: 11.5px; }

/* BOTごとの画面 */
.bd-back { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px;
           font-weight: 700; margin-bottom: 14px; }
.bd-back:hover { color: var(--text); }
.bd-back svg { width: 14px; height: 14px; transform: rotate(90deg); }
.bd-title { min-width: 0; }
.bd-id { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted);
         background: var(--panel-2); border-radius: 5px; padding: 2px 8px; margin-top: 3px; }
.bd-id:hover { color: var(--text); }
.bd-id svg { width: 12px; height: 12px; }

.warn-box { display: flex; gap: 11px; align-items: flex-start; background: var(--panel-2);
            border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
            border-radius: var(--r-sm); padding: 13px 15px; margin-bottom: 18px; }
.warn-box svg { width: 18px; height: 18px; color: var(--danger); flex-shrink: 0; margin-top: 1px; }
.warn-box b { display: block; font-size: 13px; margin-bottom: 2px; }
.warn-box small { color: var(--muted); font-size: 12px; line-height: 1.7; }

/* ── ショップのページ ───────────────────────────── */
.modal.bot-modal.full.shop-full { width: min(1240px, calc(100vw - 48px)); }
.shop-right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shop-bar { display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid var(--line); }
.shop-searchwrap { position: relative; flex: 1; max-width: 420px; display: flex; align-items: center; }
.shop-searchwrap svg { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--muted); }
.shop-search { width: 100%; padding: 8px 10px 8px 32px; font-size: 13px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--text); }
.shop-search:focus { border-color: var(--accent); outline: none; }
.shop-search::-webkit-search-cancel-button { filter: invert(.6); }
.shop-bar .sh-badge { margin-left: auto; }
.shop-close { margin-left: auto; padding: 6px; color: var(--muted); border-radius: var(--r-sm); }
.shop-bar .sh-badge + .shop-close { margin-left: 0; }
.shop-close:hover { background: var(--hover); color: var(--text); }
.shop-close svg { width: 17px; height: 17px; }
.shop-page { flex: 1; overflow-y: auto; padding: 22px 24px 30px; }
.shop-sec { margin-bottom: 26px; }
.ss-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 11px; }
.ss-head h3 { font-size: 14.5px; }
.ss-more { margin-left: auto; display: flex; align-items: center; gap: 3px;
  font-size: 12px; color: var(--muted); padding: 4px 6px; border-radius: var(--r-sm); }
.ss-more:hover { color: var(--text); background: var(--hover); }
.ss-more svg { width: 13px; height: 13px; transform: rotate(-90deg); }
.sn-num { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--muted);
  background: var(--panel-2); border-radius: 8px; padding: 1px 6px; }
.bd-nav > button.on .sn-num { color: var(--text); }
.shop-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 11px; }
.sc-card { text-align: left; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel); overflow: hidden; transition: border-color .15s, transform .15s; }
.sc-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.sc-strip { display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 78px; background: var(--panel-2); }
.sc-strip svg { width: 42px; height: 42px; }
.sc-foot { padding: 10px 12px; }
.sc-foot b { display: block; font-size: 13.5px; }
.sc-foot small { color: var(--muted); font-size: 11.5px; }
.shop-page .shop-group { margin-bottom: 22px; }
@media (max-width: 760px) {
  .shop-bar { padding: 10px 12px; }
  .shop-page { padding: 16px 12px 24px; }
  .shop-cats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
.bd-nav h5 { margin-top: 14px; }
.bd-nav > .bd-top + button + button + h5 { margin-top: 16px; }

@media (max-width: 760px) {
  .bd-nav > button, .bd-nav > .bd-top { width: auto; flex-shrink: 0; white-space: nowrap;
    padding: 8px 11px; }
  .bd-nav h5 { display: none; }
  .bd-nav .sn-num { margin-left: 4px; }
  .shop-full .bd-nav { align-items: center; padding: 6px 8px; }
  .shop-full .shop-bar .sh-badge { display: none; }
}

/* ── ショップをページとして開いたとき ───────────────────────────── */
.ch .num { font-size: 10.5px; color: var(--muted); background: var(--panel-2);
  border-radius: 9px; padding: 1px 6px; flex-shrink: 0; }
.ch.on .num { color: var(--text); }
.nest.shop-host { padding-top: 0; }
.nest.shop-host > .shop-bar { position: sticky; top: 0; z-index: 3;
  margin: 0 -26px 18px; padding: 14px 26px; background: var(--bg);
  border-bottom: 1px solid var(--line); }
.shop-page.in-home { overflow: visible; padding: 0; }
.shop-page .ss-head h3 { font-size: 14.5px; font-weight: 700; color: var(--text);
  letter-spacing: 0; margin: 0; }
.shop-page .ss-head h3::after { content: none; }
.shop-page .shop-group h4 { font-size: 11.5px; color: var(--muted); margin-bottom: 9px;
  letter-spacing: .04em; }
@media (max-width: 760px) {
  .nest.shop-host > .shop-bar { margin: 0 -14px 14px; padding: 10px 14px; }
}

/* ── プロフィール編集：左が見た目、右が中身 ───────────────────────────── */
.pe-right { min-width: 0; display: flex; flex-direction: column; }
.pe-right > h3 { margin-bottom: 14px; }
.pe-right > h4 { font-size: 12px; color: var(--muted); margin: 20px 0 10px; }
.pe-right .field { margin-bottom: 16px; }
.pe-right .pv-card { margin-bottom: 4px; }
.prof-edit .pe-save { position: sticky; bottom: 0; z-index: 2; }
.pe-left > h3 { margin-bottom: 14px; }
@media (max-width: 860px) {
  .prof-edit { grid-template-columns: 1fr; }
}

/* ── プロフィール編集：左＝見た目のパーツ／中央＝本体／右＝デコの引き出し ── */
.prof-edit { display: grid; grid-template-columns: 224px minmax(0, 1fr) minmax(0, 312px);
  gap: 22px; align-items: start; }
/* 飾りを止めている間は、真ん中のプロフィールだけを広く出す */
.prof-edit.no-decor { grid-template-columns: minmax(0, 560px); justify-content: center; }
.pf-parts h3 { margin-bottom: 14px; }
.pf-parts-h { font-size: 11.5px; color: var(--muted); font-weight: 700;
  letter-spacing: .04em; margin: 18px 0 8px; }
.pf-tiles { display: flex; flex-wrap: wrap; gap: 9px; }
.pt { position: relative; width: 74px; cursor: pointer; }
.pt.wide { width: 100%; }
.pt-art { height: 74px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--panel-2); display: grid; place-items: center; overflow: hidden;
  transition: border-color .15s; }
.pt.wide .pt-art { height: 62px; }
.pt-art img { width: 100%; height: 100%; object-fit: cover; }
.pt-art > svg { width: 42px; height: 42px; }
.pt:hover .pt-art { border-color: var(--accent); }
.pt small { display: block; margin-top: 5px; font-size: 10.5px; color: var(--muted);
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-plus { color: var(--muted); display: grid; place-items: center; }
.pt-plus svg { width: 20px; height: 20px; }
.pt-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--muted); }
.pt-x:hover { color: var(--text); border-color: var(--accent); }
.pt-x svg { width: 11px; height: 11px; }

.pf-card { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  background: var(--panel); }
.pf-banner { position: relative; height: 146px; }
.pf-banner > img, .pf-banner > svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-cam { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff;
  display: grid; place-items: center; }
.pf-cam:hover { background: rgba(0, 0, 0, .78); }
.pf-cam.x { right: 50px; }
.pf-cam svg { width: 16px; height: 16px; }
.pf-card-body { padding: 0 20px 20px; }
.pf-ava { position: relative; width: max-content; margin: -42px 0 12px; }
.pf-ava .pf-cam { right: -2px; bottom: -2px; width: 28px; height: 28px; }
.pf-ava .pf-cam svg { width: 14px; height: 14px; }
.pf-name-in { width: 100%; font-size: 21px; font-weight: 800; line-height: 1.3;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 4px 8px; margin: 0 0 0 -8px; color: var(--text); }
.pf-name-in:hover { border-color: var(--line); }
.pf-name-in:focus { border-color: var(--accent); background: var(--panel-2); outline: none; }
.pf-user { color: var(--muted); font-size: 13px; margin: 2px 0 16px; }
.pf-bio-in { width: 100%; resize: vertical; }
.pf-card-body .pv-box { margin-bottom: 12px; }
.pf-card-body .pv-box code { font-size: 13px; }

.pf-drawer { border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel); padding: 14px; }
.pf-drawer-h { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.pf-drawer-h b { font-size: 13.5px; }
.pf-drawer-h .ss-more { margin-left: auto; }
.pf-tabs { display: flex; gap: 5px; margin-bottom: 12px; }
.pf-drawer-body { max-height: min(50vh, 440px); overflow-y: auto; padding-right: 3px; }
.pf-slot { margin-bottom: 14px; }
.pf-slot h5 { font-size: 11px; color: var(--muted); margin-bottom: 7px; }
.prof-edit .pe-save { grid-column: 1 / -1; position: sticky; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 14px; }
.prof-edit .pe-save b { margin-right: auto; }
.prof-edit .pe-save-btns { flex: 0 0 auto; }

@media (max-width: 1040px) {
  .prof-edit { grid-template-columns: 200px minmax(0, 1fr); }
  .pf-drawer { grid-column: 1 / -1; }
  .pf-drawer-body { max-height: none; }
}
@media (max-width: 760px) {
  .prof-edit { grid-template-columns: 1fr; gap: 18px; }
  .pf-tiles { justify-content: flex-start; }
}
.pf-bio-in { background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 11px; font: inherit; font-size: 13.5px;
  line-height: 1.6; min-height: 92px; }
.pf-bio-in:focus { border-color: var(--accent); outline: none; }

/* 真ん中のプロフィールから、押して画像を変える */
.pf-banner, .pf-ava { cursor: pointer; }
.pf-shade { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; gap: 8px; color: #fff; font-size: 13px; font-weight: 700;
  background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .15s; }
.pf-shade svg { width: 20px; height: 20px; }
.pf-shade.round { border-radius: 24%; gap: 0; }
.pf-banner:hover .pf-shade, .pf-ava:hover .pf-shade { opacity: 1; }
.pf-ava { border-radius: 24%; }
.pf-cam.x.sm { width: 24px; height: 24px; right: -6px; top: -6px; bottom: auto; }
.pf-cam.x.sm svg { width: 12px; height: 12px; }
@media (hover: none) {
  .pf-shade { opacity: .001; }              /* 指で使うときは、押せば分かる */
}

/* DMのはじまりに出す、大きなアイコン */
.hello .hello-ava { margin-bottom: 10px; }
/* 枠つきの発言のリアクションは、枠の下に出す */
.reacts.under-cf { margin: 0 0 10px 130px; }
@media (max-width: 760px) { .reacts.under-cf { margin-left: 62px; } }

/* ── 頭のかざりが、上の行に食い込まないようにする ───────────────── */
.members, .person { overflow: visible; }
/* 一覧の中では、かざりがとなりの名前にかぶらないように少し小さく */

/* ── アイコンの形と、ネームプレート ───────────────────────────── */

/* 名前のうしろに敷く板。絵の四隅を残して、横だけ伸ばす */
/* 名前のうしろに敷く板。絵をパネル全体に敷く。
   9分割にすると、端の飾りが潰れてパネルの外へはみ出す */
.np { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--np); background-size: 100% 100%;
  background-repeat: no-repeat; background-position: center;
  border-radius: var(--r-sm); }
.person.has-plate { position: relative; }
.person.has-plate > .ava, .person.has-plate > .pi { position: relative; z-index: 1; }

/* アイコンの形えらび */
.pick-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shape-ico { width: 22px; height: 22px; background: var(--muted); flex-shrink: 0; }
.shape-ico.square { border-radius: 6px; }
.shape-ico.round { border-radius: 50%; }
.pick.on .shape-ico { background: var(--accent); }

/* 発言のアイコン。少し大きくして、名前と高さをそろえる */
.ava.md { width: 40px; height: 40px; border-radius: 50%; font-size: 17px; }

/* ネームプレートは、名前のまわりをゆったり囲む */

.person.has-plate { padding: 13px 22px; min-height: 60px; }
/* 一覧のアイコン。ネームプレートの内枠からはみ出さない大きさにする */
.person .ava { width: 34px; height: 34px; font-size: 14px; }
/* プレートの絵は明るいものも暗いものもあるので、
   白い文字に濃い縁どりをつけて、どの絵の上でも読めるようにする */
.person.has-plate .pi b { font-size: 14.5px; color: #fff;
  -webkit-text-stroke: 3px rgba(8, 10, 18, .62); paint-order: stroke fill;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.person.has-plate .pi small { color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
/* ショップでのネームプレートの見本 */
/* ネームプレートの見本。実際の並び（アイコン＋名前）で見せる */
.np-demo { position: relative; display: inline-flex; padding: 14px 26px;
  min-width: 250px; align-items: center; }
.np-demo-in { display: flex; align-items: center; gap: 11px; position: relative; z-index: 1; }
.np-demo-in b { font-size: 14px; white-space: nowrap; color: var(--accent-2); }
.np-demo.big { min-width: 320px; padding: 16px 26px; }
.np-demo.big .np-demo-in b { font-size: 19px; }

/* 中まで模様がある枠は、さらに外へ */


/* 枠を着けている人は、絵がはみ出すぶん間隔を空ける */
.msg:has(.dl-frame) { gap: 22px; }

/* メンバー一覧では、ネームプレートだけを見せる。
   枠まで重ねると、板と混ざってごちゃごちゃになるため */
.person .ava > .dl-frame, .ud-row .ava > .dl-frame { display: none; }

/* 小さな見本の中では、重ねたデコレーションを出さない */
.pf-shot .dl { display: none; }

.ava.has-img > img:not(.decor) { position: relative; z-index: 0; }

/* ── 着けたときの見本（プロフィール・一覧・発言） ───────────────── */
.ud { display: grid; gap: 14px; width: 100%; align-content: start; }
.ud-card { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  background: var(--panel); }
.ud-banner { height: 62px; background: linear-gradient(120deg, var(--accent), var(--accent-2)); }
.ud-avaline { padding: 0 16px; margin-top: -34px; }
.ud-who { padding: 8px 16px 14px; }
.ud-who b { display: block; font-size: 15px; }
.ud-who small { color: var(--muted); font-size: 12px; }

.ud-row { position: relative; display: flex; align-items: center; gap: 12px;
  padding: 13px 20px; border-radius: var(--r-sm); min-height: 72px; }
.ud-row > .ava, .ud-row > .ud-rowname { position: relative; z-index: 1; }
.ud-rowname b { font-size: 14px; color: var(--accent-2); }

.ud-msg { display: flex; gap: 14px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--panel); border: 1px solid var(--line); }
.ud-msg:has(.dl-frame) { gap: 22px; }
.ud-msgbody { min-width: 0; }
.ud-msghead { display: flex; align-items: baseline; gap: 9px; margin-bottom: 3px; }
.ud-msghead b { font-size: 14.5px; color: var(--accent-2); }
.ud-msghead span { font-size: 11px; color: var(--muted); }
.ud-text { font-size: 14px; line-height: 1.6; }

.buy-stage .ud { max-width: 340px; }

/* ── 一覧の見本：無地のアイコンに着けて見せる。重ねると自分のアイコンに ── */
.dt-face { position: relative; width: 36px; height: 36px; flex-shrink: 0; }
.dt-face.sm { width: 26px; height: 26px; }
.dt-anon { position: absolute; inset: 0; border-radius: 50%; display: grid;
  place-items: center; background: var(--panel); border: 1px solid var(--line);
  color: var(--muted); transition: opacity .18s; }
.dt-art .dt-anon svg, .dt-anon svg { width: 56%; height: 56%; }
.dt-face > .ava.dt-me { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .18s; font-size: 17px; }
.dt-face.sm > .ava.dt-me { font-size: 11px; }
.dtile:hover .dt-face > .ava.dt-me { opacity: 1; }
.dtile:hover .dt-anon { opacity: 0; }
.dt-art .dt-face > .dl-frame { position: absolute; left: 50%; top: 50%;
  width: calc(var(--dl-size, 185%) * var(--dl-fit, 1));
  height: calc(var(--dl-size, 185%) * var(--dl-fit, 1));
  margin-left: calc(var(--dl-size, 185%) * var(--dl-fit, 1) / -2);
  margin-top: calc(var(--dl-size, 185%) * var(--dl-fit, 1) / -2);
  max-width: none; max-height: none; padding: 0; transform: none;
  object-fit: contain; pointer-events: none; z-index: 2; }
/* 見本の中の枠は、重ねたときも大きさを変えない */
.dtile:hover .dt-face > .dl-frame { transform: none; }
.dgrid.mini .dt-art .dt-face > .dl-frame { max-height: none; }

.dt-plate { position: relative; display: flex; align-items: center;
  justify-content: center; gap: 7px;
  width: 100%; aspect-ratio: 3.1 / 1; height: auto; padding: 0; }
.dt-plate > .dt-face, .dt-plate > .dt-bar { position: relative; z-index: 1; }
/* 板の飾りは絵ごとに太さが違う。中身を中央に寄せ、幅を抑えることで
   どの絵でも内側に収まるようにする */
.dt-plate > .dt-face { width: 22%; height: auto; aspect-ratio: 1; }
.dt-bar { flex: 0 0 auto; width: 34%; height: 7px; border-radius: 4px;
  background: rgba(255, 255, 255, .72); border: 0; }
.dt-art.cf { height: 88px; display: grid; place-items: center; padding: 0 8px; }


/* 枠ごとの倍率。輪の内側の縁に、アイコンがぴったり乗る大きさ */
.ava > .decor-d178, .dt-face > .decor-d178
  { --dl-size: 128%; }
.ava > .decor-d181, .dt-face > .decor-d181
  { --dl-size: 134%; }
.ava > .decor-d161, .dt-face > .decor-d161
  { --dl-size: 145%; }
.ava > .decor-d002, .dt-face > .decor-d002, .ava > .decor-d183, .dt-face > .decor-d183
  { --dl-size: 151%; }
.ava > .decor-d174, .dt-face > .decor-d174, .ava > .decor-d186, .dt-face > .decor-d186
  { --dl-size: 156%; }
.ava > .decor-d191, .dt-face > .decor-d191
  { --dl-size: 161%; }
.ava > .decor-d167, .dt-face > .decor-d167
  { --dl-size: 162%; }
.ava > .decor-d165, .dt-face > .decor-d165
  { --dl-size: 163%; }
.ava > .decor-d122, .dt-face > .decor-d122
  { --dl-size: 164%; }
.ava > .decor-d159, .dt-face > .decor-d159, .ava > .decor-d166, .dt-face > .decor-d166, .ava > .decor-d188, .dt-face > .decor-d188
  { --dl-size: 165%; }
.ava > .decor-d170, .dt-face > .decor-d170
  { --dl-size: 166%; }
.ava > .decor-d158, .dt-face > .decor-d158, .ava > .decor-d164, .dt-face > .decor-d164
  { --dl-size: 169%; }
.ava > .decor-d160, .dt-face > .decor-d160, .ava > .decor-d162, .dt-face > .decor-d162, .ava > .decor-d192, .dt-face > .decor-d192
  { --dl-size: 170%; }
.ava > .decor-d171, .dt-face > .decor-d171
  { --dl-size: 171%; }
.ava > .decor-d173, .dt-face > .decor-d173, .ava > .decor-d182, .dt-face > .decor-d182, .ava > .decor-d187, .dt-face > .decor-d187
  { --dl-size: 173%; }
.ava > .decor-d168, .dt-face > .decor-d168, .ava > .decor-d172, .dt-face > .decor-d172, .ava > .decor-d184, .dt-face > .decor-d184
  { --dl-size: 174%; }
.ava > .decor-d189, .dt-face > .decor-d189
  { --dl-size: 175%; }
.ava > .decor-d157, .dt-face > .decor-d157, .ava > .decor-d163, .dt-face > .decor-d163, .ava > .decor-d177, .dt-face > .decor-d177
  { --dl-size: 176%; }
.ava > .decor-d169, .dt-face > .decor-d169
  { --dl-size: 177%; }
.ava > .decor-d180, .dt-face > .decor-d180
  { --dl-size: 179%; }
.ava > .decor-d175, .dt-face > .decor-d175, .ava > .decor-d185, .dt-face > .decor-d185
  { --dl-size: 180%; }
.ava > .decor-d119, .dt-face > .decor-d119, .ava > .decor-d176, .dt-face > .decor-d176
  { --dl-size: 181%; }
.ava > .decor-d179, .dt-face > .decor-d179, .ava > .decor-d190, .dt-face > .decor-d190
  { --dl-size: 183%; }
.ava > .decor-d118, .dt-face > .decor-d118
  { --dl-size: 186%; }
.ava > .decor-d012, .dt-face > .decor-d012, .ava > .decor-d069, .dt-face > .decor-d069, .ava > .decor-d071, .dt-face > .decor-d071, .ava > .decor-d074, .dt-face > .decor-d074
  { --dl-size: 202%; }

/* ── 通話の画面共有 ───────────────────────────── */
.screens { display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.screen-box { position: relative; border-radius: var(--r-md); overflow: hidden;
  background: #000; border: 1px solid var(--line); }
.screen { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain;
  background: #000; }
.screen-box .screen-tag { position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72)); color: #fff;
  font-size: 12.5px; font-weight: 600; }
.screen-tag button { margin-left: auto; }
.cbtn.on { background: var(--accent); color: var(--accent-ink); }

/* ============================================================
   ロールの絵柄・色えらび・権限の一覧
   ============================================================ */
.role-ico { display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; flex-shrink: 0; }
.role-ico img { width: 100%; height: 100%; object-fit: contain; border-radius: 3px; }
.role-ico-em { font-size: 12px; line-height: 1; }
.person .pi b { display: inline-flex; align-items: center; min-width: 0; }
.msg .meta .role-ico { margin-left: 4px; }

.role-chip.lg { font-size: 13px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 6px; }
.role-chip.lg img { width: 16px; height: 16px; object-fit: contain; border-radius: 4px; }
.role-prev { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.role-ico-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2);
  color: var(--text); font-size: 13px; font-weight: 600; }
.role-ico-btn:hover { border-color: var(--accent); }
.role-ico-btn img { width: 20px; height: 20px; object-fit: contain; border-radius: 5px; }
.role-ico-btn svg { width: 18px; height: 18px; }

/* 色えらび */
.cp { display: grid; gap: 12px; }
.cp-sq { position: relative; height: 150px; border-radius: var(--r-sm); border: 1px solid var(--line);
  cursor: crosshair; touch-action: none; }
.cp-sq > i, .cp-hue > i { position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); transform: translate(-50%, -50%);
  pointer-events: none; }
.cp-bars { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cp-hue { position: relative; flex: 1 1 200px; height: 16px; border-radius: 999px; cursor: pointer;
  touch-action: none; border: 1px solid var(--line);
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.cp-hue > i { top: 50%; }
.cp-hexline { display: flex; align-items: center; gap: 8px; }
.cp-now { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); }
.cp-hex { width: 104px; text-transform: lowercase; font-family: ui-monospace, monospace; }
.cp-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
.cp-grid button { aspect-ratio: 1; border-radius: 6px; border: 2px solid transparent; }
.cp-grid button.on { border-color: var(--text); }

/* 権限の一覧 */
.permlist { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.permhead { margin: 0; padding: 9px 14px; font-size: 11.5px; letter-spacing: .08em;
  background: var(--panel-2); color: var(--muted); }
.permrow { display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  border-top: 1px solid var(--line); cursor: pointer; }
.permrow:hover { background: var(--panel-2); }
.permrow .pl { flex: 1; min-width: 0; }
.permrow .pl b { display: block; font-size: 13.5px; }
.permrow .pl small { display: block; color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 2px; }
.permrow .sw { position: relative; flex-shrink: 0; width: 42px; height: 24px; }
.permrow .sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.permrow .sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--line);
  transition: background .15s; pointer-events: none; }
.permrow .sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .15s; }
.permrow .sw input:checked + i { background: var(--accent); }
.permrow .sw input:checked + i::after { transform: translateX(18px); }

.emopick { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin: 4px 0 6px; }
.emopick button { aspect-ratio: 1; font-size: 20px; border-radius: 8px;
  border: 2px solid transparent; background: var(--panel-2); }
.emopick button.on { border-color: var(--accent); }
.modal.tall { width: min(680px, 100%); max-height: 88vh; overflow: auto; }
.modal.tall .actions { position: sticky; bottom: -22px; background: var(--panel);
  padding-top: 14px; margin-bottom: -4px; }

/* ============================================================
   絵文字（Twemoji）
   ============================================================ */
.emo { width: 1.35em; height: 1.35em; object-fit: contain; vertical-align: -.28em; }
.msg .text .emo { width: 1.45em; height: 1.45em; }
.quick-reacts .emo { width: 20px; height: 20px; vertical-align: 0; }
.react .emo { width: 17px; height: 17px; vertical-align: -3px; }

.eb-pop { padding: 0; width: 342px; }
.eb { display: flex; flex-direction: column; height: 396px; }
.eb-find { margin: 12px 12px 8px; width: calc(100% - 24px); }
.eb-tabs { display: flex; gap: 2px; padding: 0 8px 8px; border-bottom: 1px solid var(--line); }
.eb-tabs button { flex: 1; height: 32px; border-radius: 8px; display: grid; place-items: center;
  opacity: .5; }
.eb-tabs button:hover { background: var(--hover); opacity: .85; }
.eb-tabs button.on { background: var(--soft); opacity: 1; }
.eb-tabs .emo { width: 19px; height: 19px; vertical-align: 0; }
.eb-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 2px; padding: 8px; align-content: start; }
.eb-grid button { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; }
.eb-grid button:hover { background: var(--hover); }
.eb-grid .emo, .eb-grid .emoji-img { width: 26px; height: 26px; vertical-align: 0; }
.eb-grid .hint { grid-column: 1 / -1; padding: 22px 8px; text-align: center; }
.eb-label { height: 30px; display: flex; align-items: center; padding: 0 14px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emojis button .emo, .emopick button .emo { width: 24px; height: 24px; vertical-align: 0; }
.sp-icon.emoji .emo { width: 1em; height: 1em; vertical-align: -.15em; }

/* ============================================================
   コードを書かずに使うBOTの設定
   ============================================================ */
.bi { display: grid; gap: 4px; }
.bi-h { margin: 22px 0 10px; font-size: 14px; font-weight: 700; }
.bi-h:first-of-type { margin-top: 14px; }
.bi-roles { display: flex; flex-wrap: wrap; gap: 8px; }
.role-pick { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2);
  color: var(--text); font-size: 13px; font-weight: 600; }
.role-pick:hover { border-color: var(--rc, var(--accent)); }
.role-pick.on { border-color: var(--rc, var(--accent)); background: var(--soft); }
.bi-panel { display: grid; gap: 8px; margin-bottom: 10px; }
.bi-panel .srow { gap: 8px; }
.bi-panel .srow input { flex: 1; min-width: 0; }
.bi-em { flex: 0 0 62px !important; text-align: center; }
.bi-num { width: 72px; text-align: center; }
.bi-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.bi select { width: 100%; }
.bi-fl { display: inline-flex; align-items: center; gap: 7px; }
.bi-h { display: flex; align-items: center; gap: 7px; }
.bi-h .emo, .bi-fl .emo { width: 17px; height: 17px; vertical-align: 0; }
.bi-inline { flex-wrap: nowrap; }
.bi-inline .bi-num { width: 78px !important; flex: 0 0 78px; text-align: center; }
.bi .field > .bi-inline { margin-top: 2px; }

/* 自分メニューの、名前の下のひとこと欄 */
.status-chip { display: flex; align-items: center; gap: 8px; width: 100%; margin: 2px 0 6px;
  padding: 8px 10px; border-radius: var(--r-sm); background: var(--panel-2);
  color: var(--text); font-size: 13px; text-align: left; }
.status-chip:hover { background: var(--hover); }
.status-chip .sc-cur { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.status-chip .sc-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-chip .sc-cur .emo { width: 16px; height: 16px; vertical-align: 0; flex-shrink: 0; }
.status-chip .sc-add { display: flex; align-items: center; gap: 7px; flex: 1; color: var(--muted); }
.status-chip .sc-add svg { width: 15px; height: 15px; }
.status-chip .sc-x { display: inline-flex; padding: 2px; border-radius: 6px; color: var(--muted); flex-shrink: 0; }
.status-chip .sc-x:hover { background: var(--soft); color: var(--text); }
.status-chip .sc-x svg { width: 14px; height: 14px; }

/* アイコンの切り抜き（丸を動かして決める） */
.crop-stage { position: relative; height: 320px; margin: 4px 0 12px; border-radius: var(--r-sm);
  background: #0b0d16; overflow: hidden; touch-action: none; cursor: crosshair;
  display: flex; align-items: center; justify-content: center; }
.crop-img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none;
  -webkit-user-drag: none; }
.crop-ring { position: absolute; border-radius: 50%; cursor: grab;
  border: 2px solid #fff; box-sizing: border-box;
  box-shadow: 0 0 0 9999px rgba(6, 8, 16, .62); touch-action: none; }
.crop-ring:active { cursor: grabbing; }
.crop-grip { position: absolute; right: -8px; bottom: -8px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--accent); border: 2px solid #fff; cursor: nwse-resize;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.crop-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.crop-lbl { font-size: 12.5px; color: var(--muted); flex-shrink: 0; }
.crop-zoom { flex: 1; accent-color: var(--accent); }

/* 自分が共有中のときの案内。配信できる環境なら、実際に配信している映像を自分にも出す */
.screen-box.mine:not(.watch) { background: var(--panel-2); border: 1px solid var(--line);
  display: grid; place-items: center; aspect-ratio: 16 / 9; }
.share-note { display: grid; justify-items: center; gap: 6px; padding: 18px; text-align: center; }
.share-note svg { width: 30px; height: 30px; color: var(--accent); }
.share-note b { font-size: 14px; }
.share-note small { color: var(--muted); font-size: 12px; }
.share-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

/* 画面共有をはじめる前の画面 */
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font-size: 13px; font-weight: 600; }
.seg button.on { border-color: var(--accent); background: var(--soft); color: var(--accent-2); }
.share-who { display: grid; gap: 8px; }
.share-who .pick { padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--panel-2); text-align: left; }
.share-who .pick.on { border-color: var(--accent); background: var(--soft); }
.share-list { display: grid; gap: 4px; max-height: 190px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px; }
.share-list .person.on { background: var(--soft); }
.screen-box.watch { cursor: zoom-in; }
.screen-box:fullscreen { background: #000; display: grid; place-items: center; }
.screen-box:fullscreen .screen { width: 100%; height: 100%; object-fit: contain; }

/* 上のバーは高さが足りず、アイコンの枠が必ず切れてしまう。
   メンバー一覧と同じように、ここでは枠を出さない（ネームプレート等は出る） */
.main-head .who .ava > .dl-frame { display: none; }

/* メンバー画面の、探す・絞りこみ */
.mem-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.mem-tools input { flex: 1; min-width: 180px; border: 1px solid var(--line); background: var(--panel);
                   border-radius: var(--r-sm); padding: 9px 12px; outline: none; font-size: 13.5px; color: var(--text); }
.mem-tools input:focus { border-color: var(--accent); }
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
               color: var(--muted); font-size: 12.5px; font-weight: 700; }
.filter-chip:hover { color: var(--text); }
.filter-chip.on { border-color: var(--accent); color: var(--accent-2); background: var(--soft); }

/* 権限表 */
.pt-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.pt-grid { display: grid; min-width: 100%; grid-template-columns: minmax(220px, 1fr) repeat(var(--cols), 86px); }
.pt-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center;
          border-top: 1px solid var(--line); }
.pt-head { position: sticky; top: 0; background: var(--panel); border-top: none; z-index: 1; }
.pt-head .pt-col, .pt-head .pt-name { font-size: 12px; font-weight: 800; letter-spacing: .04em; padding: 10px 8px; }
.pt-group { grid-column: 1 / -1; padding: 12px 12px 6px; font-size: 11px; font-weight: 800;
            letter-spacing: .12em; color: var(--muted); background: var(--panel-2); border-top: 1px solid var(--line); }
.pt-name { padding: 9px 12px; min-width: 0; }
.pt-name b { display: block; font-size: 13.5px; font-weight: 600; }
.pt-name small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.pt-col { display: grid; place-items: center; padding: 6px; text-align: center; font-size: 12px; }
.pt-cell { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center;
           border: 1px solid var(--line); background: var(--panel); color: var(--muted); }
.pt-cell svg { width: 15px; height: 15px; }
.pt-cell:hover { border-color: var(--accent); color: var(--text); }
.pt-cell.on { background: var(--soft); border-color: var(--accent); color: var(--accent-2); }

/* 出入り禁止の一覧 */
.ban-box { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.ban-box h4 { font-size: 13px; margin-bottom: 8px; color: var(--muted); }

/* 通話まわりは、アイコンだけを出す（枠などのデコレーションは出さない） */
.vmembers .ava > .dl, #stage .ava > .dl, .live-call .ava > .dl { display: none; }

/* ---------- みんなで再生 ---------- */
.media-dock { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: min(380px, calc(100vw - 32px));
              background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
              box-shadow: 0 18px 40px rgba(0,0,0,.35); overflow: hidden; }
.media-dock .md-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 6px 12px; }
.media-dock .md-live { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--accent-2); }
.media-dock .md-live svg { width: 15px; height: 15px; }
.media-dock .md-hbtn { display: flex; gap: 2px; }
.media-dock .md-hbtn button, .media-dock .md-ctrl button { width: 30px; height: 30px; border-radius: 8px; display: grid;
              place-items: center; color: var(--text); }
.media-dock .md-hbtn button:hover, .media-dock .md-ctrl button:hover:not(:disabled) { background: var(--hover, rgba(127,127,127,.15)); }
.media-dock button:disabled { opacity: .4; cursor: default; }
.media-dock svg { width: 17px; height: 17px; }
.media-dock .md-player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.media-dock .md-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-dock .md-tap { position: absolute; inset: auto 0 12px; margin: 0 auto; width: max-content; display: flex; gap: 6px;
              align-items: center; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: 999px; font-weight: 700; }
.media-dock .md-info { padding: 8px 12px 4px; min-width: 0; }
.media-dock .md-info b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-dock .md-info small { display: block; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-dock .md-bar { height: 12px; margin: 0 12px; cursor: pointer; position: relative; }
.media-dock .md-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 3px; border-radius: 3px; background: var(--line); }
.media-dock .md-bar i { position: absolute; left: 0; top: 5px; height: 3px; border-radius: 3px; background: var(--accent); }
.media-dock .md-ctrl { display: flex; align-items: center; gap: 4px; padding: 2px 8px 8px; }
.media-dock .md-time { font-size: 11.5px; color: var(--muted); margin-right: auto; padding-left: 4px; font-variant-numeric: tabular-nums; }
.media-dock .md-vol { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.media-dock .md-vol input { width: 76px; }
.media-dock.small .md-player { aspect-ratio: auto; height: 0; }
.media-dock.small .md-player iframe { visibility: hidden; }
.media-dock.small .md-small svg { transform: rotate(180deg); }
.media-modal .ms-search { display: flex; gap: 8px; margin-bottom: 6px; }
.media-modal .ms-search input { flex: 1; }
.media-modal .ms-list { display: flex; flex-direction: column; gap: 6px; max-height: 38vh; overflow: auto; }
.media-modal .ms-row { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 8px; }
.media-modal .ms-row:hover { background: var(--hover, rgba(127,127,127,.1)); }
.media-modal .ms-row img { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; flex: none; background: #000; }
.media-modal .ms-t { flex: 1; min-width: 0; }
.media-modal .ms-t b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; }
.media-modal .ms-t small { color: var(--muted); font-size: 12px; }
.media-modal .ms-a { display: flex; gap: 6px; flex: none; }
.media-modal .ms-now { font-size: 12px; font-weight: 700; color: var(--muted); margin: 10px 4px 0; }
@media (max-width: 560px) {
  .media-dock { right: 8px; left: 8px; bottom: 76px; width: auto; }
  .media-modal .ms-row { flex-wrap: wrap; }
  .media-modal .ms-a { width: 100%; justify-content: flex-end; }
}

/* ---------- カメラ ---------- */
.tile.has-cam { background: #000; }
.tile .cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile .cam-video.self { transform: scaleX(-1); }
.tile.has-cam .tname { z-index: 1; }

/* ---------- 画像・動画を貼る ---------- */
.attach-tray { display: flex; gap: 8px; padding: 8px 18px 0; overflow-x: auto; }
.attach-tray .at-item { position: relative; width: 112px; flex: none; }
.attach-tray .at-item img, .attach-tray .at-item video { width: 112px; height: 84px; object-fit: cover; border-radius: 8px;
              background: #000; display: block; border: 1px solid var(--line); }
.attach-tray .at-item small { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.attach-tray .at-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%;
              background: rgba(0,0,0,.65); color: #fff; display: grid; place-items: center; }
.attach-tray .at-x svg { width: 13px; height: 13px; }
.attach-tray .at-kind { position: absolute; left: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.6);
              color: #fff; display: grid; place-items: center; }
.attach-tray .at-kind svg { width: 11px; height: 11px; }
.attach-tray.busy .at-item { opacity: .55; }
.attach-tray .at-note { align-self: center; font-size: 12.5px; color: var(--muted); padding: 0 6px; white-space: nowrap; }
#textView.dropping { outline: 2px dashed var(--accent); outline-offset: -8px; }
.att-grid { display: grid; gap: 6px; margin-top: 6px; max-width: min(520px, 100%); }
.att-grid.n2, .att-grid.n4 { grid-template-columns: 1fr 1fr; }
.att-grid.n3 { grid-template-columns: 1fr 1fr 1fr; }
.att-grid .att-img { width: 100%; max-height: 360px; object-fit: cover; border-radius: 8px; cursor: zoom-in; background: var(--panel); display: block; }
.att-grid.n1 .att-img { width: auto; max-width: 100%; object-fit: contain; }
.att-grid .att-video { width: 100%; max-height: 380px; border-radius: 8px; background: #000; display: block; }
.att-grid .att-gone { font-size: 12.5px; color: var(--muted); border: 1px dashed var(--line); border-radius: 8px; padding: 14px; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.85); display: grid; place-items: center; cursor: zoom-out; padding: 24px; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 80px); object-fit: contain; border-radius: 6px; }
.lightbox .lb-open { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px;
              background: rgba(255,255,255,.14); padding: 6px 12px; border-radius: 999px; }
.ov-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-height: 260px; overflow: auto; }
.ov-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ov-row b { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.ov-row b i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ov-row select { width: auto; min-width: 150px; }
@media (max-width: 560px) { .attach-tray { padding: 8px 10px 0; } }

/* ---------- 全画面の代わり（iPhone など） ---------- */
.pseudo-full { position: fixed !important; inset: 0 !important; z-index: 300 !important; width: 100vw !important;
               height: 100dvh !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important;
               background: #000 !important; aspect-ratio: auto !important; display: grid; place-items: center; }
.pseudo-full video { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: contain !important; }
.pseudo-full .pf-close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 40px; height: 40px;
               border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; z-index: 2; }
.pseudo-full .pf-close svg { width: 18px; height: 18px; }
body.has-pseudo-full { overflow: hidden; }

/* ---------- みんなで再生の画面 ---------- */
.modal.mp-modal { width: min(1180px, 100%); max-height: 92vh; padding: 24px 24px 28px; display: block; }
.mp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.mp-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 22px; font-weight: 900; }
.mp-head h2 svg { width: 22px; height: 22px; color: #ef4444; }
.mp-badge { padding: 3px 10px; background: rgba(239,68,68,.15); color: #f87171; font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.mp-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; }
.mp-search { display: flex; gap: 8px; margin-bottom: 12px; }
.mp-search input { flex: 1; min-width: 0; padding: 13px 16px; font-size: 15px; border-radius: 0; }
.mp-go { display: inline-flex; align-items: center; gap: 6px; padding: 0 22px; background: var(--text); color: var(--solid);
         font-weight: 900; font-size: 14px; }
.mp-go svg { width: 16px; height: 16px; }
.mp-go:disabled { opacity: .5; }
.mp-chips { display: flex; gap: 6px; margin-bottom: 18px; overflow-x: auto; padding-bottom: 2px; }
.mp-chip { padding: 6px 14px; border: 1.5px solid var(--line); font-size: 12.5px; font-weight: 700; white-space: nowrap; color: var(--text); }
.mp-chip:hover { border-color: var(--text); }
.mp-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; margin-bottom: 22px; }
.mp-player { min-width: 0; }
.mp-slot { position: relative; aspect-ratio: 16 / 9; background: #000; }
.mp-slot.empty { background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; }
.mp-idle { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); text-align: center; padding: 16px; }
.mp-idle svg { width: 38px; height: 38px; }
.mp-idle b { color: var(--text); }
.mp-pinfo { border: 1px solid var(--line); border-top: 0; padding: 14px 16px; background: var(--panel); }
.mp-info h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-info .chan { font-size: 12.5px; color: var(--muted); min-height: 1em; }
.mp-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.mp-nav button, .mp-ctrl button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; font-size: 12.5px; font-weight: 800; }
.mp-nav button { background: var(--text); color: var(--solid); }
.mp-nav button.flip svg { transform: scaleX(-1); }
.mp-nav button:disabled, .mp-ctrl button:disabled { opacity: .4; cursor: default; }
.mp-nav svg, .mp-ctrl svg { width: 14px; height: 14px; }
.mp-nav .mp-shuffle { background: #2563eb; color: #fff; }
.mp-nav .mp-shuffle.on { background: #1d4ed8; box-shadow: inset 0 0 0 2px #93c5fd; }
.mp-vol { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 130px; min-width: 0; color: var(--muted); }
.mp-vol input { flex: 1; min-width: 60px; }
.mp-vol span { width: 26px; text-align: right; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.mp-idx { font-size: 12px; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.mp-ctrl { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mp-ctrl button { background: var(--solid); border: 1px solid var(--line); color: var(--text); }
.mp-ctrl button:hover:not(:disabled) { border-color: var(--text); }
.mp-ctrl .mp-loop.on { background: #16a34a; color: #fff; border-color: #16a34a; }
.mp-ctrl button:last-child svg { transform: rotate(180deg); }
.mp-queue { border: 1px solid var(--line); background: var(--panel); padding: 14px; min-width: 0; }
.mp-qhead { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.mp-qhead svg { width: 16px; height: 16px; color: #3b82f6; }
.mp-qhead span { color: var(--muted); font-size: 12.5px; }
.mp-qlist { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; }
.mp-qrow { display: flex; align-items: center; gap: 10px; padding: 6px; }
.mp-qrow:hover { background: var(--hover, rgba(127,127,127,.1)); }
.mp-qrow.now { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.mp-qrow img { width: 74px; aspect-ratio: 16 / 9; object-fit: cover; flex: none; background: #000; }
.mp-qt { flex: 1; min-width: 0; }
.mp-qt b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-qt small { font-size: 11.5px; color: var(--muted); }
.mp-qrow.now small { color: var(--accent-2, var(--accent)); font-weight: 700; }
.mp-qa { display: flex; gap: 2px; flex: none; }
.mp-qa button { width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); }
.mp-qa button:hover { color: var(--text); background: var(--hover, rgba(127,127,127,.15)); }
.mp-qa svg { width: 14px; height: 14px; }
.mp-qempty { color: var(--muted); font-size: 12.5px; margin: 0; }
.mp-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.mp-card { background: var(--panel); border: 1px solid var(--line); text-align: left; padding: 0; color: var(--text);
           transition: transform .1s, box-shadow .1s; display: block; width: 100%; }
.mp-card:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.mp-card:disabled { cursor: default; }
.mp-thumb { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.mp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-src { position: absolute; top: 6px; left: 6px; padding: 2px 7px; font-size: 10px; font-weight: 900; color: #fff; background: #dc2626; }
.mp-dur { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.85); color: #fff; padding: 2px 6px; font-size: 11px; font-weight: 700; }
.mp-added { position: absolute; inset: auto 6px 6px auto; display: none; }
.mp-card.added .mp-thumb::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.mp-card.added .mp-added { display: inline-flex; align-items: center; gap: 4px; left: 6px; right: auto; bottom: 6px; z-index: 1;
           color: #fff; font-size: 11px; font-weight: 800; background: #16a34a; padding: 2px 7px; }
.mp-card.added .mp-added svg { width: 12px; height: 12px; }
.mp-cbody { padding: 10px 12px 12px; }
.mp-ctitle { font-size: 13px; font-weight: 700; line-height: 1.4; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2;
             -webkit-box-orient: vertical; overflow: hidden; }
.mp-cchan { font-size: 11.5px; color: var(--muted); }
.mp-state { padding: 48px 20px; text-align: center; color: var(--muted); }
.mp-state .mp-sico svg { width: 40px; height: 40px; margin-bottom: 10px; }
.mp-state .msg { font-size: 14px; margin-bottom: 4px; }
.mp-state .sub { font-size: 12px; }
.mp-state.error .mp-sico { color: #ef4444; }
.media-dock.docked { position: fixed; right: auto; bottom: auto; z-index: 1000; border: 0; border-radius: 0; box-shadow: none; }
.media-dock.docked > :not(.md-player) { display: none; }
.media-dock.docked .md-player { height: 100%; aspect-ratio: auto; }
.media-dock.docked .md-player iframe { visibility: visible; }
@media (max-width: 860px) {
  .modal.mp-modal { padding: 16px 12px 20px; }
  .mp-split { grid-template-columns: 1fr; }
  .mp-results { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .mp-vol { flex-basis: 100%; }
  .mp-idx { margin-left: 0; }
}

/* ---------- 画面共有：デスクトップアプリの選択画面 ---------- */
.modal.share-desk { width: min(820px, 100%); }
.src-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; max-height: 320px; overflow-y: auto; padding: 2px; }
.src { background: var(--panel); border: 2px solid transparent; border-radius: 10px; padding: 6px; text-align: left; color: var(--text); }
.src:hover { border-color: var(--line); }
.src.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.src-thumb { aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; display: grid; place-items: center; }
.src-thumb img { width: 100%; height: 100%; object-fit: contain; }
.src-name { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; min-width: 0; }
.src-name img { width: 16px; height: 16px; flex: none; }
.src-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 閉じているあいだの再生窓：画面の外に置いて見せない（消すと再生が止まるため） */
.media-dock.offstage { position: fixed; left: -10000px; top: 0; right: auto; bottom: auto; width: 320px;
                       opacity: 0; pointer-events: none; }

/* ---------- みんなで再生：マイプレイリスト ---------- */
.mp-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mp-mine { border: 1px solid var(--line); background: var(--panel); padding: 14px; }
.mp-mine .mp-qhead svg { color: #ef4444; }
.mp-new { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; background: #2563eb; color: #fff;
          font-size: 12px; font-weight: 700; }
.mp-mine .mp-new svg { width: 13px; height: 13px; color: #fff; }
.mp-pls { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; }
.mp-pl { border: 1px solid var(--line); }
.mp-plhead { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 10px; color: var(--text); text-align: left; }
.mp-plhead:hover { background: var(--hover, rgba(127,127,127,.1)); }
.mp-plname { flex: 1; min-width: 0; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-plhead small { color: var(--muted); font-size: 11.5px; }
.mp-plhead svg { width: 14px; height: 14px; color: var(--muted); transition: transform .15s; }
.mp-plhead.open svg { transform: rotate(180deg); }
.mp-placts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 8px; }
.mp-placts button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 12px; font-weight: 700;
                    border: 1px solid var(--line); color: var(--text); }
.mp-placts button.main { background: var(--text); color: var(--solid); border-color: var(--text); }
.mp-placts svg { width: 13px; height: 13px; }
.mp-pl .mp-qlist { padding: 0 6px 6px; max-height: 260px; }
.mp-pl .mp-qempty { padding: 0 10px 10px; }
.mp-ctrl .mp-save { background: #dc2626; color: #fff; border-color: #dc2626; }
.mp-ctrl .mp-save.on { box-shadow: inset 0 0 0 2px #fecaca; }
.mp-ctrl .mp-save:disabled { background: var(--solid); color: var(--muted); border-color: var(--line); }
.mp-ctrl button:last-child svg { transform: none; }
.mp-ctrl button:nth-last-child(2) svg { transform: rotate(180deg); }
.mp-pick { margin-top: 10px; padding: 10px; border: 1px dashed var(--line); }
.mp-pick-t { font-size: 12px; color: var(--muted); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-pick-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.mp-pick-list button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); color: var(--text); text-align: left; }
.mp-pick-list button:hover { border-color: var(--text); }
.mp-pick-list button span { flex: 1; min-width: 0; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-pick-list button small { color: var(--muted); font-size: 11.5px; }
.mp-pick-list button svg { width: 14px; height: 14px; }
.mp-pick-list button.new { border-style: dashed; color: #2563eb; }
.mp-state { display: flex; flex-direction: column; align-items: center; }

/* ---------- みんなで再生：ジャケット表示（YouTube のプレーヤーは使わない） ---------- */
.mp-slot { overflow: hidden; }
.mp-art-bg { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(22px) brightness(.55); }
.mp-art { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); height: 66%; aspect-ratio: 16 / 9;
          object-fit: cover; box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.mp-under { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: center; gap: 10px; }
.mp-prog { flex: 1; height: 14px; cursor: pointer; position: relative; }
.mp-prog::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.28); }
.mp-prog i { position: absolute; left: 0; top: 5px; height: 4px; border-radius: 4px; background: #fff; }
.mp-time { color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,.6); white-space: nowrap; }
.mp-tap { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: flex; gap: 6px; align-items: center;
          background: var(--accent); color: var(--accent-ink); padding: 10px 18px; border-radius: 999px; font-weight: 800; z-index: 2; }
.mp-tap svg { width: 16px; height: 16px; }
.mp-tap[hidden] { display: none; }

/* ---------- メンバー一覧：オフラインの人 ---------- */
.person.offline { opacity: .5; }
.person.offline:hover { opacity: .85; }

/* ---------- スマホ：通話のボタンを大きく押しやすく ---------- */
@media (max-width: 760px), (pointer: coarse) {
  .controls { flex-wrap: wrap; gap: 12px; padding: 4px 12px max(20px, env(safe-area-inset-bottom)); }
  .controls { gap: 8px; }
  .cgroup { flex-wrap: wrap; justify-content: center; }
  .controls .cbtn { width: 64px; height: 62px; }
  .controls .cbtn svg { width: 22px; height: 22px; }
  .controls .cbtn.hang { width: 80px; }
  .voice-panel .vp-btns { gap: 8px; }
  .voice-panel .vp-btns button { height: 50px; }
  .voice-panel .vp-btns button svg { width: 20px; height: 20px; }
}

/* ---------- Eternity の配信プレーヤー ---------- */
.screen-box .estream-canvas { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; aspect-ratio: 16 / 9; }
.pseudo-full .estream-canvas, :fullscreen .estream-canvas { width: 100%; height: 100%; aspect-ratio: auto; }
.estream-note { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); background: rgba(0,0,0,.7); color: #fff;
                font-size: 12.5px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; z-index: 2; }
.estream-note[hidden] { display: none; }
.estream-wait { position: absolute; inset: 0; display: grid; place-items: center; color: #cbd5e1; font-size: 13px; }

/* ---------- このアプリについて：アプリを入れる ---------- */
.app-dls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
.app-dl { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
          color: var(--text); text-decoration: none; background: var(--panel); }
.app-dl:hover { border-color: var(--accent); }
.app-dl b { font-size: 14px; }
.app-dl small { color: var(--muted); font-size: 12px; }

/* みんなで再生：音を用意しているあいだ */
.mp-waitsrc { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); background: rgba(0,0,0,.7); color: #fff;
              font-size: 12.5px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; z-index: 2; }
.mp-waitsrc[hidden] { display: none; }

/* ---------- チャンネルの権限編集 ---------- */
.modal.rp-modal { width: min(880px, 100%); padding: 22px 24px; max-height: 88vh; }
.rp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rp-head h2 { margin: 0; }
.rp-sub { margin: 6px 0 16px; }
.rp-body { display: grid; grid-template-columns: 220px 1fr; gap: 16px; min-height: 0; max-height: 56vh; }
.rp-list { overflow-y: auto; border-right: 1px solid var(--line); padding-right: 12px; display: flex; flex-direction: column; gap: 2px; }
.rp-sec { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--muted);
          font-weight: 700; letter-spacing: .06em; padding: 12px 6px 6px; }
.rp-sec:first-child { padding-top: 2px; }
.rp-add { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); }
.rp-add:hover { background: var(--hover); color: var(--text); }
.rp-add svg { width: 13px; height: 13px; }
.rp-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 8px; border-radius: var(--r-sm); color: var(--muted); }
.rp-row:hover { background: var(--hover); color: var(--text); }
.rp-row.on { background: var(--soft); color: var(--text); }
.rp-row i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.rp-row-t { min-width: 0; }
.rp-row-t b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-row-t small { display: block; font-size: 10.5px; color: var(--muted); }
.rp-empty { padding: 6px 8px; }
.rp-panel { overflow-y: auto; min-width: 0; }
.rp-panel h3 { margin-bottom: 12px; }
.rp-group { margin-bottom: 6px; }
.rp-seg { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.rp-btn { padding: 6px 11px; font-size: 12px; color: var(--muted); }
.rp-btn:not(:last-child) { border-right: 1px solid var(--line); }
.rp-btn:hover { background: var(--hover); }
.rp-btn.on.deny { background: var(--danger); color: #fff; }
.rp-btn.on.allow { background: var(--ok); color: #0b1a12; }
.rp-btn.on.inherit { background: var(--panel-2); color: var(--text); }
.rp-pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; margin-top: 10px; }
.rp-pick-list button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px; border-radius: var(--r-sm); }
.rp-pick-list button:hover { background: var(--hover); }
@media (max-width: 760px) {
  .rp-body { grid-template-columns: 1fr; max-height: none; }
  .rp-list { border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 10px;
             flex-direction: row; flex-wrap: wrap; max-height: 30vh; }
}

/* ログイン画面の下の、規約などへのリンク */
.auth-legal { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px;
              padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; }
.auth-legal a { color: var(--muted); text-decoration: none; }
.auth-legal a:hover { color: var(--text); text-decoration: underline; }

/* ホーム：スマホでは操作ボタンを横幅いっぱいに等分する */
@media (max-width: 760px) {
  .greet h1 { font-size: 21px; }
  .cp-acts { margin-left: 0; width: 100%; }
  .cp-acts .btn { flex: 1; padding: 10px 8px; }
}
/* スマホの上のバー：マイクとスピーカーは、通話中だけ出す（通話していないときは押しても意味がないため） */
@media (max-width: 760px) {
  body:not(.in-call) #micBtn, body:not(.in-call) #deafBtn { display: none; }
}
/* フレンド画面の見出し：タブが横にあふれないよう、ここだけ縮んで横に流せるようにする */
.main-head .tabs { flex: 1; min-width: 0; }
@media (max-width: 760px) {
  .tabs .sep { margin: 0 4px; }
  .tab { padding: 6px 10px; }
}

/* 設定・管理の右上の × */
.modal.wide { position: relative; }
.set-close { position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px;
             border-radius: var(--r-md); display: grid; place-items: center; color: var(--muted);
             background: var(--solid); border: 1px solid var(--line); }
.set-close:hover { color: var(--text); border-color: var(--accent); }
.set-close svg { width: 16px; height: 16px; }
.set-body { padding-right: 56px; }
.about-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 18px; font-size: 13px; }
.about-links a { color: var(--accent-2); }

@media (max-width: 760px) {
  /* スマホ：設定の項目は1行に並べて横に流す（4段に折り返して画面を食わないように） */
  /* 右上の × と重ならないよう、項目の列は × の手前で止める */
  .set-nav { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important;
             max-height: none !important; padding: 10px !important; scrollbar-width: none;
             width: calc(100% - 48px) !important; border-bottom: none !important; }
  .modal.wide { border-top: 0; }
  .modal.wide::after { content: ""; position: absolute; left: 0; right: 0; top: 56px; border-top: 1px solid var(--line); }
  .set-nav::-webkit-scrollbar { display: none; }
  .set-nav button { flex-shrink: 0; }
  /* 横に続きがあることが分かるよう、右端を薄くする */
  .set-nav { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .set-close { top: 9px; right: 8px; }
  .set-body { padding-right: 16px; }
}

/* 選択肢（select）を、どこでも同じ見た目に */
select { background-color: var(--panel); color: var(--text); border: 1px solid var(--line);
         border-radius: var(--r-sm); padding: 7px 10px; }
select:focus { border-color: var(--accent); outline: none; }
/* 発言者の名前は押すとプロフィールが開くので、指で押せる高さを確保する（見た目は変えない） */
.msg .meta .who { padding: 6px 0; margin: -6px 0; }
button.sw { min-height: 28px; }
/* スマホにはキーボードが無いので、ショートカットの表示は出さない */
@media (max-width: 760px), (pointer: coarse) { .jump kbd { display: none; } }

/* ===== 有料プラン ===== */
.plan-now { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; margin: 6px 0 18px;
            background: var(--panel); }
.plan-now.on { border-color: var(--accent); background: var(--soft); }
.plan-now b { display: block; font-size: 15px; }
.plan-now small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 4px; line-height: 1.6; }
.plan-points { display: grid; gap: 10px; margin: 8px 0 14px; }
.pp { display: flex; gap: 12px; align-items: flex-start; }
.pp-ico { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--r-md); display: grid; place-items: center;
          background: var(--soft); color: var(--accent-2); }
.pp-ico svg { width: 17px; height: 17px; }
.pp b { display: block; font-size: 14px; }
.pp small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.6; margin-top: 2px; }
.plan-buy { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }
.plus-tag { font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 1px 5px; margin-left: 6px;
            border-radius: 3px; background: var(--soft); color: var(--accent-2); vertical-align: 1px; }
.seg button.locked { opacity: .75; }
@media (max-width: 760px) { .plan-buy .btn { flex: 1; } }
/* コミュニティの統計 */
.st-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 6px; }
.st-tile { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; background: var(--panel); }
.st-tile small { display: block; font-size: 11.5px; color: var(--muted); }
.st-tile b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.st-h { font-size: 12px; letter-spacing: .06em; color: var(--muted); margin: 18px 0 8px; }
.st-chart { display: flex; align-items: flex-end; gap: 2px; height: 96px; padding: 6px; border: 1px solid var(--line);
            border-radius: var(--r-md); background: var(--panel); }
.st-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 2px; }
.st-bar i { display: block; width: 100%; min-height: 1px; background: var(--accent); border-radius: 2px 2px 0 0; opacity: .85; }
.st-bar:hover i { opacity: 1; }
.st-rank { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.st-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
.st-row:first-child { border-top: none; }
.st-i { width: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.st-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .st-tiles { grid-template-columns: repeat(2, 1fr); } }

/* スマホで部屋の上に通話を出すとき：顔は小さな横並びにして、チャットを広く残す */
@media (max-width: 760px) {
  .main.with-call #voiceView { height: auto; min-height: 0; max-height: 52%; }
  .main.with-call #voiceView .stage { padding: 10px 12px 6px; }
  .main.with-call #voiceView .tiles { display: flex; flex: 0 0 auto; gap: 8px; overflow-x: auto;
                                      justify-content: flex-start; scrollbar-width: none; }
  .main.with-call #voiceView .tiles::-webkit-scrollbar { display: none; }
  .main.with-call #voiceView .tile { flex: 0 0 96px; height: 104px; aspect-ratio: auto; gap: 6px;
                                     justify-content: flex-start; padding-top: 12px; border-radius: var(--r-md); }
  .main.with-call #voiceView .tile .ava.lg { width: 52px; height: 52px; font-size: 21px; }
  .main.with-call #voiceView .tile .tname { position: static; background: none; padding: 0; font-size: 11.5px;
                                            max-width: 88px; color: var(--text); }
  .main.with-call #voiceView .tile.has-cam { flex-basis: 140px; }
  .main.with-call #voiceView .controls { padding: 4px 8px 10px; gap: 6px; flex-wrap: nowrap; }
  .main.with-call #voiceView .cgroup { flex-wrap: nowrap; }
  .main.with-call #voiceView .controls .cbtn { width: 54px; height: 54px; gap: 4px; }
  .main.with-call #voiceView .controls .cbtn .cl { font-size: 10.5px; }
  .main.with-call #voiceView .controls .cbtn.hang { width: 60px; }
}

/* 権限表：スマホでは列を細くして、ロールが3つまでなら横に流さずに収める */
.pt-head .pt-col { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .pt-grid { grid-template-columns: minmax(118px, 1fr) repeat(var(--cols), 54px); }
  .pt-name { padding: 8px 10px; }
  .pt-name b { font-size: 13px; }
  .pt-name small { font-size: 11px; }
  .pt-head .pt-col, .pt-head .pt-name { font-size: 11px; padding: 9px 4px; }
  .pt-col { padding: 6px 2px; }
  .pt-cell { width: 32px; height: 32px; }
}
/* 通話の顔の下の名前：長いときは … で終える */
.tile .tname { overflow: hidden; }
.tile .tname span { min-width: 0; }

/* ===== ブースト ===== */
.boost { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; margin: 6px 0 18px; background: var(--panel); }
.boost-head { display: flex; align-items: center; gap: 14px; justify-content: space-between; flex-wrap: wrap; }
.boost-head b { display: block; font-size: 15px; }
.boost-head small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.boost-meter { display: flex; gap: 5px; }
.boost-meter i { width: 34px; height: 8px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line); }
.boost-meter i.on { background: var(--accent); border-color: var(--accent); }
.boost-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 4px; }
.bl { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; opacity: .72; }
.bl.on { opacity: 1; border-color: var(--accent); background: var(--soft); }
.bl b { font-size: 12.5px; display: block; margin-bottom: 4px; }
.bl ul { list-style: none; font-size: 12px; color: var(--muted); line-height: 1.7; }
.bl.on ul { color: var(--text); }
.bl li::before { content: "・"; }
@media (max-width: 760px) { .boost-levels { grid-template-columns: 1fr; } }
.look-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.look-thumb { width: 72px; height: 40px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
.vanity-in { width: 180px; border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-sm);
             padding: 7px 10px; color: var(--text); outline: none; }
.vanity-in:focus { border-color: var(--accent); }
/* 招待の画面のカード画像 */
.modal.has-banner { padding-top: 0; }
.invite-banner { margin: 0 -26px 14px; aspect-ratio: 1200 / 630; overflow: hidden; border-bottom: 1px solid var(--line); }
.invite-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) { .invite-banner { margin: 0 -18px 14px; } }
/* 部屋の背景（ブースト）：文字が読めるよう、地色を上に薄く重ねる */
#textView.has-bg { background:
  linear-gradient(color-mix(in srgb, var(--bg) 58%, transparent), color-mix(in srgb, var(--bg) 74%, transparent)),
  var(--room-bg) center / cover no-repeat; }
#textView.has-bg .msg:hover { background: color-mix(in srgb, var(--bg) 55%, transparent); }
/* 背景の上でも文字がにじまないよう、発言の文字に薄い影をつける */
#textView.has-bg .msg .text, #textView.has-bg .msg .meta { text-shadow: 0 1px 2px color-mix(in srgb, var(--bg) 70%, transparent); }
/* 部屋の種類などの選択カード。フォームの見出し（.field > label）の見た目に上書きされないようにする */
.field > label.kind { display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
                      font-size: 14px; font-weight: 400; color: var(--text); letter-spacing: 0; }
.field > label.kind b { display: block; font-size: 14px; font-weight: 700; }
.field > label.kind small { margin-top: 2px; line-height: 1.5; }
.field > label.kind:has(input:checked) { border-color: var(--accent); background: var(--soft); }
/* ジャンプ：左にコミュニティのアイコン（部屋の行は、その横に部屋のしるし） */
.jump-row .ji { width: 24px; height: 24px; }
.ji-sp, .jump-row .ji .ava { width: 24px; height: 24px; display: grid; place-items: center; }
.ji-sp .sp-icon { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; font-size: 15px;
                  display: grid; place-items: center; }
.jump-row .ji2 { display: grid; place-items: center; color: var(--muted); margin-left: -4px; }
.jump-row .ji2 svg { width: 14px; height: 14px; }
/* アイコンの絵文字えらび */
.icon-preview .ip-emo { width: 56%; height: 56%; }
.ip-more { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.ip-type { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-sm);
           padding: 8px 10px; color: var(--text); outline: none; font-size: 13px; }
.ip-type:focus { border-color: var(--accent); }

/* 部屋の権限：一覧と権限は中で流し、「キャンセル・保存」はいつも下に見えるようにする */
.modal.rp-modal { display: flex; flex-direction: column; overflow: hidden; height: min(780px, 88vh); }
.rp-modal .rp-head, .rp-modal .rp-sub { flex-shrink: 0; }
.rp-body { flex: 1; min-height: 0; max-height: none; grid-template-rows: minmax(0, 1fr); }
.rp-list, .rp-panel { min-height: 0; }
.rp-modal > .actions { flex-shrink: 0; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .modal.rp-modal { height: 92dvh; padding: 16px 14px; }
  .rp-body { grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
  .rp-list { max-height: 28vh; }
}

/* ===== 読み込み中の画面 ===== */
.boot { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 14px; transition: opacity .25s; }
.boot.done { opacity: 0; pointer-events: none; }
.boot-mark { width: 76px; height: 76px; border-radius: 18px; }
.boot-name { font-size: 15px; font-weight: 800; letter-spacing: .18em; color: var(--text); }
.boot-bar { width: 140px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 4px; }
.boot-bar i { display: block; width: 40%; height: 100%; background: var(--accent); border-radius: 2px;
              animation: bootSlide 1.1s ease-in-out infinite; }
.boot-bar.stop i { animation: none; width: 100%; background: var(--danger); }
@keyframes bootSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.boot-note { color: var(--muted); font-size: 12.5px; text-align: center; max-width: 280px; line-height: 1.7; }
@media (prefers-reduced-motion: reduce) { .boot-bar i { animation-duration: 2.4s; } }

/* ---------- ショップ ---------- */
.store-note { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: 16px;
              border: 1px dashed var(--line); border-radius: var(--r-md); color: var(--muted); font-size: 13px; }
.store-note svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.store-card { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-lg, 12px); padding: 20px; }
.store-card.owned { border-color: var(--accent); }
.sc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-tag { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
.sc-owned { font-size: 11.5px; font-weight: 700; color: var(--accent-ink); background: var(--accent); padding: 2px 8px; border-radius: 4px; }
.store-card h2 { font-size: 20px; font-weight: 800; margin-top: 6px; }
.sc-price { display: flex; align-items: baseline; gap: 4px; margin-top: 10px; }
.sc-price b { font-size: 28px; font-weight: 800; letter-spacing: -.01em; }
.sc-price span { color: var(--muted); font-size: 13px; }
.sc-sub { display: block; color: var(--muted); font-size: 12.5px; margin: 2px 0 12px; }
.sc-buy { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sc-label { display: block; font-size: 13px; margin: 4px 0 8px; }
.sc-spaces { display: grid; gap: 4px; max-height: calc(46px * 5); overflow-y: auto; }
.sc-space { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-align: left;
            border: 1px solid var(--line); min-height: 42px; }
.sc-space:hover { background: var(--hover); }
.sc-space .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.boost-meter.sm { gap: 3px; }
.boost-meter.sm i { width: 14px; height: 6px; }
.sc-go { font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.store-compare { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-lg, 12px); padding: 16px 20px; background: var(--panel); }
.store-compare h3 { font-size: 15px; margin-bottom: 10px; }
.cmp-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.cmp-row.head { border-top: 0; padding-top: 0; color: var(--muted); font-size: 12px; }
.cmp-row span:first-child { color: var(--muted); }
.cmp-row .plus { font-weight: 700; }
.store-legal { margin-top: 14px; }
@media (max-width: 600px) {
  .store-card { padding: 16px; }
  .cmp-row { grid-template-columns: 1fr 1fr 1fr; font-size: 12px; }
}
.composer.locked textarea { cursor: not-allowed; opacity: .7; }
.composer.locked .cmd-btn { opacity: .4; pointer-events: none; }
.composer.locked .send { opacity: .35; }
@media (max-width: 760px) {
  /* スマホ：設定など大きな画面は、すき間なく全面に出す（後ろの画面がのぞかないように） */
  .overlay:has(> .modal.wide) { padding: 0 !important; align-items: stretch; }
  .modal.wide { width: 100% !important; height: 100dvh !important; max-height: none !important; border-radius: 0 !important;
                border: 0 !important; padding-top: env(safe-area-inset-top); }
}
/* 通話のタイル：名前の札がアイコンに重ならないよう、アイコンを少し上へ。スマホではアイコンを小さく */
#voiceView .tile:not(.has-cam) { padding-bottom: 30px; }
@media (max-width: 760px) {
  #voiceView .tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  #voiceView .tile .ava.lg { width: 54px; height: 54px; font-size: 22px; }
  #voiceView .tile .tname { left: 8px; bottom: 8px; max-width: calc(100% - 16px); font-size: 12px; }
  .stage { padding: 14px; }
}
@media (max-width: 760px) {
  .cgroup.one { flex-wrap: nowrap; gap: 2px; max-width: 100%; }
  .cgroup.one .cbtn { width: auto !important; min-width: 0; flex: 1 1 0; height: 56px !important; padding: 0 2px; }
  .cgroup.one .cbtn .cl { font-size: 10.5px; }
  .cgroup.one .cbtn.hang { flex: 1.15 1 0; }
}
/* スマホ：通話中の帯（ほかの画面を見ているとき） */
.call-strip { display: none; }
@media (max-width: 760px) {
  .call-strip:not([hidden]) { display: flex; align-items: center; gap: 6px; padding: 6px 10px; flex-shrink: 0;
    background: color-mix(in srgb, var(--ok) 14%, var(--side)); border-bottom: 1px solid var(--line); }
  .call-strip .cs-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; text-align: left; height: 36px; }
  .call-strip .cs-go b { font-size: 13px; color: var(--ok); flex-shrink: 0; }
  .call-strip .cs-where { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .call-strip .cs-back { font-size: 12px; font-weight: 700; color: var(--text); flex-shrink: 0; padding: 0 4px; }
  .call-strip .cs-btn { width: 38px; height: 36px; border-radius: 8px; display: grid; place-items: center;
    background: var(--panel); border: 1px solid var(--line); flex-shrink: 0; }
  .call-strip .cs-btn svg { width: 17px; height: 17px; }
  .call-strip .cs-btn.off { color: var(--danger); }
  .call-strip .cs-btn.hang { background: var(--danger); border-color: var(--danger); color: #fff; }
}

/* ============================================================
   点検での直し（主にスマホ）
   ============================================================ */
/* メニューやプロフィールが画面より高いときは、中をスクロール */
.pop { max-height: calc(100dvh - 24px); overflow-y: auto; }
.pcard { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
.eb { height: min(396px, calc(100dvh - 40px)); }
/* みんなで再生の小窓が、確認の画面やボタンをふさがないように */
.media-dock:not(.docked) { z-index: 45; }
body:has(.overlay) .media-dock:not(.docked) { visibility: hidden; }
/* お知らせ（トースト）が細長くならないように */
.toast { width: max-content; max-width: calc(100vw - 32px); text-align: center; }
/* 部屋の権限の画面：× をこの画面の右上に */
.modal.rp-modal { position: relative; }
/* ロールの編集など、下に固定したボタンが切れないように */
.modal.tall .actions { bottom: 0; background: var(--solid, var(--panel)); }
/* 大きな画面は、キーボードが出ても上が切れないよう全体をスクロールできるように */
.overlay { overflow-y: auto; }
.modal { max-height: 88dvh; }
.jump-list { max-height: min(360px, 45dvh); }
.store-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.srow .sl small { overflow-wrap: anywhere; }

@media (max-width: 760px) {
  /* メンバー管理：ボタンは名前の下へ */
  .mem-row { flex-wrap: wrap; }
  .mem-acts { width: 100%; flex-wrap: wrap; padding-left: 52px; }
  /* 作業タイマーのカード */
  .focus-card { flex-wrap: wrap; gap: 12px; }
  .focus-card .ring { width: 64px; height: 64px; }
  .focus-card .fa { width: 100%; }
  /* 権限表：列を細くし、権限の名前は横にスクロールしても残す */
  .pt-grid { grid-template-columns: minmax(112px, 1fr) repeat(var(--cols), 46px) !important; }
  .pt-name { position: sticky; left: 0; background: var(--panel); z-index: 1; }
  /* 統計のグラフ（90日分）がはみ出さないように */
  .st-chart { gap: 1px; }
  .st-bar { min-width: 0; }
  /* 部屋の権限：禁止・そのまま・許可を下の段に広げて押しやすく */
  *:has(> .rp-seg) { flex-wrap: wrap; }
  .rp-seg { width: 100%; }
  .rp-btn { flex: 1; padding: 9px 0; }
  /* 色と絵文字の選択を押しやすい大きさに */
  .cp-grid { grid-template-columns: repeat(8, 1fr); }
  .emopick { grid-template-columns: repeat(7, 1fr); }
  /* 設定の行：右の操作が長いときは下の段へ */
  .srow:has(.look-acts) { flex-wrap: wrap; }
  .srow .look-acts { width: 100%; }
  /* 小さすぎる文字 */
  .bot-tag { font-size: 10.5px; }
}

/* 指で操作する端末 */
@media (hover: none) {
  /* ホバーで出るメッセージの操作は、長押しのメニューにまかせる（押したあとに残って邪魔になるため） */
  .msg .hover-acts, .msg:hover .hover-acts { display: none !important; }
  /* 部屋の歯車はいつも見えるように */
  .ch-gear { opacity: .6; }
}
@media (pointer: coarse) {
  /* 小さすぎるボタンを、指で押せる大きさに */
  .cat button.add, .ch-gear, .rp-add, .pt-x { min-width: 32px; min-height: 32px; }
  .attach-tray .at-x, .reply-bar .rb-x, .status-chip .sc-x { min-width: 30px; min-height: 30px; }
  .pe-close { min-width: 36px; min-height: 36px; }
}
@media (max-width: 760px) {
  /* スマホ：プロフィール編集も全面に。枠が二重になって中身が細くならないように */
  .overlay:has(> .modal.profile-modal) { padding: 0 !important; align-items: stretch; }
  .modal.profile-modal { height: 100dvh; max-height: none !important; border-radius: 0; border: 0; display: flex; flex-direction: column; }
  .set-body.prof-only { padding: 52px 12px 20px !important; max-height: none !important; flex: 1; min-height: 0; }
  .prof-only .pf-card { border: 0; }
  .modal.profile-modal .pe-close { top: 10px; right: 10px; }
}
@media (hover: none) {
  /* 指の端末：背景を押すと変えられることが分かるよう、案内をいつも出しておく */
  .pf-banner .pf-shade { opacity: .9; background: linear-gradient(transparent 40%, rgba(0,0,0,.55)); align-items: flex-end; padding-bottom: 10px; }
}
/* 文字の部屋の上に出る小さな通話タイルでは、名前はアイコンの下に置くので、下の余白は要らない */
.main.with-call #voiceView .tile:not(.has-cam) { padding-bottom: 0; }
@media (max-width: 760px) {
  /* 検索はキーボードで隠れないよう、上に寄せる */
  .overlay:has(> .modal.search-modal) { align-items: flex-start; }
  .modal.search-modal { margin-top: 8px; }
}
.pt-na { color: var(--muted); opacity: .6; font-weight: 700; }
.rp-btn:disabled { opacity: .35; cursor: not-allowed; }
/* 部屋の設定：プライベートの部屋に入れる人を選ぶ */
.room-pick-box { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px; margin: 4px 0 14px; display: grid; gap: 8px; }
.room-pick-box .rp-search { width: 100%; }
.room-picks { max-height: 220px; overflow-y: auto; display: grid; gap: 2px; }
.room-pick { display: flex; align-items: center; gap: 9px; padding: 6px 6px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
.room-pick:hover { background: var(--hover); }
.room-pick input { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.ch .vlimit { font-size: 10.5px; color: var(--muted); background: var(--soft); border-radius: 3px; padding: 1px 6px; }
.callbtn.full { opacity: .6; } .callbtn.full svg { color: var(--muted); }
.room-pick-box .rp-search { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 9px 12px; color: var(--text); font: inherit; font-size: 13.5px; outline: none; }
.room-pick-box .rp-search:focus { border-color: var(--accent); }
.eb-grid .eb-make { border: 1px dashed var(--line); color: var(--muted); font-size: 20px; }
.eb-grid .eb-make:hover { color: var(--accent); border-color: var(--accent); }

/* ===== 部屋のマーク（ブーストのレベル1から、好きな絵文字にできる） ===== */
.room-emo { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; }
.ch .ico .room-emo { width: 17px; height: 17px; }
.hello .big .room-emo { width: 36px; height: 36px; }
.jump-row .ji2 .room-emo { width: 15px; height: 15px; }
.room-mark-prev { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--panel-2);
                  display: grid; place-items: center; color: var(--muted); }
.room-mark-prev svg { width: 18px; height: 18px; }
.room-mark-prev .room-emo { width: 22px; height: 22px; }
/* 絵文字の板：ほかのコミュニティの絵文字の見出し */
.eb-grid .eb-sub { grid-column: 1 / -1; font-size: 11px; font-weight: 700; color: var(--muted);
                   padding: 8px 4px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boost-levels { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 420px) { .boost-levels { grid-template-columns: 1fr; } }
/* 通知設定：段階を選ぶ */
.notify-levels { display: grid; gap: 8px; margin: 12px 0; }
.notify-levels .kind { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); }
.notify-levels .kind:hover { border-color: var(--accent); }
.notify-levels .kind b { display: block; font-size: 14px; }
.notify-levels .kind small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.notify-levels .nl-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; }
.notify-levels .kind.on { border-color: var(--accent); background: var(--soft); }
.notify-levels .kind.on .nl-dot { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--panel); background: var(--accent); }
/* 配信の右クリックメニュー：音量 */
.stream-menu .sv-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px 2px; font-size: 13px; }
.stream-menu .sv-row svg { width: 16px; height: 16px; color: var(--muted); }
.stream-menu .sv-row span:first-of-type { flex: 1; }
.stream-menu .sv-val { color: var(--muted); font-variant-numeric: tabular-nums; }
.stream-menu input[type=range] { width: calc(100% - 20px); margin: 4px 10px 8px; accent-color: var(--accent); }

/* ============================================================
   BOT のカード（埋め込み）・ボタン・選択メニュー・本人にだけの返事
   ============================================================ */
.text .edited { font-size: 11px; color: var(--muted); margin-left: 6px; }
.embed { display: flex; gap: 14px; max-width: 520px; margin-top: 6px; padding: 10px 14px 12px; background: var(--panel);
  border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-md); }
.embed .em-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.embed .em-author { font-size: 12px; font-weight: 700; color: var(--muted); }
.embed .em-title { font-weight: 800; font-size: 14.5px; color: var(--text); text-decoration: none; }
.embed a.em-title { color: var(--accent); }
.embed a.em-title:hover { text-decoration: underline; }
.embed .em-desc { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.embed .em-fields { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.embed .em-field { flex: 1 1 100%; min-width: 0; font-size: 13px; }
.embed .em-field.inline { flex: 1 1 140px; }
.embed .em-field b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.embed .em-image { max-width: 100%; max-height: 320px; border-radius: var(--r-sm); cursor: zoom-in; }
.embed .em-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); flex-shrink: 0; }
.embed .em-footer { font-size: 11.5px; color: var(--muted); }
.components { display: grid; gap: 6px; margin-top: 6px; max-width: 520px; }
.components .msg-btns { margin: 0; }
.msg-btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.msg-btn.success { background: color-mix(in srgb, var(--ok) 85%, #000); color: #fff; border-color: transparent; }
.msg-btn.danger { background: var(--danger); color: #fff; border-color: transparent; }
.msg-btn.link { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; color: var(--text); }
.msg-btn.link svg { width: 13px; height: 13px; }
.msg-btn:disabled { opacity: .45; cursor: not-allowed; }
.msg-select { width: 100%; max-width: 420px; padding: 8px 10px; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-md); font: inherit; font-size: 13.5px; }
.msg-select[multiple] { min-height: 96px; }
.msg-select-row { display: flex; gap: 8px; align-items: flex-start; }
.msg.ephemeral { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.eph-note { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.eph-note svg { width: 13px; height: 13px; }
.eph-note button { color: var(--accent); font-size: 11.5px; }

.bot-perm-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px; margin: 6px 0 10px; }

/* メンションの候補と、発言の中のメンション */
.composer { position: relative; }
.mention-pop { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 4px); max-width: 420px; max-height: 300px;
  overflow-y: auto; background: var(--solid, var(--panel)); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow); padding: 4px; z-index: 30; }
.mention-pop .mn-row { width: 100%; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 6px; text-align: left; }
.mention-pop .mn-row.on, .mention-pop .mn-row:hover { background: var(--hover); }
.mention-pop .mn-row b { font-size: 13.5px; }
.mention-pop .mn-row small { color: var(--muted); font-size: 12px; margin-left: auto; }
.mention-pop .mn-all { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--accent); }
.mention-pop .mn-all svg { width: 14px; height: 14px; }
.mention { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.mention.me { background: color-mix(in srgb, var(--accent) 26%, transparent); }