/* ============================================================================
   カスケードレイヤーの宣言（2026-08-12 導入）
   ============================================================================

   ■ なぜ入れたか

     このファイルには以前 !important が 377 個あった。機械的に調べたところ
     541 宣言のうち **521 個（96%）が「自分より前の行にある同じプロパティ」**と
     戦っていた。つまりほぼ全部が自作自演で、
       「後から書いた指定が、前の指定より詳細度で負ける」
       →「!important で押し切る」
       →「次の人はさらに強い !important が要る」
     という循環に入っていた。

   ■ どう解決したか

     レイヤーは**詳細度より先に**勝負を決める。後ろのレイヤーに書けば、
     セレクタが弱くても勝つ。だから !important が要らなくなる。

       base … このファイル（共通のスタイル）
       page … 各テンプレートの <style>（そのページ固有の上書き）

     page は base に必ず勝つ。ページ固有の調整をするときに
     `.rooms-page .foo .bar` のようにセレクタを積む必要はない。

   ■ 守ること

     - **!important を書かない。** 効かないときはレイヤーの順序か、
       同じセレクタの二重定義を疑う（実際 .btn が 2 回定義されていて、
       後の方が .btn-primary を打ち消していた）。
     - 新しいレイヤーを足すときは、この行の順序に必ず追加する。
       ここに無いレイヤーは「宣言順」で最後になり、意図しない強さになる。
     - レイヤーに入っていないスタイルは**全レイヤーより強い**。
       テンプレートの <style> は必ず @layer page で包むこと。
   ============================================================================ */
@layer base, page;

@layer base {
/* Full legacy styles (copied from legacy-react/src/styles.css) */
/*
  日本語フォント（Noto Sans JP）の @font-face 定義は、以前ここに
  @import url("/vendor/fonts/noto-sans-jp/noto-sans-jp.local.css") と書かれていた。

  @import は「chat.css を取得 → 解析 → そこで初めてフォント CSS を取得」という
  直列の読み込みになり、62KB のフォント CSS が初期表示を約 850ms 止めていた。
  そのため templates/fragments/assets.html から <link> で並列に読むよう移動している。
  フォント CSS を足す場合はそちらに追加すること（ここに @import を戻さない）。
*/

/* ============================================================================
   デザイントークン
   ============================================================================

   ■ なぜ必要か（2026-08-08 時点の実測）
     - 色が 295 種類。うち 178 種類は「1 回しか使われていない」
     - が 555 個。カスケードが壊れており、新しい指定が当たらない
     - font-size が 13 種類（10〜24px の 1px 刻み）
     - border-radius が 11 種類（9px と 10px、18px と 20px が併存）
     この状態では新しいデザインを当てても当たらないか、別画面が壊れる。

   ■ 使い方
     新しく書くスタイル・改修するスタイルは、生の値ではなくここのトークンを使う。
     既存の 3,300 行は一括では書き換えない（事故るため）。触った箇所から寄せていく。

   ■ 移行の進め方
     見た目を変えずに寄せるのが原則。変更したら必ず
       cd e2e && npx playwright test v-visual
     で 24 枚のスクリーンショットと突き合わせること。

   ■ 既知の注意点
     1. このファイルにはテーマ変数（--bg / --text / --accent など）のセットが
        **2 組** ある（:root 11行目付近 と 2630行目付近）。同じ詳細度なので
        後勝ちで 2 組目が有効で、1 組目の色定義は死んでいる。
        1 組目を編集しても何も起きないので注意。統合は Phase 2-c で行う。
     2. 中間色に Tailwind の slate 系と gray 系が混在している
        （例: #94a3b8=slate-400 と #9ca3af=gray-400）。
        下記では slate 系を正とする。gray 系は移行時に画像差分を見ながら寄せる。
   ============================================================================ */

:root{
	/* --- 原色（テーマに依存しない生の値。直接使わずセマンティック経由で使う） --- */
	--t-white:        #ffffff;
	--t-black:        #000000;

	/* 中間色: Tailwind slate 相当。実際に使われている値を採用している */
	--t-slate-200:    #e2e8f0;
	--t-slate-300:    #cbd5e1;
	--t-slate-400:    #94a3b8;
	--t-slate-500:    #64748b;
	--t-slate-600:    #475569;
	--t-slate-800:    #1e293b;
	--t-slate-900:    #0f172a;

	/* 中間色: Tailwind gray 相当。slate と混在しているのが現状。
	   どちらかに寄せると色が変わるため、いまは両方を正として持っている。
	   統一するかどうかはデザイン判断（寄せるなら画像差分を見ながら）。
	   新しく書くコードでは slate 側を使うこと。 */
	--t-gray-200:     #e5e7eb;
	--t-gray-300:     #d1d5db;
	--t-gray-400:     #9ca3af;
	--t-gray-500:     #6b7280;
	--t-gray-700:     #374151;
	--t-gray-900:     #111827;

	/* ブランド: 温かみのあるベージュ〜キャメル。ライトテーマの基調 */
	--t-brand-50:     #fffaf4;  /* surface */
	--t-brand-100:    #fbf6ee;  /* background */
	--t-brand-200:    #f7efe0;  /* panel */
	--t-brand-600:    #b57a3a;  /* accent */
	--t-brand-ink:    #2b2b2b;  /* ライトテーマの本文色 */
	--t-brand-muted:  #7a6f5f;

	/* ダークテーマの基調（現行の「Modern minimal」セットの値） */
	--t-navy-900:     #0b1324;  /* background */
	--t-navy-800:     #101a2b;  /* surface */
	--t-navy-700:     #141d2e;  /* panel */
	--t-navy-ink:     #e7edf6;  /* 本文色 */
	--t-navy-muted:   #96a3b5;

	/* ========================================================================
	   2026-08-12 追加: 「やわらかコミュニティ」パレット
	   ========================================================================

	   ■ なぜ低彩度の中立色なのか（重要。ここを外すと吹き出しが浮く）
	     吹き出しとアバターの色は CSS ではなく JS が決めている
	     （room.js の bubbleToneFromAvatarColor。発言者IDのハッシュから色相を出す）。
	     つまり**地の色の上にはどんな色相も乗りうる**。
	     地をクリーム(暖色)にすると青系・緑系の話者が浮くため、
	     地は彩度を落とした暖かい中立色に寄せる。暖かさは色相ではなく
	     わずかな赤寄りの無彩色で出す。

	   ■ 旧セット（--t-navy-* / --t-brand-1xx）は既存ルールがまだ参照しているので
	     消さない。新しく書くところはこちらを使う。

	   ■ コントラストは目視で決めていない
	     scratchpad/contrast.mjs で 16 通りの組み合わせを計算し、
	     本文・補助文字は 4.5:1 以上、境界線は 1.5:1 以上を満たす値だけを採用した。
	     値を変えるときは同じ検算をしてから変えること。
	   ======================================================================== */

	/* ライト: アイボリー〜ウォームグレー */
	--t-ivory-50:     #ffffff;  /* カード面 */
	--t-ivory-100:    #faf7f3;  /* 背景 */
	--t-ivory-200:    #f3eee7;  /* パネル */
	--t-ivory-300:    #d5c8b6;  /* 境界（背景比 1.54:1） */
	--t-ivory-ink:    #35302b;  /* 本文（背景比 12.22:1） */
	--t-ivory-muted:  #6f665c;  /* 補助（背景比 5.27:1） */

	/* ダーク: ウォームチャコール（青みを抜いた濃色） */
	--t-umber-950:    #191713;  /* 背景 */
	--t-umber-900:    #221f1a;  /* カード面 */
	--t-umber-800:    #2b2721;  /* パネル */
	--t-umber-700:    #453f36;  /* 境界（背景比 1.72:1） */
	--t-umber-ink:    #f0eae2;  /* 本文（背景比 14.98:1） */
	--t-umber-muted:  #a79c8e;  /* 補助（背景比 6.64:1） */

	/* アクセント: テラコッタ〜コーラル。両テーマで同じ系統を使い、明度だけ振る。
	   600 は「白文字を乗せてよい」唯一の段（白比 4.68:1）。300〜500 に白は乗せない。 */
	--t-coral-300:    #f2a288;
	--t-coral-400:    #e8886a;  /* ダークのアクセント文字（背景比 6.96:1） */
	--t-coral-500:    #d9694a;
	--t-coral-600:    #bd5438;  /* 塗り + 白文字 */
	--t-coral-700:    #a2452c;  /* ライトのアクセント文字（背景比 5.74:1） */

	/* 強調・状態色 */
	--t-blue-300:     #8fb7ff;  /* ダークテーマの accent */
	--t-blue-400:     #60a5fa;
	--t-blue-500:     #3b82f6;
	--t-blue-600:     #2563eb;
	--t-green-400:    #5ccf9c;
	--t-green-600:    #059669;
	--t-red-200:      #fecaca;
	--t-red-500:      #ef4444;
	--t-pink-500:     #ec4899;

	/* --- 重ね色（半透明）---
	   実測すると 202 種類の半透明色は、ほぼこの階段に収まっていた。
	   影・境界線・ホバーはこの階段から選ぶ。新しい alpha 値を作らない。 */
	--t-overlay-white-02: rgba(255,255,255,0.02);
	--t-overlay-white-03: rgba(255,255,255,0.03);
	--t-overlay-white-04: rgba(255,255,255,0.04);
	--t-overlay-white-06: rgba(255,255,255,0.06);
	--t-overlay-white-08: rgba(255,255,255,0.08);
	--t-overlay-white-10: rgba(255,255,255,0.10);
	--t-overlay-white-12: rgba(255,255,255,0.12);
	--t-overlay-white-14: rgba(255,255,255,0.14);
	--t-overlay-white-20: rgba(255,255,255,0.20);
	--t-overlay-black-04: rgba(0,0,0,0.04);
	--t-overlay-black-06: rgba(0,0,0,0.06);
	--t-overlay-black-10: rgba(0,0,0,0.10);
	--t-overlay-black-12: rgba(0,0,0,0.12);
	--t-overlay-black-45: rgba(0,0,0,0.45);

	/* --- 文字サイズ ---
	   実測 13 種類を 8 段階に整理した。カッコ内は現行の使用回数。
	   密度の高いチャット UI では 1px 差にも意味があるため、
	   小さい側は 1px 刻みを残している。
	   移行時に寄せ先が要るもの: 15px(15回)→lg / 17,18,19px→xl / 22px→2xl */
	--t-fs-2xs:  10px;  /* (13回) 時刻・メタ情報 */
	--t-fs-xs:   11px;  /* (27回) 補助ラベル */
	--t-fs-sm:   12px;  /* (53回) 既定の小文字 */
	--t-fs-md:   13px;  /* (50回) 本文・吹き出し */
	--t-fs-lg:   14px;  /* (23回) 入力欄 */
	--t-fs-xl:   16px;  /* (11回) 見出し小 */
	--t-fs-2xl:  20px;  /* 見出し */
	--t-fs-3xl:  24px;  /* 見出し大 */

	/* --- 角丸 ---
	   2026-08-12: 「やわらかコミュニティ」方針で全体に一段大きくした。
	   これらのトークンは**この時点で使用箇所が 0 だった**（前回定義だけして
	   適用していなかった）ので、値を変えても既存の見た目は動かない。 */
	--t-radius-xs:   8px;
	--t-radius-sm:  12px;
	--t-radius-md:  16px;   /* 既定。小さめのボタン・チップ */
	--t-radius-lg:  22px;   /* カード */
	--t-radius-xl:  28px;   /* 大きいカード・モーダル */
	--t-radius-2xl: 36px;   /* ヒーロー・パネル */
	--t-radius-pill: 999px; /* ピル・円形。押せるものは基本これ */

	/* --- 余白 ---
	   4px 刻み。従来は生の px 値が散らばっていたので、新しく書く所はここから選ぶ。 */
	--t-space-1:   4px;
	--t-space-2:   8px;
	--t-space-3:  12px;
	--t-space-4:  16px;
	--t-space-5:  20px;
	--t-space-6:  24px;
	--t-space-8:  32px;
	--t-space-10: 40px;
	--t-space-12: 48px;

	/* --- 影 ---
	   やわらかさは「濃い影」ではなく「広く薄い影」で出す。
	   ダークテーマでは影がほぼ効かないので、境界線で代替すること。 */
	/* 「ふわふわ」は影の濃さではなく**層の数**で出る。
	   1枚の影は「板が浮いている」ように見えるが、近い小さな影と遠い大きな影を
	   重ねると「やわらかいものが浮いている」ように見える。 */
	--t-shadow-sm:
		0 1px 2px rgba(60,45,30,0.04),
		0 2px 6px rgba(60,45,30,0.04);
	--t-shadow-md:
		0 2px 6px rgba(60,45,30,0.05),
		0 8px 20px rgba(60,45,30,0.06);
	--t-shadow-lg:
		0 4px 10px rgba(60,45,30,0.05),
		0 16px 40px rgba(60,45,30,0.09);
	/* 浮き上がったとき。影を濃くするのではなく遠くへ広げる */
	--t-shadow-float:
		0 6px 14px rgba(60,45,30,0.06),
		0 22px 50px rgba(60,45,30,0.11);

	/* --- 動き ---
	   ふわっと見えるかどうかは、ほぼイージングで決まる。
	   linear / ease は機械的に見えるので使わない。
	     soft   … 減速して止まる。位置・不透明度の変化に使う
	     bounce … 少し行き過ぎて戻る。出現と押下のフィードバックに使う */
	--t-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
	--t-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
	--t-dur-fast: 140ms;
	--t-dur-base: 220ms;
	--t-dur-slow: 380ms;

	/* --- 文字の太さ ---
	   実測 7 種類。800/900 は 700 に寄せる（差が視認しづらく使い分けが曖昧なため） */
	--t-fw-normal:   400;
	--t-fw-medium:   500;
	--t-fw-semibold: 600;
	--t-fw-bold:     700;
	/* layout size helpers */
	/* ヘッダーの中身の高さ。上下 padding 6px を足した値が実際の高さになる。
	   24px だとボタンが 30px 前後にしかならず、指で押す領域として小さかった。
	   32px にしてボタン 38px を収める。この値は chat-window の margin-top や
	   message-list の padding など、画面の各所が参照している。 */
	--header-height: 32px;
	--topbar-height: 2px; /* device-id / topbar height (reduced for compact header) */
	--footer-height: 65px; /* space reserved for fixed footers / input */
	--kb-safe: 0px; /* dynamic safe area above mobile keyboard (set via JS) */
	--bottom-extra: 20px; /* extra breathing room below the last chat message (was 10px) */
	--main-padding: 20px; /* base padding used by main */

	/* --- テーマ別の意味づけ（セマンティック変数）---
	   コンポーネントはこれらを使う。原色（--t-*）を直接使わない。
	   既定はダークで、<html> に .theme-light が付くとライトに切り替わる
	   （切り替えは各テンプレートの head 内スクリプトが localStorage 'chat-theme' を見て行う）。

	   ⚠️ 以前はこの変数セットがファイル内に2組あり（ここと約2760行目）、
	      同じ詳細度で後勝ちだったため、ここを編集しても何も起きない状態だった。
	      2026-08-08 に1組へ統合済み。**2組目を作らないこと。** */
	--bg: var(--t-umber-950);
	--panel: var(--t-umber-800);
	--surface: var(--t-umber-900);
	--muted: var(--t-umber-muted);
	--text: var(--t-umber-ink);
	--avatar-foreground: rgba(25,23,19,0.95);
	/* --accent は「塗り」と「文字」で必要な明度が逆になる。
	   塗りに置く色(600)は白文字が乗る濃さ、文字に使う色(400)は地に対して読める明るさ。
	   1つの変数で兼ねると必ずどちらかが読めなくなるので分けている。 */
	--accent: var(--t-coral-600);
	--accent-text: var(--t-coral-400);
	--accent-hover: var(--t-coral-500);
	--on-accent: var(--t-white);
	--success: var(--t-green-400);
	--panel-border: var(--t-umber-700);
	--icon-color: rgba(240,234,226,0.98);
	--send-icon-color: var(--t-white);
	--glow: rgba(217,105,74,0.18);
	--elevation: var(--t-shadow-md);
	/* ダークでは黒い影がほぼ見えないので、面の上端に淡い内側のふちを入れて
	   「浮いている」ことを出す。ライトでは逆に白すぎるので極薄にする。 */
	--ring: inset 0 1px 0 rgba(255,255,255,0.05);
	/* 未読バッジはアクセントと同じ色でよい。赤を別に持つと
	   テラコッタのアクセントと濁って見えるため。 */
	--unread-bg: var(--t-coral-600);
	--unread-fg: var(--t-white);
}

.theme-light{
	--bg: var(--t-ivory-100);
	--panel: var(--t-ivory-200);
	--surface: var(--t-ivory-50);
	--muted: var(--t-ivory-muted);
	--text: var(--t-ivory-ink);
	--avatar-foreground: rgba(53,48,43,0.88);
	--accent: var(--t-coral-600);
	--accent-text: var(--t-coral-700);
	--accent-hover: var(--t-coral-700);
	--on-accent: var(--t-white);
	--success: var(--t-green-600);
	--panel-border: var(--t-ivory-300);
	--icon-color: rgba(53,48,43,0.92);
	--send-icon-color: var(--t-white);
	--glow: rgba(189,84,56,0.18);
	--elevation: var(--t-shadow-md);
	--ring: inset 0 1px 0 rgba(255,255,255,0.6);
	--unread-bg: var(--t-coral-600);
	--unread-fg: var(--t-white);
}
/* Terms / generic content page styles */
.page-container {
	background: var(--surface);
	border: 1px solid var(--panel-border);
	border-radius: var(--t-radius-xl);
	padding: var(--t-space-8);
	color: var(--text);
	box-shadow: var(--t-shadow-md);
}
/*
  利用規約・プライバシーポリシーなどの文章ページ。
  見出し 16px / 小見出し 12px / 本文 12px 前後で、規約なのに読ませる気のない
  大きさだった。ここは読んでもらう必要がある文書なので本文を 15px に上げ、
  見出しとの差も付ける。
*/
.page-container h1 {
        font-size: 22px;
        margin: 0 0 var(--t-space-4) 0;
        color: var(--text);
}
.page-container h2 {
        font-size: 17px;
        margin: var(--t-space-8) 0 var(--t-space-3) 0;
        color: var(--text);
}
.page-container p,
.page-container ul,
.page-container ol {
	color: var(--muted);
	font-size: 15px;
	line-height: 1.9;
}
.page-container ul {
	margin-left: 1.2em;
}
/* リンクは塗り用の --accent ではなく文字用の --accent-text を使う
   （--accent は白文字を乗せる前提の濃さなので、地の上では読みにくい） */
.page-container a { color: var(--accent-text); text-decoration: underline; }

/* テーマ別の影・境界の上書きはセマンティック変数に統合したので不要になった */

@media (max-width: 820px) {
        .page-container { padding: 18px; }
        .page-container h1 { font-size: 16px; }
}

svg { color: var(--icon-color); }
.app{display:flex;flex-direction:column;position:relative;box-sizing:border-box;overflow:hidden;background:var(--bg);min-height:100dvh;height:100dvh}
/* Content pages (about/terms/privacy/landing etc.): allow normal page scrolling. */
body:not(.rooms-page):not(.chat-page) .app{
        overflow: visible;
        height: auto;
        min-height: 100vh;
}
/*
  2026-08-12: height:100% → min-height:100%

  height:100% だと body が 1 画面ぶんに固定され、はみ出した中身は
  **body 自身**がスクロール箱になって受け止めていた。ホイールでは読めるが、
  ページのスクロール位置は window ではなく body.scrollTop に入るため
    - ページ内リンク（#anchor）が飛ばない
    - window.scrollTo / 「上に戻る」が効かない
    - スマホでアドレスバーが引っ込まない
  という状態だった（/about は 2,958px のうち 720px しか window から見えず、
  スクリーンショットも途中で切れていた）。

  min-height にすると body が中身ぶん伸び、通常どおりページがスクロールする。
  チャット画面は body.chat-page{overflow:hidden} と .chat-window の
  height:calc(100vh - ...) で高さを作っているので、この変更に依存していない。
*/
body,html,#root{
	min-height:100%;margin:0;
	font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic',Meiryo,'Helvetica Neue',Arial,sans-serif;
}
html{font-size:12px}

/* Responsive typography and spacing for mobile devices
	 Increase base font-size slightly on narrow viewports so text remains
	 readable instead of shrinking when the layout becomes wide. */
@media (max-width: 820px) {
        /* Increase bottom padding on mobile to prevent input overlap */
        :root { --bottom-extra: 40px; }
        html { font-size: 14px; }
        body { font-size: 12px; }
        /* make the main chat container use full width with smaller padding */
        .chat-window {
	 
	 
}
        /* slightly larger names and message text for readability */
        .room-meta .name { font-size: 14px; }
        .room-meta .desc, .room-entry .desc { font-size: 11px; }
        .message-list.rich .bubble .text { font-size: 13px; line-height: 1.45; }
        .rooms-search-input { font-size: 12px; padding: 12px; }
}

@media (max-width: 420px) {
        /* Extra bottom padding on very small phones to prevent input overlap */
        :root { --bottom-extra: 50px; }
        /* very small phones: bump base slightly more and ensure inputs remain tappable */
        html { font-size: 15px }
        body { font-size: 13px }
        .room-meta .name { font-size: 13px; }
        .message-list.rich .bubble .text { font-size: 13px; }
        .room-avatar-text { font-size: 11px }
}
/* prevent horizontal overflow on small viewports caused by negative margins */
html, body { overflow-x: hidden; }
body{font-size:12px;line-height:1.5}

.app-header{
	padding:6px 12px;font-weight:600;color:var(--text);height:var(--header-height);display:flex;align-items:center;position:fixed;top:0;left:0;right:0;
	touch-action: none;
	padding-right:12px;padding-left:12px;
}
.app-header .header-exit{padding:8px;border-radius:8px;display:flex;align-items:center}
.app-header .header-exit svg{width:18px;height:18px}
.desktop-left-ad{display:none}
.desktop-right-ad{display:none}
/*
  2026-09-01: aspect-ratio:1/1 の可変正方形でもGoogleが縦長クリエイティブ（300x600）を
  選んで overflow:hidden で切れる事故が直らなかったため、広告ユニット自体をAdSense管理画面で
  固定サイズに変更した（ユーザー指示）。固定サイズ広告には固定サイズの箱が要るので、
  レール幅もその分だけ固定にし、レールを表示し始める画面幅を引き上げてどの対象画面でも
  箱が本文とぶつからず収まるようにしている。
  最初は250x250にしたが、表示開始が1360pxになり1280px幅（よくあるノートPC解像度）で
  広告が一切出なくなる問題があったため、200x200に縮小（ユーザー指示）。1260px以上で表示。
*/
@media (min-width: 1260px){
	/* Use the left/right empty margin on desktop for a larger ad when possible. */
	body.rooms-page,
	body.chat-page{
		--content-max-w: 800px;
		--rail-gap: 20px;
		--rail-w: 200px;
	}
	/* プロフィール画面はカード幅が 420px（.account-page__card）と他画面より狭いので、
	   レール計算の基準幅だけ合わせる（2026-08-22、他画面と同じ両サイド広告を追加）。 */
	body.account-page-body{
		--content-max-w: 420px;
		--rail-gap: 20px;
		--rail-w: 200px;
	}
	body.rooms-page .desktop-left-ad,
	body.chat-page .desktop-left-ad,
	body.account-page-body .desktop-left-ad{
		display:flex;
		flex-direction:column;
		gap:10px;
		position:fixed;
		top:calc(var(--header-height) + 12px);
		left:calc(50% - (var(--content-max-w) / 2) - var(--rail-gap) - var(--rail-w));
		width:var(--rail-w);
		z-index:1100;
	}

	/* Symmetric right rail */
	body.rooms-page .desktop-right-ad,
	body.chat-page .desktop-right-ad,
	body.account-page-body .desktop-right-ad{
		display:flex;
		flex-direction:column;
		gap:10px;
		position:fixed;
		top:calc(var(--header-height) + 12px);
		right:calc(50% - (var(--content-max-w) / 2) - var(--rail-gap) - var(--rail-w));
		width:var(--rail-w);
		z-index:1100;
	}
}

.desktop-ad-slot{
	width:200px;
	height:200px;
	flex:0 0 auto;
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	border:1px solid var(--panel-border);
	border-radius:var(--t-radius-xs);
	background:var(--surface);
}
.desktop-ad-slot::before{
	content:"広告";
	position:absolute;
	top:4px;
	left:50%;
	transform:translateX(-50%);
	font-size:10px;
	color:var(--muted);
	letter-spacing:.04em;
	z-index:1;
}
.desktop-ad-slot ins.adsbygoogle,
.desktop-ad-slot ins.adsbygoogle-manual{display:block;width:100%;height:100%}

