/* チャット型スレッド（/mobile/index.html・2026-10-19 Iinuma「昔のエルの画面が出てくる。一般的なチャットスレッドに変えて」）
   html.chatmode＝本番でチャットとして開いた時だけ（?from=home・?ask=・下部タブ）。file:// デモと通話（📞◍＝body.vcall/fcall）はこれまでの舞台のまま。
   構造: .cthread（全面）＝ .cthead（細い見出し行: 👤 相手・◍ 姿・話題名・＋ 新しい話題・🕘）＋ .ctlist（スクロール）＝ .ctrows（履歴の吹き出し）＋ .talk（いまの返事＝最後尾）。
   色は index.html のトークン（--bg/--surface-rgb/--ink/--dim/--line/--gold-rgb/--lamp）だけ＝ダーク／ライト両対応。PC（980px〜）は幅 760 中央 */
.cthread,.ctlist{display:contents}   /* 舞台モード（デモ・通話）: 包みは素通し＝.talk は従来どおり .stage に絶対配置 */
.cthead,.ctempty,.ctrows,#ctTail{display:none}
html.chatmode .being,html.chatmode .mist,html.chatmode .dimmer,html.chatmode .lamps,html.chatmode .veil,html.chatmode .heartglow,html.chatmode .vcorb,html.chatmode .vclabel{display:none!important}
html.chatmode.callface .being,html.chatmode.callface .veil,html.chatmode.callface .mist{display:flex!important}   /* ◍ 通話中だけ舞台（Simli の映像） */
html.chatmode.callface .veil,html.chatmode.callface .mist{display:block!important}
html.chatmode body.fcall .cthread,html.chatmode body.vcall .cthread{display:none!important}
html.chatmode .stage{max-width:none;width:100%;background:var(--bg)}
@media (min-width:980px){html.chatmode .stage{max-width:760px}}
html.chatmode .cthread{display:flex;flex-direction:column;position:absolute;inset:0;padding-top:var(--ct-top,calc(env(safe-area-inset-top) + 118px))}
/* ---- このページ独自のクローム連動（Iinuma 2026-10-18「メイン画面をスマホの狭い画面いっぱいに」）: 共通ヘッダーの window スクロール連動は使わず、リスト自身のスクロールで決める（index.html ctChrome）。
   古い方へ（指を下へ）＝共通ヘッダー 2 段（body.sp-hide）を隠し細い話題行だけ・上の余白はその瞬間に安全域だけに／新しい方へ・最下端＝下部タブ（body.sp-hide-tab）を隠し入力バーは下へ寄せて残す／最上端・話題行のタップ＝全部戻す。PC（980px〜）は連動しない */