/* Header layout: title left, buttons right */
.app-header .header-inner {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
}
.app-header .header-inner .header-title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Logo styling */
.app-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.logo-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: var(--accent);
}
.logo-text {
	font-weight: 700;
	font-size: 13px;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
body.chat-page .app-logo .logo-text,
body.rooms-page .app-logo .logo-text,
body.account-page-body .app-logo .logo-text{
	font-family:'Hiragino Maru Gothic ProN','Yu Gothic UI','Yu Gothic','Meiryo',sans-serif;
	font-weight:700;
	letter-spacing:.01em;
	text-shadow:.25px 0 0 currentColor;
}

.app-header .header-inner .header-controls {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-left: auto;
}

/* ----------------------------------------------------------------------------
   ヘッダーのボタン（2026-08-12 作り直し）

   以前は角丸 8px の四角で、高さが 30px 前後しかなかった。
   指で押す領域として小さく、押し間違いやすい。
   ピルにして最低 38px を確保し、押したときだけ少し沈ませる。

   ここは「ヘッダー内のボタンすべて」に一括で当てている。個別の id で
   四角く戻す指定を足さないこと（また粒度がばらばらになる）。
---------------------------------------------------------------------------- */
.app-header .header-controls > button,
.app-header .header-controls > a{
	box-sizing: border-box;
	min-height: 38px;
	min-width: 38px;
	border-radius: var(--t-radius-xs);
	transition: transform var(--t-dur-base) var(--t-ease-soft),
	            background var(--t-dur-fast) var(--t-ease-soft),
	            box-shadow var(--t-dur-base) var(--t-ease-soft);
}
.app-header .header-controls > button:active,
.app-header .header-controls > a:active{
	transform: scale(0.94);
	transition-duration: var(--t-dur-fast);
}
@media (prefers-reduced-motion: reduce){
	.app-header .header-controls > button,
	.app-header .header-controls > a{ transition:none }
	.app-header .header-controls > button:active,
	.app-header .header-controls > a:active{ transform:none }
}

main{flex:1;display:flex;justify-content:center;align-items:center;padding:var(--main-padding);padding-top:var(--main-padding)}
/* Rooms list should start from the top (avoid large empty space under fixed header) */
body.rooms-page main{align-items:flex-start;padding-top:0}
@media (min-width: 821px) {
        main { align-items: flex-start; padding-top: 0; max-width: 840px; margin: 0 auto; }
}
.chat-window{display:flex;flex-direction:column;overflow:visible;color:var(--text);position:relative;margin:var(--header-height) auto 0;padding:0 20px;box-sizing:border-box;width:100%;max-width:800px}
@media (min-width: 821px) {
	/* Avoid page-level scrollbars: the header is fixed, and footer lives inside chat-window on PC */
	.rooms-page .app,
	body.chat-page .app {
		/* Use padding (not margin) so the fixed header doesn't create extra scroll height */
		padding-top: var(--header-height);
	}
	.rooms-page main,
	body.chat-page main {
		padding-top: 0;
		padding-bottom: 0;
		/* Keep scrolling inside the app, not on the page */
		overflow: hidden;
		align-items: stretch;
	}
	.rooms-page .chat-window,
	body.chat-page .chat-window {
		/* Base rule uses margin-top to clear header; on PC we already reserved space via .app padding */
		margin-top: 0;
		margin-bottom: 0;
		height: 100%;
		max-height: 100%;
		overflow: hidden;
		max-width: 800px;
	}
	/* Let layout fill remaining space above footer */
	.chat-window .layout {
		flex: 1 1 auto;
		min-height: 0;
		height: auto;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
}
.topbar{
	padding:0 0 5px 0;border-bottom:1px solid var(--panel-border);position:relative;z-index:3100;min-height:var(--topbar-height);overflow:visible;
	flex-wrap:nowrap;
}
.topbar.hidden-topbar{min-height:2px;height:2px;padding:0;margin:0;overflow:hidden}
.topbar > div { min-width:0 }
.topbar > div:first-child { display:flex;align-items:center;gap:8px;min-width:0 }
.topbar > div:first-child .info { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px }
.topbar .info { flex: 1 1 auto; min-width:0 }
.topbar .info.device-info { flex: 0 0 auto }
.topbar > div:last-child { flex: 1 1 auto; display:flex; justify-content:flex-end; min-width:0 }
.topbar > .info { flex: 0 0 auto; display:flex;align-items:center;gap:10px; font-family: inherit; font-size:13px }
.topbar .info code {     font-family: inherit;  font-variant-numeric: tabular-nums;  padding-top:4px; padding-bottom:4px }
.topbar .create-room-btn { margin-left:12px }
@media (max-width:820px) { .topbar .create-room-btn { display:none } }
.topbar .chip { flex-shrink:0 }
.topbar .info code{font-size:13px;color:var(--text);background:var(--panel);padding:8px 10px;border-radius:8px;border:1px solid var(--t-overlay-white-02);opacity:1;line-height:24px;}
.device-info{display:flex;align-items:center;gap:8px;font-size:13px}
.device-info .label{font-size:14px;color:var(--muted);font-weight:600}
.device-info .device-code{font-size:14px;display:inline;color:var(--muted);padding:0;border-radius:0;border:none;background:transparent;opacity:1;max-width:none;white-space:nowrap;overflow:visible;text-overflow:clip;line-height:20px}
.room-info{display:flex;flex-direction:column;gap:2px;margin-top:0;max-width:420px}
.room-info-panel{ touch-action: none; overscroll-behavior: contain; }
.room-info div:first-child{font-weight:700}
.room-info div:last-child{font-size:12px;color:var(--muted)}
.room-meta > div{font-size:12px;color:var(--muted)}
.layout{display:flex;min-height:540px;height:100%;box-sizing:border-box;padding-bottom:0;scroll-padding-bottom:0}
.layout > .rooms-list { flex: 1 1 100%; width: 100%; max-width: 100%; box-sizing: border-box; }
.rooms-panel{display:flex;flex-direction:column;min-height:100%;height:100%}
.rooms-panel .rooms-list{flex:1 1 auto;overflow:auto}
/* apply the wider-panel negative margin only on large viewports to avoid causing horizontal scroll on small screens */
@media (min-width:821px) {
	.rooms-panel{width:calc(100% + 40px);margin-left:-20px;padding-left:20px;padding-right:20px;box-sizing:border-box}
}
.rooms-panel-footer{padding:12px;border-top:1px solid var(--t-overlay-white-02);background:transparent}
@media (max-width:820px) { .rooms-panel-footer { display:none } }
.sidebar{width:clamp(200px,22vw,280px);background:var(--panel);border-right:1px solid var(--t-overlay-white-02);display:flex;flex-direction:column;position:relative;z-index:1450;height:100%;overflow:hidden}
.sidebar .rooms-list{padding:12px;overflow:auto;padding-bottom:calc(var(--footer-height) + 12px);flex:1 1 auto}
.sidebar .rooms-list, .rooms-list{padding:12px;overflow:auto;padding-bottom:calc(var(--footer-height) + 12px);flex:1 1 auto}
.sidebar .create-room{padding:12px;border-bottom:1px solid var(--t-overlay-white-02)}
.content{flex:1;display:flex;flex-direction:column}
.message-list{
	padding:20px;flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:calc(var(--footer-height) + var(--kb-safe, 0px) + var(--bottom-extra, 10px));scroll-padding-bottom:calc(var(--footer-height) + var(--kb-safe, 0px) + var(--bottom-extra, 10px));
	overscroll-behavior-y: contain; touch-action: pan-y;
}
.message-list.line-style ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.message-list .message{display:flex}
.message-row{display:flex;align-items:flex-start;gap:4px}
.bubble{max-width:78%;}
.message.other .bubble{ color:var(--text); }
.message.me{}
.message.me .bubble{}
.meta{font-size:11px;color:var(--muted);display:flex;gap:6px;align-items:center;margin-bottom:3px}
.meta .author{font-weight:700;color:inherit}
.meta .time{font-size:10px;color:var(--muted)}
.device-id{font-size:12px;color:var(--panel);margin-left:8px;padding:6px 10px;border-radius:8px;background:var(--text);border:1px solid var(--t-overlay-black-06);font-weight:700}
.text{white-space:pre-wrap;font-size:15px;line-height:1.4;color:var(--text);overflow-wrap:anywhere;word-break:break-all;line-break:anywhere}
.avatar{width:clamp(20px,4.5vw,28px);height:clamp(20px,4.5vw,28px);border-radius:var(--t-radius-xs);display:inline-flex;align-items:center;justify-content:center;font-size:10px;margin-right:6px;color:var(--avatar-foreground);font-weight:700}
.avatar.me{margin-left:8px;margin-right:0}
.message.system{display:flex;justify-content:center}
.message.system .system-text{}
.message.system .system-time{display:block;text-align:center}
.message.system .system-time .time{font-size:10px;color:var(--muted)}
.msg-status{font-size:12px;color:var(--muted);margin-top:6px}
.msg-status.error{color:#ff6b6b}
.message-input{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;padding:10px;z-index:1200;width:min(760px, calc(100% - 40px));max-width:760px;box-sizing:border-box;padding-right:14px;padding-left:14px;min-width:220px}
.chat-footer{position:relative}
.chat-footer #typing-indicator{position:absolute;left:8px;right:8px;bottom:calc(100% + 8px);margin:0;font-size:11px;line-height:1.15;z-index:1400;pointer-events:none;display:flex;flex-direction:row;flex-wrap:wrap;gap:4px}
.typing-row{padding:4px 10px;border-radius:10px;border:1px solid transparent;backdrop-filter:blur(4px);align-self:flex-start}
.theme-light .typing-row{background:linear-gradient(180deg, rgba(255,248,240,0.96), rgba(255,243,227,0.93));color:#8a5a2a;border-color:rgba(181,122,58,0.28);box-shadow:0 8px 18px rgba(148,163,184,0.14)}
.theme-dark .typing-row{background:rgba(148, 163, 184, 0.34);color:#f8fafc;border-color:var(--t-overlay-white-20);box-shadow:0 8px 18px rgba(2,6,23,0.28)}
.typing-dots{display:inline-block;margin-left:2px;vertical-align:baseline}
.typing-dots .dot{display:inline-block;opacity:0.25;animation:typingDot 1.1s infinite}
.typing-dots .dot:nth-child(2){animation-delay:0.15s}
.typing-dots .dot:nth-child(3){animation-delay:0.30s}
@keyframes typingDot{0%, 80%, 100%{opacity:0.25}40%{opacity:1}}
@media (prefers-reduced-motion: reduce){.typing-dots .dot{animation:none;opacity:1}}
/* prevent the input bar from capturing page scroll gestures; allow textarea to scroll */
.message-input{ touch-action: none; overscroll-behavior: contain; pointer-events: none; }
.message-input .message-textarea{ touch-action: pan-y; }
.message-input .message-textarea,
.message-input .send,
.message-input button,
.message-input textarea,
.message-input input { pointer-events: auto; }
@media (max-width:820px) {
	.message-input{}
}
@media (min-width: 821px) {
	.chat-footer .message-input{position:static;left:auto;transform:none;bottom:auto;width:100%;max-width:100%;box-shadow:none;border-top:none;border-radius:0;padding:8px 12px;background:transparent;}
}
.chat-footer{
	border-top:1px solid var(--panel-border);padding:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom));background:var(--surface);
	touch-action: none; overscroll-behavior: contain;
}
.chat-footer .footer-join-actions{display:flex;flex-direction:row;gap:10px;width:100%;align-items:stretch}
.chat-footer .footer-join-actions .btn{flex:1 1 0%;justify-content:center;padding:14px 16px;font-size:15px;border-radius:12px}
.chat-footer .footer-join-actions #join-room-btn{flex:2 1 0%}
.chat-footer .footer-join-actions .btn-join-cta{background:var(--accent);color:var(--t-white);border:1px solid var(--t-overlay-black-06);box-shadow:0 6px 18px rgba(0,0,0,0.14)}
.chat-footer .footer-join-actions .btn-join-cta:hover{filter:brightness(1.06)}
@media (max-width: 820px) {
	.chat-footer{position:fixed;bottom:0;left:0;right:0;z-index:1300;width:100%;box-sizing:border-box}
	.chat-footer .message-input{position:static;left:auto;transform:none;bottom:auto;width:100%;max-width:100%;box-shadow:none;border-top:none;border-radius:0;padding:8px 12px;background:transparent;}
}

.ad-slot {
  
  
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: linear-gradient(135deg, var(--t-overlay-white-04), rgba(255,255,255,0.01));
  box-shadow: 0 10px 24px var(--t-overlay-black-12);
  overflow: hidden;
}

.ad-slot-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ad-slot-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}

.ad-slot-body {
  font-size: 14px;
  color: var(--text);
  opacity: 0.9;
  text-align: right;
}
.ad-slot-body-mobile{display:none}

.ad-slot-rooms {
  margin-top: 16px;
}

.ad-slot-chat {
  position: sticky;
  top: 12px;
  z-index: 5;
}

@media (max-width: 820px) {
  .ad-slot {
	
	margin: 6px 0 8px;
    padding: 6px 8px;
    border-radius: 10px;
}

  .ad-slot-body {
    font-size: 13px;
  }
  .ad-slot-body-desktop{display:none}
	.ad-slot-body-mobile{display:block;width:100%;text-align:center}
	/* 320x50バナーが確実に収まるように、モバイルでは縦積みにして幅を確保 */
	.ad-slot.ad-slot-rooms .ad-slot-inner,
	.ad-slot.ad-slot-chat .ad-slot-inner{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px}
	.ad-slot.ad-slot-rooms .ad-slot-label,
	.ad-slot.ad-slot-chat .ad-slot-label{text-align:left}
	.ad-slot-body-mobile{min-height:50px}
	.ad-slot-body-mobile iframe{display:block;margin:0 auto;max-width:100%}
	.ad-slot.ad-slot-rooms,
	.ad-slot.ad-slot-chat{overflow:visible}

  .ad-slot-chat { position: static; margin-top: 0; }
}

/* Tighten mobile chat ad spacing */
@media (max-width: 820px) {
  .ad-slot.ad-slot-chat {
    margin: 0;
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    min-height: 52px;
  }
  .ad-slot.ad-slot-chat .ad-slot-inner {
    gap: 0;
    padding: 0;
  }
  .ad-slot.ad-slot-chat .ad-slot-label {
    margin: 0;
  }
}

@media (max-width: 820px) {
  .ad-slot.ad-slot-rooms {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }
  .ad-slot.ad-slot-rooms .ad-slot-inner {
    gap: 0;
    padding: 0;
  }
  .ad-slot.ad-slot-rooms .ad-slot-label {
    margin: 0;
  }
}

@media (max-width: 820px) {
  .ad-slot .ad-slot-inner,
  .ad-slot .ad-slot-body,
  .ad-slot .admax-switch,
  .ad-slot iframe {
    max-width: 100%;
    overflow: hidden;
  }
  .ad-slot iframe {
    display: block;
  }
}
.line-input{display:flex;align-items:flex-end;gap:6px;position:relative}
/* 入力欄。font-size は 16px 未満にしないこと（iOS Safari が勝手に拡大する）。
   高さは指で押せる 44px を確保する。 */
.line-input .message-textarea{
	flex:1;
	/* content-box のままだと min-height が「中身の高さ」になり、
	   44px 指定が padding 込み 70px の箱になって隣のボタンと揃わなかった。 */
	box-sizing:border-box;
	padding:12px 18px;
	
	
	
	color:var(--text);
	resize:none;
	font-size:16px;
	line-height:1.5;
	min-height:44px;
	height:auto;
	max-height:140px;
	overflow-y:auto;
	box-shadow:var(--ring);
	transition:border-color var(--t-dur-fast) var(--t-ease-soft),
	           box-shadow var(--t-dur-fast) var(--t-ease-soft);
}
.line-input .message-textarea:focus{
	outline:none;
	border-color:var(--accent);
	box-shadow:0 0 0 4px var(--glow);
}
.mention{display:inline-block;padding:1px 6px;border-radius:8px;background:rgba(181,122,58,0.22);border:1px solid rgba(181,122,58,0.38);font-weight:700;letter-spacing:0.01em}
.theme-dark .mention{background:rgba(96,165,250,0.22);border:1px solid rgba(96,165,250,0.38)}
.mention.me{background:var(--accent);border:1px solid rgba(0,0,0,0.0);color:var(--send-icon-color)}
.theme-dark .mention.me{border:1px solid var(--t-overlay-white-10)}
.mention-suggest{position:absolute;left:46px;right:46px;bottom:calc(100% + 8px);background:var(--panel);border:1px solid var(--t-overlay-black-10);border-radius:12px;box-shadow:0 10px 30px var(--t-overlay-black-12);padding:6px;z-index:3100}
.theme-dark .mention-suggest{border:1px solid var(--t-overlay-white-10);box-shadow:0 10px 30px rgba(0,0,0,0.35)}
.mention-suggest-item{display:block;width:100%;text-align:left;border:none;background:transparent;color:var(--text);padding:8px 10px;border-radius:10px;cursor:pointer;font-size:13px;line-height:1.2}
.mention-suggest-item:hover,.mention-suggest-item.active{background:rgba(181,122,58,0.18)}
.theme-dark .mention-suggest-item:hover,.theme-dark .mention-suggest-item.active{background:rgba(96,165,250,0.18)}
/* 送信ボタン。角丸 8px の四角で、影が青（rgba(37,99,235,...)）の直書きだった。
   円にしてアクセントの影を敷く。押したときは弾ませる。 */
.line-input .send{
	position:relative;
	width:44px; height:44px;
	border-radius:var(--t-radius-pill);
	background:var(--accent);
	border:none;
	color:var(--on-accent);
	display:inline-flex; align-items:center; justify-content:center;
	margin-left:4px;
	box-shadow:0 6px 16px var(--glow), var(--ring);
	cursor:pointer;
	transition:transform var(--t-dur-base) var(--t-ease-bounce),
	           box-shadow var(--t-dur-base) var(--t-ease-soft),
	           background var(--t-dur-fast) var(--t-ease-soft);
}
.line-input .send:hover:not(:disabled){
	background:var(--accent-hover);
	transform:scale(1.06);
	box-shadow:0 10px 24px var(--glow), var(--ring);
}
.line-input .send:active:not(:disabled){ transform:scale(0.92) }
.line-input .send:disabled{opacity:0.4;cursor:not-allowed;box-shadow:none}
@media (prefers-reduced-motion: reduce){
	.line-input .send, .line-input .send:hover:not(:disabled), .line-input .send:active:not(:disabled){
		transform:none; transition:none;
	}
}
.line-input .send svg{color:inherit;fill:currentColor}
@media (max-width:480px) {
	.bubble{}
	.avatar{}
	.topbar .info{}
	/* 小さい画面でも指で押せる 40px は割らない（以前は 36px の四角だった） */
	.line-input .send{}
}
/* ============================================================================
   ボタン（2026-08-12 に「ふわふわ」方針で作り直し）
   ============================================================================
   以前: 角丸 8px / 枠は白の重ね色 / hover で黒い影 0 6px 18px rgba(0,0,0,.25)
         → 押せるものが四角くて硬く、hover の影が濃くて「板」に見えていた。

   いま: ピル / 面はパネル色 / 影は多層 / hover は「濃くする」のではなく
         「少し浮かせて影を遠くへ広げる」。押下は 0.97 倍に縮めて弾ませる。

   ⚠ 最低 40px の高さを確保している。指で押す領域として 40px を下回ると
     押し間違いが増えるため、見た目を小さくしたい場合も padding で調整し
     min-height は下げないこと。
   ============================================================================ */
.btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	padding:10px 18px;
	min-height:40px;
	border-radius:var(--t-radius-pill);
	border:1px solid var(--panel-border);
	background:var(--panel);
	color:var(--text);
	cursor:pointer;
	font-weight:var(--t-fw-semibold);
	box-shadow:var(--t-shadow-sm), var(--ring);
	transition:
		transform var(--t-dur-base) var(--t-ease-soft),
		box-shadow var(--t-dur-base) var(--t-ease-soft),
		background var(--t-dur-fast) var(--t-ease-soft),
		border-color var(--t-dur-fast) var(--t-ease-soft);
}
.btn:hover{
	transform:translateY(-2px);
	box-shadow:var(--t-shadow-float), var(--ring);
	border-color:var(--accent);
}
.btn:active{
	transform:translateY(0) scale(0.97);
	box-shadow:var(--t-shadow-sm), var(--ring);
	transition-duration:var(--t-dur-fast);
}
.btn:focus-visible{
	outline:3px solid var(--glow);
	outline-offset:2px;
}
/* 動きを減らす設定の人には、位置と拡大縮小の変化を出さない。
   ふわふわ感は装飾なので、酔いやすい人に強制するものではない。 */
@media (prefers-reduced-motion: reduce){
	.btn, .btn:hover, .btn:active{ transform:none; transition:none; }
}
.btn .icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:14px;opacity:0.95}
.btn .icon svg{display:block}
/* Primary button: theme-specific colors */
/* 主ボタン。以前はテーマ別に 4 ルール（ダーク=青 #3b82f6 / ライト=キャメル #b57a3a）を
   生の値で持っていた。塗りはアクセント、文字は --on-accent に統一する。
   --accent は白文字が乗る濃さ（コントラスト 4.68:1）だけを指す約束なので、
   ここで色を足す必要はない。 */
.btn-primary{background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); border-radius:var(--t-radius-md); box-shadow:var(--t-shadow-sm)}
.btn-primary:hover{background:var(--accent-hover); border-color:var(--accent-hover); box-shadow:var(--t-shadow-md)}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--t-overlay-black-10)}
.btn-ghost .icon svg { color: var(--icon-color); }
.is-hidden{display:none}
/* ============================================================================
   モーダル（2026-08-12 作り直し）
   ============================================================================
   以前: 覆いが rgba(0,0,0,0.62) と重く、パネルは角丸 10px、影は真っ黒。
         「別画面に飛ばされた」ような硬い出方をしていた。
   いま: 覆いを薄くしてぼかし、パネルは大きな角丸 + 多層の影。
         ふわっと（少し大きくなりながら）出す。
   ============================================================================ */
.modal-overlay{
	position:fixed; inset:0;
	background:rgba(28,22,16,0.42);
	backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
	display:flex; align-items:center; justify-content:center;
	z-index:1200;
	animation:modal-overlay-in var(--t-dur-base) var(--t-ease-soft);
}
.modal-panel{
	background:var(--surface);
	color:var(--text);
	padding:var(--t-space-6);
	border-radius:var(--t-radius-xl);
	max-width:520px; width:92%;
	box-shadow:var(--t-shadow-lg), var(--ring);
	border:1px solid var(--panel-border);
	animation:modal-panel-in var(--t-dur-slow) var(--t-ease-bounce);
}
@keyframes modal-overlay-in{ from{ opacity:0 } to{ opacity:1 } }
@keyframes modal-panel-in{
	from{ opacity:0;  transform:none }
}
@media (prefers-reduced-motion: reduce){
	.modal-overlay, .modal-panel{ animation:none }
}
.modal-panel h2, .modal-panel div, .modal-panel span{color:var(--text)}
.modal-room-meta, .modal-room-meta *{color:var(--text)}
#modal-room-name, #modal-room-desc, #modal-room-creator{color:var(--text)}
/* Ensure modal room description preserves line breaks */
#modal-room-desc{white-space:pre-wrap;word-wrap:break-word}
/* ----------------------------------------------------------------------------
   入力欄

   以前はこの 6 行に「基本」「 の上書き」「ダーク用」「ライト用」が
   積み上がっていて、どれが効くのか読めなかった（3 重に指定されていた）。
   セマンティック変数で 1 組にまとめる。

   ⚠ font-size は 16px を下回らせないこと。iOS Safari は 16px 未満の入力欄に
     フォーカスすると画面を勝手に拡大し、そのあと戻らない。
---------------------------------------------------------------------------- */
.modal-panel input,
.modal-like-input,
.rooms-panel input,
.rooms-panel textarea,
.create-room input,
.create-room textarea{
	background: var(--panel);
	color: var(--text);
	border-radius: var(--t-radius-md);
	border: 1px solid var(--panel-border);
	padding: 12px 16px;
	font-size: 16px;
	box-sizing: border-box;
	transition: border-color var(--t-dur-fast) var(--t-ease-soft),
	            box-shadow var(--t-dur-fast) var(--t-ease-soft);
}
/* マウス操作の環境（iOS/Android のタッチ端末を除く）だけ少し小さくする。
   pointer:fine で判定するのは、幅で判定すると iPad などの広いタッチ端末を
   拾ってしまい、上の 16px 未満禁止のルールを破ってしまうため。 */
@media (pointer: fine){
	.modal-panel input,
	.modal-like-input,
	.rooms-panel input,
	.rooms-panel textarea,
	.create-room input,
	.create-room textarea{
		font-size: 14px;
	}
}
.modal-panel input:focus,
.modal-like-input:focus,
.rooms-panel input:focus,
.rooms-panel textarea:focus,
.create-room input:focus,
.create-room textarea:focus{
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 4px var(--glow);
}
.modal-like-input[rows], textarea.modal-like-input{min-height:96px}
.form-control-full{width:100%;box-sizing:border-box}
.create-room-form{display:flex;flex-direction:column;gap:12px}
.form-label{display:block;margin-bottom:4px}
.form-inline-options{display:flex;gap:12px}
.form-inline-option{display:flex;align-items:center;gap:6px;cursor:pointer}
.form-radio{cursor:pointer}
.room-type-help{margin-top:6px;font-size:12px;line-height:1.4}

/* Create room modal: compact layout */
/* スクロールはパネル(.create-room-modal-panel)側だけが持つ。
   以前はオーバーレイ側にも overflow-y:auto があり、パネルのスクロールが
   端に達すると背後のオーバーレイ側へスクロールが連鎖してカクついていた
   （スクロールしにくい、と感じる原因だった）。 */
#create-room-modal{
	padding:12px;
	box-sizing:border-box;
}
/* タイトルだけ無指定でブラウザ既定(h2)のサイズに任せていて、
   ラベル(12px)・本文(13〜14px)の並びから浮いていた。他モーダルのタイトルに合わせる。 */
#create-room-modal h2{
	font-size:18px;
	font-weight:700;
	margin:0 0 4px;
	padding-left:10px;
	border-left:4px solid var(--accent);
}
/* 部屋名ヒーロー（2026-08-22）: 「あなたの名前」「部屋の種類」と横並びの同格ラベル欄だった
   構成をやめ、部屋名を主役にしてその下に公開設定・あなたの名前を並べる。他のラベル付き欄
   （カテゴリ・説明・パスワード等）は既存のまま触っていない。 */
#create-room-modal .create-room-hero{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
	text-align:center;
	margin-bottom:2px;
}
#create-room-modal .create-room-hero-name-input{
	width:100%;
	box-sizing:border-box;
	text-align:center;
	font-size:var(--t-fs-2xl);
	font-weight:700;
	border:none;
	border-bottom:2px solid var(--panel-border);
	background:transparent;
	border-radius:0;
	padding:8px 4px;
	color:var(--text);
}
#create-room-modal .create-room-hero-name-input:hover{
	border-bottom-color:var(--accent);
}
#create-room-modal .create-room-hero-name-input:focus{
	outline:none;
	border-bottom-color:var(--accent);
	background:var(--t-overlay-black-04);
	box-shadow:none;
}
#create-room-modal .create-room-hero-row{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:10px;
	width:100%;
}
#create-room-modal .create-room-hero-name-field{
	flex:1 1 160px;
	min-width:0;
	max-width:220px;
}
#create-room-modal .create-room-hero-name-field-input{
	width:100%;
	box-sizing:border-box;
	text-align:center;
	border-radius:var(--t-radius-pill);
	border:1px solid var(--panel-border);
	background:var(--panel);
	padding:8px 14px;
	font-size:var(--t-fs-sm);
	color:var(--text);
}
#create-room-modal .create-room-hero-name-field-input:focus{
	outline:none;
	border-color:var(--accent);
	box-shadow:0 0 0 4px var(--glow);
}
#create-room-modal .create-room-modal-panel{
	max-width:560px;
	border-radius:12px;
	padding:16px;

	max-height:calc(100svh - 24px);
	overflow-y:auto;
	overscroll-behavior:contain;
	-webkit-overflow-scrolling:touch;
	box-sizing:border-box;
}
#create-room-modal .create-room-form{gap:10px}
#create-room-modal .create-room-input-group{
	padding:0;
	border:none;
	border-radius:0;
	background:transparent;
	transition:none;
}
#create-room-modal .create-room-input-group:focus-within{
	box-shadow:none;
}
#create-room-modal .create-room-input-group .form-label{
	margin-bottom:4px;
	font-size:13px;
	font-weight:700;
	color:var(--muted);
}
.create-room-icon-picker{display:flex;align-items:center;gap:12px}
.create-room-icon-preview{
	width:48px;height:48px;border-radius:var(--t-radius-xs);flex-shrink:0;
	display:flex;align-items:center;justify-content:center;
	background:var(--panel);border:1px solid var(--panel-border);
	color:var(--muted);font-weight:700;font-size:24px;overflow:hidden;
}
.create-room-icon-preview img{width:100%;height:100%;object-fit:cover;display:block}

.create-room-icon-tabs{display:flex;gap:8px;margin-bottom:10px}
.create-room-icon-tab{
	padding:6px 14px;border-radius:var(--t-radius-pill);border:1px solid var(--panel-border);
	background:var(--panel);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;
}
.create-room-icon-tab.is-active{
	background:color-mix(in srgb, var(--accent) 14%, transparent);
	border-color:color-mix(in srgb, var(--accent) 40%, transparent);
	color:var(--accent-text);
}
.create-room-icon-pane.is-hidden{display:none}
.create-room-icon-picker-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.create-room-icon-crop-wrap{flex-shrink:0}
.create-room-icon-crop-canvas{
	width:160px;height:160px;border-radius:var(--t-radius-xs);
	background:var(--panel);border:1px solid var(--panel-border);
	cursor:grab;touch-action:none;display:block;
}
.create-room-icon-crop-canvas:active{cursor:grabbing}
.create-room-icon-color-swatches{display:flex;flex-wrap:wrap;gap:6px;max-width:280px}
.create-room-icon-color-swatch{
	width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;
}
.create-room-icon-color-swatch.is-active{border-color:var(--text)}
.create-room-icon-emoji-grid{
	display:grid;grid-template-columns:repeat(8, 1fr);gap:6px;margin-top:10px;
	max-height:220px;overflow-y:auto;overscroll-behavior:contain;padding:4px;
	border:1px solid var(--panel-border);border-radius:var(--t-radius-xs);background:var(--panel);
}
.create-room-icon-emoji-btn{
	display:flex;align-items:center;justify-content:center;
	width:100%;aspect-ratio:1;font-size:20px;border-radius:var(--t-radius-xs);
	border:1px solid transparent;background:transparent;cursor:pointer;
}
.create-room-icon-emoji-btn:hover{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.create-room-icon-emoji-btn.is-active{
	background:color-mix(in srgb, var(--accent) 16%, transparent);
	border-color:color-mix(in srgb, var(--accent) 40%, transparent);
}
.create-room-icon-emoji-btn--none{
	font-size:11px;
	color:var(--muted);
	border-style:dashed;
	border-color:var(--panel-border);
}
@media (max-width: 600px){
	.create-room-icon-picker{flex-wrap:wrap}
	.create-room-icon-emoji-grid{grid-template-columns:repeat(6, 1fr)}
}
#create-room-modal .create-room-input-group .modal-like-input{
	border-radius:8px;
}
#create-room-modal .create-room-options-toggle{
	margin-top:-2px;
}
#create-room-modal #modal-optional-fields{
	display:flex;
	flex-direction:column;
	gap:16px;
	padding-top:10px;
	border-top:1px dashed var(--panel-border);
}
/* .is-hidden{display:none} は単一クラスなので、上の ID 2連指定より詳細度が低く
   負けてしまう（チェックを外してもオプションが隠れなかった原因）。
   ここで明示的に再度勝たせる。 */
#create-room-modal #modal-optional-fields.is-hidden{
	display:none;
}
#create-room-modal .create-room-inline-check{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin:2px 0 6px;
	cursor:pointer;
	user-select:none;
	font-size:13px;
	color:var(--text);
}
#create-room-modal .create-room-inline-check input[type="checkbox"]{
	width:16px;
	height:16px;
	margin:0;
	cursor:pointer;
}
#create-room-modal #modal-delete-password-input-wrap{
	display:none;
}
#create-room-modal #modal-delete-password:disabled{
	opacity:0.58;
	cursor:not-allowed;
}
#create-room-modal .modal-room-type-switch .rooms-visibility-icon{
	width:96px;
	height:28px;
}
#create-room-modal .room-type-help{
	margin-top:0;
	font-size:11px;
	line-height:1.35;
}
#create-room-modal #modal-desc{min-height:84px}
@media (max-width:520px){
	#create-room-modal{
		padding:8px;
	}
	#create-room-modal .create-room-modal-panel{
		width:100%;
		padding:14px;
		
		max-height:calc(100svh - 16px);
	}
}
.modal-warning-box{padding:12px 14px;background:rgba(239,68,68,0.16);border-radius:12px;border:2px solid rgba(239,68,68,0.42);box-shadow:0 10px 28px rgba(0,0,0,0.22)}
.modal-warning-header{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.modal-warning-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:10px;background:rgba(239,68,68,0.22);border:1px solid rgba(239,68,68,0.55);font-size:16px;line-height:1}
.modal-warning-title{font-weight:900;font-size:15px;letter-spacing:0.02em;color:var(--text)}
.modal-warning-body{font-size:14px;line-height:1.55;color:var(--text)}
.modal-terms-box{padding:12px;background:rgba(96,165,250,0.1);border-radius:6px;border-left:3px solid var(--accent)}
.modal-terms-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px}
.modal-terms-checkbox{width:18px;height:18px;cursor:pointer}
.policy-link{color:#6498db;text-decoration:underline}
.modal-error{
	display:none;
	margin-top:10px;
	padding:10px 12px;
	border-radius:10px;
	border:1px solid rgba(239,68,68,0.55);
	background:rgba(239,68,68,0.14);
	color:#b91c1c;
	font-size:13px;
	font-weight:700;
	line-height:1.45;
}
.theme-dark .modal-error{
	color:var(--t-red-200);
	background:rgba(127,29,29,0.35);
	border-color:rgba(248,113,113,0.62);
}
.modal-error::before{
	content:'! ';
	font-weight:900;
}
.modal-title{margin-top:0;color:var(--text)}
.modal-stack{display:flex;flex-direction:column;gap:12px}
.modal-stack-sm{display:flex;flex-direction:column;gap:8px}
.modal-field{margin-top:8px}
.modal-field-label{display:block;margin-bottom:4px;font-size:14px;color:var(--text)}
.modal-field-input{width:100%;box-sizing:border-box;padding:10px;border:1px solid var(--panel-border);border-radius:6px;background:var(--panel);color:var(--text);font-size:14px}
/* ログイン中で編集不可の名前欄。以前は #f0f4ff / #4285f4 を直書きしていて
   ダークテーマだと明るい水色の箱に浮いて見えていた。セマンティック変数に寄せる。 */
.login-locked-input{background:var(--panel);color:var(--text);cursor:default;border-color:var(--accent)}
.login-locked-note{font-size:var(--t-fs-2xs);color:var(--accent-text);margin-top:4px}
.modal-room-meta{border-left:4px solid var(--panel-border);padding:10px;background:var(--panel);color:var(--text);border-radius:4px}
.modal-room-name{font-weight:600;margin-bottom:6px;color:var(--text);font-size:15px}
.modal-room-desc{font-size:13px;color:var(--text);margin-bottom:6px;line-height:1.4;white-space:pre-wrap;word-wrap:break-word}
.modal-room-creator{font-size:12px;color:var(--muted)}
.modal-password-wrap{display:none;margin-top:8px}
.modal-terms-inline{font-size:14px;line-height:1.5}
.modal-error-box{
	display:none;
	margin-top:8px;
	padding:10px 12px;
	border-radius:10px;
	border:1px solid rgba(239,68,68,0.55);
	background:rgba(239,68,68,0.14);
	color:#b91c1c;
	font-size:13px;
	font-weight:700;
	line-height:1.45;
}
.theme-dark .modal-error-box{
	color:var(--t-red-200);
	background:rgba(127,29,29,0.35);
	border-color:rgba(248,113,113,0.62);
}
.modal-error-box::before{
	content:'! ';
	font-weight:900;
}
.modal-error-attention{
	animation: modalErrorAttention 180ms ease-out 1;
}
@keyframes modalErrorAttention{
	0%{ transform:translateX(0); }
	25%{ transform:translateX(-3px); }
	50%{ transform:translateX(3px); }
	75%{ transform:translateX(-2px); }
	100%{ transform:translateX(0); }
}
.field-input-error{
	border-color:rgba(239,68,68,0.82);
	box-shadow:0 0 0 2px rgba(239,68,68,0.16);
}
.theme-dark .field-input-error{
	border-color:rgba(248,113,113,0.82);
	box-shadow:0 0 0 2px rgba(248,113,113,0.22);
}
.error-popup-layer{
	position:fixed;
	top:calc(var(--header-height, 56px) + 10px);
	left:50%;
	transform:translateX(-50%);
	z-index:130100;
	pointer-events:none;
	width:min(92vw, 560px);
	display:flex;
	justify-content:center;
}
.error-popup{
	display:inline-flex;
	align-items:center;
	gap:8px;
	min-height:42px;
	padding:10px 14px;
	border-radius:12px;
	border:1px solid rgba(239,68,68,0.58);
	background:rgba(254,242,242,0.98);
	color:#991b1b;
	font-size:13px;
	font-weight:800;
	line-height:1.35;
	box-shadow:0 10px 28px rgba(127,29,29,0.22);
	backdrop-filter:blur(4px);
	opacity:1;
	transition:opacity 180ms ease, transform 180ms ease;
}
.error-popup-enter{
	animation:errorPopupEnter 180ms ease-out 1;
}
.error-popup.hide{
	opacity:0;
	transform:translateY(-4px);
}
.error-popup-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:18px;
	height:18px;
	border-radius:999px;
	background:rgba(239,68,68,0.16);
	border:1px solid rgba(239,68,68,0.45);
	font-size:12px;
	font-weight:900;
	line-height:1;
	flex:0 0 auto;
}
.error-popup-text{
	display:inline-block;
	word-break:break-word;
}
.theme-dark .error-popup{
	background:rgba(69,10,10,0.95);
	color:var(--t-red-200);
	border-color:rgba(248,113,113,0.62);
	box-shadow:0 12px 30px var(--t-overlay-black-45);
}
.theme-dark .error-popup-icon{
	background:rgba(248,113,113,0.18);
	border-color:rgba(248,113,113,0.58);
}
@keyframes errorPopupEnter{
	0%{ opacity:0;  }
	100%{ opacity:1; transform:translateY(0); }
}
.modal-overlay-strong{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--t-overlay-black-45);z-index:9999}
.modal-panel-wide{max-width:520px;width:92%}
.push-modal-status{display:none;margin-top:8px;color:var(--muted);font-size:12px}
.push-back-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.push-back-title{font-weight:700;font-size:16px}
.push-back-close-btn{
	padding:0;
	font-size:20px;
	line-height:1;
	width:32px;
	height:32px;
	box-sizing:border-box;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:10px;
}
/* Align close buttons with admin UI (rounded corners) */
#push-back-close,
.modal-close-btn,
.room-info-modal-close,
.share-modal-close{
	border-radius:10px;
	appearance:none;
	-webkit-appearance:none;
}
.push-back-desc{margin-top:10px;color:var(--muted);font-size:13px}
.push-back-error{display:none;margin-top:10px;color:#ff6b6b;font-size:12px}
.push-back-actions{margin-top:14px;display:flex;justify-content:flex-end;gap:8px}
.push-back-action-btn{padding:8px 12px;font-size:13px}
.room-chat-load-older-wrap{display:none;position:sticky;top:0;z-index:5;padding:8px 0 6px;background:linear-gradient(to bottom,var(--bg),rgba(11,19,36,0));text-align:center}
.theme-light .room-chat-load-older-wrap{background:linear-gradient(to bottom,var(--t-brand-100),rgba(251,246,238,0))}
.room-chat-load-older-btn{border-radius:999px;padding:6px 10px}
.room-chat-composer{display:none}
.room-chat-typing-indicator{display:none}
.room-chat-image-input{display:none}
.room-chat-mention-suggest{display:none}
.room-chat-jump-btn{display:none;position:fixed;right:20px;bottom:calc(var(--footer-height) + var(--kb-safe, 0px) + 20px);z-index:2900;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.3);width:36px;height:36px;padding:0;align-items:center;justify-content:center}
html.theme-light #jump-to-bottom-btn.room-chat-jump-btn,
body.theme-light #jump-to-bottom-btn.room-chat-jump-btn{
        background:transparent;
        border:1px solid rgba(181,122,58,0.42);
        box-shadow:0 6px 18px rgba(15,23,42,0.14);
        color:#8a5a2a;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
}
html.theme-light #jump-to-bottom-btn.room-chat-jump-btn:hover,
body.theme-light #jump-to-bottom-btn.room-chat-jump-btn:hover{
        background:transparent;
        border-color:rgba(181,122,58,0.56);
}
.room-chat-jump-icon{display:block}
.room-info-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.room-info-modal-icon-wrap{display:flex;justify-content:center;margin-bottom:16px}
.room-info-modal-icon{width:72px;height:72px;border-radius:var(--t-radius-sm);object-fit:cover;border:1px solid var(--panel-border)}
.room-info-modal-title{margin:0;font-size:18px;font-weight:700}
.room-info-modal-close{padding:4px;font-size:24px;line-height:1;width:32px;height:32px}
.room-info-modal-section{margin-bottom:16px}
.room-info-modal-label{display:block;margin-bottom:4px;font-weight:600}
/* ⚠ --border は chat.css に定義が無い（未定義）ため、以前は枠線が全く出ていなかった。
   このクラスは管理アプリ（admin-room-chat.js のルーム情報モーダル）が今も使っている。
   利用者側は 2026-08-22 にカード風へ作り直して別クラスへ移行済み。
   実測で computed border が "0px none" になっていることを確認して修正（2026-08-23）。 */
.room-info-modal-readonly{padding:8px;background:var(--surface);border:1px solid var(--panel-border);border-radius:4px}
.room-info-modal-muted{color:var(--muted)}
.room-info-modal-input{width:100%;box-sizing:border-box}
.room-info-modal-textarea{width:100%;box-sizing:border-box;resize:vertical}
.room-info-modal-top-divider{margin-top:16px;padding-top:16px;border-top:1px solid var(--panel-border)}
.room-info-modal-participants-title{font-weight:600;margin-bottom:8px}
.room-info-modal-participants-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;max-height:40vh;overflow:auto}
.room-info-modal-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
/* 3つ並ぶと幅の狭いスマホでボタン内テキストが折り返って見苦しくなっていた
   （「この部屋を削除」が「この部屋を削 / 除」のように割れる）。行単位で折り返す。 */
.room-info-modal-actions .btn{white-space:nowrap}
.room-info-modal-delete{margin-right:auto;color:var(--t-red-500);border:1px solid rgba(239,68,68,0.35)}
.room-info-modal-selfname-empty{color:var(--muted)}
.room-info-modal-participant-item{display:flex;align-items:center;gap:6px;flex-wrap:wrap;row-gap:4px}
.room-info-modal-lamp{width:10px;height:10px;border-radius:50%}
.room-info-modal-name{font-weight:700}
.room-info-modal-device{font-size:calc(12px * var(--room-font-scale))}
.room-info-modal-online-badge{margin-left:2px;padding:2px 8px;border-radius:999px;background:rgba(34,197,94,0.18);border:1px solid rgba(34,197,94,0.32);color:var(--text);font-size:11px;white-space:nowrap}
.room-info-modal-ago-badge{margin-left:2px;padding:2px 8px;border-radius:999px;background:rgba(251,191,36,0.22);border:1px solid rgba(251,191,36,0.35);color:var(--text);font-size:11px;white-space:nowrap}
.room-info-modal-kick-btn{margin-left:auto;padding:var(--t-space-1) var(--t-space-2);border-radius:var(--t-radius-pill);border:1px solid rgba(239,68,68,0.35);color:var(--t-red-500);font-size:var(--t-fs-2xs);white-space:nowrap;min-height:auto;height:auto}

/* ─── ルーム情報モーダル: プロフィールカード（2026-08-22）─────────
   アイコン・部屋名を主役にした構成へ作り直した。旧来の「ラベル＋枠ボックス」を
   縦に並べる構成（.room-info-modal-section/.room-info-modal-readonly 等、上）は
   admin 側（admin-room-chat.js の room-info モーダル）がまだ使っているので残置。
   admin は監視ツールとしての性質が強く業務フォーム的な見た目でも問題が薄いため、
   あえて room 側だけ先に作り直した（両方変えるのは別対応）。 */
.room-info-modal-hero{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-bottom:8px}
.room-info-modal-hero .room-info-modal-icon-wrap{margin-bottom:0}
.room-info-modal-hero .room-info-modal-icon{width:84px;height:84px;border-radius:var(--t-radius-md)}
.room-info-modal-hero-name{font-size:var(--t-fs-2xl);font-weight:700;max-width:100%;word-break:break-word}
/* 編集可能な項目（名前・カテゴリ・説明）だと分かるよう、常時見える点線の枠と鉛筆アイコンを付ける。
   2026-08-22: 最初の作り直しでは枠を透明にして hover/focus でだけ出す「静かな」デザインにしたが、
   常時見える手がかりが無く「どこが入力できるか分からない」というフィードバックを受けて調整した。
   （説明欄は border:var(--border) という未定義のトークンを使っていたため、枠自体が全く出ていなかった
   バグもここで直した — --border は chat.css に定義が無い。正しくは --panel-border。） */
.room-info-modal-editable-wrap{position:relative}
.room-info-modal-hero-name.room-info-modal-editable-wrap{display:inline-flex;align-items:center;gap:6px;max-width:100%}
.room-info-modal-edit-icon{font-size:12px;opacity:.6;flex-shrink:0;line-height:1}
/* .modal-panel input（既定の枠付きスタイル）に詳細度で勝つため、
   .room-info-modal-hero を付けた2クラス構成にしている（!important は使わない）。 */