html.chatmode body.sp-hide .cthread{padding-top:env(safe-area-inset-top)}
html.chatmode body.sp-hide-ib .ibar{transform:none!important}   /* 入力バーは常に残す */
html.chatmode .ibar{flex-direction:column;align-items:stretch;gap:6px;transition:bottom .28s cubic-bezier(.16,1,.3,1)}
@media (max-width:979px){html.chatmode body.sp-hide-tab .ibar{bottom:calc(env(safe-area-inset-bottom) + 8px)}}
/* 🪄 補助チップは入力バーの塊の中（欄の上・同じ固定枠＝バーの高さに含まれ、吹き出しに被らない）。出すのは「欄が空でフォーカス中」か「まだ発話が無い」時だけ */
html.chatmode #ibar #stChips{position:static;top:auto;order:-1;display:none;margin:0;padding:0 2px}
html.chatmode #ibar.chips #stChips{display:flex}
html.chatmode #ibar #attChip{position:static;top:auto;order:-2;max-width:none}
html.chatmode .grip2{display:none!important}
html.chatmode .cthead{flex:none;display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--line);background:rgba(var(--surface-rgb),.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);min-height:42px;font-family:var(--sans)}
html.chatmode .ctlist{display:block;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:10px 12px var(--ct-bot,230px);scrollbar-width:thin}
html.chatmode .ctrows{display:flex;flex-direction:column;gap:6px}
html.chatmode .ctempty{display:none;text-align:center;font-family:var(--sans);font-size:13px;line-height:1.8;color:var(--dim);padding:48px 16px 24px}
html.chatmode .ctempty.on{display:block}
/* 行（吹き出し）: クローン＝左（小さなアバター＝元画像）・あなた＝右（金）。タップで時刻 */
.ctr{display:flex;align-items:flex-end;gap:8px;max-width:100%;font-family:var(--sans)}
.ctr.me{flex-direction:row-reverse}
.ct-ava{width:28px;height:28px;border-radius:50%;flex:none;margin-bottom:2px;background:var(--ct-ava,radial-gradient(circle at 34% 30%,var(--lamp) 0%,var(--lamp) 45%,#8A6A3A 100%)) 50% 30%/cover no-repeat;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.ct-bb{max-width:min(84%,620px);font-size:15px;line-height:1.7;padding:9px 13px;border-radius:18px;word-break:break-word;overflow-wrap:anywhere;white-space:pre-wrap;position:relative;min-width:0}
.ctr.el .ct-bb{background:rgba(var(--surface-rgb),.94);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:5px}
.ctr.me .ct-bb{background:linear-gradient(135deg,rgba(var(--gold-rgb),.96),rgba(var(--gold-rgb),.86));border:1px solid #FFD48A;color:#241503;border-bottom-right-radius:5px}
.ctr>time{display:none;font-size:10.5px;color:var(--dim);flex:none;margin-bottom:8px;white-space:nowrap}
.ctr.ts>time{display:block}
.ctr.sys{justify-content:center;flex-wrap:wrap;gap:6px;text-align:center;font-size:11.5px;color:var(--dim);padding:6px 8px;line-height:1.6}
.ctr.sys>time{margin:0}
.ctd{display:flex;align-items:center;gap:10px;margin:12px 0 4px;font-family:var(--sans);font-size:11px;color:var(--dim);letter-spacing:.04em}
.ctd::before,.ctd::after{content:"";flex:1;height:1px;background:var(--line)}
.ct-img{display:block;max-width:220px;max-height:260px;border-radius:12px;margin:-2px 0 6px;border:1px solid rgba(0,0,0,.08)}
.ct-vid{display:inline-block;font-size:12px;opacity:.75;margin-bottom:4px}
.ct-via{font-size:10.5px;color:var(--dim);margin-left:6px;white-space:nowrap}
.ct-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;justify-content:flex-start}
.ctr.me .ct-chips{justify-content:flex-end}
.ct-src{display:inline-flex;align-items:center;gap:4px;font:600 12px/1 var(--sans);color:var(--lamp);background:transparent;border:1px solid rgba(var(--lamp-rgb),.45);border-radius:9999px;padding:5px 10px;cursor:pointer;margin-top:6px}
/* 届きつつある返事（…）: #ctTail.typing で三つの点 */
.ct-dots{display:none;gap:4px;align-items:center;height:1.7em}
.ct-dots i{width:6px;height:6px;border-radius:50%;background:var(--dim);opacity:.5;animation:ctdot 1.2s infinite ease-in-out}
.ct-dots i:nth-child(2){animation-delay:.2s}.ct-dots i:nth-child(3){animation-delay:.4s}
@keyframes ctdot{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-4px);opacity:1}}
@media (prefers-reduced-motion:reduce){.ct-dots i{animation:none;opacity:.7}}
html.chatmode #ctTail{display:none}
html.chatmode #ctTail.on{display:flex}
html.chatmode #ctTail.typing .ct-dots{display:flex}
html.chatmode #ctTail.typing #line{display:none!important}
/* いまの返事（.talk）＝最後尾。旧舞台の絶対配置・台詞の体裁をやめる */
html.chatmode .talk{position:static!important;padding:0!important;display:flex;flex-direction:column;gap:6px;margin-top:6px;bottom:auto!important}
html.chatmode .talk.chips-on{padding-bottom:0!important}
html.chatmode #line{font-family:var(--sans)!important;font-size:15px!important;line-height:1.7!important;min-height:0!important;text-shadow:none!important;color:inherit;display:block;white-space:pre-wrap}
html.chatmode #line .caret{height:1em;background:var(--lamp)}
html.chatmode #lineWho,html.chatmode #topicLbl,html.chatmode #topicFull,html.chatmode .tsep,html.chatmode .asmode:empty{display:none!important}
html.chatmode #srcs{margin-top:6px}
html.chatmode #srcs:empty{display:none}
html.chatmode #mineWrap{text-align:right}
html.chatmode #mineWrap .mine{display:none!important}   /* あなたの発言は履歴の行（logTurn）が担う＝二重に出さない */
html.chatmode #mineWrap:not(:empty)::before{display:none}
html.chatmode .mine-img{margin-top:0}
html.chatmode .replies{margin-top:2px}
html.chatmode .name{text-align:center;margin:4px 0 0!important;font-size:11px;letter-spacing:.2em}
html.chatmode .rphint{margin:6px 0 0!important}
/* 見出し行（.cthead）: 👤 相手（CLONE_CHECK_SSOT §1 の相手切替＝開示範囲）・◍ 姿・話題名・＋ 新しい話題・🕘 */
html.chatmode .asbar{margin:0!important;flex:none;gap:4px;min-width:0}
html.chatmode .asbar .asbtn{padding:4px 9px!important;font-size:12px!important;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
html.chatmode .asbar #faceBtn span{display:none}
html.chatmode .asmode{display:none}
html.chatmode .topicline{flex:1;min-width:0;margin:0;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);overflow:hidden}
html.chatmode .topicline b{flex:1;min-width:0;font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink);border:0;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.chatmode .topicline button{flex:none;font-size:11.5px;padding:5px 10px;border-color:rgba(var(--lamp-rgb),.5);background:rgba(var(--lamp-rgb),.12);color:var(--lamp)}
html.chatmode .topicline #histBtn{padding:5px 8px;font-size:14px}
@media (max-width:400px){html.chatmode .asbar .asbtn{max-width:110px}html.chatmode .topicline #topicBtn{font-size:11px;padding:5px 7px}}
/* 入力バーの上の添付チップ（📎 の預かり: 送信時にあなたの吹き出しへ） */
#attChip{position:absolute;left:12px;right:12px;top:-46px;display:flex;align-items:center;gap:8px;max-width:360px;z-index:41;font-family:var(--sans);font-size:12px;color:var(--ink);background:rgba(var(--surface-rgb),.94);border:1px solid rgba(var(--lamp-rgb),.45);border-radius:12px;padding:5px 6px 5px 5px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#attChip[hidden]{display:none}
#attChip img{width:30px;height:30px;border-radius:8px;object-fit:cover;flex:none;display:none}
#attChip img[src]{display:block}
#attChip .at-ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(var(--ink-rgb),.08);flex:none}
#attChip .at-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#attChip .at-nm small{display:block;font-size:10.5px;color:var(--dim)}
#attChip button{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--dim);cursor:pointer;flex:none;font-size:12px;line-height:1}
#ibar.att #stChips{display:none!important}

html.chatmode #faceBtn{display:none!important}   /* 2026-10-19 Iinuma: チャットに「クローンの姿」の選択は不要（姿はフェイスコール／サーフェイスの話） */

/* 2026-10-19 Iinuma: チャットからホームへ戻る（話題行の左端・幅を取らない） */
html.chatmode .cthead .ct-home{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1;color:inherit;text-decoration:none;margin-right:2px}
html.chatmode .cthead .ct-home:active{background:var(--track)}