.room-info-modal-hero .room-info-modal-hero-name-input{width:auto;min-width:0;max-width:280px;font-size:var(--t-fs-2xl);font-weight:700;text-align:center;border:none;border-bottom:1px dashed var(--panel-border);background:transparent;border-radius:0;padding:2px 4px;color:var(--text);box-shadow:none}
.room-info-modal-hero .room-info-modal-hero-name-input:hover{border-bottom-color:var(--accent);border-bottom-style:solid}
.room-info-modal-hero .room-info-modal-hero-name-input:focus{outline:none;border-bottom-color:var(--accent);border-bottom-style:solid;background:var(--t-overlay-black-04);box-shadow:none}
.room-info-modal-badges{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
.room-info-modal-badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--t-radius-pill);background:var(--t-overlay-black-06);font-size:var(--t-fs-xs);color:var(--muted)}
.room-info-modal-badge-select{display:inline-flex;align-items:center;gap:4px;padding:3px 10px 3px 12px;border:1px dashed var(--panel-border)}
.room-info-modal-badge-select:hover{border-color:var(--accent)}
.room-info-modal-category-select{border:none;background:transparent;color:var(--text);font-size:var(--t-fs-xs);padding:1px 0}
.room-info-modal-desc{max-width:100%;font-size:var(--t-fs-sm);color:var(--text);line-height:1.5;white-space:pre-wrap}
.room-info-modal-desc-wrap .room-info-modal-desc-input{width:100%;box-sizing:border-box;resize:vertical;border:1px dashed var(--panel-border);border-radius:var(--t-radius-xs);background:transparent;padding:8px 26px 8px 8px;font-size:var(--t-fs-sm);text-align:left;color:var(--text)}
.room-info-modal-desc-wrap .room-info-modal-desc-input:hover{border-color:var(--accent);border-style:solid}
.room-info-modal-desc-wrap .room-info-modal-desc-input:focus{outline:none;border-color:var(--accent);border-style:solid;background:var(--t-overlay-black-04);box-shadow:none}
.room-info-modal-desc-wrap .room-info-modal-edit-icon{position:absolute;top:8px;right:8px}
.room-info-modal-meta{font-size:var(--t-fs-2xs);color:var(--muted)}
.share-modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);z-index:10000;backdrop-filter:blur(2px)}
.share-modal-panel{background:var(--panel);width:90%;max-width:400px;border-radius:12px;padding:20px;box-shadow:0 10px 25px rgba(0,0,0,0.2);color:var(--text)}
.share-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.share-modal-title{margin:0;font-size:18px;font-weight:700}
.share-modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--muted);padding:0 8px}
.share-modal-description{margin:0 0 16px;font-size:14px;color:var(--text-secondary)}
.share-modal-url-row{display:flex;gap:8px;margin-bottom:20px}
.share-modal-url-input{flex:1;padding:8px 12px;border:1px solid var(--panel-border);border-radius:6px;background:var(--bg);color:var(--text);font-size:13px}
.share-modal-copy-btn{white-space:nowrap}
.share-modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.share-modal-action{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border:none;border-radius:8px;cursor:pointer;font-weight:700;font-size:14px;color:var(--t-white)}
.share-modal-action--x{background:#000}
.share-modal-action--line{background:#06c755}
.avatar-color-modal-panel{width:min(440px,92vw);padding:16px 16px 14px}
.avatar-color-modal-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.avatar-color-modal-title{margin:0;font-size:17px;font-weight:800;color:var(--text)}
.avatar-color-modal-close{padding:0;width:32px;height:32px;line-height:1;font-size:24px}
.avatar-color-modal-desc{margin:8px 0 12px;color:var(--muted);font-size:13px;line-height:1.5}
.avatar-color-modal-swatches{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.avatar-color-swatch{width:22px;height:22px;border-radius:999px;border:2px solid rgba(255,255,255,0.68);box-shadow:0 1px 4px rgba(0,0,0,0.24);cursor:pointer;padding:0;outline:none}
.avatar-color-swatch.is-active{transform:scale(1.08);box-shadow:0 0 0 2px var(--panel),0 0 0 4px rgba(59,130,246,0.45)}
.avatar-color-modal-preview-label{margin-top:12px;font-size:12px;font-weight:700;color:var(--muted)}
.avatar-color-preview-row{margin-top:6px;display:flex;align-items:flex-end;justify-content:flex-end;gap:8px}
.avatar-color-preview-avatar{width:30px;height:30px;font-size:12px;flex:0 0 auto;order:2;margin-left:6px;margin-right:0}
.avatar-color-preview-bubble-wrap{display:flex;flex-direction:column;align-items:flex-end;order:1}
.avatar-color-preview-bubble{max-width:min(86vw,360px);padding:8px 12px;border-radius:14px;font-size:13px;line-height:1.4}
.avatar-color-preview-text{white-space:pre-wrap}
.avatar-color-preview-meta{display:flex;gap:6px;align-items:center;margin-bottom:2px}
.avatar-color-preview-meta .author{font-weight:700}
.avatar-color-preview-meta .time{font-size:11px;color:var(--muted)}
/* modal-panel span color override must not force preview avatar text color */
.avatar-color-preview-avatar span{color:inherit}
.avatar-color-modal-actions{margin-top:14px;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.theme-dark .avatar-color-swatch{border-color:rgba(148,163,184,0.7)}
.reload-btn-label{margin-left:4px;font-size:13px;font-weight:600}
.adsense-config-hidden{display:none}
.adsense-ins-block{display:block}
.adsense-feed-mobile-ins{display:inline-block;width:320px;height:100px}
.adsense-room-fixed-ins{display:inline-block;width:320px;height:50px}
/* プロフィール画面用の広告枠。プロフィール情報と「作った公開ルーム」のあいだに
   1枠だけ挟む。カードの中で浮いて見えないよう、中央寄せ＋上下の余白＋小さな
   ラベルで「広告です」と分かるようにしている（2026-08-16）。
   PC幅（両サイド広告が出る1200px以上）では両サイド広告があるため不要と判断し、
   それ未満（スマホ・タブレット幅）でだけ表示する（2026-08-24 導入時は条件が
   逆になっており、PCでだけ表示・スマホで非表示という意図と逆の状態になっていた。
   2026-08-25 に修正）。 */
.adsense-feed--profile{margin:var(--t-space-4) 0;padding:var(--t-space-2);display:flex;flex-direction:column;align-items:center;gap:3px;opacity:.9;border:1px solid var(--panel-border);border-radius:var(--t-radius-xs)}
@media (min-width:1200px){
	.adsense-feed--profile{display:none}
}
.adsense-feed--profile::before{content:"広告";font-size:var(--t-fs-2xs);color:var(--muted);letter-spacing:.04em;opacity:.75}
.adsense-feed-profile-ins{display:inline-block;width:320px;height:50px;max-width:100%}
/* ルーム一覧のフィード内広告（feedAdMobile フラグメント）。プロフィール枠と同じ
   枠線+ラベルの見た目に揃える。 */
.adsense-feed--mobile{margin:var(--t-space-4) 0;padding:var(--t-space-2);display:flex;flex-direction:column;align-items:center;gap:3px;border:1px solid var(--panel-border);border-radius:var(--t-radius-xs)}
.adsense-feed--mobile::before{content:"広告";font-size:var(--t-fs-2xs);color:var(--muted);letter-spacing:.04em;opacity:.75}
.admin-room-readonly-banner{margin:10px 12px 0;padding:10px 12px;border-radius:10px;background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.25);color:var(--text)}
.admin-room-readonly-title{font-weight:700}
.admin-room-readonly-desc{font-size:12px;color:var(--text-secondary)}
.admin-back-close-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px}
.admin-back-close-panel{width:min(520px,92vw);border-radius:14px;background:var(--panel);border:1px solid var(--panel-border);box-shadow:0 16px 60px var(--t-overlay-black-45);padding:14px 14px 12px}
.admin-back-close-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.admin-back-close-title{font-weight:900;font-size:16px;color:var(--text)}
.admin-back-close-x{padding:6px 10px}
.admin-back-close-message{margin-top:10px;color:var(--muted);font-size:13px;line-height:1.6}
.admin-back-close-actions{margin-top:12px;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.admin-back-close-action{padding:10px 12px;font-size:13px}
.media-play-overlay{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:999px;background:rgba(0,0,0,0.55);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,0.25)}
.room-gallery-panel{width:100%;max-width:980px;max-height:86vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;box-shadow:0 18px 60px var(--t-overlay-black-45);overflow:hidden;position:relative}
.room-gallery-title{font-weight:800;font-size:16px}
.room-gallery-close{padding:6px 10px;line-height:1}
.random-join-fab{position:fixed;right:32px;bottom:16px;z-index:6000;width:64px;height:64px;padding:0;border-radius:50%;background:linear-gradient(135deg,#38bdf8 0%,#0ea5e9 100%);color:var(--t-white);box-shadow:0 4px 16px 0 rgba(14,165,233,0.13),0 1px 4px rgba(0,0,0,0.08);backdrop-filter:blur(1.5px);border:none;outline:none;transition:box-shadow .18s,transform .18s;background-size:100% 100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;opacity:.97}
.random-join-fab--hidden{display:none}
.random-join-fab:hover{box-shadow:0 12px 36px 0 rgba(14,165,233,0.28),0 4px 16px rgba(0,0,0,0.13);transform:translateY(-2px) scale(1.035);background:linear-gradient(90deg,#0ea5e9 0%,#38bdf8 100%);opacity:1}
.random-join-fab:active{box-shadow:0 4px 12px 0 rgba(14,165,233,0.12),0 1px 2px var(--t-overlay-black-10);transform:scale(0.98);opacity:0.93}
.random-join-fab__label{font-size:13px;font-weight:700;line-height:1}
.random-join-fab__label--top{margin-top:2px}
.noscript-room-main{max-width:960px;margin:24px auto;padding:0 16px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.noscript-room-title{font-size:22px;line-height:1.2;margin:0 0 10px}
.noscript-room-desc{margin:0 0 16px;white-space:pre-wrap;color:#444}
.noscript-room-back{margin:0}
.mobile-bottom-bar{position: fixed;left: 0;right: 0;bottom: 0;display: flex;gap: 8px;padding: 10px;background: var(--panel);box-shadow: 0 -6px 18px var(--t-overlay-black-12);z-index: 9999;padding-left: 12px;padding-right: 12px}
.mobile-bottom-bar .btn{flex:1;padding:10px 12px}
.exit-side{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:9999;padding:10px;border-radius:999px;background:var(--t-overlay-black-12)}
.exit-side svg{width:20px;height:20px}
@media (min-width:821px){
	.mobile-bottom-bar{display:none}
}
.message-list.rich{  }
.message-list.rich ul{}
.message-list.rich .message{position:relative;max-width:90%;}
.message-list.rich .message.me{margin-left:auto;}
.message-list.rich .message.other{margin-right:auto;align-self:flex-start}
.message-list.rich .message.system{}
.message-list.rich .date-separator{}
.message-list.rich .message .avatar{
	overflow:hidden;font-size:11px;
	align-self:flex-start;
}
.message-list.rich .bubble-wrap{}
.message-list.rich .message.me .bubble-wrap{align-items:flex-end}
.message-list.rich .message .avatar.me{}
.message-list.rich .message.continued .bubble-wrap{margin-left:48px}
.message-list.rich .message.me.continued .bubble-wrap{margin-left:0;margin-right:48px}
.message-list.rich .bubble-wrap{max-width:100%}
.message-list.rich .bubble{}
.message-list.rich .bubble.error{}
.message-list.rich .bubble .meta{}
.message-list.rich .bubble .meta .author{}
.message-list.rich .bubble .meta .time{}
.message-list.rich .bubble .text{line-break:anywhere}
.message-list.rich .bubble-footer{}
.message-list.rich .msg-actions{}
.message-list.rich .msg-actions.visible{}
.message-list.rich .msg-actions .btn-small{}
.message-list.rich .reactions{}
.message-list.rich .reaction-pill{}
.message-list.rich .reaction-pill .reaction-emoji{}
.message-list.rich .reaction-pill .reaction-count{font-weight:700}
.theme-dark .message-list.rich .reaction-pill.active .reaction-count{opacity:1;color:#001115}
.message-list.rich .typing-indicator{}
.message-list.rich .typing-indicator .dots{}
.message-list.rich .bubble:hover{}
.message.me .bubble-wrap{}
.message.me .bubble{}
.message.me .avatar.me{
	
	order:2;
}
.message.me{}
.message-list.rich .message.me .bubble{max-width:100%}
@media (max-width: 820px) {
	main { padding-left: 0; padding-right: 0 }
	.chat-window {
	margin-left: 0; margin-right: 0;
	
}
	.layout{flex-direction:column}
	.sidebar{width:100%;max-height:45vh;display:block}
	body { box-sizing: border-box; }
	.app-header { position: relative; }
	/*
	  チャット画面・ルーム一覧・about 等の静的ページは body 自体をスクロールさせず
	  （.rooms-open / body.chat-page の overflow:hidden。about 等はそもそも
	  この幅では素直に流れるだけで、ヘッダーが in-flow である前提でレイアウトしている）、
	  ヘッダーが position:relative でも問題にならない。
	  /account・/u/{id} だけは body が普通にスクロールする通常のページなので、
	  ヘッダーが in-flow のままだとスクロールと一緒に隠れてしまう
	  （padding-top:calc(var(--header-height) + 24px) で固定ヘッダー分は
	  既に確保済みなので、ここだけ position:fixed に戻せば消えない）。

	  error-404（「ログインが必要です」等）も同じくヘッダーを固定にする（2026-08-21）。
	  こちらは .error-page-shell が .app 内で flex:1 により残り領域いっぱいに広がり
	  中身を上下中央寄せしているため、account-page-body のような padding-top 補正は
	  不要（ヘッダーが in-flow から抜けても中央寄せの位置は変わらない）。
	*/
	body.account-page-body .app-header,
	body.error-page-body .app-header { position: fixed; }
	.chat-window {
	position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; height: calc(100vh - var(--header-height));   overflow: hidden; margin-top: 0; border-radius: 0;
	padding-left: 0; padding-right: 0; width: 100%; max-width: 100%; box-sizing: border-box;
}
	.rooms-panel { width: 100%; margin-left: 0; padding-left: 12px; padding-right: 12px; box-sizing: border-box }
	.rooms-panel .rooms-list { padding-left: 12px; padding-right: 12px; }
	.chat-window .layout {
	flex-direction: column;   
	height: calc(100vh - var(--header-height)); overflow: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; padding-bottom: 0; scroll-padding-bottom: 0;
}
	.chat-window:not(.show-rooms) .sidebar{display:none}
	/* .chat-window .layout の定義はここにもあったが、上の1箇所に統合した（2026-08-12） */
}
@media (max-width:820px) {
	.mobile-rooms-overlay{position:absolute;top:0;left:0;right:0;bottom:var(--footer-height);z-index:200;background:var(--surface);display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}
	.mobile-rooms-overlay .rooms-list{
	flex:1 1 auto;-webkit-overflow-scrolling:touch;padding:12px;padding-top:0px;padding-bottom:calc(var(--footer-height) + 44px);scroll-padding-bottom:calc(var(--footer-height) + 20px);max-height:calc(100vh - var(--header-height) - var(--footer-height));box-sizing:border-box;
	height:100%;overflow:auto;
}
	.chat-window.show-rooms .rooms-list{height:100%;overflow:auto}
}
@media (max-width:820px) {
	.rooms-list {  padding-bottom: calc(var(--footer-height) + 44px); box-sizing: border-box; }
	.mobile-bottom-bar, .chat-footer { z-index: 99999; }
}

/* Chat room mobile tweaks */
@media (max-width:820px){
	/* make topbar more compact and stack text */
	.topbar{min-height:1x;padding:0 0 5px 0;align-items:center}
	.topbar > div:first-child { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px }
	.room-info{gap:2px}
	.room-info div:first-child{font-size:16px}
	.room-info div:last-child{font-size:12px}

	/* enlarge leave button for touch */
	.app-header .header-exit{padding:10px 12px;border-radius:10px;font-size:14px}
	.header-exit{right:10px}

	/* message list: use full height and maximize bubble width on mobile */
	.message-list{padding:12px 8px;padding-bottom:calc(var(--footer-height) + var(--kb-safe, 0px) + 20px + var(--bottom-extra, 10px))}
	.message-list.rich .bubble{max-width:100%;font-size:15px}
	.message.me .bubble{max-width:96%}
	.message-list.rich .message.me .bubble{max-width:100%}
	.message-list.rich .bubble .text{font-size:15px;line-height:1.5}

	/* avatars smaller on mobile */
	.avatar, .room-avatar{width:34px;height:34px;border-radius:8px}

	/* message input full width fixed bottom */
	.message-input{left:0;transform:none;width:100%;border-radius:0;bottom:0;padding-left:12px;padding-right:12px}

	/* ensure room meta truncation fits mobile */
	.room-meta .name{max-width:60vw}
	.room-meta .desc{max-width:60vw}
}
/* Ensure room-meta / TTL use same font size on mobile */
@media (max-width:820px) {
	.room-meta > div { font-size:12px; color:var(--muted); }
}
@media (max-width:480px) {
	.room-meta > div { font-size:12px; color:var(--muted); }
}

@media (max-width:480px){
	.topbar{min-height:60px;padding:0 0 5px 0}
	.room-info div:first-child{font-size:15px}
	.message-list.rich .bubble{max-width:100%;font-size:14px}
	.room-meta .name{max-width:52vw}
}
@media (max-width: 820px) {
	.sidebar .rooms-list, .rooms-list { max-height: calc(100dvh - var(--header-height) - var(--footer-height)); overflow: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--footer-height) + 44px); }
}
@media (max-width: 820px) {
	.chat-window.show-rooms { position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; height: calc(100vh - var(--header-height)); width: 100%; max-width: 100%; overflow: hidden; z-index: 2000; background: var(--surface); box-sizing: border-box; }
}
.chat-window .layout, .message-list, .rooms-list { overflow: auto; -webkit-overflow-scrolling: touch; }
.rooms-open, .rooms-open body, .rooms-open html { height: 100%; overflow: hidden; touch-action: pan-y; }
body[style*="position: fixed"] { overscroll-behavior: contain; }
@media (max-width:480px) {
	.bubble{max-width:82%}
	.avatar{width:28px;height:28px;font-size:12px}
	.topbar .info{font-size:12px}
	.line-input .send{width:40px;height:40px;border-radius:var(--t-radius-pill)}
}
.btn-join{padding:6px 10px;border-radius:8px;font-size:13px}
.empty{color:var(--muted);padding:20px;text-align:center}
.message-list.rich{padding:14px 8px;  }
.message-list.rich ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.message-list.rich .message{}
.message-list.rich .message.continued .avatar{visibility:visible}
.message-list.rich .message .avatar{width:36px;height:36px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:var(--avatar-foreground);font-weight:700;margin-right:8px;flex-shrink:0;border:1px solid var(--panel-border)}
.message-list.rich .message .avatar.me{margin-left:8px;margin-right:0}
.message-list.rich .bubble-wrap{display:flex;flex-direction:column;align-items:flex-start;position:relative;overflow:visible}
.message-list.rich .bubble{max-width:100%;transition:transform .12s ease, box-shadow .12s ease}
.message-list.rich .bubble.error{border:1px solid #ffb3b3;background:#fff5f5}
.message-list.rich .bubble .meta{display:flex;gap:6px;align-items:center;margin-bottom:2px;white-space:nowrap}
.message-list.rich .bubble .meta .author{font-weight:700}
.message-list.rich .bubble .meta .time{font-size:11px;color:var(--muted)}
.message-list.rich .bubble .text{white-space:pre-wrap;font-size:14px;line-height:1.45;overflow-wrap:break-word;word-break:normal}
.message-list.rich .bubble-footer{display:flex;align-items:center;gap:8px;margin-top:8px}
.message-list.rich .msg-actions{transition:opacity .12s ease, transform .12s ease}
.message-list.rich .msg-actions.visible{opacity:1;pointer-events:auto;transform:translateX(0)}
.message-list.rich .msg-actions .btn-small{padding:6px 8px;font-size:12px}
.message-list.rich .reactions{display:flex;gap:6px}
.message-list.rich .reaction-pill{background:var(--t-overlay-black-06);padding:4px 8px;border-radius:999px;font-size:13px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.message-list.rich .reaction-pill .reaction-emoji{font-size:16px;line-height:1}
.message-list.rich .reaction-pill .reaction-count{margin-left:6px;font-size:12px;opacity:0.85;color:var(--muted)}
.message-list.rich .typing-indicator{padding:8px 12px;border-radius:8px;background:transparent;margin-top:6px;display:flex;align-items:center}
.message-list.rich .typing-indicator .dots{font-size:13px;color:var(--muted)}
.message-list.rich .bubble:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,0.18)}
.message.me .bubble-wrap{align-items:flex-end}
.message.me .bubble{color:var(--text);border-radius:6px 6px 2px 6px;max-width:90%;}
/* .message.me .avatar.me の定義はここにもあったが、上の1箇所に統合した（2026-08-12） */
.message.me{justify-content:flex-end}
.force-mobile .chat-window { max-width: 100%; border-radius: 0; height: calc(100vh - var(--header-height)); position: relative; }
.force-mobile .layout { flex-direction: column; height: calc(100vh - var(--header-height) - var(--footer-height)); }
.force-mobile .sidebar { width: 100%; max-height: none; display: block; }
.force-mobile .sidebar .rooms-list { padding-bottom: calc(var(--footer-height) + 44px); overflow: auto; }
.force-mobile .sidebar .rooms-list, .force-mobile .rooms-list { padding-bottom: calc(var(--footer-height) + 44px); overflow: auto; }
.force-mobile .chat-window.show-rooms {
	position: relative;
	inset: auto;
	height: auto;
	width: 100%;
	overflow: visible;
}
.force-mobile .chat-window.show-rooms .layout {
	display: flex;
	flex-direction: column;
	height: auto;
}
.force-mobile .chat-window.show-rooms .sidebar {
	display: block;
	max-height: none;
	height: auto;
}
.force-mobile .chat-window.show-rooms .content {
	display: block;
}
.force-mobile .mobile-rooms-overlay { display: none; }
.force-mobile .mobile-rooms-body { overflow: auto; -webkit-overflow-scrolling: touch; }
.force-mobile .mobile-bottom-bar { display: flex; z-index: 9999; }
.force-mobile .message-input { left: 0; transform: none; width: 100%; border-radius: 0; }
.force-mobile .chat-window .sidebar { display: block; }
.force-mobile .chat-window .mobile-rooms-overlay { display: none; visibility: hidden; pointer-events: none; }
.app-header .topbar .info code,
.topbar .info code,
.device-id {
	background: var(--panel);
	background-color: var(--panel);
	border: 1px solid var(--t-overlay-white-04);
	color: var(--muted);
	padding: 2px 6px;
	border-radius: 6px;
	opacity: 1;
}
.topbar .info code { display: inline-block; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-light .topbar .info code,
.theme-light .device-info .device-code {
	background: var(--t-white); /* match light message background */
	background-color: var(--t-white);
	color: var(--text);
	border: 1px solid rgba(34,28,20,0.04);
	padding: 4px 8px;
	border-radius: 6px;
}
.theme-dark .topbar .info code,
.theme-dark .device-info .device-code {
	background: var(--t-overlay-white-14); /* match dark message background */
	background-color: var(--t-overlay-white-14);
	color: var(--text);
	border: 1px solid var(--t-overlay-white-08);
	padding: 4px 8px;
	border-radius: 6px;
}
.theme-dark .btn {   color: var(--text); }
.theme-dark .btn:hover { background: var(--t-overlay-white-04); transform: translateY(-1px); }
.theme-dark .btn:focus-visible {  outline-offset: 2px; }
.theme-dark .btn[disabled], .theme-dark .btn:disabled { opacity: 0.6; cursor: not-allowed; }
.theme-dark .btn .icon { opacity: 1; }
.theme-dark .btn-ghost { background: transparent;  }

/* Dark theme visibility improvements: clearer boundaries and focus cues */
.theme-dark .chat-window { border-color: var(--t-overlay-white-08); }
.theme-dark .chat-footer { border-top-color: var(--t-overlay-white-10); }
.theme-dark .message.system .system-text { border-color: var(--t-overlay-white-12); background: var(--t-overlay-white-03); }

/* Buttons: stronger borders and hover feedback for dark */
.theme-dark .btn { border-color: var(--t-overlay-white-14); background: var(--t-overlay-white-03); box-shadow: 0 1px 0 var(--t-overlay-white-04) inset, 0 6px 14px rgba(0,0,0,0.25); }
.theme-dark .btn:hover { border-color: var(--t-overlay-white-20); box-shadow: 0 1px 0 var(--t-overlay-white-06) inset, 0 10px 22px rgba(0,0,0,0.32); }
.theme-dark .btn-ghost { border-color: var(--t-overlay-white-14); }
/* ここにあったダーク専用の枠・影の上書き（青）は .btn-primary 側へ統合した */
.theme-dark .btn:focus-visible { outline: 2px solid rgba(59,130,246,0.45); }

/* Inputs and textarea: clearer borders and backgrounds */
.theme-dark .line-input .message-textarea { border-color: var(--t-overlay-white-20); background-color: var(--t-overlay-white-08); color: var(--t-white); }
.theme-dark .rooms-search-input, .theme-dark .modal-like-input, .theme-dark input, .theme-dark textarea { border-color: var(--t-overlay-white-20); background-color: var(--t-overlay-white-08); color: var(--t-white); }
/* フォーカスリングは青の直書きだった。テーマ変数に寄せる（アクセントが変われば追従する） */
.theme-dark .rooms-search-input:focus, .theme-dark .modal-like-input:focus, .theme-dark input:focus, .theme-dark textarea:focus { outline: 2px solid var(--glow); border-color: var(--accent); }

/* Avatars and chips: add subtle borders to separate from background */
.theme-dark .avatar, .theme-dark .room-avatar { border: 1px solid var(--t-overlay-white-12); }
.theme-dark .room-badge { background: var(--t-overlay-white-06); border: 1px solid var(--t-overlay-white-12); }

/* Message bubbles (rich layout): add clear borders and differentiated backgrounds */
.theme-dark .message-list.rich .bubble {
	background: var(--t-overlay-white-06); border: 1px solid var(--t-overlay-white-14); box-shadow: 0 6px 16px rgba(0,0,0,0.28);
	position: relative;
}
.theme-dark .message.other .bubble { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.45); }
.theme-dark .message.other .bubble::before { content: ""; position: absolute; left: -8px; top: 14px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid rgba(255,255,255,0.45); }
.theme-dark .message.other .bubble::after { content: ""; position: absolute; left: -7px; top: 14px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid rgba(255,255,255,0.28); }
.theme-dark .message.me .bubble { background: rgba(59,130,246,0.34); border: 1px solid rgba(59,130,246,0.58); }
.theme-dark .message-list.rich .bubble .meta .time { color: rgba(255,255,255,0.78); }
.theme-dark .message-list.rich .bubble .meta { color: var(--muted); }
.theme-dark .message-list.rich .bubble .text { color: inherit; }
body.chat-page .message-list.rich .bubble .text .mention,
body.chat-page .message-list.rich .bubble .text .mention.me { color: inherit; }

/* Hide decorative bubble pointers for continued (grouped) messages */
.message-list.rich .message.continued .bubble::before,
.message-list.rich .message.continued .bubble::after {
	display: none;
	content: none;
}

/* System message time: slightly brighter for readability */
.theme-dark .message.system .system-time .time { color: rgba(255,255,255,0.7); }

/* Dark mode: increase input borders and placeholder contrast for readability */
.theme-dark input,
.theme-dark textarea,
.theme-dark select,
.theme-dark .rooms-search-input,
.theme-dark .modal-like-input {
	border-color: var(--t-overlay-white-20);
	background-color: var(--t-overlay-white-08);
	color: var(--t-white);
}
.theme-dark input::placeholder,
.theme-dark textarea::placeholder,
.theme-dark .modal-like-input::placeholder {
	color: rgba(255,255,255,0.5);
	opacity: 1;
}
/* Chrome の自動入力は背景を強制的に白系にする（author の background-color を無視する）。
   inset box-shadow で塗りつぶして上書きする。 */
.theme-dark .modal-like-input:-webkit-autofill,
.theme-dark .modal-like-input:-webkit-autofill:hover,
.theme-dark .modal-like-input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--t-white);
	-webkit-box-shadow: 0 0 0 1000px var(--t-overlay-white-08) inset;
	transition: background-color 5000s ease-in-out 0s;
}
/* Light mode: ensure proper select styling */
.theme-light select,
.theme-light .modal-like-input {
	background-color: var(--t-white);
	color: var(--text);
	border: 1px solid rgba(2,6,23,0.14);
}
/* Select element specific styles */
select.modal-like-input {
	appearance: none;
	cursor: pointer;
	padding-right: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
}
.theme-dark select.modal-like-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ccc' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
}
/* Select option styling */
.theme-dark select option {
	background: #0f1724;
	color: #f3f4f6;
}
.theme-light select option {
	background: var(--t-white);
	color: var(--t-brand-ink);
}
input::placeholder, textarea::placeholder { 
	color: var(--muted); 
	opacity: 0.7; 
}
.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
	color: rgba(255,255,255,0.5);
	opacity: 1;
}

/* Tighten chat horizontal padding to maximize space for messages */
.chat-window .message-list { padding-left: 8px; padding-right: 8px; }

/* Room list avatar styling */
.room-avatar{width:clamp(28px,6.5vw,40px);height:clamp(28px,6.5vw,40px);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;margin-right:12px;color:var(--avatar-foreground);font-weight:700;flex-shrink:0}
.room-avatar-text{font-size:clamp(12px,2.4vw,16px);line-height:1}
/* カード同士の間隔。8px だと影が隣に触れて 1 枚の帯に見えるので、
   影が呼吸できる 12px に広げる。 */
.rooms-list ul{list-style:none;padding:0;padding-top:var(--t-space-2);margin:0;display:flex;flex-direction:column;gap:var(--t-space-3)}
.rooms-page .rooms-list ul{padding-top:14px}
.rooms-list-feedback{padding:16px;color:var(--muted)}
.room-entry-row{display:flex;align-items:center;justify-content:space-between;width:100%}
.room-entry{text-align:left;border-radius:8px;border:none;background:transparent; text-decoration: none; color: inherit}
/* Ensure anchors used as room entries never show underlines or default link color
   in any state (link/visited/hover/active/focus). Keep accessible focus outline
   via :focus-visible if needed elsewhere; here we avoid text-decoration only. */
a.room-entry, a.room-entry:link, a.room-entry:visited, a.room-entry:hover, a.room-entry:active, a.room-entry:focus {
	text-decoration: none;
	color: inherit;
}
/* Also prevent any child element from inheriting a text-decoration underline */
.room-entry, .room-entry * {
	text-decoration: none;
}
.room-entry .name{font-weight:600}
.room-entry .desc{color:var(--muted);font-size:12px}

@media (max-width:480px){
	.room-avatar{width:34px;height:34px;margin-right:10px}
	.room-avatar-text{font-size:14px}
	.room-entry .name{font-size:15px}
	.room-entry .desc{font-size:12px}
}

/* On small screens allow the room description to wrap and clamp to two lines to avoid overflow */
@media (max-width:820px) {
	.room-meta .desc { white-space: normal; }
	.room-meta .desc, .room-meta .desc-text {
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-clamp: 2;
	}
}

/* refined room list structure styles */
/*
  ⚠ 以前は background-color:#291d1e70（茶色 44%）をハードコードしており、
  ライトテーマでも茶色が当たっていた。セマンティック変数に寄せてテーマ切替を効かせる。
  ルール側は原色トークンを直接使わない（chat.css 先頭の3層構造の方針）。
*/
.room-list-item { list-style: none; background-color: var(--surface); border-radius: 10px; }
.room-entry { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; gap: 12px; width: 100%; box-sizing: border-box; transition: background .12s ease, box-shadow .12s ease; }
.room-entry:hover { background: var(--t-overlay-black-06); }
.theme-dark .room-entry:hover {  }
.room-left { display:flex; align-items:center; gap:12px; overflow:hidden; min-width:0; }
.room-meta { display:flex; flex-direction:column; min-width:0; }
.room-meta .name { font-weight:700; color: var(--text); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width:45ch }
.room-meta .desc { color:var(--muted); font-size:13px; white-space:normal; text-overflow:unset; overflow:visible; max-width:60ch }
.room-meta, .room-entry, .room-left, .room-right { word-break: break-word; }
.room-meta .creator,
.room-meta .created { font-size:12px; color:var(--muted); line-height:1.25; }
.room-meta .creator { margin-top:2px }
.room-meta .created { margin-top:2px }

/* Category badge styles - dark/light theme compatible */
.category-badge {
	display: inline-block;
	font-size: 11px;
	padding: 2px 6px;
	border-radius: 4px;
	margin-right: 8px;
	vertical-align: middle;
	font-weight: normal;
}
.theme-dark .category-badge {
	background: rgb(233 0 0 / 20%);
	color: rgba(255,255,255,0.7);
	border: 1px solid var(--t-overlay-white-12);
}
.theme-light .category-badge {
	background: rgba(0,0,0,0.05);
	color: rgba(0,0,0,0.6);
	border: 1px solid var(--t-overlay-black-10);
}

.room-right { display:flex; align-items:center; gap:8px; flex-shrink:0;flex-direction: column; }
.room-badge { background: var(--t-overlay-black-06); padding:6px 10px; border-radius:999px; font-size:12px; color:var(--text) }
.room-badge.room-badge--active { font-weight: 800; background: rgba(245, 158, 11, 0.22); border: 1px solid rgba(245, 158, 11, 0.42); box-shadow: 0 1px 0 var(--t-overlay-white-06) inset; }
.theme-dark .room-badge.room-badge--active { background: rgba(245, 158, 11, 0.26); border-color: rgba(245, 158, 11, 0.52); }
/*
  未読バッジ。「前回見たあとの新着件数」。
  人数バッジ（room-badge）と並ぶので、色で役割を分ける。
  数字だけの小さな要素なので、桁が増えても幅が動きすぎないよう min-width を持たせる。
*/
.room-unread-badge {
	display:inline-flex; align-items:center; justify-content:center;
	min-width:20px; padding:1px 6px; border-radius:999px;
	font-size:11px; line-height:18px; font-weight:700;
	background: var(--unread-bg); color: var(--unread-fg);
}
.room-watch-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px; font-size:12px; line-height:18px; font-weight:700; background: rgba(34,197,94,0.18); border: 1px solid rgba(34,197,94,0.35); color: var(--text); }
.room-watch-badge svg { width:14px; height:14px; display:block; }
.theme-dark .room-watch-badge { background: rgba(34,197,94,0.22); border-color: rgba(34,197,94,0.45); }
/* ログイン限定バッジ。部屋名の横の👤アイコンは「作成者」表示と紛らわしかったため、
   テキスト付きバッジとして room-right 側にまとめた（2026-08-15）。
   パスワード制バッジと似た色・アイコンだと見分けが付かないため、
   ログイン=コーラル(🪪) / パスワード=アンバー(🔑) で色相を分けている。 */
.room-login-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px; font-size:12px; line-height:18px; font-weight:700; white-space:nowrap; background: rgba(217,105,74,0.18); border: 1px solid rgba(217,105,74,0.35); color: var(--text); }
.theme-dark .room-login-badge { background: rgba(217,105,74,0.24); border-color: rgba(217,105,74,0.48); }
.room-password-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px; font-size:12px; line-height:18px; font-weight:700; white-space:nowrap; background: rgba(245,158,11,0.18); border: 1px solid rgba(245,158,11,0.4); color: var(--text); }
.theme-dark .room-password-badge { background: rgba(245,158,11,0.24); border-color: rgba(245,158,11,0.52); }

/* Removed feature: random join button */
#random-join-btn-desktop-fixed,
#random-join-btn-mobile{
        display:none;
}

/* Utility */
.muted { color: var(--muted); }

/* '入室中' バッジ。検索フィルターの「入室中」（.rooms-filter-joined）と同じ青系に揃える
   （2026-08-15。以前はブランドカラーのコーラルに統一していたが、青系に変更）。 */
.member-badge { font-weight: 800; border: 1px solid transparent; }
.theme-dark .member-badge { background: rgba(59, 130, 246, 0.26); color: var(--t-white); border-color: rgba(59, 130, 246, 0.56); box-shadow: 0 1px 0 var(--t-overlay-white-06) inset, 0 6px 14px rgba(0,0,0,0.25); }
.theme-light .member-badge { background: rgba(37, 99, 235, 0.16); color: var(--t-blue-600); border-color: rgba(37, 99, 235, 0.4); }

@media (max-width:820px){
	.room-badge { padding:4px 8px; font-size:12px }
}

@media (min-width:821px){
	.room-entry { padding: 14px 16px }
}

/* search box in rooms list */
/* 絞り込みの行。部品の高さが 28〜38px でばらけていたので 34px に揃え、
   行間も詰まっていたので広げた。ここは「探す」ための場所であって
   主役ではないので、密度より落ち着きを優先する。 */
.rooms-search-wrapper{
	
	
	
	
	
}
/*
  検索行。font-size は 10px だった（selects も同じ）。
  小さすぎて読めないうえ、iOS Safari は 16px 未満の input にフォーカスすると
  画面を自動でズームする。12px にして高さも 34px→38px に広げる。
*/
.rooms-search-input{
	
	
	box-sizing:border-box;
	padding: 0 var(--t-space-3);
	border-radius: var(--t-radius-pill);
	border:1px solid var(--panel-border);
	background:var(--panel);
	color:var(--text);
	font-size: 12px;
	height: 38px;
}
/* 検索は主要動作ではないので塗らない。枠と文字色だけで「押せる」ことを示す。 */
.rooms-search-btn{
	height: 38px;
	padding: 0 var(--t-space-4);
	border-radius: var(--t-radius-pill);
	
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	font-size: 12px;
	font-weight: var(--t-fw-semibold);
	color: var(--accent-text);
	background: var(--surface);
	border: 1px solid var(--accent);
}
.rooms-search-btn:hover{
	background: var(--panel);
}

/* left group containing search input and visibility pill */
.rooms-search-left{
    display:flex;
    align-items:center;
    gap:8px;
    flex:1 1 auto;
    min-width:0; /* allow children to shrink properly */
}
.rooms-search-input:focus{outline:2px solid var(--glow);border-color:var(--accent)}

/* visibility and sort select styling */
.rooms-visibility-select,
.rooms-sort-select{
	flex: 0 0 auto;
	box-sizing: border-box;
	padding: 0 var(--t-space-3);
	border-radius: var(--t-radius-pill);
	border: 1px solid var(--panel-border);
	background: var(--panel);
	color: var(--text);
	font-size: 12px;
	height: 38px;
	cursor: pointer;
}
.rooms-visibility-select:focus,
.rooms-sort-select:focus{
	outline: 2px solid var(--glow);
	border-color: var(--accent);
}
.rooms-visibility-select{
	min-width: 100px;
}
.rooms-sort-select{
	
	
}

@media (max-width: 600px){
	.rooms-search-wrapper{}
	.rooms-search-input{min-width:0}
}
/* PC view constraint for room list */
@media (min-width: 821px) {
    .rooms-panel {
        max-width: 800px;
        margin: 0 auto;
        width: 100%;
        box-sizing: border-box;
    }
}

/* Switch-style visual for visibility toggle with text inside */
/* appearance:none も付ける。opacity/width/height だけだと、ダークモード
   （color-scheme:dark）でブラウザ既定の青いネイティブ装飾がわずかに漏れて見えることがある。 */
.rooms-visibility-toggle{position:absolute;opacity:0;width:0;height:0;border:0;padding:0;margin:0;appearance:none;-webkit-appearance:none}
.rooms-visibility-toggle-wrapper{display:inline-flex;align-items:center;gap:8px;cursor:pointer;position:relative}

.rooms-visibility-icon {
    flex: 0 0 auto;
    display: inline-block;
    width: 96px; /* Slightly wider so "プライベート" has more room */
    height: 28px;
    border-radius: 999px;
    background: var(--panel);
    position: relative;
    border: 1px solid var(--panel-border);
    transition: background 200ms ease, border-color 200ms ease;
    box-sizing: border-box;
    z-index: 0;
    overflow: hidden; /* Clip text */
}

/* The Knob */
.rooms-visibility-icon::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 1px 2px var(--t-overlay-black-12);
    transition: transform 200ms ease;
    z-index: 2;
}

/* The Text Label */
.rooms-visibility-icon::before {
	content: 'プライベート'; /* Default (OFF) text */
	position: absolute;
	top: 0;
	left: 28px; /* Position to the right of the knob */
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start; /* Align left near the knob? No, center in remaining space */
	font-size: 10px; /* compact label size */
	font-weight: 400;
	color: var(--text);
	transition: opacity 200ms ease;
	z-index: 1;
	white-space: nowrap;
}

/* OFF State (Private): gray background + white text for readability */
.rooms-visibility-toggle-wrapper:not(.on) .rooms-visibility-icon {
    background: rgba(107, 114, 128, 0.28);
    border-color: rgba(107, 114, 128, 0.56);
}
.theme-dark .rooms-visibility-toggle-wrapper:not(.on) .rooms-visibility-icon {
    background: rgba(75, 85, 99, 0.44);
    border-color: rgba(148, 163, 184, 0.52);
}
.rooms-visibility-toggle-wrapper:not(.on) .rooms-visibility-icon::before {
    color: var(--t-white);
    font-weight: 700;
}
.theme-dark .rooms-visibility-toggle-wrapper:not(.on) .rooms-visibility-icon::before {
    color: var(--t-white);
}

/* Light mode: keep "プライベート" label black */
.theme-light .rooms-visibility-toggle-wrapper:not(.on) .rooms-visibility-icon::before {
    color: #111;
}

/* ON State (Public) */
.rooms-visibility-toggle-wrapper.on .rooms-visibility-icon {
    background: var(--accent);
    border-color: var(--t-overlay-black-06);
}

.rooms-visibility-toggle-wrapper.on .rooms-visibility-icon::after {
    transform: translateX(68px); /* Move knob to right end for 96px-wide track */
}

.rooms-visibility-toggle-wrapper.on .rooms-visibility-icon::before {
    content: '公開';
    color: var(--text);
    font-weight: 700;
    left: 0;
    right: 28px; /* Position to the left of the knob */
    justify-content: flex-end; /* Align right near the knob */
    padding-right: 8px;
}

/* Hide the external text span since it's now inside */
.theme-light .rooms-visibility-toggle-wrapper.on .rooms-visibility-icon::before {
    color: var(--t-white);
}

.rooms-visibility-text {
    display: none;
}

/* Mobile Layout Adjustments */
@media (max-width: 600px) {
    .rooms-search-wrapper {
        
        
        
        
    }
    
    .rooms-search-group-main {
        
        display: flex;
        gap: 8px;
    }
    
    .rooms-search-group-sub {
        
        
        
        
        
    }
    
    .rooms-sort-select {
        
        
         /* Keep option text visible */
    }
    
    .rooms-visibility-toggle-wrapper {
        flex: 0 0 auto;
    }
}

/* ----------------------------------------------------------------------------
   公開範囲の切り替え（すべて / 公開 / プライベート）

   以前: 高さ 28px・文字 10px・仕切り線あり・角丸 10px。
         選択中の色が「緑/橙」でテーマ別に 6 ルールに分岐していて、
         押せる場所も小さかった。

   いま: 全体をピルの受け皿にして、選択中だけ内側に白いピルが乗る形にする
         （物理的なスイッチのつまみに見えるので、どれが選ばれているかが
         色に頼らず形で分かる）。仕切り線は不要になるので消す。
         状態の色分けは「公開/非公開」の絵文字が既に担っているので、
         文字色まで分ける必要はない。
---------------------------------------------------------------------------- */
.rooms-vis-group{
    display:flex;
    width:100%;
    gap:2px;
    padding:3px;
    border-radius:var(--t-radius-pill);
    border:1px solid var(--panel-border);
    background:var(--panel);
}
.rooms-vis-btn{
    flex:1 1 0;
    text-align:center;
    border:none;
    background:transparent;
    color:var(--muted);
    padding:0 12px;
    height:34px;
    border-radius:var(--t-radius-pill);
    font-size:12px;
    line-height:1;
    cursor:pointer;
    white-space:nowrap;
    user-select:none;
    transition:background var(--t-dur-fast) var(--t-ease-soft),
               color var(--t-dur-fast) var(--t-ease-soft),
               box-shadow var(--t-dur-base) var(--t-ease-soft);
}
.rooms-vis-btn:hover{ color:var(--text) }
.rooms-vis-btn.active{
    font-weight:var(--t-fw-bold);
    color:var(--text);
    background:var(--surface);
    box-shadow:var(--t-shadow-sm);
}

/* visibility group row */
.rooms-search-group-vis{
    display:flex;
    align-items:center;
    flex:0 0 auto;
}
@media (max-width:600px){
    .rooms-search-group-vis{
        width:100%;
    }
    .rooms-vis-group{
        /* stretch to fill row so pills share the space evenly */
        flex:1 1 auto;
        width:100%;
    }
    .rooms-vis-btn{
        flex:1 1 auto;
        text-align:center;
        justify-content:center;
        display:flex;
        align-items:center;
        padding:0 4px;
        font-size:11px;
        height:30px;
    }
}

/* secret style: darker, subtle background, rounded */
.rooms-visibility-icon.secret{
	color: var(--panel);
	background: linear-gradient(180deg, var(--t-overlay-black-06), rgba(0,0,0,0.02));
	padding: 6px;
	border-radius: 6px;
	box-shadow: inset 0 -1px 0 var(--t-overlay-white-02);
}

/* keyboard focus for the wrapper when toggling via checkbox */
.rooms-visibility-toggle-wrapper:focus-within .rooms-visibility-icon{outline:2px solid rgba(59,130,246,0.18);border-radius:999px}

.rooms-visibility-text{font-size:11px;color:var(--text);margin-left:4px}

/* pill style: active-only filter */
.rooms-active-only{position:absolute;opacity:0;width:0;height:0;border:0;padding:0;margin:0}
.rooms-active-only-wrapper{display:inline-flex;align-items:center;cursor:pointer;position:relative}
/* 絞り込みのトグル。28px / 文字 10px で、隣の検索欄（38px）と高さが揃わず
   フィルタ行が凸凹していた。他のピルと同じ 34px・12px に合わせる。 */
.rooms-active-only-pill{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding: 0 var(--t-space-4);
	height: 34px;
	box-sizing: border-box;
	border-radius: var(--t-radius-pill);
	border: 1px solid var(--panel-border);
	background: transparent;
	color: var(--text);
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
	user-select: none;
	transition: background var(--t-dur-fast) var(--t-ease-soft),
	            border-color var(--t-dur-fast) var(--t-ease-soft);
}
.rooms-active-only-pill::before{
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 6px;
	background: transparent;
	border: 1px solid var(--panel-border);
	box-sizing: border-box;
}
.rooms-active-only-wrapper.on .rooms-active-only-pill{background: rgba(34, 197, 94, 0.20); border-color: rgba(34, 197, 94, 0.44); font-weight: 800;}
.theme-dark .rooms-active-only-wrapper.on .rooms-active-only-pill{background: rgba(34, 197, 94, 0.26); border-color: rgba(34, 197, 94, 0.56);}
.rooms-active-only-wrapper.on .rooms-active-only-pill::before{background: rgba(34, 197, 94, 0.95); border-color: rgba(34, 197, 94, 0.95); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);}
.rooms-filter-joined .rooms-active-only-pill::before{display:none;content:none;}
.rooms-filter-online .rooms-active-only-pill::before{display:none;content:none;}
.rooms-filter-login-only .rooms-active-only-pill::before{display:none;content:none;}
/* 「入室中」はカード側の member-badge（index.html の .rooms-page .room-right .member-badge）と
   全く同じ青系にする（2026-08-15）。 */
.rooms-filter-joined.on .rooms-active-only-pill{
	color: var(--t-blue-600);
	background: rgba(37, 99, 235, 0.16);
	border-color: rgba(37, 99, 235, 0.4);
}
.theme-dark .rooms-filter-joined.on .rooms-active-only-pill{
	color: var(--t-white);
	background: rgba(59, 130, 246, 0.26);
	border-color: rgba(59, 130, 246, 0.56);
}
/* 「ログイン限定」はカードのログインバッジ（.room-login-badge）と同じ橙系に揃える */
.rooms-filter-login-only.on .rooms-active-only-pill{
	background: rgba(217, 105, 74, 0.18);
	border-color: rgba(217, 105, 74, 0.4);
	font-weight: 800;
}
.theme-dark .rooms-filter-login-only.on .rooms-active-only-pill{
	background: rgba(217, 105, 74, 0.28);
	border-color: rgba(217, 105, 74, 0.52);
}
.rooms-active-only-wrapper:focus-within .rooms-active-only-pill{outline:2px solid rgba(59,130,246,0.18)}

/* pill style for visibility text */
.rooms-visibility-pill{
	display:inline-block;
	padding:6px 10px;
	border-radius:999px;
	background: transparent;
	border:1px solid var(--panel-border);
	font-size:13px;
	color:var(--text);
}
.rooms-visibility-pill.secret{
	background: var(--panel);
	color: var(--text);
	border-color: var(--panel-border);
}



/* Compact app footer for rooms list pager area: reduce visual height while keeping spacing accessible */
.app-footer{padding:8px 10px; height:auto; min-height:40px; display:flex; align-items:center; gap:8px; box-sizing:border-box}
.app-footer .rooms-pager{margin:0 auto}
/* Mobile overlay specific: when footer is moved into mobile overlay, ensure it stays compact */
.mobile-rooms-overlay .app-footer,
.mobile-rooms-overlay .app-footer .rooms-pager,
html.force-mobile .app-footer,
.force-mobile-detected .app-footer {
	padding:6px 8px;
	min-height:36px;
}
/* further reduce pager button sizes on small viewports to keep footer compact */
@media (max-width: 420px) {
	.app-footer .rooms-pager .btn { padding:6px 8px; font-size:13px }
}

/* class-based compact footer (applied by JS when moving footer into overlay) */
.app-footer.compact-footer {
	padding:6px 8px;
	min-height:36px;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5200;
}

/* Ensure rooms list has enough bottom padding when the footer is fixed or moved into a mobile overlay
   so the last list items are not hidden behind the footer. This rule is intentionally specific and
   uses to override inline or other layout changes that happen at runtime. */
.force-mobile-detected .rooms-list, html.force-mobile .rooms-list {
	/* keep force-mobile contexts safe at all sizes */
	padding-bottom: calc(var(--footer-height, 96px) + env(safe-area-inset-bottom));
}

/* For mobile overlay specifically, only apply extra padding on small viewports */
@media (max-width: 820px) {
	.mobile-rooms-overlay .rooms-list, .mobile-rooms-overlay .rooms-list ul,
	.rooms-list { 
		padding-bottom: calc(var(--footer-height, 96px) + env(safe-area-inset-bottom));
		max-height: calc(100vh - var(--header-height, 28px) - 120px);
	}
}

/* Sticky search wrapper: keeps the search field visible while scrolling the rooms list */
.rooms-search-wrapper.sticky, .rooms-search-wrapper{position:sticky;top:-2;z-index:2200;background:var(--surface);backdrop-filter: blur(6px);box-shadow: 0 2px 8px var(--t-overlay-black-04);border-bottom:1px solid var(--panel-border);} 

/* Smooth padding transition for rooms list when footer height changes */
.rooms-list{transition: padding-bottom 160ms ease;}

/* clamp description to two lines for better readability */
.room-meta .desc-text{
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	/* standard (where supported) */
	line-clamp: 2;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/* 部屋一覧の最新コメント（公開部屋のみ。非公開部屋はサーバー側で値自体を返さない）。
   説明文と見分けられるよう、吹き出しアイコン＋やや控えめな色で出す。 */
.room-meta .latest-message{
	display:flex;
	align-items:flex-start;
	gap:4px;
	margin-top:2px;
	color:var(--muted);
	font-size:12px;
}
.room-meta .latest-message-icon{
	flex-shrink:0;
	line-height:1.4;
}
.room-meta .latest-message-text{
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	line-clamp: 2;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/* separators */
.rooms-list ul > li + li { border-top: 1px solid var(--t-overlay-white-03); }

/* viewport width debug badge (small, unobtrusive) */
.vp-badge{display:none}

/* Force-mobile overrides: apply when detection sets .force-mobile-detected on <html>
	or when developer adds .force-mobile to <html> (via ?forceMobile=1). These rules
	strongly enforce mobile-friendly widths and prevent horizontal overflow. */
.force-mobile-detected .chat-window,
.force-mobile .chat-window,
html.force-mobile .chat-window{     box-sizing:border-box; }
.force-mobile-detected .message-input,
.force-mobile .message-input,
html.force-mobile .message-input{ left:0; transform:none; width:100%; max-width:100%; min-width:0; border-radius:0; padding-left:12px; padding-right:12px }
.force-mobile-detected .room-meta .name,
.force-mobile .room-meta .name,
.force-mobile-detected .room-meta .desc-text,
.force-mobile .room-meta .desc-text,
html.force-mobile .room-meta .desc-text{ -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; line-clamp: 2; }
.force-mobile-detected .room-avatar,
.force-mobile .room-avatar,
html.force-mobile .room-avatar{ width:34px; height:34px }
.force-mobile-detected .rooms-panel,
.force-mobile .rooms-panel,
html.force-mobile .rooms-panel{ width:100%; margin-left:0; padding-left:12px; padding-right:12px }
.force-mobile-detected .layout,
.force-mobile .layout,
html.force-mobile .layout{ }
.force-mobile-detected .message-list.rich .bubble,
.force-mobile .message-list.rich .bubble,
html.force-mobile .message-list.rich .bubble{ }
.force-mobile-detected .message-list.rich .message,
.force-mobile .message-list.rich .message,
html.force-mobile .message-list.rich .message{ }
.force-mobile-detected body, .force-mobile body, html.force-mobile body{ overflow-x:hidden }

/* very strong defensive rule: cap any element that accidentally uses large fixed widths */
.force-mobile-detected [style*="width:"] , .force-mobile [style*="width:"]{ max-width:100% }

/* Ensure chat room page uses the same compact/mobile layout as the rooms list */
.force-mobile-detected .app-header,
.force-mobile .app-header,
html.force-mobile .app-header{ position: relative }
.force-mobile-detected .topbar,
.force-mobile .topbar,
html.force-mobile .topbar{ min-height:2px; padding:0; align-items:center }
.force-mobile-detected .topbar > div:first-child,
.force-mobile .topbar > div:first-child,
html.force-mobile .topbar > div:first-child{ display:flex; flex-direction:column; align-items:flex-start; gap:6px }

.force-mobile-detected .chat-window,
.force-mobile .chat-window,
html.force-mobile .chat-window{ position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; height: calc(100vh - var(--header-height)); width: 100%; max-width:100%; overflow: hidden; margin-top:0; border-radius:0; padding-left:0; padding-right:0 }
.force-mobile-detected .layout,
.force-mobile .layout,
html.force-mobile .layout{ flex-direction: column; height: calc(100vh - var(--header-height)); overflow:auto }
.force-mobile-detected .message-list,
.force-mobile .message-list,
html.force-mobile .message-list{ padding:12px 10px; padding-bottom: calc(var(--footer-height) + var(--kb-safe, 0px) + 20px + var(--bottom-extra, 10px)) }
.force-mobile-detected .message-list.rich .bubble,
.force-mobile .message-list.rich .bubble,
html.force-mobile .message-list.rich .bubble{ max-width:100%; font-size:15px }
.force-mobile-detected .message-list.rich .message,
.force-mobile .message-list.rich .message,
html.force-mobile .message-list.rich .message{ max-width:90% }

.force-mobile-detected .avatar, .force-mobile .avatar, html.force-mobile .avatar,
.force-mobile-detected .room-avatar, .force-mobile .room-avatar, html.force-mobile .room-avatar{ width:34px; height:34px; border-radius:8px }

.force-mobile-detected .room-meta .name,
.force-mobile .room-meta .name,
.force-mobile-detected .room-meta .desc,
.force-mobile .room-meta .desc,

/* Normalize container padding so rooms list and chat room match on mobile */
.force-mobile-detected .chat-window,
.force-mobile .chat-window,
html.force-mobile .chat-window{ padding-left:12px; padding-right:12px }
.force-mobile-detected .content,
.force-mobile .content,
html.force-mobile .content{ padding-left:12px; padding-right:12px; box-sizing:border-box }
.force-mobile-detected .rooms-list,
.force-mobile .rooms-list,
html.force-mobile .rooms-list{ padding-left:12px; padding-right:12px }



/* Chat page: tighten topbar spacing (remove extra whitespace) */
.chat-page .topbar { padding: 0; min-height: 8px; gap: 6px; align-items: center; }
/* Rely on flex to size the layout instead of fixed subtraction to avoid overlap with footer */
.chat-page .chat-window .layout { height: auto; flex: 1 1 auto; }

/* Overrides moved from HTML files */

/* From room.html: Adjust topbar margin for fixed header on desktop */
@media (min-width: 821px) {
    .chat-page .topbar { margin-top: calc(var(--header-height) + 6px); }
}

/* ===== Push permission modal (migrated from inline styles) ===== */
.push-modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:99999;background:var(--t-overlay-black-45)}
.theme-dark .push-modal-overlay{background:rgba(2,6,23,0.6)}
.push-modal-box{width:92%;max-width:520px;padding:20px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.2);background:var(--panel);color:var(--text);font-family:system-ui,Arial,Helvetica,sans-serif}
.push-modal-box h3{margin:0 0 8px 0}
.push-modal-box p{margin:0 0 16px 0;line-height:1.4;color:var(--muted)}
.push-modal-btn-row{display:flex;gap:8px;margin-top:12px}
.push-modal-box .btn{padding:8px 12px;border-radius:6px}
.push-modal-box .btn-primary{background:var(--accent);color:var(--t-white);border:none}
.push-modal-box .btn-ghost{
	background:transparent;
	border:1px solid var(--t-overlay-black-06);color:var(--muted);
}
.theme-dark .push-modal-box .btn-ghost{border:1px solid #223145;color:var(--muted)}

/* Unified dialog button row: align buttons consistently (primary at right) */

/* 強制的に右端揃え */
.dialog-btn-row, .modal-panel .btn-row, .modal-footer .btn-row, .push-modal-btn-row, .modal-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
}
@media (max-width: 420px) {
	.dialog-btn-row, .push-modal-btn-row, .modal-footer .btn-row {
	
	justify-content: center;
}
}

/* Ensure primary action (e.g. 作成/決定) sits at the far right on wide screens */
/* Use a flex spacer pseudo-element so primary button is always at far right
   without relying on margin hacks (more robust against overrides). */
.dialog-btn-row { display: flex; gap: 8px; align-items: center; }
.dialog-btn-row .btn-primary { margin-left: 0; }
@media (max-width: 420px) {
	/* .dialog-btn-row, .push-modal-btn-row, .modal-footer .bt の定義はここにもあったが、上の1箇所に統合した（2026-08-12） */
}

/* In-page toast for suppressed notifications */
/* .inpage-toast removed: in-page push toasts disabled; use browser notifications instead */

/* From room.html: Compact TTL label on mobile */
@media (max-width: 820px) {
	/* Make TTL smaller on mobile to avoid visual dominance */
	#ttl { line-height: 1; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* From room.html: Room info panel colors */
.room-info-panel { color: var(--text); }
.room-info-panel .muted { color: var(--muted); }

/* Room join modal: keep long room description from expanding the modal */
.modal-room-desc{
    max-height: 160px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
}

/*
  参加中の部屋の強調。
  以前は 2px の枠 + 外側にもう 2px のリングだった。アクセントが淡い青／
  キャメルだった頃は成立していたが、テラコッタにすると赤枠が主張しすぎて
  一覧の主役が「枠」になってしまう。
  やわらかい方針に合わせて、枠は 1px のまま色だけ寄せ、面をごく薄く染める。
  「入室中」バッジが別に出るので、強調はこの程度で十分伝わる。
*/
.room-list-item.mine .room-entry {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--panel-border));
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
/* Ensure member badge visibility */
.room-list-item .room-right .member-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
}

/* ===== ヒーローセクション (トップページ価値提案) ===== */
.hero-section {
    width: 100%;
    margin: 0 0 20px 0;
    padding: 24px 16px;
    background: var(--panel);
    border-radius: 12px;
    border: 1px solid var(--panel-border);
    text-align: center;
    box-sizing: border-box;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    margin: 0;
}

.hero-description {
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}

.hero-features {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 90px;
}

.feature-icon {
    width: 36px;
    height: 36px;
    color: var(--accent);
    stroke-width: 1.5;
}

.feature-item span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

/* モバイル最適化 */
@media (max-width: 820px) {
    .hero-section {
        padding: 20px 12px;
        margin-bottom: 16px;
        border-radius: 10px;
    }
    
    .hero-title {
        font-size: 20px;
    }
    
    .hero-description {
        font-size: 14px;
    }
    
    .hero-features {
        gap: 16px;
    }
    
    .feature-icon {
        width: 32px;
        height: 32px;
    }
    
    .feature-item span {
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .hero-section {
        padding: 16px 10px;
        margin-bottom: 12px;
    }
    
    .hero-title {
        font-size: 18px;
    }
    
    .hero-description {
        font-size:  13px;
    }
    
    .hero-features {
        gap: 12px;
    }
    
    .feature-icon {
        width: 28px;
        height: 28px;
    }
}

/* ===== Header push icon: icon-only display with ON/OFF badge ===== */
.push-icon{ position: relative; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; }
.push-icon svg{ width:16px; height:16px; display:block; color: var(--icon-color); }
.push-icon::after{ content: ''; position: absolute; right: -2px; top: -2px; width:8px; height:8px; border-radius:50%; border:2px solid var(--surface); box-sizing:content-box; }
.push-icon.on::after{ background:#22c55e; border-color: var(--surface); }
.push-icon.off::after{ background:var(--t-red-500); border-color: var(--surface); }
/* 通知アイコンは常にvar(--icon-color)を使用（テーマ切替時に他アイコンと統一） */

/* PC view constraint for room.html (Chat Room) */
@media (min-width: 821px) {
    .chat-page .topbar,
    .chat-page .room-info-panel,
    .chat-page .layout,
    .chat-page .chat-footer {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ===== Date Separator (LINE-style) ===== */
.date-separator {
    list-style: none;
    padding: 16px 0;
    margin: 8px 0;
    text-align: center;
}

.date-separator-line {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.date-separator-line::before,
.date-separator-line::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--panel-border);
    opacity: 0.5;
}

.date-separator-line::before {
    margin-right: 12px;
}

.date-separator-line::after {
    margin-left: 12px;
}

.date-separator-text {
    padding: 4px 12px;
    background: var(--panel);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
    white-space: nowrap;
    border: 1px solid var(--panel-border);
}

@media (max-width: 820px) {
    .date-separator {
        padding: 12px 0;
        margin: 6px 0;
    }
    
    .date-separator-text {
        font-size: 11px;
        padding: 3px 10px;
    }
}

/* スクロール領域のflexboxバグ対策（スマホ・iOS対応） */
.layout, .content, .message-list.rich {
  min-height: 0;
  flex: 1 1 auto;
}
/* 入力欄に隠れないよう余白を増やす */
.message-list.rich {
  padding-bottom: calc(var(--footer-height, 60px) + var(--kb-safe, 0px) + 40px + var(--bottom-extra, 10px));
  scroll-padding-bottom: calc(var(--footer-height, 60px) + var(--kb-safe, 0px) + 40px + var(--bottom-extra, 10px));
}

/* Rooms Search Bar Layout */
.rooms-search-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    background: var(--surface);
    z-index: 2200;
    position: sticky;
    top: 0;
    border-bottom: 1px solid var(--border);
}

.rooms-search-group-main {
    display: flex;
    flex: 1 1 auto;
    gap: 8px;
    min-width: 0;
}

.rooms-search-group-sub {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
}

.rooms-search-input {
    flex: 1 1 auto;
    min-width: 80px;
    display: block;
    width: 100%;
}

.rooms-search-btn {
    flex: 0 0 auto;
    min-width: 48px;
    display: block;
}

.rooms-sort-select {
    display: block;
    flex: 0 0 auto;
    min-width: 92px;
    width: 10ch;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background-color: var(--bg);
    color: var(--fg);
    font-size: 10px;
    cursor: pointer;
}

/*
  2026-08-12: 一覧の行は角丸 0 + padding-top 0 に潰されていた（ 付き）。
  「やわらかコミュニティ」方針ではカードに角丸と余白が要るので撤去する。
  角丸・余白は templates/index.html の .rooms-page .room-entry 側で与える。

  上下の中央揃えではなく上揃えのままにするのは、部屋名が 2 行に折り返したときに
  右の人数バッジがぶら下がって見えるのを避けるため（ここは意図があるので残す）。
*/
body.rooms-page .room-entry {
    align-items: flex-start;
}

/* Mobile Layout: Separate Search and Sort/Filter */
@media (max-width: 600px) {
    .rooms-search-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px;
    }

    .rooms-search-group-main {
        
    }

    .rooms-search-group-sub {
        
        justify-content: flex-start;
        
    }

    .rooms-sort-select {
        flex: 0 0 auto;
        
        
        
    }
}

/* Desktop Header Buttons Visibility */
.create-room-btn, .desktop-reload-btn {
    display: none;
}

/* Mobile Header Create Button (+ icon only) */
.mobile-create-room-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	width: 36px;
	border-radius: 8px;
}

@media (min-width: 821px) {
    .create-room-btn, .desktop-reload-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        width: auto;
        padding: 0 12px;
        border-radius: 8px;
        margin-left: 8px;
    }

	.mobile-create-room-btn {
		display: none;
	}
    
    .create-room-btn svg, .desktop-reload-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* Reaction active style — emphasize reactions made by the current user */
.message-list.rich .reaction-pill.active{background:#f4d27a;box-shadow:0 4px 12px rgba(244,210,122,0.3);border:1px solid #d7b25a;color:var(--t-brand-ink)}
.theme-dark .message-list.rich .reaction-pill.active{background:#6fd3f7;box-shadow:0 4px 12px rgba(111,211,247,0.3);border:1px solid #3aaed8;color:#001115;font-weight:700}

/* Reactor avatars inside pill */
.message-list.rich .reaction-pill .reactor-stack{display:flex;align-items:center;margin-left:8px}
.message-list.rich .reactor-avatar{width:18px;height:18px;border-radius:var(--t-radius-xs);background:linear-gradient(180deg,#8b5cf6,#6d28d9);color:var(--t-white);font-size:10px;display:inline-flex;align-items:center;justify-content:center;margin-left:-6px;border:2px solid rgba(255,255,255,0.9);box-shadow:0 1px 2px var(--t-overlay-black-06);transition:transform .12s ease}
.message-list.rich .reactor-avatar:first-child{margin-left:0}
.message-list.rich .reactor-more{margin-left:6px;font-size:11px;color:var(--muted);background:transparent;padding-left:4px}
.message-list.rich .reaction-pill:hover .reactor-avatar{transform:translateY(-2px)}

/* Reactors popover */
.reactors-popover{background:var(--surface);border:1px solid var(--t-overlay-black-06);border-radius:8px;padding:5px;min-width:148px;box-shadow:0 10px 30px var(--t-overlay-black-12);z-index:9999}
.reactors-list{display:flex;flex-direction:column;gap:4px}
.reactor-row{display:flex;justify-content:space-between;align-items:center;padding:2px 4px;border-radius:6px;line-height:1.15}
.reactors-popover-header{font-size:11px;font-weight:700;padding:3px 5px;border-bottom:1px solid var(--t-overlay-black-04);margin-bottom:3px}
.reactor-avatar-mini{width:28px;height:28px;border-radius:var(--t-radius-xs);background:linear-gradient(180deg,#8b5cf6,#6d28d9);color:var(--t-white);font-size:12px;display:inline-flex;align-items:center;justify-content:center;margin-right:8px;border:2px solid rgba(255,255,255,0.9);box-shadow:0 1px 2px var(--t-overlay-black-06)}
.reactor-reaction{font-size:18px;margin-right:10px;display:inline-block}
.reaction-chip{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:6px;background:var(--t-overlay-black-04);padding:1px 4px;font-size:11px}
.reactor-name{font-size:11px;font-weight:600;color:var(--text);margin-left:4px}
.reactor-masked{font-size:10px;color:var(--muted);margin-left:4px}
.reactor-row:hover{background:rgba(0,0,0,0.03)}
.reactor-row-more{justify-content:center;color:var(--muted);font-size:10px;font-weight:600}

/* Quick reaction button: positioned beside the bubble (vertically centered) */
.message-list.rich .msg-actions{}
/* Mirror for messages sent by me (align left of bubble) */
.message-list.rich .message.me .msg-actions{}
@media (max-width:820px){
    .message-list.rich .msg-actions{}
    .message-list.rich .message.me .msg-actions{}
}
.message-list.rich .msg-actions{position:absolute;display:flex;gap:6px;align-items:center;opacity:1;pointer-events:auto;z-index:2000}
.message-list.rich .message.me .msg-actions{top:50%;bottom:auto;transform:translateY(-50%)}

/* When a bubble spans nearly the full width, stack the quick-react + below the bubble */
.message-list.rich .message.msg-actions-below .msg-actions{
    
    display:flex;
    gap:6px;
    align-items:center;
    
    opacity:1;
    pointer-events:auto;
}
/* For messages from me, keep the actions aligned to the right when stacked */
.message-list.rich .message.me.msg-actions-below .msg-actions{
    justify-content:flex-end;
    align-self:flex-end;
    margin-left:auto;
    display:flex;
    width:100%;
}
/* Ensure msg-actions inside my messages align to the right even when static/flowed */
.message-list.rich .message.me .msg-actions{
    align-self:flex-end;
    width:auto;
}
/* Push the quick-react button to the end inside my messages as a fallback */
.message-list.rich .message.me .msg-actions .btn-react{ margin-left:auto; }
/* Ensure continued (grouped) messages also align the action button centrally */
.message-list.rich .message.continued .msg-actions{left:calc(100% + 6px);right:auto;top:50%;bottom:auto;transform:translateY(-50%)}
.message-list.rich .message.me.continued .msg-actions{left:auto;right:calc(100% + 6px);top:50%;bottom:auto;transform:translateY(-50%)}
.message-list.rich .msg-actions .btn-react{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:0;font-weight:600;background:var(--surface);color:var(--text);border:1.5px solid rgba(128,128,128,0.22);font-size:16px;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,0.13);cursor:pointer;opacity:1;visibility:visible}
body.theme-dark .message-list.rich .msg-actions .btn-react{background:var(--panel);border-color:rgba(255,255,255,0.18);box-shadow:0 2px 6px rgba(0,0,0,0.3)}
@media (max-width:820px){ .message-list.rich .msg-actions .btn-react{font-size:17px} }
.message-list.rich .msg-actions .btn-react:hover{transform:scale(1.12);box-shadow:0 3px 8px rgba(0,0,0,0.18)}

/* reaction picker */
.reaction-picker{ background:var(--surface); border:1px solid var(--t-overlay-black-06); box-shadow:0 6px 18px var(--t-overlay-black-06); border-radius:10px; padding:8px; display:flex; gap:8px; z-index:9999 }
.reaction-option{ min-width:34px; min-height:34px; border-radius:8px; border:0; background:transparent; cursor:pointer; font-size:18px; display:inline-flex; align-items:center; justify-content:center }
.reaction-option:hover{ background:rgba(0,0,0,0.03) }

@media (max-width:820px){ .message-list.rich .msg-actions{left:calc(100% + 4px)} .message-list.rich .message.me .msg-actions{right:calc(100% + 4px)} .message-list.rich .msg-actions .btn-react{width:20px;height:20px} }

/* Hide reaction button by default on all viewports; show only when bubble is tapped */
.message-list.rich .message:not(.msg-tap-active) .msg-actions {
    opacity: 0;
    pointer-events: none;
}
.message-list.rich .message.msg-tap-active .msg-actions {
    opacity: 1;
    pointer-events: auto;
}

/* Message-level reactions row: ensure reactions are placed under the message bubble */
.message-list.rich .msg-reactions-row{margin-top:6px;align-self:flex-start;display:inline-flex;flex:0 0 auto}
.message-list.rich .msg-reactions-row .reactions{
	
	display:flex;gap:6px;align-items:center;
}
/* Add a small bottom gap to ensure next message has breathing room when reactions are present */
.message-list.rich .msg-reactions-row{
	margin-bottom:1px;
	 
}
.message-list.rich .message.me .msg-reactions-row{ align-self: flex-end; }
.message-list.rich .message.me .msg-reactions-row .reactions{ justify-content: flex-end; }
.message-list.rich .message.other .msg-reactions-row{ align-self: flex-start; }
.message-list.rich .message.other .msg-reactions-row .reactions{ justify-content: flex-start; }

/* 既読バッジ（ログイン必須部屋のみ。自分が送ったメッセージの下に「既読」「既読 N」を表示） */
.message-list.rich .msg-reactions-row .read-receipt-badge{
	font-size:var(--t-fs-2xs);
	color:var(--muted);
	cursor:pointer;
	white-space:nowrap;
	margin-left:6px;
	user-select:none;
}
.message-list.rich .msg-reactions-row .read-receipt-badge:hover{ color:var(--text); }

/* ===== Image upload UI ===== */
/* ⚠ ここは .chat-page 付きなので、上の .line-input の指定より強い。
   以前は入力欄を padding 6px / min-height 28px まで潰していて、
   指で押す領域として小さすぎた（上で 44px にしても、この行に負けていた）。 */
.chat-page .line-input{ --send-size: 44px; }
.chat-page .line-input .send,
.chat-page .line-input .image-send{
    width: var(--send-size);
    height: var(--send-size);
    flex: 0 0 var(--send-size);
}
.chat-page .line-input .message-textarea{
    padding: 12px 18px;
    min-height: 44px;
    line-height: 1.5;
    border-radius: var(--t-radius-pill);
}
.chat-page .message-input{
    padding-top: var(--t-space-3);
    padding-bottom: var(--t-space-3);
}
/* 画像を送るボタン。送信ボタンと並ぶので同じ円にする（片方だけ四角いと揃わない） */
.chat-page .line-input .image-send{
    border-radius: var(--t-radius-pill);
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--panel-border);
    box-shadow: var(--ring);
    transition: transform var(--t-dur-base) var(--t-ease-bounce),
                box-shadow var(--t-dur-base) var(--t-ease-soft),
                border-color var(--t-dur-fast) var(--t-ease-soft);
}
.chat-page .line-input .image-send:hover{
    transform: scale(1.06);
    border-color: var(--accent);
    box-shadow: var(--t-shadow-md), var(--ring);
}
.chat-page .line-input .image-send:active{ transform: scale(0.92) }
@media (prefers-reduced-motion: reduce){
    .chat-page .line-input .image-send,
    .chat-page .line-input .image-send:hover,
    .chat-page .line-input .image-send:active{ transform:none; transition:none }
}
.chat-page .line-input .image-send:disabled{
    opacity: 0.6;
    cursor: not-allowed;
}
.message-list.rich .image-wrap{
    margin-top: 4px;
}
.message-list.rich .message-image{
    max-width: 220px;
    max-height: 220px;
    border-radius: 10px;
    display: block;
    border: 1px solid rgba(0,0,0,0.08);
    background: var(--t-white);
}
.image-viewer-overlay{
    position: fixed;
    inset: 0;
    z-index: 13000;
    background: rgba(0,0,0,0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.image-viewer-panel{
    width: min(980px, 96vw);
    max-height: 92vh;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--t-overlay-black-10);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
}
.theme-dark .image-viewer-panel{
    border: 1px solid var(--t-overlay-white-14);
    box-shadow: 0 18px 40px rgba(0,0,0,0.36);
}
.image-viewer-header{
    padding: 10px 10px 8px;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}
.image-viewer-actions{ display:flex; gap:8px; align-items:center; }
.image-viewer-imgwrap{
    padding: 12px;
    overflow: auto;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-viewer-img{
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid var(--t-overlay-black-10);
    background: var(--t-white);
}
.theme-dark .image-viewer-img{
    border: 1px solid var(--t-overlay-white-14);
    background: var(--t-overlay-white-04);
}
.theme-dark #load-older-wrap{
    background: linear-gradient(to bottom, var(--t-navy-900), rgba(11,19,36,0));
}
.image-viewer-ad{
    padding: 10px 12px 12px;
    border-top: 1px solid var(--panel-border);
    display: flex;
    justify-content: center;
}
.image-viewer-ad ins.adsbygoogle{display:inline-block;width:320px;height:50px;max-height:50px;overflow:hidden}
.image-viewer-ad iframe{height:50px;max-height:50px}
@media (max-width: 640px){
    .image-viewer-overlay{ padding: 10px; }
    .image-viewer-panel{ width: 98vw; border-radius: 14px; }
    .image-viewer-imgwrap{ padding: 10px; }
    .image-viewer-img{ max-height: 66vh; border-radius: 12px; }
}
.message-list.rich .image-hidden{
    font-size: 12px;
    color: var(--t-slate-900);
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px dashed var(--panel-border);
    background: var(--t-overlay-white-10);
}
.theme-light .message-list.rich .image-hidden{
    border-color: rgba(181,122,58,0.28);
    background: rgba(181,122,58,0.10);
}
@media (max-width: 820px){
    .message-list.rich .message-image{ max-width: 180px; max-height: 180px; }
    /*
      ここは以前 --send-size:36px / min-height:26px と、スマホでこそ大きくすべき
      入力まわりを逆に小さくしていた（上の 44px 指定は !important で
      押さえつけて打ち消していた）。
      指で押す領域は 40px を下回らせない。
    */
    .chat-page .line-input{ --send-size: 40px; }
}

/* Force message rows to size to content so msg-actions aligns near bubbles */
.message-list.rich ul{align-items:flex-start}
.message-list.rich .message{display:inline-flex;width:auto;align-self:flex-start}
.message-list.rich .message.me{align-self:flex-end}
.message-list.rich .message.system{align-self:center}
.message-list.rich .date-separator{align-self:center}
/* Position reaction button below-right of bubble (avoids avatar overlap) */
.message-list.rich .msg-actions{
    left: auto;
    right: 2px;
    top: auto;
    bottom: -28px;
    transform: none;
}
.message-list.rich .message.me .msg-actions{
    right: auto;
    left: 2px;
}

/* Hard override: keep message-row and reactions row at content width */
.message-list.rich .message-row{
    display:inline-flex;
    width:auto;
    max-width:100%;
    align-items:flex-end;
}

/* Tapped state: flow the button naturally below the bubble (no overlap) */
.message-list.rich .message.msg-tap-active .msg-actions{
    position: static;
    left: auto; right: auto;
    top: auto; bottom: auto;
    transform: none;
    align-self: flex-end;
    margin-top: 3px;
}
.message-list.rich .message.me.msg-tap-active .msg-actions{
    align-self: flex-start;
}

.message-list.rich .message.msg-actions-below .msg-actions{
    position:absolute;
    width:auto;
    margin-top:0;
}
.message-list.rich .message.me .message-row{ margin-left:auto; }
.message-list.rich .message.other .message-row{ margin-right:auto; }
.message-list.rich .msg-reactions-row{
    margin-left:0;
    margin-right:0;
    width:auto;
    max-width:100%;
}

/* msg-actions-overlap: overlap detection fires incorrectly so min-height enforcement is removed */
.message-list.rich .message.msg-actions-overlap .bubble{
	min-height: unset;
	padding-top: var(--room-bubble-pad-y);
	padding-bottom: var(--room-bubble-pad-y);
}


/* body,html,#root の定義はここにもあったが、上の1箇所に統合した（2026-08-12） */
/* ============================================================================
   画面の地・外枠（2026-08-12 に「やわらかコミュニティ」方針で書き直し）
   ============================================================================
   以前ここは両テーマ分の見た目を**生の値で**持っていた。
   body の背景が #0a1220→#0f1b2d、ヘッダーが rgba(20,29,46) といった具合で、
   セマンティック変数を差し替えても左右のガターとヘッダーだけ紺のまま残った。

   いまは1組のルールで両テーマを賄い、色はすべてセマンティック変数から取る。
   .theme-light / .theme-dark 別の上書きは**足さないこと**（また分岐する）。
   ============================================================================ */
body{
	color: var(--text);
	/* 暖かみは色相ではなくアクセントのごく薄いラジアル1枚で出す。
	   吹き出しの色は JS が発言者ごとに決めるので、地は彩度を持たせない。 */
	background:
		radial-gradient(1200px 600px at 10% -10%, var(--glow), transparent 60%),
		var(--bg);
	background-attachment: fixed;
}
body.chat-page{
	overflow:hidden;
	--room-font-scale: 1;
	--room-bubble-text-size: 13px;
	--room-meta-text-size: 10px;
	/* 入力欄は 16px を下回らせない（iOS Safari が自動でズームし、戻らないため） */
	--room-input-text-size: 16px;
	--room-system-text-size: 13px;
	--room-bubble-line-height: 1.35;
	--room-bubble-pad-y: 5px;
	--room-bubble-pad-x: 10px;

	--msg-ul-gap: 4px;
	--msg-continued-tighten: 2px;
	--msg-newgroup-gap: 6px;
}
.app-header{
	background: var(--surface);
	border-bottom:1px solid var(--panel-border);
	backdrop-filter: blur(10px);
}
.chat-window{
	background: var(--surface);
	border:1px solid var(--panel-border);
	border-radius: var(--t-radius-xl);
	box-shadow: var(--t-shadow-lg);
}
.message-list{
	background: transparent;
	/*
	  ⚠ 見送った変更: 発言が少ない部屋で会話を下端に寄せること（2026-08-12）

	  発言が 3 件くらいだと会話が上に張り付き、画面の下 2/3 が空く。
	  会話アプリの慣習では下寄せなので試したが、
	    display:flex; flex-direction:column + .message-list > ul { margin-top:auto }
	  を入れても上寄せのままだった（ルールは配信 CSS に入っていることを確認済み）。
	  justify-content:flex-end は、内容が溢れたときに上側が切れて
	  スクロールで戻れなくなる既知の問題があるので採らなかった。

	  この画面はスクロール位置とキーボード回避（--kb-safe / scroll-padding-bottom）の
	  制御が細かい。見た目だけの利得に対して踏み込む価値が薄いと判断して撤回した。
	  再挑戦するなら、まず「なぜ auto マージンが空きを吸わないか」を
	  特定してから。触ったら a2-room-core と j-js-health を必ず回すこと。
	*/
}
.bubble{
	padding: var(--t-space-2) var(--t-space-3);
	border-radius: var(--t-radius-lg);
	box-shadow: var(--t-shadow-sm);
}
.message.other .bubble{
	background:linear-gradient(180deg, rgba(20,29,46,0.96), rgba(17,24,39,0.96));
	border:1px solid var(--t-overlay-white-06);
	border-bottom-left-radius:10px;
}
.message.me .bubble{
	background:linear-gradient(180deg, rgba(74,116,200,0.35), rgba(30,58,118,0.35));
	border:1px solid rgba(143,183,255,0.35);
	border-bottom-right-radius:10px;
}
.message.other .bubble::before{
	content:"";
	position:absolute;
	left:-10px;
	top:18px;
	width:0;
	height:0;
	border-top:8px solid transparent;
	border-bottom:8px solid transparent;
	border-right:10px solid rgba(20,29,46,0.96);
	filter:drop-shadow(0 1px 2px rgba(5,8,15,0.25));
}
.message.me .bubble::before{
	content:"";
	position:absolute;
	right:-10px;
	top:18px;
	width:0;
	height:0;
	border-top:8px solid transparent;
	border-bottom:8px solid transparent;
	border-left:10px solid rgba(74,116,200,0.45);
	filter:drop-shadow(0 1px 2px rgba(5,8,15,0.25));
}
.message.other .bubble::after{
	content:"";
	position:absolute;
	left:-9px;
	top:18px;
	width:0;
	height:0;
	border-top:8px solid transparent;
	border-bottom:8px solid transparent;
	border-right:9px solid var(--t-overlay-white-10);
	opacity:0.7;
}
.message.me .bubble::after{
	content:"";
	position:absolute;
	right:-9px;
	top:18px;
	width:0;
	height:0;
	border-top:8px solid transparent;
	border-bottom:8px solid transparent;
	border-left:9px solid rgba(255,255,255,0.16);
	opacity:0.7;
}
/* 入退室通知。白の重ね色を使っていたため、ライトテーマでは
   地に埋もれてピルの形が見えていなかった（「今日」の区切りだけ見えていた）。
   テーマ両対応のセマンティック変数に寄せる。 */
.message.system .system-text{
	background:var(--panel);
	border:1px solid var(--panel-border);
	border-radius:var(--t-radius-pill);
	font-size:12px;
	padding:var(--t-space-1) var(--t-space-3);
	color:var(--muted);
}
.message-input{
	background: var(--surface);
	border-top:1px solid var(--panel-border);
	border-radius: var(--t-radius-xl);
	box-shadow: var(--t-shadow-lg);
	backdrop-filter: blur(10px);
}
.line-input .message-textarea{
	background: var(--panel);
	border:1px solid var(--panel-border);
	border-radius: var(--t-radius-pill);
}
/* .btn の2つ目の定義はここにあった。
   .btn-primary より後ろに置かれていたため、同じ詳細度で後勝ちし、
   主ボタンの塗りを毎回打ち消していた（それを !important で押し返していた）。
   定義は上の1箇所（.btn）だけにする。**2つ目を作らないこと。** */
/* Prevent scrollbars inside hamburger menu */
/* position・z-index は fragments/header.html の @layer page 側が本体（そちらが常に勝つ）。
   ここに z-index を重ねて書かない。 */
.hamburger-menu{
	overflow-x:hidden;
}
.hamburger-menu-content{box-sizing:border-box;width:100%}
.hamburger-menu-items{width:100%}
.hamburger-menu-item{max-width:100%}

/* Soft rounded chat bubbles with curved tails and subtle depth */
.message-list.rich .bubble{
	padding: var(--t-space-3) var(--t-space-4);
	border-radius: var(--t-radius-xl);
	box-shadow: var(--t-shadow-sm);
	background: var(--panel);
}
/* 実際の吹き出し色は room.js の bubbleToneFromAvatarColor が
   インラインスタイルで当てる（発言者ごとの色相）。ここはその前の
   下地と、JS が動かなかったときの見え方を担保するだけ。 */
.message-list.rich .message.other .bubble{
	background: var(--panel);
	border:1px solid var(--panel-border);
}
.message-list.rich .message.me .bubble{
	background: var(--panel);
	border:1px solid var(--panel-border);
}
.message-list.rich .message.other .bubble::before{ content:none; }
.message-list.rich .message.other .bubble::after{ content:none; }
.message-list.rich .message.me .bubble::before{ content:none; }
.message-list.rich .message.me .bubble::after{ content:none; }

/* ============================================================================
   会話の読みやすさ（2026-08-12）
   ============================================================================
   実際の DOM はこうなっている:
     LI.message            … 縦並び
       DIV.meta            … 名前 / デバイスID / 時刻
       DIV.message-row     … 横並び
         DIV.avatar
         DIV.bubble-wrap
           DIV.bubble
   ============================================================================ */

/*
  1) 入退室通知が 2 行に割れていた

  li が flex-direction:column だったため、中央のピルの下に時刻だけが
  取り残されて左寄せで表示され、揃っていないゴミのように見えていた。
  1 行に並べて中央に置く。
*/
.message-list.rich .message.system{
	flex-direction: row;
	align-items: center;
	gap: var(--t-space-2);
}
.message.system .system-time{
	margin-top: 0;
}

/*
  2) 名前・時刻はアイコン（アバター）の真上に揃える。
  .meta は message-row の外にあるので、そのままだとアバター列の幅ぶん
  吹き出しより左から始まる。以前は吹き出し側に字下げして揃えていたが、
  アバター側に揃えたいとの要望で字下げをやめた（2026-08-13）。
*/
.message-list.rich .message.other .meta{ justify-content: flex-start; }
.message-list.rich .message.me .meta{ justify-content: flex-end; }
/* 並び順は JS 側で「名前 →(デバイスID)→ 時刻」に統一した。
   左右の寄せだけをここで付ける（row-reverse は使わない。
   読み順が視覚順とずれて、読み上げ環境で不自然になるため）。 */
.message-list.rich .meta{ flex-direction: row; }

/*
  3) 発言のかたまりが分かれて見えなかった

  ul の gap が 4px しかなく、別人の発言でも間隔が同じだった。
  新しいグループ（.new-group = 名前を出す行）の上だけ広げると、
  「誰が話しているか」の切り替わりが余白で伝わる。
*/
.message-list.rich .message.new-group{ margin-top: var(--t-space-4); }
.message-list.rich .message.system{ margin-top: var(--t-space-3); }

/*
  4) 吹き出しの形

  四隅とも同じ角丸だと吹き出しに見えない。話し手側の下角だけ small にして
  «しっぽ» の代わりにする（疑似要素のしっぽは上で content:none にしてある）。
*/
.message-list.rich .message.other .bubble{ border-bottom-left-radius: var(--t-radius-sm); }
.message-list.rich .message.me .bubble{ border-bottom-right-radius: var(--t-radius-sm); }

/* 5) アイコン/アバターは四角(角丸)で統一する方針のため、円のこの指定は打ち消す（2026-08-13） */
.message-list.rich .message .avatar{ border-radius: var(--t-radius-xs); }

/*
  6) デバイスIDの断片（例: ***c6f4）の主張を下げる

  なりすまし対策として必要な情報だが、名前と同じ大きさで毎回出ていて
  会話の可読性を下げていた。消さずに、目に入るが読み飛ばせる重さにする。
*/
.message-list.rich .meta .device-id{
	font-size: var(--t-fs-2xs);
	opacity: 0.6;
	font-weight: var(--t-fw-normal);
	background: transparent;
	border: none;
	padding: 0;
	color: var(--muted);
}

/* 発言者の色帯はテーマ非依存の1ルールに統合した（下の .message.other .bubble） */

/* ここには以前 .theme-light / .theme-dark 別の上書きが 12 ルールあった
   （body / app-header / chat-window / message-list / bubble×4 /
     message-input / textarea / btn）。中身は上のセマンティック版と
   同じことを生の値で二重に書いていただけなので削除した。
   テーマ差は :root と .theme-light の変数定義だけで付ける。

   発言者ごとの色帯（左の4pxライン）はテーマに依らず必要なので、
   テーマ別ではなく1つのルールとして下に残す。 */
.message.other .bubble{
	padding-left: var(--t-space-4);
	border-left:4px solid var(--author-color, var(--accent));
}

/* Keep hamburger menu above main content */
.app{z-index:0}
.chat-window,
.message-list{position:relative;z-index:1}
.chat-footer,
.message-input{z-index:1300}
.app-header{z-index:120000}
/* .hamburger-menu-overlay と .hamburger-menu の z-index はここではなく
   fragments/header.html の @layer page 側で持つ（.app-header より上に出す値）。
   ここに書いても @layer base は @layer page に必ず負けるため効かない。
   以前は !important で押し返していたが、!important 全廃（2026-08-12）でその力が
   なくなり、header.html 側の z-index が有効になって .app-header の下に隠れる
   回帰が起きていた（ハンバーガーメニューの閉じるボタンが押せなくなっていた）。 */


 
/* Ad layout overrides for ads */ 
.ad-slot { display: none; margin: 12px auto; text-align: center; } 
.ad-slot .ad-label { display: block; font-size: 12px; color: #7a8290; margin-bottom: 6px; }
.ad-slot .ad-body { display: inline-block; width: 100%; max-width: 220px; }
.ad-rail { display: none; }
.ad-mobile-only { display: none; } 
.ad-desktop-only { display: none; } 
@media (max-width: 820px) { 
  .ad-mobile-only { display: block; } 
  .ad-slot { display: block; } 
  .ad-rail { display: none; } 
} 
@media (min-width: 821px) { 
  .ad-desktop-only { display: block; } 
  .ad-slot { display: block; } 
	.ad-rail { display: flex; flex-direction: column; min-width: 160px; max-width: 160px; margin-right: 16px; align-self: flex-start; } 
  .ad-mobile-only { display: none; } 
} 
.rooms-header-logo{display:inline-flex;align-items:center;justify-content:flex-start;overflow:visible}
.rooms-header-logo img{width:auto;max-width:160px;height:24px;max-height:28px;object-fit:contain;transform:none;margin:0;display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (min-width: 821px) {
	.ad-rail.ad-desktop-only { display: flex; }

	.ad-slot-body-desktop {
		width: 160px;
		height: 600px;
		overflow: hidden;
	}
}

.chat-header-logo img{width:auto;max-width:140px;height:22px;max-height:26px;object-fit:contain;display:block}
@media (max-width:820px){ .rooms-header-logo img{max-width:140px;height:20px;max-height:24px;} .chat-header-logo img{max-width:120px;height:18px;max-height:22px;} }

/* Chat room: message spacing + font size controls (軽量: CSS変数 + クリックのみ) */
/* body.chat-page の定義はここにもあったが、上の1箇所に統合した（2026-08-12） */

@media (max-width:820px){
	body.chat-page{
		--room-bubble-text-size: 15px;
		--room-input-text-size: 16px;
	}
}

/* 連続メッセージ: continuedだけ間隔を詰める（gapは一定なのでmarginで調整） */
body.chat-page .message-list.rich ul{
	gap: var(--msg-ul-gap);
}
body.chat-page .message-list.rich li.message.continued{
	margin-top: calc(-1 * var(--msg-continued-tighten));
}
body.chat-page .message-list.rich li.message.new-group:not(:first-child){
	margin-top: var(--msg-newgroup-gap);
}

/* 文字サイズ: メッセージ本文・メタ・入力をスケール */
body.chat-page .message-list.rich .bubble .text{
	font-size: calc(var(--room-bubble-text-size) * var(--room-font-scale));
	line-height: var(--room-bubble-line-height);
}
body.chat-page .message-list.rich .bubble .meta .time,
body.chat-page .message-list.rich .bubble .meta{
	font-size: calc(var(--room-meta-text-size) * var(--room-font-scale));
}
/* 旧レイアウト等: meta領域もスケール（device-id含む） */
body.chat-page .meta,
body.chat-page .meta .time,
body.chat-page .meta .device-id{
	font-size: calc(var(--room-meta-text-size) * var(--room-font-scale));
}
/* meta を li 直下（message-row の上）に出すレイアウト */
.message-list.rich .message{
	flex-direction: column;
	align-items: flex-start;
}
.message-list.rich .message.me{
	align-items: flex-end;
	justify-content: flex-start;
}
.message-list.rich .message > .meta{
	display: flex;
	gap: 4px;
	align-items: center;
	margin-bottom: 3px;
	white-space: nowrap;
	overflow: hidden;
	max-width: 100%;
	padding: 0 2px;
}
/* 自分: (ID)と時間の間 / 相手: 時間と名前の間に余白 */
.message-list.rich .message.me > .meta .time{
	margin-left: 6px;
}
.message-list.rich .message:not(.me) > .meta .time{
	margin-right: 6px;
}
/* メッセージ内のnameを細字に */
body.chat-page .meta .author{
	font-weight: 400;
}
/* メッセージ内のdevice-idはバッジなしのインラインテキスト */
body.chat-page .bubble .meta .device-id,
body.chat-page .meta .device-id{
	background: transparent;
	background-color: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin-left: 0;
	font-weight: 400;
	color: inherit;
	opacity: 0.72;
}
body.chat-page .message-input .message-textarea{
	font-size: calc(var(--room-input-text-size) * var(--room-font-scale));
}
body.chat-page .message.system .system-text,
body.chat-page .message-list.rich .message.system .system-text{
	font-size: calc(var(--room-system-text-size) * var(--room-font-scale));
}

/* 文字サイズ: デバイスID表示もスケール（設定と連動） */
body.chat-page .device-info .label,
body.chat-page .device-info .device-code{
	font-size: calc(14px * var(--room-font-scale));
}
body.chat-page #device-code{
	font-size: calc(14px * var(--room-font-scale));
}

body.chat-page .message-list.rich .bubble{
	padding: var(--room-bubble-pad-y) var(--room-bubble-pad-x);
}

/* 文字サイズコントロール（ヘッダー内に表示） */
body.chat-page .app-header .header-controls .font-size-controls{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	color: var(--text);
	border: 0;
	padding: 0;
	box-shadow: none;
}
body.chat-page .font-size-controls .fs-btn{
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
}
body.chat-page .font-size-controls .fs-indicator{
	min-width: 46px;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
	user-select: none;
}

@media (max-width: 480px){
	body.chat-page .font-size-controls .fs-indicator{ min-width: 40px; font-size: 11px; }
	body.chat-page .font-size-controls .fs-btn{ width: 30px; height: 30px; font-size: 17px; }
}

/* Rooms filters: fit exactly within mobile viewport width */
/* 2026-08-26: .rooms-search-group-sub を display:grid + grid-template-columns:
   max-content ×4 の固定1行レイアウトにしていたが、max-content 列は縮まないため
   320px 幅の端末では4項目の合計幅がビューポートを超え、並び替えセレクトが
   枠外にはみ出していた（ユーザー報告で発覚）。display/grid-template-columns の
   指定を外し、上の基本ルール（display:flex; flex-wrap:wrap;）にフォールバック
   させることで、収まらない項目は次の行へ折り返すようにした。

   2026-08-26 追記: 上の対応で枠外へのはみ出しは直ったが、折り返した結果
   「入室中/online/ログイン限定」ピルと「作成順」セレクトが別の行に分かれ、
   検索欄全体が4段になっていた。ユーザーから「ONLINE・入室中・ログイン限定の
   文字を小さくしてソート順も同じ段に」との要望を受け、ピルの余白/文字サイズを
   縮めて4項目が1行（=検索欄全体で2段: 検索ボックス段 + すべて/公開/
   プライベート段の下にもう1段）に収まるようにした。 */
@media (max-width: 600px){
	.rooms-search-wrapper{
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding-left: 10px;
		padding-right: 10px;
		overflow-x: clip;
	}
	.rooms-search-group-main{
		width: 100%;
		min-width: 0;
	}
	.rooms-search-group-sub{
		width: 100%;
		min-width: 0;
		align-items: center;
		flex-wrap: nowrap;
		gap: 4px;
	}
	.rooms-search-group-sub > *{
		max-width: 100%;
		flex-shrink: 1;
	}
	.rooms-search-group-sub .rooms-active-only-pill{
		padding: 0 8px;
		height: 26px;
		font-size: 10px;
	}
	.rooms-sort-select{
		flex-shrink: 0;
		width: auto;
		min-width: 0;
		max-width: 62px;
		padding: 0 4px;
		font-size: 10px;
	}
}

/* Very narrow phones: keep controls readable without horizontal overflow */
@media (max-width: 380px){
	.rooms-search-group-sub{
		gap: 3px;
	}
	.rooms-search-group-sub .rooms-active-only-pill{
		padding: 0 6px;
		font-size: 9px;
	}
	.rooms-sort-select{
		max-width: 54px;
		font-size: 9px;
	}
}

/* Avatar color modal preview: hard override to avoid style loss by later generic rules */
.avatar-color-modal-overlay .avatar-color-modal-panel{
	width:min(440px,92vw);
	padding:16px 16px 14px;
}
.avatar-color-modal-overlay .avatar-color-modal-swatches{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:10px;
}
.avatar-color-modal-overlay .avatar-color-swatch{
	width:22px;
	height:22px;
	border-radius:999px;
	border:2px solid rgba(255,255,255,0.68);
	box-shadow:0 1px 4px rgba(0,0,0,0.24);
	cursor:pointer;
	padding:0;
	outline:none;
}
.avatar-color-modal-overlay .avatar-color-swatch.is-active{
	transform:scale(1.1);
	box-shadow:0 0 0 2px var(--panel),0 0 0 4px rgba(59,130,246,0.55);
}
.avatar-color-modal-overlay .avatar-color-modal-preview-label{
	margin-top:12px;
	font-size:12px;
	font-weight:700;
	color:var(--muted);
}
.avatar-color-modal-overlay .avatar-color-preview-row{
	margin-top:6px;
	display:flex;
	align-items:flex-end;
	justify-content:flex-end;
	gap:8px;
}
.avatar-color-modal-overlay .avatar-color-preview-avatar{
	width:30px;
	height:30px;
	font-size:12px;
	flex:0 0 auto;
	order:2;
	margin-left:6px;
	margin-right:0;
}
.avatar-color-modal-overlay .avatar-color-preview-bubble-wrap{
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	order:1;
}
.avatar-color-modal-overlay .avatar-color-preview-bubble{
	max-width:min(86vw,360px);
	padding:8px 12px;
	border-radius:14px;
	font-size:13px;
	line-height:1.4;
}
.avatar-color-modal-overlay .avatar-color-preview-text{
	white-space:pre-wrap;
}
.avatar-color-modal-overlay .avatar-color-preview-meta{
	display:flex;
	gap:6px;
	align-items:center;
	margin-bottom:2px;
}
.avatar-color-modal-overlay .avatar-color-preview-meta .author{
	font-weight:700;
}
.avatar-color-modal-overlay .avatar-color-preview-meta .time{
	font-size:11px;
	color:var(--muted);
}
.avatar-color-modal-overlay .avatar-color-modal-actions{
	margin-top:14px;
	display:flex;
	justify-content:flex-end;
	gap:8px;
	flex-wrap:wrap;
}

/* Final guard: always keep message body text dark (prevents late dark-theme overrides from turning it white) */
body.chat-page .message-list.rich .message .bubble .text,
body.chat-page .message-list.rich .message .bubble .text .mention,
body.chat-page .message-list.rich .message .bubble .text .mention.me{
	color:var(--t-slate-900);
}

/* Prevent horizontal overflow from long URLs and usernames */
.message-row{ min-width:0 }
.message-list.rich .bubble-wrap{ min-width:0 }
.message-list.rich .bubble .text a{ overflow-wrap:anywhere }
.message-list.rich .bubble .meta{ overflow:hidden; max-width:100% }
.message-list.rich .bubble .meta .author{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis }
.message-list.rich .bubble .meta .time{ flex-shrink:0 }
.message-list.rich .bubble .meta .device-id{ flex-shrink:0 }

/* ===== 公開プロフィールへの導線 =====
   ログイン済みの発言者だけ、アバターと名前が /u/{id} への <a> になる。
   見た目は従来の div/span と同じままにする（リンク化で行が動くと差分検査が落ちるため）。 */
.avatar-profile-link,
.author-profile-link{ text-decoration:none; color:inherit; cursor:pointer }
.avatar-profile-link:hover{ filter:brightness(1.08) }
.author-profile-link:hover{ text-decoration:underline }
.avatar-profile-link:focus-visible,
.author-profile-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ===== Google アカウントバー ===== */
.account-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f0f7ff;border-bottom:1px solid #bfdbfe;font-size:13px;flex-wrap:wrap}
.account-bar--hidden{display:none}
.account-bar__badge{font-size:16px;line-height:1}
.account-bar__name{font-weight:600;color:#1e3a5f}
.account-bar__verified{font-size:11px;background:var(--t-blue-600);color:var(--t-white);border-radius:999px;padding:1px 8px}
.account-bar__logout-form{margin:0;padding:0;display:inline}
.account-bar__logout{background:none;border:1px solid #93c5fd;color:#1d4ed8;border-radius:6px;padding:2px 10px;font-size:12px;cursor:pointer}
.account-bar__logout:hover{background:#dbeafe}
.account-bar__login{display:inline-flex;align-items:center;gap:6px;background:var(--t-white);border:1px solid var(--t-gray-300);border-radius:8px;padding:5px 14px;font-size:13px;font-weight:500;color:var(--t-gray-700);text-decoration:none;box-shadow:0 1px 2px var(--t-overlay-black-06)}
.account-bar__login:hover{background:#f9fafb;border-color:var(--t-gray-400)}
.account-bar__login svg{flex-shrink:0}
.account-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:#1e3a5f;color:var(--t-white);border-radius:10px;padding:10px 20px;font-size:14px;opacity:0;transition:opacity .3s,transform .3s;z-index:9999;pointer-events:none}
.account-toast--show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== アカウントヘッダーボタン (ルーム一覧ヘッダー) ===== */
.account-header-btn{display:none;position:relative;text-decoration:none;color:inherit}
body.rooms-page .account-header-btn{display:inline-flex}
.account-header-btn--loggedin svg{color:var(--t-blue-500)}
.account-header-btn--loggedin::after{content:'';position:absolute;top:5px;right:5px;width:7px;height:7px;background:#22c55e;border-radius:50%}
.theme-dark .account-header-btn--loggedin svg{color:var(--t-blue-400)}
.account-header-btn--has-avatar{padding:0}
/* アバター画像そのものがログイン中であることを示すので、緑丸は不要（画像に重なって見づらくもある） */
.account-header-btn--has-avatar::after{display:none}
.account-header-avatar{width:36px;height:36px;object-fit:cover;display:block;border-radius:8px}

/* ===== アカウントページ ===== */
.account-page{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:28px 16px 60px;background:var(--bg,#f3f4f6)}
/* 共通ヘッダー付き時: fixed ヘッダー分だけ上パディングを確保 */
body.account-page-body .account-page{padding-top:calc(var(--header-height) + 24px)}
body.account-page-body #account-header-btn{display:none}
.account-page__card{width:100%;max-width:420px;background:var(--panel,var(--t-white));border-radius:16px;padding:20px 20px 24px;box-shadow:0 2px 12px rgba(0,0,0,.09)}
/* トップバー */
.account-page__top-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px}
.account-page__back-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--surface);border:1px solid var(--panel-border);border-radius:8px;font-size:14px;font-weight:600;color:var(--text);text-decoration:none;transition:background .15s}
.account-page__back-btn:hover{background:var(--panel-border)}
/* 旧 back リンク（互換用） */
.account-page__back{display:none}
/* ログイン済み */
.account-page__logged-in{display:flex;flex-direction:column;gap:0}
/* 現在のプロフィール */
.account-page__current-profile{display:flex;align-items:center;gap:12px;padding:14px 0 14px;border-bottom:1px solid rgba(0,0,0,0.07)}
.account-page__avatar-wrap{flex-shrink:0;width:48px;height:48px;border-radius:8px;overflow:hidden;background:var(--t-gray-200);display:flex;align-items:center;justify-content:center;color:var(--t-gray-400)}
.account-page__avatar-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:8px}
.account-page__avatar-default{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.account-page__profile-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.account-page__profile-name{font-size:15px;font-weight:700;margin:0;color:var(--text,var(--t-gray-900));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-page__profile-email{font-size:11px;color:var(--t-gray-400);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-page__verified-badge{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;background:#1d9bf0;border-radius:4px;flex-shrink:0;box-shadow:0 1px 2px rgba(29,155,240,.35)}
.account-page__verified-badge svg{display:block}

/* 編集フォーム */
.account-page__form{display:flex;flex-direction:column;gap:0}
.account-page__form-section{padding:14px 0;border-bottom:1px solid var(--t-overlay-black-06)}
.account-page__form-section:last-child{border-bottom:none}
.account-page__form-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--t-gray-700);margin:0 0 8px}
.account-page__form-step{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--t-blue-500);color:var(--t-white);font-size:11px;font-weight:700;flex-shrink:0}
.account-page__input{padding:9px 12px;border:1px solid var(--t-gray-300);border-radius:8px;font-size:15px;background:var(--t-white);color:var(--t-gray-900);outline:none;box-sizing:border-box;width:100%;font-family:inherit}
.account-page__input:focus{border-color:var(--t-blue-500);box-shadow:0 0 0 2px rgba(59,130,246,0.15)}
/* クロップ */
.account-page__crop-area{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:10px}
.account-page__crop-canvas{cursor:grab;touch-action:none;display:block;background:var(--t-slate-900);border-radius:10px;max-width:100%}
.account-page__crop-canvas:active{cursor:grabbing}
.account-page__crop-guide{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--t-gray-400)}
.account-page__crop-guide-icon{font-size:14px}
.account-page__outline-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--t-gray-300);color:var(--t-gray-700);border-radius:8px;padding:7px 16px;font-size:13px;cursor:pointer;font-weight:500;font-family:inherit}
.account-page__outline-btn:hover{background:#f9fafb;border-color:var(--t-gray-400)}
/* 保存 */
.account-page__save-status{font-size:13px;padding:8px 12px;border-radius:8px;margin-bottom:8px}
.account-page__save-status.success{background:#dcfce7;color:#166534}
.account-page__save-status.error{background:#fee2e2;color:#991b1b}
/* ヘッダー直下に出す即時フィードバック用トースト（ログイン直後など）。
   #save-status は保存欄のすぐ下＝画面下の方にあり気づきにくいので分けている。 */
.account-page__login-toast{
	position:fixed;top:calc(var(--header-height) + var(--t-space-2));left:50%;transform:translateX(-50%);
	z-index:5000;font-size:13px;font-weight:var(--t-fw-semibold);padding:var(--t-space-2) var(--t-space-4);
	border-radius:var(--t-radius-pill);box-shadow:var(--t-shadow-md);
	background:#dcfce7;color:#166534;
}
.account-page__primary-btn{background:var(--t-blue-500);border:none;color:var(--t-white);border-radius:8px;padding:11px;font-size:15px;cursor:pointer;font-weight:600;width:100%;font-family:inherit}
.account-page__primary-btn:hover{background:var(--t-blue-600)}
.account-page__primary-btn:disabled{opacity:.6;cursor:not-allowed}
/* ログアウト */
.account-page__logout-section{padding-top:14px;border-top:1px solid rgba(0,0,0,0.07)}
.account-page__logout-btn{background:var(--surface);border:1px solid var(--panel-border);color:var(--muted);border-radius:8px;padding:8px 20px;font-size:13px;cursor:pointer;font-weight:500;font-family:inherit;box-shadow:0 1px 2px var(--t-overlay-black-06)}
.account-page__logout-btn:hover{background:var(--panel-border);border-color:var(--accent);color:var(--text)}
/* 未ログイン */
.account-page__guest{display:flex;flex-direction:column;align-items:center;gap:14px;padding:8px 0;text-align:center}
.account-page__guest-icon{width:64px;height:64px;border-radius:12px;background:var(--t-gray-200);display:flex;align-items:center;justify-content:center;color:var(--t-gray-400)}
.account-page__guest-title{font-size:18px;font-weight:700;margin:0;color:var(--text,var(--t-gray-900))}
.account-page__guest-desc{font-size:13px;color:var(--t-gray-500);line-height:1.7;margin:0}
.account-page__google-btn{display:inline-flex;align-items:center;gap:10px;background:var(--t-white);border:1px solid var(--t-gray-300);border-radius:8px;padding:10px 22px;font-size:14px;font-weight:500;color:var(--t-gray-700);text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.account-page__google-btn:hover{background:#f9fafb;border-color:var(--t-gray-400)}
.account-page__guest-merits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;text-align:left;width:100%;max-width:340px}
.account-page__guest-merits li{font-size:12px;color:var(--t-gray-500);line-height:1.6;padding-left:22px;position:relative}
.account-page__guest-merits li::before{content:"✓";position:absolute;left:0;top:0;color:#1d9bf0;font-weight:700}
.account-page__guest-merits strong{display:block;font-size:13px;color:var(--text,var(--t-gray-900));font-weight:600;margin-bottom:2px}
/* マイルーム */
.account-page__myrooms{padding-top:18px;margin-top:4px;border-top:1px solid var(--t-overlay-black-06)}
.account-page__myrooms-title{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700;margin:0 0 4px;color:var(--text,var(--t-gray-900))}
.account-page__myrooms-note{font-size:12px;color:var(--t-gray-500);margin:0 0 14px;line-height:1.6}
.account-page__myrooms-cta{display:flex;justify-content:center;padding:6px 0 2px}
.account-page__room-group{margin-bottom:18px}
.account-page__room-group:last-child{margin-bottom:0}
.account-page__room-group-title{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--t-gray-700);margin:0 0 8px}
.account-page__room-count{background:var(--t-gray-200);color:#4b5563;border-radius:999px;font-size:11px;font-weight:600;padding:1px 8px}
.account-page__room-empty{font-size:12px;color:var(--t-gray-400);margin:0;padding:8px 0;line-height:1.6}
.account-page__room-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.account-page__room-link{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid rgba(0,0,0,0.07);border-radius:9px;text-decoration:none;background:rgba(0,0,0,0.015)}
.account-page__room-link:hover{background:var(--t-overlay-black-04);border-color:rgba(0,0,0,0.14)}
/* 2026-08-22: 他画面のルームカード（絵文字アイコン・説明文）に寄せて、名前だけの
   地味な一覧から少し情報量を増やした。取得済みだがテンプレートで使っていなかった
   description をここで初めて表示する（バックエンドの変更は不要だった）。 */
.account-page__room-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.account-page__room-name{font-size:14px;font-weight:700;color:var(--text,var(--t-gray-900));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-page__room-desc{font-size:12px;color:var(--t-gray-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-page__room-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--t-gray-500)}
.account-page__room-tag{background:#eef2ff;color:#4f46e5;border-radius:4px;padding:1px 6px}
.account-page__room-present{background:#10b981;color:var(--t-white);border-radius:999px;padding:1px 8px;font-weight:600}
.account-page__textarea{resize:vertical;min-height:64px;line-height:1.6;font-family:inherit}
.account-page__form-hint{font-size:12px;color:var(--t-gray-500);margin:6px 0 0}
.account-page__form-hint a{color:var(--t-blue-600);text-decoration:none}
.account-page__form-hint a:hover{text-decoration:underline}
.theme-dark .account-page__form-hint{color:var(--t-slate-400)}
.theme-dark .account-page__form-hint a{color:var(--t-blue-400)}
/* 公開プロフィール */
.profile__head{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:6px 0 18px;border-bottom:1px solid var(--t-overlay-black-06)}
.profile__avatar{width:88px;height:88px;border-radius:var(--t-radius-xs);overflow:hidden}
.profile__avatar img{width:100%;height:100%;object-fit:cover}
.profile__name{display:flex;align-items:center;justify-content:center;gap:6px;font-size:19px;font-weight:700;margin:4px 0 0;color:var(--text,var(--t-gray-900))}
.profile__edit-icon{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;padding:3px 9px;border-radius:var(--t-radius-pill,999px);border:1px solid var(--accent);background:var(--panel);color:var(--accent-text);font-size:11px;font-weight:600;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.profile__edit-icon:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent-hover)}
.profile__bio{font-size:var(--t-fs-sm);color:#4b5563;line-height:1.7;margin:0;width:100%;box-sizing:border-box;white-space:pre-wrap;word-break:break-word;text-align:left}
.profile__joined{font-size:12px;color:var(--t-gray-400);margin:0}
.profile__counts{display:flex;gap:18px;margin-top:2px}
.profile__count{font-size:13px;color:var(--t-gray-500);text-decoration:none}
.profile__count:hover{text-decoration:underline}
.profile__count strong{color:var(--text,var(--t-gray-900));font-weight:700}
.profile__actions{margin-top:6px;display:flex;flex-direction:column;align-items:center;gap:6px}
.profile__followed-badge{display:inline-flex;align-items:center;padding:var(--t-space-1) var(--t-space-2);border-radius:var(--t-radius-pill);border:1px solid var(--panel-border);background:var(--panel);color:var(--muted);font-size:var(--t-fs-2xs);font-weight:var(--t-fw-semibold)}
.profile__follow-login-group{display:flex;flex-direction:column;gap:8px;align-items:center}
/* .is-hidden{display:none} は単一クラスなので、上の .profile__follow-login-group より
   詳細度は同じでも後勝ちで負ける。#modal-optional-fields と同じ ID 併記で勝たせる。 */
#follow-login-group.is-hidden{display:none}
.profile__follow-btn{min-width:150px;text-align:center;text-decoration:none;display:inline-flex;justify-content:center}
.profile__follow-btn.is-following{background:none;border:1px solid var(--t-gray-300);color:var(--t-gray-700)}
.profile__follow-btn.is-following:hover{border-color:var(--t-red-500);color:var(--t-red-500)}
.profile__people{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.profile__person{display:flex;align-items:center;gap:11px;padding:10px 8px;border-radius:9px;text-decoration:none}
.profile__person:hover{background:var(--t-overlay-black-04)}
.profile__person-avatar{width:38px;height:38px;border-radius:var(--t-radius-xs);overflow:hidden;background:var(--t-gray-200);color:var(--t-gray-400);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.profile__person-avatar img{width:100%;height:100%;object-fit:cover}
.profile__person-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.profile__person-name{font-size:13px;font-weight:600;color:var(--text,var(--t-gray-900))}
.profile__person-bio{font-size:12px;color:var(--t-gray-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ダークテーマ */
.theme-dark .profile__head{border-bottom-color:var(--t-overlay-white-06)}
.theme-dark .profile__name{color:var(--t-slate-200)}
.theme-dark .profile__bio{color:var(--t-slate-300)}
.theme-dark .profile__count{color:var(--t-slate-400)}
.theme-dark .profile__count strong{color:var(--t-slate-200)}
.theme-dark .profile__follow-btn.is-following{border-color:rgba(255,255,255,0.16);color:var(--t-slate-300)}
.theme-dark .profile__person:hover{background:var(--t-overlay-white-06)}
.theme-dark .profile__person-avatar{background:var(--t-slate-800);color:var(--t-slate-600)}
.theme-dark .profile__person-name{color:var(--t-slate-200)}
.theme-dark .profile__person-bio{color:var(--t-slate-400)}
.theme-dark .account-page__guest-merits li{color:var(--t-slate-400)}
.theme-dark .account-page__guest-merits strong{color:var(--t-slate-200)}
.theme-dark .account-page__myrooms{border-top-color:var(--t-overlay-white-06)}

/* タイムライン投稿。すべてセマンティック変数で書いているので .theme-dark の個別上書きは不要。 */
.profile-posts{padding-top:18px;margin-top:4px;border-top:1px solid var(--t-overlay-black-06)}
.theme-dark .profile-posts{border-top-color:var(--t-overlay-white-06)}
.profile-posts__title{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700;margin:0 0 4px;color:var(--text)}
.profile-posts__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.profile-posts__head .profile-posts__title{margin:0}
.profile-posts__new-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:var(--t-radius-pill);border:1px solid var(--accent);background:var(--panel);color:var(--accent-text);font-size:var(--t-fs-2xs);font-weight:600;text-decoration:none;flex-shrink:0;transition:background .15s,color .15s}
.profile-posts__new-btn:hover{background:var(--accent);color:var(--on-accent)}

.post-summary-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.post-summary-item{border-bottom:1px solid var(--panel-border)}
.post-summary-item:last-child{border-bottom:none}
.post-summary-link{display:flex;gap:12px;padding:12px 4px;text-decoration:none;align-items:flex-start}
.post-summary-link:hover{background:var(--surface)}
.post-summary-thumb{width:56px;height:56px;border-radius:var(--t-radius-xs);overflow:hidden;background:var(--panel);flex-shrink:0}
.post-summary-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post-summary-text{flex:1;min-width:0}
.post-summary-body{margin:0;font-size:13.5px;color:var(--text);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-summary-meta{display:flex;align-items:center;gap:10px;margin-top:5px;font-size:11px;color:var(--muted)}
.post-summary-meta-item{display:inline-flex;align-items:center;gap:3px}
/* プロフィールのプレビュー一覧では、いいね件数の表示（クリック不可）が自分のいいね済みかどうかも示す。
   svg { color: var(--icon-color) } が svg 自身に直接色を指定しているため、こちらも svg を直接狙う必要がある。 */
.post-summary-meta-item.is-liked{color:var(--t-pink-500)}
.post-summary-meta-item.is-liked svg{color:var(--t-pink-500)}
.post-visibility-badge{padding:1px 7px;border-radius:var(--t-radius-pill);background:var(--surface);border:1px solid var(--panel-border);font-weight:600}
.post-visibility-badge--private{color:var(--accent-text);border-color:var(--accent)}

.post-card__author{display:flex;align-items:center;gap:8px;padding:var(--t-space-3) var(--t-space-3) 0;text-decoration:none}
.post-card__author-avatar{width:30px;height:30px;border-radius:50%;overflow:hidden;background:var(--panel);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;font-weight:700;flex-shrink:0}
.post-card__author-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.post-card__author-name{font-size:13px;font-weight:400;color:var(--text)}

.post-composer{margin:14px 0 4px;padding:var(--t-space-3);border:1px solid var(--panel-border);border-radius:var(--t-radius-sm);background:var(--surface);display:flex;flex-direction:column;gap:var(--t-space-2);box-sizing:border-box}
.post-composer__textarea{width:100%;min-height:140px;resize:vertical;border:none;background:transparent;color:var(--text);font-size:var(--t-fs-sm);font-family:inherit;outline:none;box-sizing:border-box}
.post-composer__textarea::placeholder{color:var(--muted)}
.post-composer__preview{display:flex;gap:8px;flex-wrap:wrap}
.post-composer__preview-item{position:relative;width:60px;height:60px;border-radius:var(--t-radius-xs);overflow:hidden;background:var(--panel);flex-shrink:0}
.post-composer__preview-item img{width:100%;height:100%;object-fit:cover;display:block}
.post-composer__preview-remove{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:var(--t-overlay-black-12,rgba(0,0,0,.55));color:var(--t-white);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;line-height:1;padding:0}
.post-composer__toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.post-composer__image-btn{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-fs-2xs);color:var(--muted);cursor:pointer;padding:5px 9px;border-radius:var(--t-radius-pill);border:1px solid var(--panel-border)}
.post-composer__image-btn:hover{color:var(--text);border-color:var(--accent)}
.post-composer__visibility{font-size:var(--t-fs-2xs);color:var(--muted);background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--t-radius-pill);padding:5px 9px;font-family:inherit}
.post-composer__count{margin-left:auto;font-size:var(--t-fs-2xs);color:var(--muted)}
.post-composer__submit-btn{width:auto;padding:8px 18px;font-size:var(--t-fs-sm)}

.post-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.post-card{border:1px solid var(--panel-border);border-radius:var(--t-radius-sm);background:var(--surface);overflow:hidden}

.post-card__carousel{position:relative;background:var(--panel);aspect-ratio:1/1}
.post-card__carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:100%;-webkit-overflow-scrolling:touch}
.post-card__carousel-track::-webkit-scrollbar{display:none}
.post-card__carousel-slide{flex:0 0 100%;scroll-snap-align:start;height:100%}
.post-card__carousel-slide img{width:100%;height:100%;object-fit:cover;display:block}
.post-card__carousel-slide a{display:block;width:100%;height:100%}
/* 2026-08-31: stroke="currentColor" が環境によって黒く出るという報告があり、
   CSSの color 継承に頼らず、SVG側で stroke="#ffffff" を直接指定する形にした。 */
.post-card__carousel-nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.78);border:1px solid rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.5);transition:background .15s,opacity .15s}
.post-card__carousel-nav:hover{background:rgba(0,0,0,.9)}
.post-card__carousel-nav:disabled{opacity:0;pointer-events:none}
.post-card__carousel-nav--prev{left:8px}
.post-card__carousel-nav--next{right:8px}
.post-card__dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:8px;z-index:2;padding:5px 8px;border-radius:var(--t-radius-pill);background:var(--t-overlay-black-12,rgba(0,0,0,.28))}
.post-card__dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.7);border:none;padding:0;cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.35);transition:background .15s,width .15s,height .15s}
.post-card__dot.is-active{background:var(--t-white);width:9px;height:9px}

.post-card__body{margin:0;padding:var(--t-space-3);font-size:var(--t-fs-sm);color:var(--text);line-height:1.7;white-space:pre-wrap;word-break:break-word}
.post-card__meta{display:flex;align-items:center;gap:14px;padding:0 var(--t-space-3) var(--t-space-3)}
.post-card__like-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:none;padding:0;cursor:pointer;color:var(--muted);font-size:var(--t-fs-2xs);font-family:inherit}
.post-card__like-btn:hover{color:var(--text)}
.post-card__comment-summary{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:var(--t-fs-2xs)}
.post-card__like-btn.is-liked{color:var(--t-pink-500)}
/* svg { color: var(--icon-color) }（サイト全体のデフォルト）が svg 要素自身に直接色を
   指定しているため、親ボタンの color だけではハートのアイコン色は変わらない（継承より
   直接指定が勝つ）。svg 自体を狙って上書きする必要がある。 */
.post-card__like-btn.is-liked svg{color:var(--t-pink-500)}
@keyframes post-like-pop{0%{transform:scale(1)}35%{transform:scale(1.35)}60%{transform:scale(.9)}100%{transform:scale(1)}}
.post-card__like-btn.is-liking svg,
.post-card__comment-like-btn.is-liking svg{display:inline-block;transform-origin:center;animation:post-like-pop .4s ease}
.post-card__visibility{color:var(--muted);display:inline-flex}
.post-card__time{margin-left:auto;font-size:11px;color:var(--muted)}
.post-card__delete-btn{display:inline-flex;align-items:center;background:none;border:none;padding:0;cursor:pointer;color:var(--muted)}
.post-card__delete-btn:hover{color:var(--t-red-500)}
.post-card__report-btn{background:none;border:none;padding:0;cursor:pointer;font-size:var(--t-fs-2xs);color:var(--muted);font-family:inherit;text-decoration:underline}
.post-card__report-btn:hover{color:var(--text)}

.post-card__comments{border-top:1px solid var(--panel-border);padding:var(--t-space-2) var(--t-space-3);display:flex;flex-direction:column;gap:8px}
.post-card__comments-title{display:flex;align-items:center;gap:5px;margin:0;font-size:12.5px;font-weight:700;color:var(--text)}
.post-card__comment-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.post-card__comment-item{display:flex;gap:8px;align-items:flex-start}
.post-card__comment-avatar{width:26px;height:26px;border-radius:50%;overflow:hidden;background:var(--panel);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;font-weight:700}
.post-card__comment-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.post-card__comment-body{flex:1;min-width:0;font-size:12.5px;color:var(--text);line-height:1.6;word-break:break-word}
.post-card__comment-head{display:flex;align-items:baseline;gap:6px;margin-bottom:5px}
.post-card__comment-body strong{font-weight:400}
.post-card__comment-time{font-size:10.5px;color:var(--muted);white-space:nowrap}
.post-card__comment-text{white-space:pre-wrap}
.post-card__comment-delete{display:inline-flex;align-items:center;background:none;border:none;padding:0;cursor:pointer;color:var(--muted);flex-shrink:0}
.post-card__comment-delete:hover{color:var(--t-red-500)}
.post-card__comment-like-btn{display:inline-flex;align-items:center;gap:3px;background:none;border:none;padding:0;cursor:pointer;color:var(--muted);font-size:10.5px;font-family:inherit;flex-shrink:0}
.post-card__comment-like-btn:hover{color:var(--text)}
.post-card__comment-like-btn.is-liked{color:var(--t-pink-500)}
.post-card__comment-like-btn.is-liked svg{color:var(--t-pink-500)}
.post-card__comment-more{align-self:flex-start;background:none;border:none;padding:0;cursor:pointer;color:var(--accent-text);font-weight:600;font-size:12px;font-family:inherit}
.post-card__comment-more:hover{color:var(--accent-hover)}
.post-card__comment-form{display:flex;gap:8px;align-items:flex-end}
.post-card__comment-input{flex:1;min-width:0;padding:7px 10px;border:1px solid var(--panel-border);border-radius:var(--t-radius-sm);background:var(--panel);color:var(--text);font-size:12.5px;font-family:inherit;outline:none;box-sizing:border-box;resize:vertical;min-height:32px;max-height:140px;line-height:1.5}
.post-card__comment-submit{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--accent);border:none;padding:0;cursor:pointer;color:var(--on-accent)}
.post-card__comment-submit:hover{background:var(--accent-hover)}
.post-card__comment-submit:disabled{opacity:.5;cursor:not-allowed}
.theme-dark .account-page__myrooms-title{color:var(--t-slate-200)}
.theme-dark .account-page__room-group-title{color:var(--t-slate-300)}
.theme-dark .account-page__room-count{background:var(--t-overlay-white-10);color:var(--t-slate-300)}
.theme-dark .account-page__room-link{background:var(--t-overlay-white-03);border-color:var(--t-overlay-white-08)}
.theme-dark .account-page__room-link:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.16)}
.theme-dark .account-page__room-name{color:var(--t-slate-200)}
.theme-dark .account-page__room-desc{color:var(--t-slate-400)}
.theme-dark .account-page__room-meta{color:var(--t-slate-400)}
.theme-dark .account-page__room-tag{background:rgba(99,102,241,0.2);color:#a5b4fc}
.theme-dark .account-page{background:var(--bg,var(--t-slate-900))}
.theme-dark .account-page__card{background:var(--panel,var(--t-slate-800));box-shadow:0 2px 16px rgba(0,0,0,.5)}
.theme-dark .account-page__back{color:var(--t-slate-500)}
.theme-dark .account-page__back:hover{color:var(--t-slate-400)}
.theme-dark .account-page__current-profile{border-bottom-color:var(--t-overlay-white-06)}
.theme-dark .account-page__avatar-wrap{background:var(--t-slate-800);color:var(--t-slate-600);border:1px solid var(--t-overlay-white-08)}
.theme-dark .account-page__profile-name{color:var(--t-slate-200)}
.theme-dark .account-page__profile-email{color:var(--t-slate-500)}
.theme-dark .account-page__form-section{border-bottom-color:rgba(255,255,255,0.05)}
.theme-dark .account-page__form-label{color:var(--t-slate-300)}
.theme-dark .account-page__input{background:var(--t-overlay-white-06);border-color:var(--t-overlay-white-12);color:var(--t-slate-200)}
.theme-dark .account-page__input:focus{border-color:var(--t-blue-400)}
.theme-dark .account-page__crop-guide{color:var(--t-slate-600)}
.theme-dark .account-page__outline-btn{border-color:var(--t-overlay-white-12);color:var(--t-slate-300)}
.theme-dark .account-page__outline-btn:hover{background:rgba(255,255,255,0.05)}
.theme-dark .account-page__save-status.success{background:rgba(22,163,74,.18);color:#86efac}
.theme-dark .account-page__save-status.error{background:rgba(239,68,68,.18);color:#fca5a5}
.theme-dark .account-page__login-toast{background:rgba(22,163,74,.18);color:#86efac}
.theme-dark .account-page__logout-section{border-top-color:var(--t-overlay-white-06)}
.theme-dark .account-page__guest-icon{background:var(--t-slate-800);color:var(--t-slate-600)}
.theme-dark .account-page__guest-title{color:var(--t-slate-200)}
.theme-dark .account-page__guest-desc{color:var(--t-slate-500)}
.theme-dark .account-page__google-btn{background:var(--t-overlay-white-06);border-color:var(--t-overlay-white-12);color:var(--t-slate-200);box-shadow:none}
.theme-dark .account-page__google-btn:hover{background:var(--t-overlay-white-10)}
/* チャットルームのアバター画像 — 角丸四角形に合わせる */
/* align-self:stretch でフレックスコンテナの align-items:center を上書きし、縦方向を親に合わせる */
.avatar img{align-self:stretch;width:100%;object-fit:cover;border-radius:8px;display:block}

/* ===== 認証バッジ (🔵 メッセージ内) ===== */
.verified-badge{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;background:#1d9bf0;border-radius:4px;margin-left:4px;flex-shrink:0;vertical-align:middle;box-shadow:0 1px 2px rgba(29,155,240,.35)}
.verified-badge svg{display:block}

}
/* @layer base ここまで */